/* 小卖部进销存 —— 贴纸风设计系统
 *
 * 视觉取材于孩子们真正捏在手里的东西：辣条、薯片、脉动的包装袋。
 * 高饱和撞色、粗黑描边、硬投影（不模糊）、手写价签。
 * 不是马卡龙糖果色 —— 那是儿童 App 的默认答案，跟零食柜没关系。
 *
 * 手机优先：所有尺寸从 375px 起步，触控目标 ≥44px。
 */

:root {
  /* 取自真实零食包装 */
  --latiao:  #E63946;  /* 辣条红 —— 主行动色 */
  --maidong: #1D71B8;  /* 脉动蓝 */
  --shupian: #FFC93C;  /* 薯片黄 —— 价格与强调 */
  --xuebi:   #2EC4B6;  /* 汽水绿 —— 成功、库存充足 */
  --putao:   #7B5EA7;  /* 葡萄紫 */
  --ink:     #1A1A1A;  /* 所有描边都是这个 */
  --paper:   #FFFDF7;  /* 包装纸的暖白 */
  --smudge:  #6B6560;  /* 次要文字 */

  --stroke: 3px;
  --radius: 18px;
  --lift: 4px;         /* 硬投影的偏移量 */

  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  --tap: 48px;         /* 最小触控目标 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  /* 洞洞板 —— 小卖部货架的底纹 */
  background-image: radial-gradient(circle, rgba(26,26,26,.07) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 96px;  /* 给底部购物车条让位 */
}

/* ─── 贴纸：所有卡片和按钮的基底 ───────────────────────── */

.sticker {
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}

/* 按下去，像真的按了一张贴纸 */
.pressable {
  transition: transform .08s ease, box-shadow .08s ease;
}
.pressable:active {
  transform: translate(var(--lift), var(--lift));
  box-shadow: 0 0 0 var(--ink);
}

/* ─── 标题：辣条包装上的那种字 ─────────────────────────── */

.packshot {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--shupian);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}

h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ─── 按钮 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: var(--tap);
  padding: 0 1.2em;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;  /* .btn 也用在 <a> 上 */
  background: var(--latiao);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: translate(var(--lift), var(--lift));
  box-shadow: 0 0 0 var(--ink);
}
.btn:focus-visible { outline: 3px solid var(--maidong); outline-offset: 3px; }
.btn:disabled { opacity: .45; pointer-events: none; }

.btn--blue   { background: var(--maidong); }
.btn--green  { background: var(--xuebi); }
.btn--yellow { background: var(--shupian); color: var(--ink); }
.btn--ghost  { background: #fff; color: var(--ink); }
.btn--big    { width: 100%; min-height: 62px; font-size: 1.25rem; }

/* ─── 价签：黄底黑描边，钉在贴纸角上 ────────────────────── */

.pricetag {
  display: inline-block;
  padding: .15em .55em;
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--shupian);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  transform: rotate(-3deg);
  white-space: nowrap;
}
.pricetag--lg { font-size: 1.6rem; padding: .1em .5em; }

/* ─── 顶栏 ─────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--paper);
  border-bottom: var(--stroke) solid var(--ink);
}
.topbar__title { display: flex; align-items: center; gap: .4rem; font-size: 1.3rem; font-weight: 900; }
.topbar__link {
  min-height: 40px;
  padding: 0 .9em;
  display: inline-flex;
  align-items: center;
  font-size: .92rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}

main { padding: 1rem; max-width: 720px; margin: 0 auto; }

/* ─── 桌面：把页面裱成一扇柜门 ─────────────────────────────
 *
 * 这是个手机应用 —— 同学们站在柜子前面掏手机。但管理员会用笔记本看库存，
 * 而且大屏上"内容缩在中间一条、两边空掉一半"看着就像坏了。
 *
 * 解法不是把内容拉满 1440px（那样一排塞十几张卡，卡片相对屏幕又小又碎，
 * 扫码按钮会变成一条一米长的药丸）。而是让空白变成有意的：把内容裱成一块
 * 厚边框的面板，浮在洞洞板背景上 —— 那正是同学们面对的那扇贴满贴纸的柜门。
 */
@media (min-width: 768px) {
  main {
    max-width: 940px;
    margin: 1.6rem auto 2.5rem;
    padding: 1.6rem 1.8rem 2rem;
    background: #fff;
    border: var(--stroke) solid var(--ink);
    border-radius: 26px;
    box-shadow: 8px 8px 0 var(--ink);
  }

  /* 桌面上卡片放大，一排 5–6 张，别碎成一地 */
  .grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 1.3rem 1rem; }
  .snack { min-height: 172px; }
  .snack__emoji { font-size: 3.2rem; }
  .snack__name { font-size: 1rem; }

  /* 整块宽度的按钮在大屏上会拉成巨型药丸 —— 收住并居中。
     必须改成块级 flex：.btn 默认是 inline-flex，margin auto 对行内元素不居中。 */
  .btn--big,
  #manual > summary.btn {
    display: flex;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 底部购物车条仍然通栏（它是屏幕底边），但内容跟柜门对齐 */
  .cartbar { padding-inline: max(1.5rem, calc((100vw - 940px) / 2 + 1.8rem)); }
}

/* ─── 商品贴纸网格 ─────────────────────────────────────── */

/* 手机上刻意只排 3 列。4 列时卡片才 80px 宽，小学生的手指点不准。 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 1.1rem .8rem;
}
@media (max-width: 430px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.snack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  min-height: 148px;   /* 名字长短不一时，卡片高度也要齐 */
  padding: .9rem .5rem .75rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  cursor: pointer;
  text-align: center;
  transition: transform .1s ease, box-shadow .1s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 每张贴纸歪一点点，像手贴上去的。角度靠 nth-child 循环，不用 JS。 */
.snack:nth-child(3n+1) { transform: rotate(-1.4deg); }
.snack:nth-child(3n+2) { transform: rotate(.9deg); }
.snack:nth-child(3n)   { transform: rotate(-.5deg); }

.snack:active { transform: rotate(0) translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); }
.snack:focus-visible { outline: 3px solid var(--maidong); outline-offset: 3px; }

/* 图标垫一个彩色圆底。
 *
 * emoji 自己的颜色是改不了的 —— 它们是字体里画好的彩色字形，CSS 的 color 碰不到。
 * 但一堆五颜六色的 emoji 直接贴在白卡上，各自为政，一整片看着就是乱。垫一个统一
 * 形状的底，货架立刻有节奏，也更像"贴纸"。
 *
 * 底色按 sku_id 取（见 shop.html），所以同一个商品的颜色永远不变 —— 同学是靠
 * "那个蓝色的"来记东西的，颜色乱跳比没有颜色更糟。
 *
 * 照片也裁成同样的圆 + 同样的黑边，不然有照片的和没照片的会像两套系统。
 */
.snack__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 2.2rem;
  line-height: 1;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}
.snack__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
}

/* 五个主题色的浅版 —— 底太深 emoji 就看不清了 */
.snack--c0 .snack__emoji { background: #FFD9DC; }  /* 辣条红 */
.snack--c1 .snack__emoji { background: #CFE4F7; }  /* 脉动蓝 */
.snack--c2 .snack__emoji { background: #FFF0C2; }  /* 薯片黄 */
.snack--c3 .snack__emoji { background: #D3F5F1; }  /* 汽水绿 */
.snack--c4 .snack__emoji { background: #E5DDF2; }  /* 葡萄紫 */
.snack__name  { font-size: .9rem; font-weight: 800; line-height: 1.25; }
.snack__price { margin-top: .15rem; }

/* 还剩几个。快没了就变红 —— 「只剩 2 个」比「在库 2」更能让人赶紧下手 */
.snack__stock     { font-size: .72rem; font-weight: 700; color: var(--smudge); }
.snack__stock--low { color: var(--latiao); font-weight: 900; }

/* 库存不足：盖一层灰，钉一个"卖光了"角标 */
.snack--out { opacity: .5; cursor: not-allowed; }
.snack__sold-out {
  position: absolute;
  top: -10px;
  right: -6px;
  padding: .1em .5em;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  transform: rotate(8deg);
}

/* 已加入购物车的数量角标 */
.snack__badge {
  position: absolute;
  top: -11px;
  left: -8px;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 900;
  color: #fff;
  background: var(--latiao);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  animation: pop .28s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ─── 底部购物车条 ─────────────────────────────────────── */

.cartbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--shupian);
  border-top: var(--stroke) solid var(--ink);
  transform: translateY(110%);
  transition: transform .22s cubic-bezier(.34, 1.3, .64, 1);
}
.cartbar--open { transform: translateY(0); }
.cartbar__count { font-size: .95rem; font-weight: 800; }
.cartbar__total { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cartbar__spacer { flex: 1; }

/* 件数/总价整块可点 —— 点开袋子抽屉。虚线框是在说「这儿能点」。 */
.cartbar__peek {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .05rem;
  padding: .3rem .55rem;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 2px dashed rgba(26, 26, 26, .4);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cartbar__peek:active { transform: translate(1px, 1px); background: rgba(26, 26, 26, .06); }
.cartbar__peek .cartbar__count::after { content: " ›"; font-weight: 900; }

/* 抽屉底部的合计+结算，滚动时钉住 */
.drawer__foot {
  position: sticky;
  bottom: 0;
  margin-top: 1rem;
  padding-top: .8rem;
  background: var(--paper);
}

/* ─── 购物车明细 / 数量加减 ─────────────────────────────── */

.line {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem;
  margin-bottom: .7rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}
.line__emoji { font-size: 1.9rem; }
.line__body  { flex: 1; min-width: 0; }
.line__name  { font-weight: 800; }
.line__unit  { font-size: .85rem; color: var(--smudge); }

.stepper { display: flex; align-items: center; gap: .35rem; }
.stepper__btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stepper__btn:active { transform: translate(2px, 2px); }
.stepper__n { min-width: 30px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ─── 表单 ─────────────────────────────────────────────── */

label { display: block; margin-bottom: .35rem; font-weight: 800; font-size: .95rem; }

input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--shupian);
}
.field { margin-bottom: 1rem; }
.field__hint { margin-top: .3rem; font-size: .85rem; color: var(--smudge); }

/* ─── 右侧抽屉 ─────────────────────────────────────────── */
/* 长列表（160 个图标、几十个商品）绝不能摊在表单里 —— 会把「数量」「进价」
   这些真正要填的字段挤到屏幕外面。收进抽屉，用的时候才滑出来。 */

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(88vw, 440px);
  background: var(--paper);
  border-left: var(--stroke) solid var(--ink);
  transform: translateX(101%);   /* 101% 保证描边也藏干净 */
  transition: transform .26s cubic-bezier(.32, .9, .38, 1);
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  font-size: 1.15rem;
  background: var(--shupian);
  border-bottom: var(--stroke) solid var(--ink);
}
.drawer__close {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  font-weight: 900;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drawer__close:active { transform: translate(2px, 2px); }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.drawer__sep {
  margin: 1.1rem 0 .7rem;
  font-size: .82rem;
  font-weight: 800;
  color: var(--smudge);
  text-align: center;
}
.drawer__sep::before,
.drawer__sep::after {
  content: "";
  display: inline-block;
  width: 22px;
  margin: 0 .5rem;
  border-top: 2px dashed #cfc9c0;
  vertical-align: middle;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(26, 26, 26, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-backdrop.is-on { opacity: 1; pointer-events: auto; }

body.drawer-locked { overflow: hidden; }

/* ─── 抽屉的触发器：一行，显示当前值 ────────────────────── */

.trigger {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.trigger:active { transform: translate(1px, 1px); }
.trigger::placeholder { color: var(--smudge); font-weight: 600; }
.trigger__emoji { font-size: 1.7rem; line-height: 1; }
.trigger__label { flex: 1; font-weight: 700; color: var(--smudge); }
.trigger__arrow { font-size: 1.5rem; font-weight: 900; color: var(--smudge); }

/* 选中照片时，trigger 左边把 emoji 换成真的缩略图 */
.trigger__thumb {
  width: 2.1rem;
  height: 2.1rem;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
}

/* ─── 选择图片：只在图标抽屉顶部（表单里那个已经收进抽屉了） ─── */

.photo-pick {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  margin-bottom: .6rem;
  padding: .8rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  text-align: left;
  background: var(--xuebi);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.photo-pick:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.photo-pick__icon { font-size: 1.7rem; }
.photo-pick__text { display: flex; flex-direction: column; }
.photo-pick__text small { font-weight: 600; font-size: .78rem; opacity: .75; }

/* ─── 已进过的商品：名字抽屉里的可点行 ───────────────────── */

.sku-pick {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: .5rem;
  padding: .6rem .7rem;
  font-family: inherit;
  text-align: left;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sku-pick:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.sku-pick__emoji { font-size: 1.8rem; }
.sku-pick__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sku-pick__name { font-weight: 800; }
.sku-pick__meta { font-size: .8rem; color: var(--smudge); font-variant-numeric: tabular-nums; }

/* ─── 图标网格（住在抽屉里） ────────────────────────────── */

.picker__group + .picker__group { margin-top: .9rem; }
.picker__label {
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--smudge);
}
.picker__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: .35rem;
}
.picker__item {
  aspect-ratio: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  background: var(--paper);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease;
}
.picker__item:active { transform: scale(.88); }
.picker__item.is-picked {
  background: var(--shupian);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transform: scale(1.06);
}
.picker__item:focus-visible { outline: 3px solid var(--maidong); outline-offset: 1px; }

/* 抽屉里的图标格子可以大一点 —— 有整屏高度可用 */
#iconDrawer .picker__row { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
#iconDrawer .picker__item { min-height: 52px; font-size: 1.8rem; }

/* ─── 提示条 ───────────────────────────────────────────── */

.note {
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  font-size: .95rem;
  font-weight: 600;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #fff;
}
.note--warn  { background: #FFF0C2; }
.note--bad   { background: #FFD9DC; }
.note--good  { background: #D3F5F1; }

/* 还在用初始密码时挂在每页顶上。它在 <main> 外面，所以得自己复刻 main 的宽度和留白。 */
.nag { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 0; }
.nag .note { margin-bottom: 0; }

/* ─── 弹窗：替掉系统 alert（见 modal.js） ──────────────────
 *
 * z-index 压过抽屉（60）—— 抽屉里的操作也会弹它。
 */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(26, 26, 26, .5);
  animation: modal-fade .15s ease;
}

.modal {
  width: 100%;
  max-width: 330px;
  padding: 1.5rem 1.2rem 1.2rem;
  text-align: center;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
  animation: modal-pop .18s cubic-bezier(.2, 1.3, .5, 1);
}

.modal__icon { font-size: 3.6rem; line-height: 1; }
.modal__img {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  object-fit: cover;
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
}
.modal__title { margin: .55rem 0 .25rem; font-size: 1.35rem; font-weight: 900; line-height: 1.25; }
/* pre-line：弹窗文案里的换行要生效（扫错条码那种提示需要分段） */
.modal__text  { margin: 0; font-size: 1rem; font-weight: 600; color: var(--smudge); line-height: 1.5; white-space: pre-line; }
.modal__code  {
  display: inline-block;
  margin: .5rem 0;
  padding: .25rem .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--shupian);
  border: 2px solid var(--ink);
  border-radius: 8px;
}

.modal__actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.modal__actions .btn { flex: 1; min-height: 52px; }

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop  { from { transform: scale(.88) translateY(10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
}

/* ─── 管理端：同一套语言，但收敛。这是干活的地方。 ────────── */

.admin-nav {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .7rem 1rem;
  border-bottom: var(--stroke) solid var(--ink);
  background: var(--paper);
}
.admin-nav a {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 .95em;
  display: inline-flex;
  align-items: center;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}
.admin-nav a.is-active { background: var(--ink); color: var(--shupian); }

.row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .8rem;
  margin-bottom: .6rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.row__emoji { font-size: 1.8rem; }
.row__body { flex: 1; min-width: 0; }
.row__name { font-weight: 800; }
.row__meta { font-size: .82rem; color: var(--smudge); font-variant-numeric: tabular-nums; }
.row__profit { color: var(--xuebi); font-weight: 900; }
.row--low { background: #FFF0C2; }

/* ─── 商品图：有照片就用照片，没有才用 emoji ────────────────
 *
 * 规则必须在**所有**显示商品的地方一致。原来只有顾客货架实现了这条，库存页、
 * 对账页、购物袋、进货抽屉全都只画 emoji —— 结果是你换了张照片，货架变了、
 * 别的地方纹丝不动，只会以为没生效。
 *
 * 每个尺寸对齐它所在位置 emoji 的字号（见上面的 .row__emoji 等）。
 */
.row__img,
.sku-pick__img {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.line__img {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
/* 对账页的商品是一行文本摘要（🍟卫龙辣条×2 · …），图得跟文字同高，别撑破行 */
.inline-img {
  width: 1.25em;
  height: 1.25em;
  object-fit: cover;
  vertical-align: -.25em;
  border: 1px solid var(--ink);
  border-radius: 4px;
}
/* 已下架：淡下去，但整行照样能点开抽屉（重新上架 / 改名 / 删除都在里面） */
.row--archived { opacity: .55; }
.row--archived:active { opacity: .75; }
/* 库存行现在是个按钮（点开抽屉）—— 抹掉按钮默认样式，只留贴纸卡外观 */
button.row { width: 100%; font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.row:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* ─── 库存抽屉：操作菜单 + 各动作面板 ───────────────────── */

.sku-stat {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  background: var(--shupian);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
}
.sku-stat__n { font-size: 2.2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sku-stat__label { font-size: .82rem; font-weight: 700; }

.act-menu { display: flex; flex-direction: column; gap: .6rem; }
.act {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 56px;
  padding: .7rem 1rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  text-align: left;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.act:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.act span { font-size: 1.5rem; }
.act small { display: block; font-size: .74rem; font-weight: 600; color: var(--smudge); }
.act--danger { color: var(--latiao); }

/* 删除的确认按钮：红底，跟"确认"区分开 */
.act--danger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  font-family: inherit; font-size: 1.05rem; font-weight: 800;
  color: #fff; background: var(--latiao);
  border: var(--stroke) solid var(--ink); border-radius: 999px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink); cursor: pointer;
}
.act--danger-btn:active { transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); }

.act-panel h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.confirm__q { font-size: 1.15rem; font-weight: 700; line-height: 1.5; margin-bottom: 1rem; }

.hist { margin-top: 1.2rem; }
.hist > summary {
  list-style: none; cursor: pointer;
  padding: .6rem .8rem;
  font-weight: 800; font-size: .92rem; color: var(--smudge);
  background: #fff; border: 2.5px dashed #cfc9c0; border-radius: 12px;
}
.hist > summary::-webkit-details-marker { display: none; }
.hist__body { padding: .8rem .2rem; }
.hist__body h3 { font-size: .95rem; margin: .8rem 0 .35rem; }
.hist__body h3:first-child { margin-top: .3rem; }

.onhand { text-align: center; font-variant-numeric: tabular-nums; }
.onhand__n { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.onhand__label { font-size: .7rem; color: var(--smudge); }
.onhand--low .onhand__n { color: var(--latiao); }

/* ─── 对账板 ───────────────────────────────────────────── */
/* 管理员开这页只干一件事：翻微信账单，把金额对上。
   所以顶部要一眼讲完今天的全貌 —— 收到多少、丢了多少、还剩多少没核对。
   四个等宽方块做不到这个：它把最重要的东西和最次要的摆成一样大。 */

.tally {
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.tally__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.tally__label { font-size: .78rem; font-weight: 800; color: var(--smudge); }
.tally__big {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tally__todo { text-align: right; }
.tally__todonum {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--latiao);
  font-variant-numeric: tabular-nums;
}
.tally__todo--clear .tally__todonum { color: var(--xuebi); }

/* 一条进度条 = 今天的全部故事 */
.bar {
  display: flex;
  height: 18px;
  overflow: hidden;
  background: #EDE8E0;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
}
.bar__seg { height: 100%; }
.bar__seg + .bar__seg { border-left: 2px solid var(--ink); }
.bar__seg--ok   { background: var(--xuebi); }
.bar__seg--bad  { background: var(--latiao); }
.bar__seg--wait { background: var(--shupian); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin-top: .6rem;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dot {
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: .3rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  vertical-align: baseline;
}
.dot--ok   { background: var(--xuebi); }
.dot--bad  { background: var(--latiao); }
.dot--wait { background: var(--shupian); }

.section {
  margin: 1.4rem 0 .7rem;
  font-size: 1.05rem;
  font-weight: 800;
}

/* ─── 区间选择：日 / 7天 / 30天 + 翻日期 ─────────────────── */

.rangebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .8rem;
}
.seg {
  display: flex;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink);
}
.seg a {
  min-height: 40px;
  padding: 0 .95em;
  display: inline-flex;
  align-items: center;
  font-size: .92rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
}
.seg a + a { border-left: 2.5px solid var(--ink); }
.seg a.is-on { background: var(--ink); color: var(--shupian); }

.datenav { display: flex; align-items: center; gap: .3rem; }
.datenav__arrow {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
}
.datenav__arrow.is-off { opacity: .3; }
.datenav input[type=date] {
  width: auto;
  min-height: 40px;
  padding: 0 .5rem;
  font-size: .9rem;
  font-weight: 700;
  border-width: 2.5px;
  border-radius: 10px;
}

/* ─── 赚了多少 ─────────────────────────────────────────── */
/* 进价一直在记，那就得把利润算出来。关键是坏账要单独扣：
   东西被拿走了、成本花掉了、钱没收到 —— 那是双份的亏，不是"少赚"。 */

.pnl {
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.pnl__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pnl__line b { font-size: 1.1rem; font-weight: 900; }
.pnl__line small { font-weight: 700; color: var(--smudge); }
.pnl__line--sum {
  margin-top: .3rem;
  padding-top: .5rem;
  border-top: 2.5px solid var(--ink);
}
.pnl__line--sum b { font-size: 1.5rem; }
.pnl__cost { color: var(--smudge); }
.pnl__neg { color: var(--latiao); }
.pnl__lost {
  margin-top: .8rem;
  padding: .6rem .8rem;
  background: #FFF1F2;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}
.pnl__note { margin-top: .4rem; font-size: .78rem; color: var(--smudge); }

/* ─── 每天卖了多少（跨多天时才显示） ───────────────────── */

.days {
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
}
.days__title { margin-bottom: .5rem; font-size: .85rem; font-weight: 800; color: var(--smudge); }
.days__row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .18rem 0;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.days__date { flex: 0 0 42px; color: var(--smudge); }
.days__bar { flex: 1; height: 12px; background: #EDE8E0; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.days__bar i { display: block; height: 100%; background: var(--maidong); }
.days__amt { flex: 0 0 46px; text-align: right; font-weight: 800; }

/* ─── 改判：已核对过的也能改，人会看错账单 ───────────────── */

.fix { margin-bottom: .7rem; }
.fix > summary { list-style: none; cursor: pointer; }
.fix > summary::-webkit-details-marker { display: none; }
.fix > summary .bill--done { margin-bottom: 0; }
.fix[open] > summary .bill--done { border-radius: 16px 16px 0 0; box-shadow: none; }
.fix__panel {
  padding: .8rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.fix__panel .bill__actions { flex-wrap: wrap; margin-top: 0; }
.fix__panel .btn { flex: 1 1 40%; min-height: 44px; font-size: .92rem; }
.fix--lost > summary .bill--done { background: #FFF1F2; }

/* ─── 账单卡：金额是主角（那是你拿去跟微信账单比对的东西） ──── */

.bill {
  padding: .9rem;
  margin-bottom: .7rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.bill__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.bill__amount {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* 订单号后 4 位 = 顾客写进转账备注的那个查找键。醒目，但不跟金额抢 */
.bill__key {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  background: var(--shupian);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
}
.bill__keylabel { font-size: .72rem; font-weight: 800; }
.bill__key b { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* 顾客自己说忘写备注了 —— 这一笔管理员只能靠金额+时间去认，得让他一眼看见 */
.bill--nomemo { background: #FFF7E0; }
.bill__key--none { background: var(--latiao); color: #fff; }
.bill__key--none .bill__keylabel { font-size: .8rem; }

.bill__meta { margin-top: .35rem; font-size: .82rem; color: var(--smudge); }
.bill__items { margin-top: .3rem; font-size: .88rem; font-weight: 600; }

.bill__actions { display: flex; gap: .5rem; margin-top: .8rem; }
.bill__actions .btn { flex: 1; min-height: 46px; font-size: 1rem; }

/* 已核对过的：安静下来，别跟待办的抢注意力 */
.bill--done {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  box-shadow: 2px 2px 0 var(--ink);
  border-width: 2.5px;
}
.bill--done .dot { flex: 0 0 auto; }
.bill--lost { background: #FFF1F2; }
.bill__body { flex: 1; min-width: 0; }
.bill__doneline {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.bill__verdict {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  color: var(--smudge);
}

details.drill { margin-bottom: .6rem; }
details.drill > summary { list-style: none; cursor: pointer; }
details.drill > summary::-webkit-details-marker { display: none; }
.drill__panel {
  padding: .8rem;
  margin: -.3rem 0 .6rem;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-top: none;
  border-radius: 0 0 14px 14px;
}
.drill__panel h3 { font-size: .95rem; margin: .6rem 0 .35rem; }
.drill__panel h3:first-child { margin-top: 0; }
.drill__line {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .35rem 0;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed #ddd;
}
.drill__line:last-child { border-bottom: none; }
.drill__when { color: var(--smudge); }
.muted { color: var(--smudge); font-size: .9rem; }

/* ─── 分页（审计日志跑一学期就是几千条） ─────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: 1rem;
}
.pager__btn {
  min-height: 42px;
  padding: 0 .9em;
  display: inline-flex;
  align-items: center;
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}
.pager__btn.is-off { opacity: .35; box-shadow: none; }
.pager__at { font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ─── 扫码器 ───────────────────────────────────────────── */

.scanner { position: relative; margin-bottom: 1rem; display: none; }
.scanner.is-on { display: block; }
.scanner video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
}
/* 取景框：四个角，像相机的对焦框 */
.scanner__frame {
  position: absolute;
  inset: 14%  8%;
  border: 3px solid var(--shupian);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(26,26,26,.35);
  pointer-events: none;
}
.scanner__hit {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--xuebi);
  opacity: 0;
  pointer-events: none;
}
.scanner__hit.flash { animation: flash .4s ease-out; }
@keyframes flash {
  0%   { opacity: .85; }
  100% { opacity: 0; }
}

.center { text-align: center; }
.stack > * + * { margin-top: .8rem; }
.spacer { height: 1.2rem; }

/* ─── 结算页 ───────────────────────────────────────────── */

.orderno {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.orderno b {
  padding: .1em .3em;
  font-size: 1.5rem;
  font-weight: 900;
  background: var(--shupian);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
}
.qr {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  background: #fff;
}
.bigtotal {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--latiao);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

/* ─── 底部弹层（付款前问备注） ───────────────────────────── */

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  max-height: 88vh;
  overflow-y: auto;
  padding: .8rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--stroke) solid var(--ink);
  border-radius: 26px 26px 0 0;
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.32, .9, .38, 1);
  overscroll-behavior: contain;
}
.sheet.is-open { transform: translateY(0); }
.sheet__grip {
  width: 46px; height: 5px;
  margin: 0 auto .9rem;
  background: var(--ink);
  border-radius: 999px;
  opacity: .25;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(26, 26, 26, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.sheet-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* 那 4 个数字 —— 管理员对账时唯一能认出你的东西 */
.memo-code {
  display: inline-block;
  padding: .1em .45em;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  background: var(--shupian);
  border: var(--stroke) solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* ─── 付款凭证（忘写备注时，截图发群用） ─────────────────── */

.receipt {
  padding: 1rem;
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
}
.receipt__title {
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  font-size: 1rem;
  font-weight: 900;
  border-bottom: 2.5px dashed #cfc9c0;
}
.receipt__amount {
  margin-bottom: .7rem;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--latiao);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.receipt__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .7rem;
  font-size: .88rem;
}
.receipt__grid span { color: var(--smudge); font-weight: 700; white-space: nowrap; }
.receipt__grid b { font-weight: 800; word-break: break-word; }
.receipt__warn {
  margin-top: .8rem;
  padding: .5rem .7rem;
  font-size: .85rem;
  font-weight: 800;
  background: #FFF0C2;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
}

/* ─── 无障碍 ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .snack { transform: none !important; }
}