/* 后台样式 —— 「新中式」视觉令牌（2026-09-12 UI 重构）。
 * 从「暖阳橘子」换成东方雅致色板：宣纸米白 + 墨色 + 朱砂红 + 少量金色点缀。
 * 注意：小程序端 app.wxss 仍是暖阳橘子，两端配色从此有意分化；
 * 若以后要两端统一，得两边一起改。
 *
 * 国风装饰（云纹 / 水墨山水 / 回纹线 / 印章）全部是内联 SVG data-URI 或纯 CSS
 * 文本伪元素，不引入任何图片与字体文件；透明度控制在 3%~8%，只做背景，
 * 不承载信息、不拦截点击、小屏自动收起。
 * 电脑上字号比小程序小一档。 */
:root {
  --bg: #f7f1e6; /* 主背景：宣纸米白 */
  --bg-warm: #f3ead9; /* 比主背景深一档的暖棕纸色：表头、hover */
  --bg-sunken: #f9f3e8; /* 输入框暖白 */
  --bg-side: #fbf6ec; /* 侧栏宣纸，比主背景略亮一点做出层次 */
  --card: #fffcf5; /* 卡片 */
  --primary: #a94332; /* 朱砂红 */
  --primary-hover: #8f3a2b; /* 深一档的朱砂，按钮 hover */
  --primary-deep: #6e3028; /* 深色强调（文字级朱砂） */
  --primary-soft: #f3dfd8; /* 朱砂淡底：标签 */
  --primary-faint: #f9f0e7; /* 更淡的朱砂：选中导航、发货行 */
  --gold: #b08a52; /* 辅助金色。对浅底只有约 3:1，只许做装饰线纹，禁止做信息文字 */
  --text: #3f352d; /* 墨色主文字 */
  /* 对比度：这两档承载的都是真信息（剩余库存、手机号、下单时间），
   * 不是装饰性文字，所以必须过 WCAG AA 的 4.5:1。
   * 新中式色板建议的 #817467 在卡片底 #FFFCF5 上只有约 4.4:1，差一线，
   * 所以取同色相、略深一档：sub（对卡片底）≈5.9:1，weak ≈5.0:1。
   * 层级仍是 sub 比 weak 深：weak 是更次要的那一档。 */
  --text-sub: #6e6053;
  --text-weak: #7a6b5c;
  --line: #e5d8c5; /* 浅暖棕边框 */
  --line-strong: #d8c7ab; /* 输入框/按钮这种需要「摸得到」的描边 */
  --danger: #b3372b; /* 暗朱砂。警示保留，但压低饱和不刺眼 */
  --danger-soft: #f6e4de; /* 已取消标签的淡朱砂底 */
  --r-sm: 7px; /* 输入框、按钮 —— 中式克制的小圆角，不是胶囊 */
  --r-tag: 4px; /* 状态标签，接近印章的方正感 */
  --r-md: 12px; /* 卡片 */
  --r-pill: 999px; /* 仅开关和 toast 还在用胶囊 */
  --shadow: 0 2px 12px rgba(111, 90, 60, 0.07); /* 极轻暖棕影 */
  --shadow-pop: 0 12px 40px rgba(63, 45, 28, 0.16); /* 弹窗 */
  /* 标题衬线：思源宋体 → macOS 宋体 → Windows 宋体逐级回退，零网络依赖。
   * 只用于品牌字和各级标题，正文保持无衬线保证表格可读性。 */
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN',
    'Songti SC', 'STSong', SimSun, serif;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-family: var(--font-serif);
  letter-spacing: 1px;
}
h2 {
  margin: 0;
  font-size: 20px;
  font-family: var(--font-serif);
}
input::placeholder {
  color: var(--text-weak);
  opacity: 0.8;
}
.sub {
  color: var(--text-sub);
  font-size: 13px;
}
.weak {
  color: var(--text-weak);
  font-size: 12px;
}
[hidden] {
  display: none !important;
}

/* ── 按钮。基础款是「米色描边」——详情这类中性动作的默认形态。
 * 全部从胶囊改成小圆角矩形，去掉互联网 SaaS 的圆滚滚的感觉。 */
.btn {
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.btn:hover {
  background: var(--bg-warm);
  border-color: #c9b694;
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn:focus-visible,
.link:focus-visible,
.nav__item:focus-visible {
  outline: 2px solid rgba(169, 67, 50, 0.45);
  outline-offset: 2px;
}
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fbf4e8;
}
.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.btn--outline {
  background: var(--card);
  border-color: var(--primary);
  color: var(--primary);
}
.btn--outline:hover {
  background: var(--primary-faint);
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}
.btn--danger {
  background: var(--card);
  border-color: rgba(179, 55, 43, 0.5);
  color: var(--danger);
}
.btn--danger:hover {
  background: #f9e9e3;
  border-color: var(--danger);
}
.btn--sm {
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
  border-radius: 6px;
}
/* 订单行的状态推进按钮（出餐完成 / 开始配送 / 填单号发货 / 完成）：
 * 行内唯一的主操作，用朱砂实底把它从「详情」里拎出来。 */
.btn.act {
  background: var(--primary);
  border-color: var(--primary);
  color: #fbf4e8;
}
.btn.act:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.link {
  border: 0;
  background: none;
  color: var(--text-sub);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

/* ── 登录 */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login__box {
  width: 340px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login__box input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--bg-sunken);
}
.login__box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(169, 67, 50, 0.12);
}
.err {
  min-height: 18px;
  color: var(--danger);
  font-size: 13px;
}

/* ── 通用弹窗（取代 confirm / prompt） */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(56, 42, 30, 0.45);
}
.modal[hidden] {
  display: none;
}
.modal__box {
  width: min(440px, 100%);
  max-height: min(90vh, 640px);
  overflow: auto;
  padding: 22px 24px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  animation: modal-in 0.16s ease-out;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal__box--danger {
  border-color: rgba(179, 55, 43, 0.3);
}
.modal__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  font-family: var(--font-serif);
  letter-spacing: 1px;
}
.modal__box--danger .modal__title {
  color: var(--danger);
}
.modal__body {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}
.modal__body p {
  margin: 0 0 12px;
}
.modal__body p:last-child {
  margin-bottom: 0;
}
.modal-warn,
.modal-callout--warn {
  color: var(--danger);
}
.modal-callout {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.modal-callout--warn {
  background: #f9e9e3;
  border-color: rgba(179, 55, 43, 0.22);
}
.modal__form {
  display: flex;
  flex-direction: column;
}
.modal__field {
  margin-bottom: 16px;
}
.modal__field:last-of-type {
  margin-bottom: 0;
}
.modal__field > label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
}
.modal__field input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-sunken);
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}
.modal__field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(169, 67, 50, 0.12);
}
.modal__field input::-webkit-outer-spin-button,
.modal__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.modal__hint {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-weak);
}
.modal__err {
  margin-top: 12px;
}
.modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.btn--danger-fill {
  background: var(--danger);
  border-color: var(--danger);
  color: #fbf4e8;
}
.btn--danger-fill:hover {
  background: #9e2f24;
  border-color: #9e2f24;
}

/* ── 外壳：左导航 + 右主区 */
.shell {
  display: flex;
  min-height: 100vh;
}
.side {
  position: relative;
  width: 200px;
  flex-shrink: 0;
  background: var(--bg-side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
/* 云纹。垫在侧栏底部、用户信息区上方，纯背景装饰 */
.side::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 64px;
  height: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 72' fill='none'%3E%3Cg stroke='%23A94332' stroke-width='1.1' stroke-linecap='round' opacity='.07'%3E%3Cpath d='M22 50c-6-1-9-8-4-13 5-5 13-2 14 4 1 5-3 9-8 9'/%3E%3Cpath d='M36 50h30c8 0 12-6 9-12-2-5-9-6-13-2-1-6-8-9-13-6-4 2-6 7-4 11'/%3E%3Cpath d='M96 58c-5 0-8-6-4-10 4-4 11-2 12 3 1 4-2 7-6 7'/%3E%3Cpath d='M108 58h26c7 0 10-5 8-10-2-4-8-5-11-2-1-5-7-7-11-4'/%3E%3Cpath d='M40 64c30-4 62-4 92 0'/%3E%3C/g%3E%3C/svg%3E")
    center bottom / 150px auto no-repeat;
  pointer-events: none;
}
/* 品牌字 + 朱砂小印。印章是竖式引首章的形制，纯 CSS 文本，不用图片 */
.side__brand {
  padding: 20px 18px 14px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  color: var(--primary);
}
.side__brand__seal {
  writing-mode: vertical-rl;
  margin-left: auto;
  padding: 5px 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  color: #fbf4e6;
  background: var(--primary);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(251, 244, 230, 0.35);
  opacity: 0.92;
}
.nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nav__item {
  padding: 11px 20px;
  color: var(--text-sub);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.nav__item:hover {
  color: var(--primary-deep);
  background: #f5eddd;
}
.nav__item--on {
  background: var(--primary-faint);
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.side__foot {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-sub);
  /* 200px 侧栏减掉左右 padding 只剩 160px，「boss（老板）」+「改密」+「退出」
   * 横排一行必然挤爆 —— 之前的实际表现是三个元素各自竖着、一个字一行。
   * 改成 who 独占一行、两个按钮在第二行并排。 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.side__foot > span {
  flex: 0 0 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side__foot .link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* 水墨山水线稿。垫在主区右下角的留白处，z-index:-1 让它永远在内容之下，
 * 卡片和表格会自然盖住它 —— 只有没有内容的空隙里才透出来 */
.main::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: min(560px, 58vw);
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 220' fill='none'%3E%3Cg stroke='%236E3028' stroke-linecap='round'%3E%3Cpath d='M8 208c70-96 118-128 156-96 26 22 30 56 66 56 48 0 66-88 122-88 52 0 70 74 116 74 30 0 48-22 62-52' stroke-width='1.2' opacity='.055'/%3E%3Cpath d='M150 208c90-58 210-84 340-58 50 10 92 8 122-6' stroke-width='1' opacity='.045'/%3E%3Cpath d='M292 208c60-30 140-44 240-34' stroke-width='.9' opacity='.04'/%3E%3C/g%3E%3Ccircle cx='530' cy='58' r='24' stroke='%23B08A52' stroke-width='1.1' opacity='.07'/%3E%3C/svg%3E")
    right bottom / contain no-repeat;
  pointer-events: none;
  z-index: -1;
}
.head {
  height: 60px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.head h2 {
  position: relative;
  letter-spacing: 3px;
}
/* 标题下的一段金色回纹。极短、极细，只做「书名气」不做花边 */
.head h2::after {
  content: '';
  position: absolute;
  left: 1px;
  bottom: -7px;
  width: 52px;
  height: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 6' fill='none'%3E%3Cpath d='M1 5h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4h5V1h5v4' stroke='%23B08A52' stroke-width='1' opacity='.55'/%3E%3C/svg%3E")
    left center / 52px 5px no-repeat;
  pointer-events: none;
}
.head__actions {
  display: flex;
  gap: 10px;
}
.view {
  flex: 1;
  padding: 22px 26px 46px;
}
.loading,
.empty {
  padding: 60px 0;
  text-align: center;
  color: var(--text-sub);
}

/* ── 卡片与表单。配置页全是「一行一个字段」，所以做成通用的 field 行 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 16px;
}
.card__t {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  letter-spacing: 0.5px;
}
.card__s {
  color: var(--text-sub);
  font-size: 12px;
  margin-bottom: 14px;
}

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.field > label {
  width: 150px;
  flex-shrink: 0;
  color: var(--text-sub);
  font-size: 13px;
}
.field input[type='text'],
.field input[type='number'],
.field input[type='time'],
.field input[type='date'],
.field textarea,
.field select {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.field select {
  cursor: pointer;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(169, 67, 50, 0.12);
}
.field textarea {
  height: 76px;
  padding: 8px 10px;
  line-height: 1.6;
  resize: vertical;
}
.field .hint {
  color: var(--text-weak);
  font-size: 12px;
}
.field--switch > label {
  width: auto;
}
/* 订单筛选栏 / 发货行内表单用的紧凑变体：标签按内容自适应、控件按自身内容
 * 取宽，不继承配置页「标签 150px + 输入框占满余行」的对齐。
 * 必须写在基础 .field 规则之后 —— 两组选择器同优先级，后者生效。
 * 关键词框例外：吃掉行内剩余空间，方便直接粘贴长单号 */
.field--filter > label {
  width: auto;
}
.field--filter input[type='text'],
.field--filter input[type='number'],
.field--filter input[type='time'],
.field--filter input[type='date'],
.field--filter select {
  flex: 0 1 auto;
  width: auto;
}
.field--filter input[type='text'] {
  flex: 1 1 170px;
}

/* 开关做成胶囊，一眼能看出停业开关有没有开 */
.sw {
  width: 44px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  border: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.sw::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  transition: left 0.15s;
}
.sw--on {
  background: var(--primary);
}
.sw--on::after {
  left: 23px;
}
.sw--danger.sw--on {
  background: var(--danger);
}

.pre-print-preview {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.55;
  font-size: 14px;
}

.pre-print-preview li {
  margin-bottom: 6px;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ── 预定生产单：日期页签 + 计划产量行内编辑 */
.pre-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 10px 0 4px;
  padding-bottom: 4px;
}

.pre-day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--line, #e5e0d8);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pre-day b {
  font-size: 13px;
}

.pre-day span {
  font-size: 11px;
  opacity: 0.65;
}

.pre-day--on {
  border-color: var(--primary, #d97706);
  color: var(--primary, #d97706);
  background: rgba(217, 119, 6, 0.07);
}

.pre-plan-inp {
  width: 76px;
  padding: 4px 6px;
  border: 1px solid var(--line, #e5e0d8);
  border-radius: 8px;
  font: inherit;
  text-align: right;
}

/* ── 表格 */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #efe4d0; /* 比外框线更淡一档的行分隔 */
  font-size: 13px;
  vertical-align: middle;
}
th {
  background: var(--bg-warm);
  color: #5c4f40; /* 表头深棕 */
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
tbody tr:not(.ship-row) td {
  transition: background-color 0.15s ease;
}
tbody tr:not(.ship-row):hover td {
  background: #fbf5e8;
}
tr:last-child td {
  border-bottom: 0;
}
td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}
.stock-cell {
  display: inline-block;
  text-align: right;
}
.stock-quota-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.stock-quota-row .q {
  width: 72px;
}
.stock-bump {
  display: flex;
  gap: 4px;
}
.stock-bump .btn {
  min-width: 0;
  padding: 2px 7px;
}
.q-meta {
  margin-top: 2px;
  font-size: 11px;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  font-size: 12px;
  background: #f4ecdc;
  color: var(--text-sub);
}
.tag--on {
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.tag--new {
  background: #fff3cd;
  color: #856404;
}
.tag--off {
  background: var(--danger-soft);
  color: #8f3a2b;
}
/* 按状态细分的标签色（orders.js 在 tag 上追加 tag--st-<status>）。
 * 只特调有明确语义的几档，其余继承 tag--on 的朱砂淡底：
 * 待制作=暖橙（后厨要一眼捞出来）、待支付=中性、已完成=收灰、已取消=淡朱砂 */
.tag--st-making {
  background: #f9ebd9;
  color: #8f5a22;
}
.tag--st-unpaid {
  background: #f1eadb;
  color: #7a6b5c;
}
.tag--st-done {
  background: #f0e9da;
  color: #6e6053;
}
.tag--st-cancelled {
  background: var(--danger-soft);
  color: #8f3a2b;
}

/* 店员邀请扫码弹窗 */
.staff-invite-qr {
  text-align: center;
  margin: 0 0 14px;
}
.staff-invite-qr img {
  width: 200px;
  height: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.staff-invite-meta {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.7;
}
.staff-invite-meta b { color: var(--text); }
.staff-invite-actions {
  margin-top: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* 商品与库存：日期快捷芯片 */
.date-chip.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-deep);
}
.card__s .warn {
  color: var(--danger);
}
tbody tr.tr--stock-unset {
  background: #fffbe6;
}
tbody tr.tr--stock-low {
  background: #fff8f0;
}
tbody tr.tr--soldout {
  opacity: 0.72;
}

/* 订单详情：下单用户 openid 可选中复制 */
.user-openid {
  user-select: all;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.dsec__acts {
  margin: 8px 0 4px;
}

a {
  color: var(--primary-deep);
}

/* 主图 / Banner 预览。以前这里只放地址文本（那时候是 cloud:// 渲染不出来），
 * 现在 upload.image 给的是公开 https URL，直接出图。 */
.thumb {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--bg-sunken);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-sub);
  word-break: break-all;
}

/* cloud:// 地址很长，表格里限宽并允许折行，别把整行撑爆 */
.thumb-cell {
  max-width: 260px;
  word-break: break-all;
  font-size: 12px;
  color: var(--text-sub);
}

/* 预览图。给足能看清「换对没有」的尺寸，但不撑高表格行 */
.thumb__img {
  display: block;
  max-width: 200px;
  max-height: 72px;
  width: auto;
  height: auto;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  object-fit: contain;
}

/* 发货的行内表单，插在订单行下面。底色区分一下，别看着像另一条订单 */
.ship-row > td {
  background: var(--primary-faint);
}
.ship-row .field {
  margin: 0;
  flex-wrap: wrap;
}

/* 库存告警卡片。后端算好的「今天该补什么货」，值得一眼看到 */
.card--warn {
  border-left: 4px solid var(--primary);
}

/* 现代业务聚合 Tab 页签栏 */
.hub-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 20px;
  background: var(--card);
  padding: 8px 14px 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.hub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  border: none;
  background: transparent;
  position: relative;
  transition: color 0.15s ease;
  user-select: none;
}
.hub-tab:hover {
  color: var(--text);
}
.hub-tab--active {
  color: var(--primary-deep);
  font-weight: 700;
}
.hub-tab--active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -2px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.hub-tab__badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 700;
}
.hub-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* 白屏兜底提示。延迟 2.5 秒才显形 —— app.js 正常启动会先把这个节点删掉，
 * 所以正常情况下永远看不到；只有脚本真的没跑起来才会浮出来。 */
.boot-err {
  max-width: 520px;
  margin: 15vh auto 0;
  padding: 20px 24px;
  background: var(--card);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  box-shadow: var(--shadow);
  color: var(--text);
  line-height: 1.9;
  opacity: 0;
  animation: boot-err-in 0s linear 2.5s forwards;
}
@keyframes boot-err-in {
  to {
    opacity: 1;
  }
}

/* ── 看板的数字块 */
.tiles {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tile {
  flex: 1;
  min-width: 160px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.tile__v {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  font-family: var(--font-serif);
}
.tile__k {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 2px;
}

/* ── toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: rgba(63, 51, 43, 0.92);
  color: #fbf4e8;
  border-radius: var(--r-sm);
  font-size: 14px;
  z-index: 99;
}

/* ── 表单标签。改密弹窗用；登录页是 placeholder-only，那儿字段少还能认，
 * 但密码这种三个框长得一模一样的地方必须有可见 label。 */
.lbl {
  display: block;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--text-sub);
}

/* ── 订单列表的履约信息副行 ── */
/* 顾客备注要一眼看到 —— 漏看就是漏夹心愿卡/口味要求，所以用品牌色不用灰色 */
.o-remark {
  margin-top: 2px;
  color: var(--primary-deep);
  font-size: 12px;
  word-break: break-all;
}
/* 地址可以长；限个宽度折行，别把整行撑到横向滚动 */
.o-addr {
  max-width: 240px;
  word-break: break-all;
}

/* ── 订单详情弹窗 ── */
.modal__box--wide {
  width: min(680px, 100%);
}
.modal__box--wide .modal__body {
  max-height: min(62vh, 560px);
  overflow-y: auto;
}
.dhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.dsec__t {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}
.dkv {
  display: flex;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.55;
}
.dkv__k {
  flex: 0 0 76px;
  color: var(--text-weak);
}
.dkv__v {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}
.ditems th,
.ditems td {
  padding: 7px 10px;
}

/* ══════════════════════════════════════════════════════════════
 * 小屏。原来一条 @media 都没有：.side 写死 200px、.shell 是 flex、
 * 订单表 7 列还带 nowrap 且外面没有滚动容器 ——
 * iPad 竖屏（768）就整页横向滚动，筛选栏的两个下拉被压成只剩箭头，
 * 订单号搜索框直接跑到屏幕外。
 *
 * 断点选 900：再往下侧栏和内容抢不动宽度了，塌成顶部横条更划算。
 * ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .shell {
    flex-direction: column;
  }
  .side {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  /* 侧栏塌成顶栏后没有纵向往余摆云纹、印章也占高度，全部收起 */
  .side::before,
  .side__brand__seal,
  .main::after {
    display: none;
  }
  .side__brand {
    padding: 12px 16px;
    font-size: 18px;
  }
  /* 导航横向铺开、可横滑，不再吃掉一整列。
   * 注意必须显式写 flex-direction —— 基础样式里 .nav 是 column，
   * 只写 display:flex 会继续竖排（第一版就漏了这句，表现是侧栏塌到顶部了，
   * 但 9 个导航项还是竖着占掉一屏）。 */
  .nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__item {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 12px 14px;
    white-space: nowrap;
  }
  .nav__item--on {
    border-left-color: transparent;
    border-bottom-color: var(--primary);
  }
  .side__foot {
    padding: 10px 16px;
  }
  .side__foot > span {
    flex: 0 0 auto;
  }

  .main {
    min-width: 0;
  }
  .head,
  .view {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 筛选栏换行而不是互相挤压 */
  .field {
    flex-wrap: wrap;
  }
  .field input,
  .field select {
    min-width: 0;
  }

  /* 表格自己带横滚，页面不再整体横滚 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── 打印（今日备货页）。后厨要的是一张纸：只留生产单卡片，
 * 侧栏、顶栏、筛选和按钮都不上纸。带 .no-print 的元素在任何页面打印时都隐藏。 */
@media print {
  .side,
  .head,
  .no-print,
  .toast {
    display: none !important;
  }
  .main::after {
    display: none;
  }
  .shell {
    display: block;
  }
  .view {
    padding: 0;
  }
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    margin-bottom: 0;
  }
  th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* 生产单合计行：纸上加粗顶线，别让合计混进商品行里 */
.plan-total td {
  border-top: 2px solid var(--text-sub);
  font-weight: 600;
  background: var(--bg-warm);
}

/* ===================== 原料库存 ===================== */
/* 扫码条：输入框吃满剩余宽度，扫码枪/手输都落在这 */
.rm-scan {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}
.rm-scan__input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
}
.rm-scan__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* 列表工具栏：搜索 + 分类 + 低库存筛选 */
.rm-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rm-kw {
  flex: 1;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
}
.rm-cat {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
}
.rm-low {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
}

/* 原料 emoji 图标 */
.rm-emoji {
  font-size: 18px;
  margin-right: 4px;
}
.rm-emoji--lg {
  font-size: 34px;
  margin-right: 0;
}
.rm-bc {
  font-size: 12px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.rm-danger {
  color: var(--danger);
}
.rm-up {
  color: #2e7d5b;
}

/* 建档 / 编辑表单 */
.rm-form .modal__field {
  margin-bottom: 12px;
}
.rm-form .modal__field input,
.rm-form .modal__field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text);
  font-size: 14px;
}
.rm-form__row {
  display: flex;
  gap: 12px;
}
.rm-form__row .modal__field {
  flex: 1;
}

/* 详情弹窗 */
.rm-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.rm-detail__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.rm-detail__stat {
  display: flex;
  gap: 24px;
  padding: 14px 16px;
  background: var(--bg-warm);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.rm-detail__stat > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rm-detail__stat b {
  font-size: 16px;
  color: var(--text);
}
.rm-detail__acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rm-detail__logs .card__t {
  margin-bottom: 8px;
}

/* 摄像头扫码画面 */
.rm-cam {
  width: 100%;
  max-height: 360px;
  border-radius: var(--r-sm);
  background: #000;
  object-fit: cover;
}

/* 库存管理 · 与小程序同款卡片列表 */
.inv-toolbar {
  margin-bottom: 12px;
}
.inv-search {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.inv-search input {
  flex: 1;
  min-width: 0;
}
.inv-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.inv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.inv-card--dim {
  opacity: 0.65;
}
.inv-card__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-weak);
}
.inv-card__thumb .thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inv-card__body {
  flex: 1;
  min-width: 0;
}
.inv-card__name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 6px;
}
.inv-card__name:hover {
  color: var(--primary);
}
.inv-card__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.inv-avail {
  color: var(--primary-deep);
  font-weight: 700;
  font-style: normal;
}
.inv-avail--low {
  color: #e5484d;
}
.inv-card__extra {
  margin-top: 4px;
  font-size: 12px;
}
.inv-bump {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.inv-bump__btn {
  min-width: 44px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary);
  background: var(--card);
  color: var(--primary-deep);
  cursor: pointer;
}
.inv-bump__btn--on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.inv-bump__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* B方案：步进器 − / 数字 / + */
.inv-stepper {
  display: flex;
  align-items: center;
  background: #fff4e7;
  border: 1px solid #ffd9ae;
  border-radius: var(--r-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.inv-step {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
}
.inv-step--minus {
  color: var(--text-weak);
}
.inv-step--plus {
  color: var(--primary-deep);
}
.inv-step:hover {
  background: #ffe3c2;
}
.inv-step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-num {
  min-width: 44px;
  padding: 4px 2px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: none;
  border-left: 1px solid #ffd9ae;
  border-right: 1px solid #ffd9ae;
  cursor: pointer;
  line-height: 1.6;
}
.inv-num:hover {
  background: #fff8ee;
}
.inv-num--low {
  color: #e5484d;
}
.inv-num:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-card__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.inv-del {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  cursor: pointer;
}
.inv-del:hover {
  background: #fee2e2;
}
.inv-del:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  cursor: pointer;
}
.inv-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.inv-switch__ui {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background 0.15s;
  position: relative;
}
.inv-switch__ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.inv-switch input:checked + .inv-switch__ui {
  background: var(--primary);
}
.inv-switch input:checked + .inv-switch__ui::after {
  transform: translateX(18px);
}

/* ── 库存与商品 · 与 App goods.vue 同款交互 ── */
.main-seg {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--bg-warm);
}
.main-seg-item {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 8px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
}
.main-seg-item--on {
  background: var(--card);
  color: var(--primary-deep);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.main-seg-item .hub-tab__badge {
  margin-left: 4px;
}

.goods-sticky {
  margin-bottom: 12px;
}
.goods-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.goods-search input {
  flex: 1;
  min-width: 0;
}
.goods-sub-tools {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.goods-footnote {
  margin: 0;
  font-size: 12px;
}

.tool-drop {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
}
.tool-drop--active {
  border-color: var(--primary);
  background: var(--primary-faint);
}
.tool-drop__lbl {
  color: var(--text-weak);
  flex-shrink: 0;
}
.tool-drop__val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--primary-deep);
}
.tool-drop__caret {
  color: var(--text-weak);
  font-size: 11px;
}

.drop-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-width: 280px;
  max-height: 60vh;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.drop-menu--plan {
  right: 0;
  left: auto;
}
.drop-menu__hd {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-weak);
  background: var(--bg-sunken);
}
.drop-menu__sub {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 11px;
  color: var(--text-weak);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}
.drop-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.drop-menu__item:last-child {
  border-bottom: none;
}
.drop-menu__item:hover {
  background: var(--primary-faint);
}
.drop-menu__item--on {
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-weight: 700;
}

.inv-plan {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.day-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 0 8px;
  -webkit-overflow-scrolling: touch;
}
.day-cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 48px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: var(--bg-sunken);
  cursor: pointer;
  font: inherit;
}
.day-cell span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}
.day-cell--on {
  background: var(--card);
  box-shadow: var(--shadow);
}
.day-cell--on span {
  color: var(--primary-deep);
  font-weight: 800;
}

.cutoff-hint {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.45;
}
.cutoff-hint--slim {
  background: var(--bg-sunken);
  color: var(--text-sub);
}
.cutoff-hint--lock {
  background: var(--danger-soft);
  color: var(--danger);
}

.pre-print-btn {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--card);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer;
}
.pre-print-btn--on {
  border-color: var(--primary);
  background: var(--primary-faint);
  color: var(--primary-deep);
}

.pre-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pre-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
}
.pre-card--total {
  cursor: default;
  background: var(--primary-faint);
  border-color: var(--primary-soft);
}
.pre-card__main {
  flex: 1;
  min-width: 0;
}
.pre-card__name {
  display: block;
  font-weight: 700;
  font-size: 14px;
}
.pre-card__pill {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  background: var(--bg-sunken);
}
.pre-card__pill--plan {
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.pre-card__right {
  text-align: right;
  flex-shrink: 0;
}
.pre-card__paid {
  font-weight: 800;
  color: var(--primary-deep);
}
.pre-card__locked {
  display: block;
  font-size: 11px;
  color: var(--text-weak);
}

.pre-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 14px;
  text-align: center;
}
.pre-foot__btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(169, 67, 50, 0.28);
  cursor: pointer;
}
.pre-foot__btn:active {
  opacity: 0.92;
}
.pre-foot__sub {
  font-size: 11px;
}

/* 底部 sheet（云打印确认等） */
.modal--sheet {
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-sheet {
  width: min(480px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: var(--shadow-pop);
  animation: sheet-in 0.2s ease-out;
}
@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-sheet__hd {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.modal-sheet__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  font-size: 20px;
}
.modal-sheet__titles {
  flex: 1;
  min-width: 0;
}
.modal-sheet__title {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-serif);
}
.modal-sheet__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-sub);
}
.modal-sheet__body {
  margin-bottom: 16px;
}
.modal-sheet__actions {
  display: flex;
  gap: 10px;
}
.modal-sheet__actions .btn {
  flex: 1;
}

.print-preview {
  max-height: 240px;
  overflow: auto;
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.print-preview__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.print-preview__row:last-child {
  border-bottom: none;
}
.print-preview__name {
  font-weight: 700;
  font-size: 14px;
}
.print-preview__meta {
  margin-top: 4px;
  font-size: 12px;
}
.print-preview__more {
  padding: 8px 0 4px;
  text-align: center;
  font-size: 12px;
}
.print-empty {
  padding: 16px 12px;
  margin-bottom: 12px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  text-align: center;
}
.print-empty__title {
  font-weight: 700;
  font-size: 14px;
}
.print-empty__desc {
  margin-top: 6px;
  font-size: 12px;
}
.print-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.print-sum__val {
  font-weight: 800;
  font-size: 16px;
  color: var(--primary-deep);
}
.print-hint {
  margin: 0;
  font-size: 12px;
}

.pre-admin summary {
  cursor: pointer;
}