/* 艾乡堂智能电商管理系统 · 样式（无构建，直接引用，no-store 保证改了立刻生效） */
:root {
  --ink: #1b1b1f; --muted: #6b6b76; --line: #e3e3e8; --bg: #f7f7f9;
  --brand: #7a3b2e; --ok: #1f7a4d; --warn: #a06400; --bad: #b3261e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
a { color: var(--brand); }
.top {
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 12px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; font-size: 18px; color: var(--brand); }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a {
  padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 15px;
}
.top nav a:hover { background: #f0eae8; }
.top nav a.on { background: var(--brand); color: #fff; }
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.card h2 { margin: 0 0 14px; font-size: 17px; display: flex; align-items: baseline; gap: 10px; }
.card h2 .hint { font-size: 13px; color: var(--muted); font-weight: 400; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
/* 表头吸顶：往下翻的时候列名还在，不然填着填着就串列了
   top 值 = 顶部导航高度，视线不会打架 */
table thead th {
  position: sticky;
  top: 56px;
  z-index: 6;
  background: #fafafa;
  box-shadow: inset 0 -1px 0 var(--line), 0 2px 4px rgba(0,0,0,.04);
}
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: #fafafa; font-weight: 600; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: #fcfaf9; }
.empty { color: var(--muted); font-size: 14px; margin: 6px 0; }

.notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 15px; }
.notice.ok { background: #e8f5ee; color: var(--ok); }
.notice.bad { background: #fdecea; color: var(--bad); }

.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; min-width: 140px;
}
.stat b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13.5px; }
.stat.warn b { color: var(--warn); }
.stat.bad b { color: var(--bad); }
.stat.ok b { color: var(--ok); }

form.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0 4px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field > span { font-size: 13px; color: var(--muted); }
.field em { font-size: 12px; color: var(--muted); font-style: normal; }
input, select, button, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid #cfcfd6; border-radius: 8px; background: #fff;
}
input, select { min-width: 130px; }
button {
  background: var(--brand); color: #fff; border: none; cursor: pointer; padding: 9px 18px; font-weight: 600;
}
button:hover { background: #632f24; }
button.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); font-weight: 400; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.err { background: #fdecea; padding: 14px; border-radius: 8px; overflow: auto; font-size: 13px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 12.5px; }
.badge.ok { background: #e8f5ee; color: var(--ok); }
.badge.warn { background: #fdf3e2; color: var(--warn); }
.badge.bad { background: #fdecea; color: var(--bad); }
.muted { color: var(--muted); font-size: 13.5px; }
.path { font-family: ui-monospace, monospace; font-size: 13px; background: #f4f4f6; padding: 1px 6px; border-radius: 5px; }
pre.prev { background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow: auto; font-size: 13px; max-height: 420px; }

/* 右上角：当前登录人 + 退出 */
.top .who { margin-left: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.top .who a { text-decoration: none; }


/* ==================== 手机端（竖屏优先） ====================
   员工主要是拿手机操作，所以这里不是"顺手适配"，是按主力形态做。
   思路：宽表格 → 卡片流；导航 → 可横向滑动的一行；按钮 → 手指点得中。 */
@media (max-width: 820px) {
  body { font-size: 15.5px; }
  main { padding: 12px; }

  /* 顶部：品牌一行，导航一行可横滑 */
  .top { padding: 10px 12px; gap: 10px; position: sticky; top: 0; }
  .brand { font-size: 16px; }
  .top nav {
    order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { flex: 0 0 auto; padding: 8px 13px; font-size: 14.5px; }
  .top .who { font-size: 12.5px; }

  /* 卡片 */
  .card { padding: 14px; border-radius: 10px; margin-bottom: 12px; }
  .card h2 { font-size: 16px; flex-wrap: wrap; }

  /* 统计卡：两列 */
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { min-width: 0; padding: 11px 14px; }
  .stat b { font-size: 21px; }
  .stat span { font-size: 12.5px; }

  /* ★ 宽表格 → 卡片流：每行变一张卡，表头用 data-label 顶在每格前面 */
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }                     /* 手机不显示表头行 */
  tbody tr {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px;
  }
  tbody tr:hover { background: #fff; }
  tbody td {
    border: none; padding: 5px 0; display: flex; gap: 10px;
    align-items: baseline; text-align: left !important; min-height: 26px;
  }
  tbody td::before {
    content: attr(data-label);
    flex: 0 0 88px; color: var(--muted); font-size: 13px; font-weight: 500;
  }
  tbody td.num { justify-content: flex-start; }
  tbody td:empty { display: none; }
  /* 手机上没有 data-label 的格（操作区）撑满 */
  tbody td:not([data-label])::before { content: none; }

  /* 表头吸顶在手机上没意义（表头已隐藏） */
  table thead th { position: static; }

  /* 表单：一列排，输入框全宽，按钮够大 */
  form.inline { flex-direction: column; align-items: stretch; gap: 12px; }
  form.inline .field { width: 100%; }
  form.inline input, form.inline select, form.inline button, .two input, .two select {
    width: 100% !important; min-width: 0 !important;
    padding: 11px 12px; font-size: 16px;   /* 16px 以上 iOS 聚焦时不会自动放大 */
  }
  form.inline button { padding: 13px; font-size: 16px; }
  .two { grid-template-columns: 1fr; gap: 12px; }

  /* 卡片里的行内表单（比如成本输入那排）让它换行 */
  .card form.inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }

  /* Tabs / 分段按钮 */
  .card a[href^="?"] { padding: 8px 12px !important; font-size: 14px; }

  /* 表格里的输入框别太窄 */
  tbody input, tbody select, tbody button { max-width: 100%; }
  tbody td form { width: 100%; flex-wrap: wrap; }
}

/* 手机横屏 / 平板：两列统计，表格还是卡片 */
@media (min-width: 560px) and (max-width: 820px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}


/* ==================== 功能方块（磁贴） ====================
   老板/员工不该在文字菜单里找功能。方块一眼看到，手指点得中。 */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 8px;
}
.tile {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 15px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  position: relative; transition: .12s;
}
.tile:hover { border-color: var(--brand); box-shadow: 0 3px 12px rgba(0,0,0,.07); transform: translateY(-1px); }
.tile-ico { font-size: 24px; line-height: 1.1; }
.tile-t { font-weight: 600; font-size: 15.5px; }
.tile-d { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tile-b {
  position: absolute; top: 11px; right: 11px;
  background: var(--brand); color: #fff; font-size: 11.5px;
  padding: 1px 7px; border-radius: 9px; font-style: normal;
}
.tile.tone-warn { border-color: #e6c169; background: #fffdf5; }
.tile.tone-warn .tile-b { background: #c9971f; }

/* 数据方块 */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 4px; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 2px;
}
.kpi b { font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi i { font-size: 12px; color: var(--muted); font-style: normal; }
.kpi.tone-ok b { color: #17845a; }
.kpi.tone-warn b { color: #c9971f; }
.kpi.tone-bad b { color: #c0392b; }

/* 手机：方块两列，字号还大一点 */
@media (max-width: 820px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 15px 13px; }
  .tile-ico { font-size: 27px; }
  .tile-t { font-size: 15px; }
  .tile-d { font-size: 12px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi b { font-size: 22px; }
}
@media (max-width: 360px) { .tiles { grid-template-columns: 1fr; } }

/* 只读账号的顶部提示条 —— 显眼但不刺眼 */
.notice.rd{background:#eef4ff;border-left:4px solid #2b6cb0;color:#1a365d;padding:10px 14px;margin-bottom:12px;border-radius:4px}

/* 待办角标：导航上那个数字 */
.badge-n{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;background:#c0392b;color:#fff;font-size:11px;font-style:normal;line-height:16px;vertical-align:1px}

/* ============================================================================
   设计规范 v2（2026-09-16）—— 卡片为主 + 左侧工具栏 + 手机优先
   为什么这么定：
     · 视觉跟官网「蕲艾都」统一：艾草深绿 / 陈艾金 / 米白纸感 —— 两套系统看着是一家
     · 侧栏按**业务**分组（日常/单据/商品库存/客户/经营分析/数据/系统），
       27 个页面平铺一排是"眼花缭乱"的根源
     · 手机端侧栏收成抽屉，宽表格横向滑动 —— 员工主要在手机上看单
   ⚠️ 这里只**追加**，上面老规则全部保留 —— 27 个页面用的类名一个都不能少
   ========================================================================== */
:root {
  --brand: #35563d;        /* 艾草深绿（官网按钮色） */
  --brand-2: #4a6b4b;
  --brand-ink: #1d3226;    /* 侧栏底色 */
  --brand-soft: #eef3ec;
  --gold: #bd956c;         /* 陈艾金（官网印章边） */
  --seal: #b3261e;         /* 印章红 */
  --ink: #202820;
  --muted: #6f776c;
  --line: #e5e6dc;
  --bg: #f6f6f1;
  --card: #fff;
  --r: 14px;
  --r-sm: 10px;
  --sh: 0 1px 2px rgba(24,36,24,.04), 0 6px 18px rgba(24,36,24,.05);
  --nav-w: 224px;
}
body {
  background: var(--bg); color: var(--ink);
  font: 15.5px/1.65 -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  padding-left: var(--nav-w);
}

/* ---------- 左侧工具栏（抖店那种）---------- */
.side {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w); z-index: 40;
  background: var(--brand-ink); color: #e8efe7; display: flex; flex-direction: column;
  overflow-y: auto; scrollbar-width: thin;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
.side-brand .logo {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  background: var(--seal); color: #fff; border-radius: 9px; font-weight: 700; font-size: 17px;
}
.side-brand b { display: block; font-size: 15.5px; letter-spacing: .02em; }
.side-brand small { display: block; font-size: 11.5px; color: #9db3a2; margin-top: -2px; }
.sidenav { padding: 4px 10px 10px; }
.ng { margin-bottom: 12px; }
.ng-t { margin: 10px 8px 5px; font-size: 11.5px; letter-spacing: .16em; color: #7d9683; }
.sidenav a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 1px 0;
  border-radius: var(--r-sm); color: #dbe6da; text-decoration: none; font-size: 14.5px;
}
.sidenav a:hover { background: #274029; color: #fff; }
.sidenav a.on { background: var(--brand-2); color: #fff; font-weight: 600; }
.sidenav .nb {
  margin-left: auto; background: var(--seal); color: #fff; font-style: normal;
  font-size: 11px; padding: 1px 6px; border-radius: 20px;
}
.side-foot {
  margin-top: auto; padding: 12px 16px 16px; font-size: 12.5px; color: #93a897;
  border-top: 1px solid #2b4230;
}
.side-foot a { color: #cfe0cf; margin-left: 8px; }

/* ---------- 顶栏 ---------- */
.bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; background: rgba(246,246,241,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .01em; }
.bar-right { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.burger {
  display: none; border: 1px solid var(--line); background: #fff; border-radius: 9px;
  width: 38px; height: 38px; font-size: 17px; cursor: pointer;
}
.scrim { display: none; position: fixed; inset: 0; background: rgba(20,30,20,.4); z-index: 35; }
main { padding: 18px 22px 40px; max-width: 1500px; margin: 0 auto; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sh);
}
.card h2 { font-size: 16.5px; font-weight: 650; }

/* ---------- 按钮/表单 ---------- */
button, .btn {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: var(--r-sm); padding: 9px 16px; font-size: 14.5px; cursor: pointer;
  transition: background .15s, transform .15s;
}
button:hover, .btn:hover { background: var(--brand-2); }
button.ghost, .btn.ghost, .ghost {
  background: #fff; color: var(--brand); border-color: #cfd8cd;
}
button.ghost:hover, .ghost:hover { background: var(--brand-soft); }
input, select, textarea {
  background: #fff; border: 1px solid #d9dbd1; border-radius: var(--r-sm);
  padding: 9px 11px; font: inherit; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9cbb9; border-color: var(--brand-2); }
.field { margin: 0 10px 10px 0; }
.field label, .field > span { color: var(--muted); font-size: 13px; }
.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; }

/* ---------- 表格（手机横向滑动）---------- */
table { font-size: 14.5px; }
table thead th { background: #f3f4ef; color: #55615a; font-weight: 600; top: 56px; }
table td, table th { padding: 9px 10px; }
table tbody tr:hover { background: #fafbf7; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--muted); }

/* ---------- 徽标 / 提示 ---------- */
.badge { border-radius: 20px; padding: 2px 9px; font-size: 12.5px; }
.badge.ok { background: #e8f3ec; color: #1f7a4d; }
.badge.warn { background: #fdf3e2; color: #a06400; }
.badge.bad { background: #fdecea; color: #b3261e; }
.notice { border-radius: var(--r-sm); border: 1px solid #dbe4d8; background: var(--brand-soft); padding: 12px 14px; margin-bottom: 14px; }
.notice.err { background: #fdecea; border-color: #f3cfca; }
.notice.rd { background: #fff7e6; border-color: #f0dcae; }

/* ---------- 磁贴 / KPI ---------- */
.tiles { gap: 12px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 16px;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(24,36,24,.10); }
.tile-ico { background: var(--brand-soft); color: var(--brand); border-radius: 10px; }
.kpi, .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); }
.kpi b { color: var(--brand); }

/* ---------- 手机 ---------- */
@media (max-width: 900px) {
  body { padding-left: 0; }
  .side { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.nav-open .side { transform: none; }
  body.nav-open .scrim { display: block; }
  .burger { display: inline-grid; place-items: center; }
  .bar { padding: 10px 14px; }
  .bar h1 { font-size: 17px; }
  main { padding: 12px 12px 32px; }
  .card { padding: 14px 14px; border-radius: 12px; }
  /* 宽表格：整块横向滑动，不挤成一团（员工在手机上看单） */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table thead th { position: static; }
  button, .btn { padding: 10px 16px; }
  .inline { gap: 8px; }
  .inline .field { flex: 1 1 46%; margin-right: 0; }
  .inline input, .inline select { width: 100%; }
}

/* 数字卡片可点：整块是链接，右下角给一个"去哪儿"的提示 */
a.kpi { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(24,36,24,.10); }
a.kpi em { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--brand); }

/* 折叠块（新建表单之类）：默认收起，手机上一屏能看清待办 */
details.fold {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--sh);
}
details.fold > summary {
  cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; font-size: 15.5px;
}
details.fold > summary::-webkit-details-marker { display: none; }

/* 行内小按钮：手机上也要点得中（原来只是文字链，手指不好点） */
a.btn-sm {
  display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  border-radius: var(--r-sm); padding: 8px 14px; font-size: 13.5px;
}
a.btn-sm:hover { background: var(--brand-2); }

/* ============================================================================
   手机：表格 → 卡片流（.rc）
   为什么：库存/对账/客户这些表在手机上只能左右滑，"看一行要滑三次"。
   做法：表头隐藏，每一行变成一个卡片，每格用 data-label::before 显示字段名
        （data-label 是 table() 里早就写好的，这里终于用上了）
   ========================================================================== */
@media (max-width: 900px) {
  table.rc { display: block; white-space: normal; overflow: visible; }
  table.rc thead { display: none; }
  table.rc tbody { display: block; }
  table.rc tr {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--sh); padding: 10px 12px; margin-bottom: 10px;
  }
  table.rc tr:hover { background: #fff; }
  table.rc td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    border: 0; padding: 5px 0; white-space: normal; text-align: left;
  }
  table.rc td::before {
    content: attr(data-label);
    color: var(--muted); font-size: 13px; flex: 0 0 auto; padding-top: 1px;
  }
  /* 第一格当"卡片标题"：不要标签、加粗、下面加条线 */
  table.rc td:first-child { font-size: 15.5px; font-weight: 650; border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 4px; }
  table.rc td:first-child::before { content: none; }
  table.rc td.num { text-align: right; }
  /* 操作列（按钮/链接）单独一行、靠左，手指好点 */
  table.rc td:last-child { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  table.rc td:last-child::before { content: none; }
  /* 空单元格不占地方 */
  table.rc td:empty { display: none; }
}

/* ============================================================================
   表单系统 v3（2026-09-16）—— 参考金蝶云的观感
   老陈原话："表单，字体，显示，看着很不舒服，特别是表单格式"
   问题在哪：① 标签和输入框挤在一起 ② 输入框高度不一、圆角小 ③ 手机上几个字段并排挤成一团
            ④ 没有必填标记 ⑤ 没有焦点反馈（点进去看不出来）
   ========================================================================== */
input, select, textarea {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid #dcdfd6; border-radius: 10px; background: #fff;
  font-size: 15.5px; line-height: 1.45; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { min-height: 96px; resize: vertical; padding: 12px 13px; }
input::placeholder, textarea::placeholder { color: #a8afa4; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(53,86,61,.12);
}
input:disabled, select:disabled { background: #f4f5f1; color: #8a9186; }
/* 下拉箭头：自绘一个，比系统默认的统一 */
select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236f776c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* 字段：标签在上、控件在下，整行留白（金蝶那样） */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 15px; width: 100%; min-width: 0; }
.field > span { font-size: 13.5px; font-weight: 600; color: #55615a; letter-spacing: .01em; }
.field > span .req { color: var(--seal); font-style: normal; margin-left: 3px; }
.field em { font-size: 12.5px; color: var(--muted); font-style: normal; }
/* 一行放几个字段：桌面并排、手机自动一列一行 */
.inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; }
.inline > .field { flex: 1 1 200px; }
/* 表格里的行内录入框保持紧凑（不然一行占半屏） */
table input, table select, table textarea {
  min-height: 38px; padding: 7px 9px; font-size: 14.5px; border-radius: 8px; width: auto; min-width: 90px;
}
/* 按钮统一高度与观感 */
button, .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; font-weight: 550; }
button:active, .btn:active { transform: translateY(1px); }
@media (max-width: 900px) {
  /* 手机上：所有字段一整行，不再并排挤着 */
  .inline { display: block; }
  .inline > .field { width: 100%; margin-bottom: 13px; }
  input, select, textarea { font-size: 16px; }   /* 16px 以上 iOS 才不会自动放大页面 */
  button, .btn { width: auto; }
}

/* ============================================================================
   手机底部标签栏（参考金蝶/ERP 类 App 的观感）
   桌面隐藏 —— 桌面有左侧栏，不需要底部再来一条
   ========================================================================== */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));   /* 兼容 iPhone 底部横条 */
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: #8b938a; font-size: 11.5px; padding: 4px 0;
  }
  .tabbar a i { font-style: normal; font-size: 19px; line-height: 1.1; }
  .tabbar a.on { color: var(--brand); font-weight: 650; }
  /* 给底部栏让出空间，别把内容挡了 */
  main { padding-bottom: 84px; }
}

/* SVG 图标：宫格里的图标去掉原来 emoji 的底色块，直接显示图标本体 */
.tile-ico { background: none !important; padding: 0; width: auto; height: auto; }
.tile-ico .ico { display: block; border-radius: 11px; }
/* 侧栏图标 */
.sidenav a .ico { flex: 0 0 18px; opacity: .92; }
.sidenav a.on .ico { opacity: 1; }
.sidenav a span { flex: 1; }

/* 侧栏是深绿底 → 图标用单色线框（彩色块在深色底上太花，参考图也是这么处理的） */
.sidenav a .ico-mono { color: #b9ccbb; }
.sidenav a:hover .ico-mono { color: #fff; }
.sidenav a.on .ico-mono { color: #fff; }

/* 真 logo（蕲艾都）—— 方章用在深色侧栏，横版组合用在浅色顶栏/登录页 */
.side-brand .brand-mark { width: 34px; height: 36px; object-fit: contain; }
.bar-right { display: flex; align-items: center; gap: 14px; }
.bar-right .brand-top { height: 36px; width: auto; opacity: .96; }
@media (max-width: 900px) { .bar-right .brand-top { display: none; } }   /* 手机上顶栏太窄，只留侧栏那个 */

/* ERP visual system v4 · 2026-09-16. No runtime dependencies. */
:root{--brand:#2563eb;--brand-2:#1d4ed8;--brand-soft:#eff5ff;--brand-ink:#172b4d;--ink:#25324b;--muted:#7a869a;--line:#e5eaf2;--bg:#f4f6fa;--card:#fff;--r:8px;--r-sm:5px;--sh:none;--nav-w:216px}
body{font-size:14px;line-height:1.6;letter-spacing:0;background:var(--bg)}
a{text-underline-offset:3px}a:focus-visible,button:focus-visible{outline:3px solid #93b4ff;outline-offset:2px}
.side{background:#fff;color:var(--ink);border-right:1px solid var(--line);scrollbar-color:#d9e0eb transparent}
.side-brand{padding:22px 20px 20px;border-bottom:1px solid var(--line);margin-bottom:10px;gap:12px}
.side-brand b{font-size:19px;letter-spacing:2px;color:#1b2e4e}.side-brand small{color:#8994a7;font-size:10px;letter-spacing:1px;margin-top:2px}
.sidenav{padding:0 12px 12px}.ng{margin-bottom:12px}.ng-t{font-size:11px;color:#9aa5b6;letter-spacing:1px;margin:12px 12px 6px}
.sidenav a{padding:7px 12px;font-size:13px;gap:11px;color:#58667e;border-radius:5px;min-height:34px}
.sidenav a:hover{background:#f4f7fc;color:var(--brand)}.sidenav a.on{background:#ebf2ff;color:var(--brand);box-shadow:inset 3px 0 var(--brand)}
.sidenav a .ico-mono,.sidenav a:hover .ico-mono,.sidenav a.on .ico-mono{color:inherit}
.side-foot{color:#78859b;border-color:var(--line);font-size:11px;background:#fff}.side-foot a{color:var(--brand)}
.bar{height:62px;padding:0 28px;background:#fff;backdrop-filter:none;gap:12px}.bar h1{font-size:14px;font-weight:600}.bar-home{font-size:13px;color:#8793a7;text-decoration:none}.bar-divider{color:#ccd3df}.bar-right{gap:18px;font-size:12px}.who{color:#526078}.edition{border-left:1px solid var(--line);padding-left:18px;color:#8793a7;font-size:12px}
main{padding:24px 28px 40px;max-width:1680px;min-width:0}.card{border-radius:8px;padding:20px;margin-bottom:18px;box-shadow:none;min-width:0}.card h2{font-size:15px;font-weight:600;margin-bottom:18px;color:#263650;flex-wrap:wrap}.card h2 .hint{font-size:12px;color:#8b96a8}
button,.btn,a.btn-sm{min-height:36px;padding:7px 16px;border-radius:5px;font-size:13px;font-weight:500;line-height:20px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}button:hover,.btn:hover,a.btn-sm:hover{background:var(--brand-2)}button.ghost,.btn.ghost,.ghost{border-color:#dbe2ed;color:#526078;background:#fff}
input,select,textarea{min-height:38px;font-size:14px;border-color:#dce3ee;border-radius:5px;padding:8px 11px;line-height:1.5}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #2563eb14;border-color:#7aa2fa}.field>span{font-weight:500;font-size:12px;color:#58667e}.field{gap:6px;margin-bottom:16px}.field em{font-size:11px}.inline{gap:0 18px}input[type=checkbox],input[type=radio]{width:16px;min-width:16px;min-height:16px;height:16px;accent-color:var(--brand)}
table{font-size:13px}table th,table td{padding:12px 14px;border-bottom:1px solid #edf0f5}table thead th{background:#f6f8fc;color:#65738a;font-size:12px;top:62px;box-shadow:inset 0 -1px #e5eaf2}table tbody tr:hover{background:#f6f9ff}table input,table select{min-height:32px;font-size:13px;border-radius:4px}.badge{font-size:11px;border-radius:4px;padding:2px 8px}.notice{font-size:13px;border-radius:6px}.empty{padding:24px;text-align:center;background:#f8fafc;border:1px dashed #dfe6f0;border-radius:6px}
.tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.tile{border:1px solid #edf0f6;border-radius:6px;padding:16px 12px;align-items:flex-start;text-align:left;box-shadow:none;min-width:0;background:#fff}.tile:hover{border-color:#abc4ff;background:#f8faff;transform:none;box-shadow:none}.tile-ico{background:#eff5ff!important;color:#4374d9;border-radius:7px;padding:8px!important;width:40px!important;height:40px!important;margin-bottom:8px}.tile-ico .ico{border-radius:0}.tile-t{font-size:13px;font-weight:600;color:#34435d}.tile-d{font-size:11px;color:#8a96a8;line-height:1.6;margin-top:4px}
.kpis{gap:14px}.kpi,.stat{border-radius:7px;box-shadow:none;padding:18px 20px}.kpi b{color:#223453;font-size:27px;letter-spacing:-.5px;font-weight:600}.kpi span{font-size:12px;color:#7a879c}.kpi i{font-size:11px}.kpi-link:hover{border-color:#afc6f5;transform:none!important;box-shadow:none!important}.kpi em{font-size:11px!important}.work-kpis{margin-bottom:20px}.work-kpis .kpi{position:relative;display:flex;flex-direction:column}.work-kpis .kpi>span{order:-1;margin-bottom:8px}.work-kpis .kpi>b{line-height:1.3}.work-kpis .kpi>em{margin-top:12px}.work-kpis .kpi>i{margin-top:5px}
.work-welcome{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:2px 0 23px}.work-welcome h2{font-size:24px;font-weight:600;margin:3px 0 7px;color:#203453}.work-welcome p{font-size:12px;color:#8995a7;margin:0}.work-welcome .eyebrow{font-size:11px;color:#5980bd;letter-spacing:1px}.work-date{text-align:right;color:#576b89;font-size:13px}.work-date span{display:block;font-size:11px;color:#9aa5b5;margin-top:6px}.work-overview{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:18px}.work-tasks h2{display:flex;justify-content:space-between}.work-tasks h2 a{font-size:11px;font-weight:400;text-decoration:none}.work-task{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f6;text-decoration:none;color:inherit}.work-task strong{font-size:12px;font-weight:500;display:block}.work-task small{font-size:10px;color:#919daf;display:block;margin-top:3px}.work-task b{margin-left:auto;font-size:20px;font-weight:500;white-space:nowrap}.work-task em{font-size:10px;font-style:normal;color:#9aa5b5;margin-left:5px}.work-task i{color:#a4b0c1;font-style:normal}.task-dot{width:8px;height:8px;border-radius:3px;background:#4d85ed;flex-shrink:0}.task-dot.orange{background:#eda85e}.task-dot.violet{background:#9785d7}.task-note{font-size:10px;color:#9ba6b7;margin:14px 0 0}.work-task:hover strong{color:var(--brand)}
@media(min-width:901px) and (max-width:1250px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.work-kpis .kpi{padding:16px 12px}.work-kpis .kpi b{font-size:23px}main{padding:20px}}
@media(max-width:900px){body{padding-left:0}.bar{height:56px;padding:0 14px}.bar-home,.bar-divider,.edition{display:none}.bar h1{font-size:16px}.burger{display:inline-grid;background:#fff;color:#526078;padding:0;min-height:36px}.bar-right{gap:8px}.side{box-shadow:8px 0 30px #24375922}main{padding:16px 12px 88px}.card{padding:16px;border-radius:7px}.card h2{gap:6px;font-size:14px}.work-welcome{margin:2px 0 18px;gap:10px;align-items:flex-start}.work-welcome h2{font-size:20px}.work-welcome p{font-size:11px}.work-date{display:none}.work-overview{grid-template-columns:1fr;gap:0}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work-kpis .kpi{padding:14px}.kpi b{font-size:24px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:14px}.tile-d{font-size:11px}.tile-t{font-size:13px}.tile-ico{margin-bottom:6px}.tabbar a.on{color:var(--brand)}input,select,textarea{font-size:16px;min-height:42px}button,.btn{min-height:42px}.field>span{font-size:13px}table.rc tr{border-radius:6px;box-shadow:none}table.rc td{font-size:13px;overflow-wrap:anywhere}table.rc td:first-child{font-size:14px}table thead th{position:static}}
@media print{body{padding:0;background:#fff;color:#000}.side,.bar,.tabbar,.scrim{display:none!important}main{padding:0;max-width:none}.card{box-shadow:none;border-color:#ccc;break-inside:avoid}table{display:table!important;font-size:11px}table.rc thead{display:table-header-group}table.rc tbody{display:table-row-group}table.rc tr{display:table-row}table.rc td{display:table-cell}table.rc td:before{display:none}table thead th{position:static}.work-welcome{margin-top:0}}

.sales-chart{display:flex;gap:16px;height:202px;padding:12px 4px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 48px,#f1f4f8 49px,#f1f4f8 50px)}.sales-column{flex:1;min-width:0;text-align:center}.sales-track{height:164px;position:relative;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid #e8edf5}.sales-track span{width:46%;min-width:8px;background:linear-gradient(#79a6ff,#3975ec);border-radius:3px 3px 0 0}.sales-track small{position:absolute;top:0;font-size:10px;color:#8898af;max-width:100%;overflow:hidden}.sales-column label{display:block;font-size:10px;color:#8c9aaf;margin-top:8px}.chart-empty{font-size:11px;color:#9aa6b7;text-align:center;margin:10px 0 0}.login-screen{padding-left:0;min-height:100vh;background:radial-gradient(ellipse at 20% 15%,#e3edff,transparent 55%),#f5f7fb;display:flow-root}.login-panel{max-width:440px;margin:7vh auto;padding:24px}.login-panel .card{padding:26px;border-radius:10px;box-shadow:0 12px 40px #2348790c}.login-panel h1{color:#243e66!important}.login-screen .muted{line-height:1.8}@media(max-width:900px){.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{min-width:0;padding:14px;overflow-wrap:anywhere}.stat b{font-size:22px}.sales-chart{gap:7px}.login-panel{margin:3vh auto;padding:16px}}
@media screen and (max-width:900px){table.rc td:last-child:not(:first-child){justify-content:space-between}table.rc td:last-child:not(:first-child)::before{content:attr(data-label)}}

/* Shared visual refinement: semantic module colors and persistent home overview. */
:root{--muted:#65758b}
body{background:#f3f6fa;color:#26364a}
main{max-width:1800px}
.card{border-color:#e2e8f0;border-radius:12px;box-shadow:0 3px 14px #253d6004}
.work-welcome{border-bottom:1px solid #dfe7f1;padding-bottom:20px}
.work-welcome p{color:#64758b}.work-welcome h2{font-weight:700}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 14px}.section-heading h2{margin:0;font-size:17px;color:#263b56}.section-heading>span{font-size:12px;color:#65758b}.eyebrow{font-size:11px;color:#617a98;margin:0 0 5px;letter-spacing:1px}
.focus-panel{margin:0 0 26px}.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.accent-blue{--accent:#2563c9;--tint:#eff5ff}.accent-teal{--accent:#087f78;--tint:#eaf8f5}.accent-violet{--accent:#7350bc;--tint:#f4f0fd}.accent-amber{--accent:#9b650a;--tint:#fff8e8}.accent-rose{--accent:#bc4270;--tint:#fff0f5}.accent-orange{--accent:#b66324;--tint:#fff3e9}
.focus-metric{border:1px solid #e0e7f0;border-top:3px solid var(--accent);border-radius:10px;background:linear-gradient(115deg,var(--tint),#fff);padding:16px 18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#293b53;transition:box-shadow .16s,border-color .16s;min-width:0}.focus-metric:hover{border-color:var(--accent);box-shadow:0 5px 15px #344e7210}.focus-label{font-size:13px;font-weight:600;display:flex;justify-content:space-between}.focus-label>span{color:var(--accent)}.focus-metric strong{font-size:28px;line-height:1.3;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--accent);overflow-wrap:anywhere}.focus-metric small{font-size:11px;line-height:1.6;color:#65758b}
.work-kpis .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.work-kpis .kpi{border-radius:10px;padding:15px 17px}.work-kpis .kpi b{font-size:24px}.work-kpis .kpi span,.tile-d{color:#65758b}.work-task small{color:#67788e;font-size:12px}.work-task strong{font-size:14px}.task-note{color:#738096;font-size:12px}.work-task{min-height:72px}.work-tasks h2 a{font-size:12px}
.tile{--module:#2864c5;--module-bg:#edf4ff;border-radius:10px;padding:17px 14px;border-color:#e5eaf2;background:linear-gradient(140deg,var(--module-bg),#fff 75%);border-top:3px solid var(--module)}.tile-ico{color:var(--module)!important;background:var(--module-bg)!important}.tile-t{font-size:14px}.tile-d{font-size:12px}.tile:hover{border-color:var(--module);background:var(--module-bg)}
.tile:is([href='/stock'],[href='/products'],[href='/spu'],[href='/import']){--module:#158477;--module-bg:#eaf8f4}
.tile:is([href='/customers'],[href='/kf'],[href='/refund']){--module:#ba5179;--module-bg:#fff0f5}
.tile:is([href='/ads'],[href='/ai'],[href='/profit']){--module:#7955ba;--module-bg:#f3effc}
.tile:is([href='/ledger'],[href='/recon'],[href='/dashboard']){--module:#a47414;--module-bg:#fff7e6}
.tile:is([href='/master'],[href='/users'],[href='/check']){--module:#5a728e;--module-bg:#eff4f9}
.sidenav a{min-height:36px}.ng-t{color:#667992}.sidenav a:is([href='/stock'],[href='/products'],[href='/spu']) .ico{color:#158477}.sidenav a:is([href='/ads'],[href='/ai'],[href='/profit']) .ico{color:#7955ba}.sidenav a:is([href='/customers'],[href='/kf']) .ico{color:#ba5179}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #608ee7;outline-offset:2px}
@media(min-width:1600px){.focus-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.focus-metric{padding:16px 14px}.focus-metric strong{font-size:26px}}
@media(max-width:1100px) and (min-width:901px){.work-overview{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.focus-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.focus-metric{padding:12px;gap:7px}.focus-metric strong{font-size:23px}.focus-label{font-size:12px}.focus-metric small{font-size:11px}.section-heading{align-items:flex-start;flex-direction:column;gap:5px}.section-heading h2{font-size:16px}.section-heading>span{font-size:11px}.focus-panel{margin-bottom:20px}.work-kpis .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.work-welcome{padding-bottom:15px}.work-welcome h2{font-size:19px}.tile{padding:14px 12px}.sidenav a{min-height:44px}.work-task small{font-size:11px}.card{border-radius:10px}}
@media print{.focus-grid{grid-template-columns:repeat(3,1fr)}.focus-metric{break-inside:avoid;background:white}}
.work-shortcuts{display:flex;gap:10px;flex-wrap:wrap;margin:-6px 0 24px}.work-shortcuts .btn{background:white;border:1px solid #dce5ef;color:#385376}.work-shortcuts .btn:first-child{color:#fff;background:#2563eb;border-color:#2563eb}.work-shortcuts .btn:hover{border-color:#2563eb}.work-overview:not(:has(.sales-chart)){grid-template-columns:1fr}
/* Colorful SVG icon system: shared across every role and business page. */
.ico{flex-shrink:0;vertical-align:middle}.tile .tile-ico{padding:0!important;width:46px!important;height:46px!important;background:transparent!important;box-shadow:0 4px 9px #26395112;border-radius:12px}.tile .tile-ico .ico{width:46px;height:46px;border-radius:12px}.tile{align-items:center;text-align:center;border-top:1px solid #e2e9f2;background:#fff;padding:20px 12px;gap:4px}.tile-t{font-size:14px}.tile-d{font-size:12px;line-height:1.6}.tile:hover{box-shadow:0 5px 16px #31548712}.sidenav a{gap:11px;padding-top:7px;padding-bottom:7px}.sidenav .ico{border-radius:7px}.side-foot a{display:inline-flex;align-items:center;gap:5px}.tabbar a{gap:4px}.tabbar .ico{opacity:.8}.tabbar a.on .ico{opacity:1;box-shadow:0 2px 8px #336db52a}.burger .ico{display:block}
.work-shortcuts .btn{gap:8px;min-height:46px;background:white!important;color:#344967!important;border:1px solid #dce5ef!important;padding:8px 14px}.work-shortcuts .btn[aria-current=page]{border-color:#689af0!important;background:#edf4ff!important}.metric-label{display:flex!important;align-items:center;gap:9px;line-height:1.5}.kpi>.metric-label{order:-1}.kpi .ico{margin:0}.stat .metric-label{margin-top:8px}.focus-caption{display:flex;align-items:center;gap:9px}.focus-label{align-items:center}.focus-metric{gap:12px}.focus-metric strong{padding-left:0}.card h2>.ico,.heading-icon{margin-right:9px;display:inline-flex;align-items:center;vertical-align:middle}.card h2{justify-content:flex-start;gap:0}.card h2 .hint{margin-left:10px}.work-tasks h2 a{margin-left:auto}.action-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.icon-action{gap:7px!important}.work-task>.ico{margin-right:2px}.work-task>span:not(.action-icon){min-width:0}.work-task small{overflow-wrap:anywhere}.work-task b{flex-shrink:0}.focus-label>span.focus-caption{color:#293b53}
@media(max-width:900px){.tile{padding:16px 10px}.work-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.work-shortcuts .btn{justify-content:flex-start;font-size:12px;padding:8px 10px}.focus-caption{gap:6px}.focus-caption>.ico{width:26px;height:26px}.focus-label{font-size:11px}.focus-metric{padding:12px 10px}.metric-label{font-size:11px!important;gap:6px}.metric-label>.ico{width:26px;height:26px}.card h2{line-height:1.7}.role-task-group .work-task{flex-wrap:wrap}.role-task-group .work-task>span:not(.action-icon){flex:1}.role-task-group .work-task>i{margin-left:auto}}
@media print{.action-icon{display:none}}

/* Administrator department lens: presentation only, never authorization. */
.admin-views{background:#fff;border:1px solid #dbe4ef;border-radius:14px;padding:16px 20px;margin-bottom:22px}.admin-views>div{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.admin-views small{color:#728197}.admin-views nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.admin-views a{padding:9px 17px;border-radius:8px;background:#f3f6fa;color:#45566f;text-decoration:none;font-weight:600}.admin-views a[aria-current]{background:#2563eb;color:white}.admin-views a:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}@media(max-width:600px){.admin-views{padding:12px}.admin-views nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.admin-views a{padding:9px 2px;text-align:center;font-size:12px}}

.home-shortcuts{margin:16px 0 24px}.shortcut-editor summary{cursor:pointer;color:#2563eb;padding:8px 0}.shortcut-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}.shortcut-options label{display:flex;align-items:center;gap:6px}.shortcut-options input{width:auto}.shortcut-editor[open]{background:white;border:1px solid #dbe4ef;padding:16px;border-radius:12px}

.permission-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;min-width:260px}.permission-options label{display:flex;flex-direction:column;gap:5px;border:1px solid #dce4ed;border-radius:8px;padding:10px;white-space:normal}.permission-options input{width:auto}.permission-options small{color:#64748b;line-height:1.5}.permission-options label:has(input:checked){background:#eff6ff;border-color:#60a5fa}

/* Dashboard drill-down and document mobile layout */
.stat-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:8px}.stat-link small{color:var(--brand);font-size:11px}.stat-link:hover{border-color:var(--brand);background:#f4f8ff}.stat-link:focus-visible{outline:3px solid #93c5fd}
[id]{scroll-margin-top:90px}.doc-tabs{display:flex;flex-wrap:wrap;gap:8px}.doc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.doc-actions form{margin:0}.doc-actions button,.doc-actions a{white-space:nowrap}.doc-list-table{width:100%}
@media screen and (max-width:700px){
.doc-list-table,.doc-list-table>tbody{display:block}.doc-list-table>thead{display:none}.doc-list-table .doc-summary-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #e2e8f0;border-radius:10px 10px 0 0;background:white;margin-top:14px;padding:12px;gap:12px}.doc-list-table .doc-summary-row>td{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;border:0;padding:0;min-width:0;min-height:0;overflow-wrap:anywhere}.doc-list-table .doc-summary-row>td:before{content:attr(data-label);flex:0 0 auto;color:#748399;font-size:12px;display:block;margin-bottom:0}.doc-list-table td[data-label="单号"],.doc-list-table td[data-label="操作"],.doc-list-table td[data-label="往来单位"]{grid-column:1/-1}.doc-list-table .doc-detail-row,.doc-list-table .doc-detail-row>td{display:block;width:100%;box-sizing:border-box}.doc-list-table .doc-detail-row>td{padding:12px;border:1px solid #e2e8f0;border-top:0;border-radius:0 0 10px 10px}.doc-detail-row summary{line-height:1.7}.doc-list-table .badge{white-space:nowrap}
main form .line-row,main #plines>.inline{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px!important;width:100%}main form .line-row>input:first-child,main #plines>.inline>input:first-child{grid-column:1/-1}main form .line-row input,main #plines input{width:100%!important;min-width:0!important;box-sizing:border-box}
main form .field{min-width:0;max-width:100%}main form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main form select,main form textarea{max-width:100%;min-width:0!important;box-sizing:border-box}main form.inline{flex-wrap:wrap;gap:10px}main form.inline>.field{flex:1 1 140px}main form button{white-space:normal;line-height:1.4}main form>span.muted{display:block;margin:8px 0!important}main .two{grid-template-columns:minmax(0,1fr)}
}

/* 宽表保留可读列宽，在表内滚动，不挤压成竖排文字。 */
.data-table-scroll{max-width:100%;min-width:0;overflow-x:auto}
@media screen and (min-width:901px){
.data-table-scroll table.rc{width:100%;table-layout:auto}
.data-table-scroll table.rc td{min-width:90px;max-width:320px;white-space:normal;word-break:normal;overflow-wrap:break-word;vertical-align:middle}
.data-table-scroll table.rc td.num{white-space:nowrap;min-width:100px}
.data-table-scroll table.rc th{white-space:nowrap}
.customer-page .data-table-scroll table{min-width:1000px}
.customer-page .data-table-scroll td:first-child{min-width:165px}
.customer-entity{display:block;min-width:170px;max-width:240px;line-height:1.6}
}
.customer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.customer-name{font-weight:650;font-size:14px;text-decoration:none;line-height:1.6}
.customer-secondary{display:block;font-size:12px;color:#8190a4;line-height:1.65;margin-top:3px}
.customer-outstanding{color:#d67b24}.customer-page td{line-height:1.6}
.customer-add-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px;align-items:start}
.customer-add-form .field{min-width:0;margin:0;display:flex;flex-direction:column;gap:6px}
.customer-add-form input,.customer-add-form select{width:100%!important;min-width:0!important;box-sizing:border-box}
.customer-add-form button{justify-self:start;align-self:end}
.customer-page details>summary{cursor:pointer;font-weight:600;color:#345780}
.customer-follow{margin:18px 0}.customer-follow>summary{padding:14px 4px}.customer-page form.inline{flex-wrap:wrap}
@media screen and (max-width:900px){
.data-table-scroll{overflow:visible}.customer-add-form{grid-template-columns:minmax(0,1fr)}
.customer-page table.rc td{display:block;min-width:0;max-width:none;text-align:left!important;padding:8px 0}
.customer-page table.rc td:before{display:block;flex:none;font-size:11px;color:#8996a8;margin-bottom:4px}
.customer-page table.rc td:first-child{padding-top:0}.customer-page table.rc td:first-child:before{display:none}
.customer-page table.rc tr{padding:16px}.customer-toolbar .btn{white-space:nowrap}
}
@media print{.data-table-scroll{overflow:visible}}

.data-table-scroll table thead th{position:static}
.customer-filter-more{width:100%}.customer-filter-more>summary{font-size:13px;padding:8px 0}
.customer-filter-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px 0;align-items:end}
.customer-filter-fields .field{min-width:0}.customer-filter-fields select{min-width:0;width:100%}
.customer-page form.inline>input[name=q]{flex:1;width:auto}
@media screen and (max-width:900px){
.customer-page table.rc tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.customer-page table.rc td{padding:4px 0}
.customer-page table.rc td:first-child,.customer-page table.rc td[data-label="归属主体"],.customer-page table.rc td:last-child{grid-column:1/-1}
.customer-filter-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.customer-page form.inline{flex-direction:row}.customer-page form.inline>input[name=q]{min-width:0!important;width:65%;flex:1}
}

/* One business document per card, shared desktop/mobile hierarchy. */
.business-doc-list{display:grid;gap:20px;background:#eef3f9;padding:18px;border-radius:22px}
.business-doc{min-width:0;background:#fff;border:1px solid #e0e8f2;border-radius:18px;box-shadow:0 3px 12px #243b5310;overflow:hidden}
.business-doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:#f7faff;padding:16px 20px;border-bottom:1px solid #edf1f6}
.business-doc-head>div:first-child{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}.business-doc-head b{overflow-wrap:anywhere}.business-doc-head input{width:18px!important;height:18px;margin:0!important}.business-doc-head>div:last-child{text-align:right;flex-shrink:0}
.business-doc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:20px}.business-doc-body h3{margin:0 0 8px;font-size:18px;color:#254267;overflow-wrap:anywhere}.business-doc-body p{margin:0;color:#6c7e95;line-height:1.7;overflow-wrap:anywhere}.business-doc-body dl{display:flex;gap:32px;margin:0}.business-doc-body dt{font-size:12px;color:#7a899b;margin-bottom:8px}.business-doc-body dd{margin:0;font-size:16px;font-weight:600}
.business-doc-actions{padding:0 20px 16px;justify-content:flex-end}.business-doc-actions:empty{display:none}.business-doc-detail{border-top:1px solid #edf1f6;padding:14px 20px;background:#fbfcfe}.business-doc-detail summary{line-height:1.8;overflow-wrap:anywhere}.business-doc-detail details>div{overflow:auto}
@media(max-width:650px){.business-doc-list{padding:10px;gap:16px}.business-doc-head{padding:14px 12px;gap:8px;font-size:12px}.business-doc-head>div:first-child{gap:6px}.business-doc-head b{flex-basis:100%}.business-doc-body{padding:16px 12px;grid-template-columns:1fr;gap:14px}.business-doc-body h3{font-size:16px}.business-doc-body dl{justify-content:space-between;gap:12px}.business-doc-body dd{font-size:14px}.business-doc-actions{padding:0 12px 14px;justify-content:flex-start}.business-doc-actions a,.business-doc-actions button{min-height:44px;display:inline-flex;align-items:center}.business-doc-detail{padding:12px}}

/* Business records stay separated on desktop as well as mobile. */
.record-cards{display:grid;gap:18px;background:#eef3f9;padding:16px;border-radius:20px;margin:16px 0}.record-card{background:#fff;border:1px solid #dee7f1;border-radius:16px;padding:18px 20px;min-width:0;box-shadow:0 2px 8px #2542670a}.record-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:14px;border-bottom:1px solid #eef2f6}.record-card h3{font-size:17px;line-height:1.55;margin:0;color:#254267;overflow-wrap:anywhere}.record-card small{display:block;color:#718198;font-size:12px;margin-bottom:4px}.record-state{display:flex;gap:16px;flex-shrink:0}.record-state>span{font-size:14px}.record-card dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 22px;margin:16px 0 0}.record-card dl>div{min-width:0}.record-card dt{font-size:12px;color:#718198;margin-bottom:6px}.record-card dd{margin:0;font-size:14px;line-height:1.65;overflow-wrap:anywhere}.record-actions a,.record-actions button{display:inline-flex;min-height:40px;align-items:center}.iv-row.record-card{background:#f8fbff;margin:18px 0;border-radius:16px}.iv-row.record-card>header h3{font-size:18px}
@media(max-width:650px){.record-cards{padding:10px;gap:14px}.record-card{padding:14px 12px}.record-card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.record-card h3{font-size:15px}.record-card>header{gap:12px}.record-state{flex-direction:column;gap:5px;max-width:90px;overflow-wrap:anywhere;flex-shrink:1}.record-actions a,.record-actions button{min-height:44px}}

.record-card dl>.record-wide{grid-column:1/-1}

/* Colored list surfaces separate records without coloring their contents. */
@media screen {
  .record-cards,.business-doc-list{background:linear-gradient(145deg,#c6edf0,#dcf1f5);border:1px solid #b7e0e6;padding:18px;gap:22px}
  .record-card,.business-doc,.iv-row.record-card{background:#fff;border:1px solid #d6e7eb;box-shadow:0 4px 12px #285d6812;border-radius:16px}
  .business-doc-head{background:#f5fbfc}
  table.rc{background:#d2edf1;border-collapse:separate;border-spacing:0 12px;padding:0 12px 4px;border-radius:16px}
  table.rc tbody tr,table.rc tbody tr:hover{background:#fff}
  table.rc tbody td{border-bottom:1px solid #dbe9ed;border-top:1px solid #dbe9ed}
  table.rc tbody td:first-child{border-left:1px solid #dbe9ed;border-radius:12px 0 0 12px}
  table.rc tbody td:last-child{border-right:1px solid #dbe9ed;border-radius:0 12px 12px 0}
}
@media screen and (max-width:900px){
  table.rc{padding:12px;background:linear-gradient(145deg,#c6edf0,#dcf1f5);border:1px solid #b7e0e6;box-sizing:border-box}
  table.rc tbody{background:transparent}
  table.rc tr{background:#fff;border:1px solid #d6e7eb;border-radius:14px;margin:0 0 18px;box-shadow:0 4px 12px #285d6812}
  table.rc tr:last-child{margin-bottom:0}
  table.rc tbody td,table.rc tbody td:first-child,table.rc tbody td:last-child{border:0;border-radius:0}
  table.rc tbody td:first-child{border-bottom:1px solid #e3edf0}
  .record-cards,.business-doc-list{padding:12px;gap:18px}
}
@media print{
  .record-cards,.business-doc-list{background:#fff;border:0}
  .record-card,.business-doc{box-shadow:none}
}

/* Short business fields share a row; descriptions retain the full width. */
@media screen{
  table.rc tbody td:has(form[action="/spu/cost"]){display:flex;align-items:center;justify-content:flex-start;gap:6px}
  .record-card{padding:14px 16px}
  .record-card>header{padding-bottom:10px}
  .record-card dl{gap:10px 18px;margin-top:12px}
  .record-card dt{margin-bottom:3px}
  .business-doc-head{padding:12px 16px}
  .business-doc-body{padding:14px 16px;gap:16px}
  .business-doc-actions{padding:0 16px 12px}
}
@media screen and (max-width:900px){
  table.rc tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:14px 12px}
  table.rc tbody td{display:block;grid-column:1/-1;min-width:0;max-width:none;padding:0;white-space:normal;text-align:left!important;overflow-wrap:anywhere}
  table.rc tbody td::before{display:inline;min-width:0;margin:0 5px 0 0;color:#6c7e89;font-size:12px;content:attr(data-label) "："}
  table.rc tbody td:is([data-label="装量"],[data-label="实发"],[data-label="数量"],[data-label="单位"],[data-label="单位成本"],[data-label="单份成本"],[data-label="成本"],[data-label="单价"],[data-label="金额"],[data-label="订单额"],[data-label="销量"],[data-label="渠道商品"],[data-label="库存"],[data-label="可用库存"],[data-label="已发数量"],[data-label="待发数量"],[data-label="计划数量"],[data-label="完成数量"],[data-label="良品数量"],[data-label="机显数量"],[data-label="良品率"],[data-label="状态"],[data-label="日期"],[data-label="仓库"]){grid-column:auto}
  table.rc tbody td:first-child{grid-column:1/-1;padding-bottom:8px;margin-bottom:0}
  table.rc tbody td.num:not(:first-child){grid-column:auto;min-width:0;white-space:normal}
  table.rc tbody td:last-child:not([data-label]),table.rc tbody td[data-label="操作"],table.rc tbody td[data-label=""]{grid-column:1/-1}
  table.rc td form.inline{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;vertical-align:middle;max-width:100%}
  table.rc td form.inline input{min-width:0;max-width:100%;flex:1 1 60px;width:60px!important}
  table.rc td form.inline button{padding:5px 9px;min-height:36px}
  .record-card{padding:12px}
  .record-card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .record-card dd{line-height:1.5}
  .business-doc-body{padding:12px;gap:10px}
  .business-doc-head{padding:12px}
}
@media screen{
  .record-card dl>div:not(.record-wide) dt,.record-card dl>div:not(.record-wide) dd{display:inline;margin:0;line-height:1.65}
  .record-card dl>div:not(.record-wide) dt::after{content:"：";margin-right:4px}
  .business-doc-body dt,.business-doc-body dd{display:inline;margin:0;line-height:1.65}
  .business-doc-body dt::after{content:"：";margin-right:4px}
}
@media screen and (max-width:900px){
  table.rc tbody td:has(form){grid-column:1/-1!important}
  table.rc tbody td:has(form) form.inline{max-width:calc(100% - 75px)}
  table.rc tbody td:first-child::before,table.rc tbody td[data-label=""]::before,table.rc tbody td[data-label="操作"]::before{content:none}
}
@media screen{
  table.rc form[action="/spu/cost"]{display:inline-flex!important;vertical-align:middle;align-items:center;gap:6px!important;max-width:100%}
  table.rc form[action="/spu/cost"] input[name="cost"]{width:64px!important;min-width:0!important;min-height:32px!important;height:32px;box-sizing:border-box;padding:3px 6px!important;margin:0}
  table.rc form[action="/spu/cost"] button{min-height:32px!important;height:32px;padding:3px 8px!important;white-space:nowrap}
  table.rc form[action="/spu/unassign"] button{min-height:34px!important;padding:5px 10px!important}
}

/* Shared compact layout, including legacy customer and document overrides. */
@media screen and (max-width:900px){
  main table.rc tbody tr{gap:9px 12px;padding:12px}
  main table.rc tbody td{grid-column:auto;padding:0;line-height:1.6;min-width:0}
  main table.rc tbody td::before{display:inline;content:attr(data-label) "：";margin:0 4px 0 0;font-size:12px;color:#6c7e89;min-width:0}
  main table.rc tbody td:is(:first-child,[data-label=""],[data-label="操作"],[data-label*="名称"],[data-label*="标准名"],[data-label*="地址"],[data-label*="备注"],[data-label*="说明"],[data-label*="规格"],[data-label*="归属主体"],[data-label*="往来单位"],[data-label*="单号"],[data-label*="编号"],[data-label*="商品"],[data-label*="产品"],[data-label*="要求"],[data-label*="原话"],[data-label*="最新动态"]){grid-column:1/-1}
  main table.rc tbody td[data-label="渠道商品"]{grid-column:auto}
  main table.rc tbody td:first-child{padding-bottom:8px}
  main table.rc tbody td:first-child::before,main table.rc tbody td[data-label=""]::before,main table.rc tbody td[data-label="操作"]::before{content:none}
  main .customer-page table.rc td .customer-entity{display:inline;min-width:0;max-width:none}
  main .customer-page table.rc tbody td{padding:0;line-height:1.6}
  main .customer-page table.rc tbody td::before{display:inline;content:attr(data-label) "：";margin:0 4px 0 0;font-size:12px}
  main .customer-page table.rc tbody td:first-child::before,main .customer-page table.rc tbody td[data-label="操作"]::before{content:none}
  main .customer-page table.rc td .customer-secondary{display:inline;margin:0 0 0 5px;line-height:1.6}
  main .customer-page table.rc td[data-label="成交概况"]{grid-column:1/-1}
  main .customer-page table.rc td[data-label="客户维护"]{grid-column:1/-1}
  main .customer-page table.rc td[data-label="操作"]{padding-top:3px}
  main .doc-list-table .doc-summary-row>td{display:block;flex-direction:row;line-height:1.6}
  main .doc-list-table .doc-summary-row>td::before{display:inline;content:attr(data-label) "：";margin-right:4px}
  main .record-card dl{gap:9px 12px}
  main .record-card dl>div dt,main .record-card dl>div dd{display:inline;line-height:1.6;margin:0}
  main .record-card dl>div dt::after{content:"：";margin-right:4px}
  main .record-card p{margin:8px 0;line-height:1.6}
  main table.rc td input:not([type=hidden]):not([type=checkbox]):not([type=radio]),main table.rc td select{min-height:34px;height:34px;padding:4px 7px}
  main table.rc td button,main .record-actions button,main .record-actions .btn{min-height:34px;padding:5px 10px}
  main table.rc td form{margin-top:0;margin-bottom:0}
  main table.price-edit-table tbody td.num{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  main table.price-edit-table tbody td.num::before{flex:0 1 auto;margin:0;content:attr(data-label);font-size:12px}
  main table.price-edit-table tbody td.num input{width:48px!important;min-width:0;font-size:14px;flex:0 0 48px}
  main .customer-page table.rc tbody td[data-label="分类"],main .customer-page table.rc tbody td[data-label="应收余额"]{order:1}
  main .customer-page table.rc tbody td[data-label="归属主体"]{order:2}
  main .customer-page table.rc tbody td[data-label="成交概况"]{order:3}
  main .customer-page table.rc tbody td[data-label="客户维护"]{order:4}
  main .customer-page table.rc tbody td[data-label="操作"]{order:5}
  /* Legacy matrices without per-cell labels must keep visible headers. */
  main table:not(.rc):not(.doc-list-table){display:block;overflow-x:auto;white-space:normal}
  main table:not(.rc):not(.doc-list-table)>thead{display:table-header-group}
  main table:not(.rc):not(.doc-list-table)>tbody{display:table-row-group}
  main table:not(.rc):not(.doc-list-table)>thead>tr,main table:not(.rc):not(.doc-list-table)>tbody>tr{display:table-row}
  main table:not(.rc):not(.doc-list-table)>thead>tr>th,main table:not(.rc):not(.doc-list-table)>tbody>tr>td{display:table-cell}
}

@media(max-width:650px){.business-doc-body dl{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 18px}.business-doc-body dl>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:0;flex:1 0 220px;min-width:0}.business-doc-body dt{white-space:nowrap;flex:none}.business-doc-body dd{white-space:nowrap;overflow-wrap:normal;word-break:normal}}

/* Unified business navigation, entry tabs and compact record summaries. */
main[data-page]{--layout-line:#dce5f1;--layout-muted:#73859c}
main[data-page] .function-navigation{padding:14px 18px;margin-bottom:12px;border-radius:14px}
main[data-page] .function-navigation h2{margin-bottom:10px;font-size:18px}
main[data-page] .function-groups,main[data-page] .function-secondary{gap:8px}
main[data-page] .function-primary,main[data-page] .function-secondary a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
main[data-page] .function-secondary{margin-bottom:16px}
main[data-page] .function-secondary a[aria-current]{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:600}
.page-section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.page-section-tabs a{padding:9px 14px;min-height:42px;box-sizing:border-box;background:#eef3fb;border:1px solid var(--layout-line);border-radius:8px;color:#35577d;text-decoration:none}
main[data-page]>.card,main[data-page] .card{border-radius:14px}
main[data-page] .record-cards{background:#f0f5fa;padding:14px;gap:12px}
main[data-page] .record-fold{margin:12px 0;background:white;border:1px solid var(--layout-line);border-radius:12px;overflow:hidden}
main[data-page] .record-fold>summary{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;list-style:none;font-weight:600;color:#263c55}
.record-fold>summary::-webkit-details-marker{display:none}
.record-fold-title{display:grid;gap:6px;flex:1;min-width:0;overflow-wrap:anywhere}
.record-fold-title small,.fold-brief{font-size:14px;color:#73859c;font-weight:400}
.record-fold-state{color:#246b52;font-size:14px;flex-shrink:0}
.record-fold-arrow{margin-left:auto;flex-shrink:0;transition:transform .15s}
.record-fold[open]>.record-fold-arrow,.record-fold[open]>summary>.record-fold-arrow{transform:rotate(180deg)}
.record-fold>.record-card,.record-fold>.purchase-order,.record-fold>.business-doc{margin:0;border:0;border-top:1px solid #e4eaf3;border-radius:0;box-shadow:none}
.unified-record>summary{flex-wrap:wrap}
.unified-record>summary>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;background:none;padding:0;border:0;min-width:0}
.unified-record .fold-brief{flex-basis:100%;order:2}
.unified-record>summary .business-doc-head>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
main[data-page] details.page-entry{padding:16px;margin:0 0 16px;background:#fff;border:1px solid var(--layout-line);border-radius:14px}
main[data-page] details.page-entry>summary{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;padding:10px 20px;background:#2563eb;color:#fff;border-radius:9px;font-size:17px;font-weight:600;list-style:none;cursor:pointer}
details.page-entry>summary::-webkit-details-marker{display:none}
.record-fold>summary:focus-visible,.page-entry>summary:focus-visible,.page-section-tabs a:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
main[data-page] [id]{scroll-margin-top:85px}
@media(max-width:650px){main[data-page] .function-navigation{padding:12px}.function-groups{gap:6px!important}main[data-page] .function-primary,main[data-page] .function-secondary a{font-size:14px;padding:9px 11px}main[data-page] .record-cards{padding:8px}main[data-page] .record-fold>summary{padding:12px;gap:8px}.record-fold-state{max-width:35%;white-space:normal}.page-section-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}.page-section-tabs a{white-space:nowrap;flex-shrink:0}main[data-page] details.page-entry{padding:12px}main[data-page] .stats{gap:8px}main[data-page] .stat{padding:14px}main[data-page] input,main[data-page] select,main[data-page] textarea{max-width:100%;box-sizing:border-box}}
@media print{.page-section-tabs{display:none}.record-fold>article{display:block!important}.record-fold>summary{display:none!important}}
.record-fold-title>b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
main[data-page] .stats .stat{padding:12px 16px;min-height:0}
main[data-page] .stats .stat b{font-size:24px;line-height:1.3}
main[data-page] .stats .stat .metric-label{margin-top:5px;font-size:13px}
@media(max-width:650px){main[data-page] .stats .stat{padding:10px 12px}main[data-page] .stats .stat b{font-size:22px}}