/* 店务系统的样式（2026-10-23 改版）。方向照 Andy 选的「方案页」：纸色底、深紫主色、直角、价签吊牌。
   字：中文和界面一律用系统黑体（苹方 / SF），金额用 Newsreader，编号用 Red Hat Mono。
   版式：同一页三种宽度——手机（< 700）单栏 + 底部标签栏；iPad（700–1099）顶部导航；电脑（≥ 1100）左侧导航 + 多栏。
   页面用下面「版式部件」一节的 class 搭：.page / .page-head / .cols / .panel / .list / .dtable / .toolbar，不要再写满屏的行内样式。 */
/* 字体在各页 html 的 <head> 里用 <link> 加载（预连接，比 @import 早开始拉）：后台壳 app/index.html、客人页 index.html / i.html / r.html。 */

:root{
  --paper:#f5f3ef; --paper-2:#eeebe5; --sheet:#fffdf9; --white:#ffffff; --bar:#f5f3ef; --tile:#ebe6de;
  --ink:#1d1b19; --muted:#69635b; --faint:#736c63; --line:#e2ddd5; --line-soft:#eeeae4; --line-strong:#9a9286;
  --plum:#5a3253; --plum-2:#43243e; --plum-soft:#f3ebf1; --plum-line:#dccbd7;
  --stage:#2b1828; --stage-2:#3a2236; --stage-ink:#f5eef3; --stage-muted:#c9b6c4; --stage-line:#4a3346;
  --good:#2e6a4c; --good-soft:#e6f0ea; --warn:#8a5a0b; --warn-soft:#f7eedc; --bad:#9b2c2c; --bad-soft:#f8e6e3; --info:#2f4a7a; --info-soft:#e8edf5;
  --geo-core:#2a1430; --geo-deep:#5b2d7a; --geo-mid:#9a6cc4; --geo-light:#dcc9ec; --geo-rim:#cfc3b2; --geo-shell:#7b6a58;
  --f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --f-display:"Newsreader","PingFang SC","Noto Sans SC",serif;
  --f-mono:"Red Hat Mono","SF Mono",ui-monospace,Menlo,monospace;
  --gutter:16px; --rail:232px;
}
@media (min-width:700px){ :root{ --gutter:24px; } }
/* 手机横过来：左右要让开灵动岛和圆角（页面开了 viewport-fit=cover，iOS 横屏左右安全区一样宽）。iOS 模拟器实测：页头、金额压在灵动岛下面 */
@media (orientation:landscape) and (max-height:500px){ :root{ --gutter:max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); } }
@media (min-width:1100px){ :root{ --gutter:32px; } }
@media (min-width:1100px) and (max-width:1279px){ :root{ --rail:76px; } }

.scr{box-sizing:border-box;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-size-adjust:100%;}
.scr *,.scr *::before,.scr *::after{box-sizing:border-box;}
/* 基础重置用 :where() 压低优先级：页面自己写的 class 总能盖过它。 */
:where(.scr) :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;}
:where(.scr) :where(ul,ol){padding:0;list-style:none;}
:where(.scr) :where(button,input,select,textarea){font:inherit;color:inherit;}
:where(.scr) img{display:block;}

/* 字 */
.disp{font-family:var(--f-display);font-weight:600;letter-spacing:-.005em;}
.mono{font-family:var(--f-mono);font-weight:500;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.small{font-size:13px;}
.xs{font-size:12px;}
.b{font-weight:600;}
.num{font-variant-numeric:tabular-nums;}
.plum{color:var(--plum);}
.good{color:var(--good);} .warn{color:var(--warn);} .bad{color:var(--bad);} .info{color:var(--info);}
.eyebrow{font-size:12px;font-weight:600;color:var(--plum);}
.sec{font-size:13px;font-weight:600;color:var(--muted);}
.nowrap{white-space:nowrap;}
.right{text-align:right;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;background:var(--white);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .12s,border-color .12s;}
.btn.pri{background:var(--plum);color:var(--white);}
.btn.go{background:var(--plum);color:var(--white);} /* 2026-10-24 设计审查：主按钮一律深紫，绿色只表示「已到账 / 已完成」的状态 */
.btn.ink{background:var(--ink);color:var(--white);}
.btn.line{border-color:var(--line-strong);background:var(--white);}
.btn.warnline{border-color:var(--warn);color:var(--warn);background:var(--white);}
.btn.badline{border-color:var(--bad);color:var(--bad);background:var(--white);}
.btn.quiet{background:transparent;color:var(--muted);font-weight:600;padding:0 8px;}
.btn.lg{min-height:56px;font-size:17px;padding:0 22px;}
.btn.sm{min-height:34px;padding:0 12px;font-size:13px;}
.btn.block{display:flex;width:100%;}
button.link{display:inline;min-height:0;padding:0 2px;border:0;background:none;color:var(--plum);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.btn[disabled]{background:var(--line-soft);color:var(--faint);border-color:transparent;cursor:default;}
.btn[disabled]:hover{background:var(--line-soft);color:var(--faint);} /* 灰掉的主按钮鼠标放上去别再变回深紫 */
.scr a.btn.pri,.scr a.btn.go,.scr a.btn.ink{color:var(--white);}
.scr a.btn.line,.scr a.btn.quiet{color:var(--ink);}

/* 小标签 */
.chip{display:inline-flex;width:fit-content;align-items:center;gap:4px;padding:0 7px;font-size:12px;font-weight:600;line-height:20px;border:1px solid currentColor;white-space:nowrap;}
.chip.good{color:var(--good);background:var(--good-soft);border-color:transparent;}
.chip.warn{color:var(--warn);background:var(--warn-soft);border-color:transparent;}
.chip.bad{color:var(--bad);background:var(--bad-soft);border-color:transparent;}
.chip.info{color:var(--info);background:var(--info-soft);border-color:transparent;}
.chip.plum{color:var(--plum);background:var(--plum-soft);border-color:transparent;}
.chip.mute{color:var(--muted);background:var(--paper-2);border-color:transparent;}

/* 编号吊牌：货架上价签的样子（品牌记号，一行只出现一次） */
.tag{display:inline-flex;width:fit-content;align-items:center;gap:6px;font-family:var(--f-mono);font-weight:700;font-size:13px;letter-spacing:.02em;background:var(--white);color:var(--ink);border:1px solid var(--ink);padding:0 7px 0 6px;line-height:21px;white-space:nowrap;}
.tag::before{content:"";width:6px;height:6px;border:1px solid var(--ink);border-radius:50%;flex:none;}
.tag.lg{font-size:16px;line-height:28px;padding:0 10px 0 8px;}
.tag.sm{font-size:12px;line-height:18px;padding:0 5px 0 4px;gap:4px;}
.tag.sm::before{width:5px;height:5px;}

/* 照片和没照片时的占位 */
.ph{background:var(--tile);overflow:hidden;flex:none;position:relative;}
.ph.noph{background:#ebe7e0;} /* 没照片的占位：平的浅灰，不画假晶洞 */
.ph img{width:100%;height:100%;object-fit:cover;}
.geo{background:radial-gradient(ellipse 44% 41% at 50% 54%, var(--geo-core) 0 22%, var(--geo-deep) 30%, var(--geo-mid) 52%, var(--geo-light) 70%, var(--geo-rim) 80%, var(--geo-shell) 92%, transparent 100%), var(--tile);flex:none;}
.geo.cit{background:radial-gradient(ellipse 42% 42% at 50% 52%, #5a3a0c 0 18%, #a86a14 30%, #dca33a 52%, #f5e2a8 70%, var(--geo-rim) 80%, var(--geo-shell) 92%, transparent 100%), var(--tile);}
.geo.ag{background:radial-gradient(ellipse 38% 44% at 50% 50%, #1f3a48 0 16%, #3f6f86 30%, #8fb4c4 50%, #e2eef2 68%, var(--geo-rim) 80%, var(--geo-shell) 92%, transparent 100%), var(--tile);}
.geo.rose{background:radial-gradient(ellipse 40% 40% at 50% 52%, #7a3a4e 0 14%, #c27b92 32%, #e8b9c6 54%, #f6e3e8 70%, var(--geo-rim) 80%, var(--geo-shell) 92%, transparent 100%), var(--tile);}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field > .lbl{font-size:13px;font-weight:600;color:var(--muted);}
.field > .hint{font-size:12px;color:var(--faint);}
.input{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);background:var(--white);font-size:16px;}
.input input,.input select,.input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:inherit;padding:0;}
.input input::placeholder,.input textarea::placeholder{color:var(--faint);}
.input.focus,.input:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft);}
.input :is(input,select,textarea):focus-visible{outline:none;}
.input .unit{color:var(--faint);}
.input.sm{min-height:36px;font-size:14px;}
.textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);background:var(--white);font-size:16px;resize:vertical;}
.textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft);}
.select{min-height:36px;padding:0 30px 0 10px;border:1px solid var(--line-strong);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2369635b' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;}
.select:focus{outline:none;border-color:var(--plum);}
.fld{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.fld > .k{color:var(--muted);flex:none;}
.fld > .v{text-align:right;font-weight:600;}
.fld .note{display:block;font-size:12px;font-weight:600;color:var(--plum);}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--line-strong);background:var(--white);}
.seg > *{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 10px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted);font-weight:600;cursor:pointer;text-decoration:none;}
.seg > *:first-child{border-left:0;}
.seg > .on{background:var(--plum-soft);color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum);} /* 选中：紫描边 + 浅紫底（黑底太重，抢主按钮） */
.seg > [disabled]{color:var(--faint);background:var(--paper);cursor:default;}
.seg.sm > *{min-height:34px;font-size:13px;}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:700px){ .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));} .form-grid .span-2{grid-column:1 / -1;} }

/* ---------- 列表、键值 ---------- */
.row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.row .grow{flex:1;min-width:0;}
.row .name{font-weight:600;}
.row .meta{font-size:13px;color:var(--muted);}
.row .amt{font-weight:600;white-space:nowrap;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;}
.kv > dt{color:var(--muted);}
.kv > dd{text-align:right;font-weight:600;}

/* ---------- 面板和提示 ---------- */
.card{background:var(--white);border:1px solid var(--line);}
.soft{background:var(--paper);}
.box{border:1px solid var(--line);background:var(--white);padding:14px 16px;}
.box.good{border-color:transparent;background:var(--good-soft);}
.box.warn{border-color:transparent;background:var(--warn-soft);}
.box.bad{border-color:transparent;background:var(--bad-soft);}
.box.info{border-color:transparent;background:var(--info-soft);}
.box.plum{border-color:transparent;background:var(--plum-soft);}
.box.good,.box.warn,.box.bad,.box.info,.box.plum{color:var(--ink);}
.state{display:flex;align-items:center;gap:10px;font-weight:600;}
.dot{width:24px;height:24px;flex:none;display:inline-grid;place-items:center;color:var(--white);}
.dot.good{background:var(--good);} .dot.warn{background:var(--warn);} .dot.bad{background:var(--bad);} .dot.info{background:var(--info);} .dot.plum{background:var(--plum);}
.dot svg{width:14px;height:14px;}
.amt-xl{font-family:var(--f-display);font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.01em;}
.amt-l{font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1;}
.amt-m{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.2;}
.amt-s{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.2;}
.steps{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
.steps li{display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:8px;}
.steps time{font-family:var(--f-mono);color:var(--ink);font-weight:500;}
.hr{height:1px;background:var(--line-soft);border:0;}
.dash{border-top:1px dashed var(--line);}

/* 数字键盘（收现金、点钱） */
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
/* 键盘数字用系统字（衬线字体加载慢，会先无衬线再跳成衬线） */
.keys button{min-height:56px;border:1px solid var(--line);background:var(--white);font-family:var(--f-body);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;}
.keys button:active{background:var(--paper);}
.keys button.fn{font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--muted);background:var(--paper);}

/* 弹层 */
.scrim{position:absolute;inset:0;background:rgba(29,27,25,.42);}
.sheet{position:absolute;background:var(--white);border:1px solid var(--line);box-shadow:0 18px 50px rgba(29,27,25,.2);}

/* ---------- 登录后的壳（app/index.html） ----------
   电脑（≥ 1100）：左边 .rail 导航（1100–1279 收成只有图标的窄条）；iPad（700–1099）：顶部 .posbar；手机：底部 .tabbar。 */
html,body{margin:0;background:var(--paper);}
/* iOS Safari 转横屏会自己放大字（客人屏底下英文 14→17px，模拟器实测）；只认带前缀的，要放在 html 上 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-family:var(--f-body);color:var(--ink);}
body{min-height:100vh;}
[hidden]{display:none !important;}
:where(.scr) a{color:var(--plum);}
.scr :focus-visible{outline:2px solid var(--plum);outline-offset:2px;}
.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);}
.app > main{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;}
.app.wide{height:100vh;height:100dvh;}
.app.wide > main{overflow:auto;}
.app.desk{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);}
.app.desk > .rail{grid-row:1 / -1;}
.app.desk > #bars{grid-column:2;}
.app.desk > main{grid-column:2;grid-row:2;}
.page-host{flex:1;display:flex;flex-direction:column;min-height:0;}
.page-host.padded{padding:24px var(--gutter) 40px;gap:20px;width:100%;max-width:1280px;margin:0 auto;}
/* 还没改完的录货、货品详情靠壳留白；已经用 .page 的页面放进去时不重复留白。 */
.page-host.padded > .page{padding:0;max-width:none;}

/* 左侧导航（电脑） */
.rail{display:flex;flex-direction:column;gap:2px;height:100vh;height:100dvh;position:sticky;top:0;overflow-y:auto;background:var(--paper-2);border-right:1px solid var(--line);padding:18px 12px 14px;}
.rail .brand{font-family:var(--f-display);font-weight:600;font-size:20px;padding:4px 12px 18px;white-space:nowrap;color:var(--ink);text-decoration:none;}
.rail .brand small{display:block;font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--muted);}
.rail .group{font-size:12px;font-weight:600;color:var(--faint);padding:14px 12px 4px;}
.rail a.nav{display:flex;align-items:center;gap:12px;min-height:36px;padding:0 12px;color:var(--muted);text-decoration:none;font-weight:500;font-size:15px;border-left:3px solid transparent;}
.rail a.nav.on{color:var(--ink);font-weight:600;background:var(--white);border-left-color:var(--plum);}
.rail a.nav svg{width:20px;height:20px;flex:none;}
.rail a.nav .count{margin-left:auto;}
.rail .who{margin-top:auto;padding:14px 12px 4px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);}
.rail .who b{color:var(--ink);font-weight:600;font-size:14px;}
@media (min-width:1100px) and (max-width:1279px){
  .rail{padding:14px 6px;align-items:stretch;}
  .rail .brand{font-size:0;padding:4px 0 14px;text-align:center;}
  .rail .brand::before{content:"CS";font-size:18px;}
  .rail .brand small{display:none;}
  .rail .group{display:none;}
  .rail a.nav{flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:6px 2px;font-size:12px;text-align:center;border-left:0;border-top:3px solid transparent;}
  .rail a.nav.on{border-top-color:var(--plum);}
  .rail a.nav{position:relative;}
  .rail a.nav > span:not(.count){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rail a.nav .count{position:absolute;top:4px;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;line-height:18px;padding:0 4px;font-size:11px;}
  .rail .who{font-size:12px;text-align:center;padding:10px 2px 2px;}
  .rail .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
  .rail .who span{display:none;}
}

/* 顶部导航（iPad） */
.posbar{display:flex;align-items:center;gap:24px;height:58px;padding:0 var(--gutter);background:var(--bar);border-bottom:1px solid var(--line);flex:none;}
.posbar .brand{font-family:var(--f-display);font-weight:600;font-size:19px;white-space:nowrap;}
.posbar nav{display:flex;align-self:stretch;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden;}
.posbar nav a{display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;}
.posbar nav a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--plum);}
.posbar .who{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap;}
.bar-more{position:relative;align-self:stretch;display:flex;flex:none;}
.bar-more > summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.bar-more > summary::-webkit-details-marker{display:none;}
.bar-more > summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);}
.bar-more.on > summary{color:var(--ink);font-weight:600;border-bottom-color:var(--plum);}
.bar-more .menu{position:absolute;top:100%;right:0;z-index:30;min-width:200px;display:flex;flex-direction:column;padding:6px 0;background:var(--white);border:1px solid var(--line);box-shadow:0 10px 28px rgba(43,24,40,.14);}
.bar-more .menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:0 18px;color:var(--ink);text-decoration:none;font-weight:500;border:0;}
.bar-more .menu a.on{color:var(--plum);font-weight:600;}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;background:var(--plum);color:var(--white);font-size:12px;font-weight:700;line-height:1;}
.count.mute{background:var(--line);color:var(--ink);}
.count.warn{background:var(--warn);}
.count.bad{background:var(--bad);}

/* 底部标签栏（手机） */
.app.phone > main{padding-bottom:calc(60px + env(safe-area-inset-bottom));} /* 给固定在底部的标签栏让位 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);flex:none;}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--faint);text-decoration:none;font-size:12px;font-weight:600;position:relative;}
.tabbar a.on{color:var(--plum);}
.tabbar svg{width:22px;height:22px;}
.tabbar a .count{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;font-size:10px;padding:0 4px;}

/* ---------- 版式部件：每页用这些搭 ---------- */
/* 一页：白天的纸色底上，内容最宽 1280，左右留白随宽度变。.narrow 给表单类（录货、设置一项），.full 给收银台。 */
.page{width:100%;max-width:1280px;margin:0 auto;padding:20px var(--gutter) 40px;display:flex;flex-direction:column;gap:20px;}
.page.narrow{max-width:760px;}
@media (min-width:1100px){ .page.narrow{margin-left:0;} } /* 电脑上表单页也靠左，和别的页同一条左边线（以前居中，切页时左右跳） */
.page.full{max-width:none;padding:0;gap:0;}
@media (min-width:1100px){ .page{padding-top:28px;gap:24px;} }
@media (max-width:699px){ .page{padding-top:14px;gap:16px;} }
/* 页头：左边标题和一句说明，右边操作；手机上操作换到下一行。 */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;}
.page-head h1{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em;}
.page-head .page-sub{font-size:14px;color:var(--muted);margin-top:2px;}
.page-head .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.page-head .back{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--muted);text-decoration:none;margin-bottom:4px;}
@media (max-width:699px){
  .page-head h1{font-size:22px;}
  .page-head .actions{width:100%;}
  .page-head .actions > .btn{flex:1;}
}
/* 多栏：电脑上按比例分栏，iPad 上两栏，手机上一栏。 */
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;}
@media (min-width:900px){
  .cols.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cols.c3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cols.c21{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);}
  .cols.c12{grid-template-columns:minmax(300px,1fr) minmax(0,2fr);}
  .cols.side{grid-template-columns:minmax(0,1fr) 340px;}
}
@media (min-width:1100px){ .cols.c3{grid-template-columns:repeat(3,minmax(0,1fr));} .cols{gap:24px;} }
.stack{display:flex;flex-direction:column;gap:16px;min-width:0;}
.stack.tight{gap:8px;}
.hstack{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.spacer{flex:1;}
/* 面板：白底细边框，一个标题行。面板里不要再套带框的盒子。 */
.panel{background:var(--white);border:1px solid var(--line);min-width:0;}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft);min-height:52px;}
.panel-head h2{font-size:16px;font-weight:600;}
.panel-head .sub{font-size:13px;color:var(--muted);}
.panel-body{padding:16px 18px;}
.panel-foot{padding:12px 18px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.panel.flat{border:0;background:transparent;}
@media (max-width:699px){ .panel-head{padding:12px 14px;min-height:48px;} .panel-body{padding:14px;} .panel-foot{padding:12px 14px;} }
/* 列表：一行一件事，左图、中间两行字、右边金额或箭头。整行可点就用 a.li。 */
.list{display:flex;flex-direction:column;}
.li{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line-soft);color:var(--ink);text-decoration:none;min-width:0;}
.li:last-child{border-bottom:0;}
button.li{width:100%;border:0;border-bottom:1px solid var(--line-soft);background:transparent;text-align:left;cursor:pointer;font:inherit;}
.li .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.li .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.li .s{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;}
.li .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:right;}
.li .amt{font-weight:600;white-space:nowrap;}
.li .chev{color:var(--faint);flex:none;}
@media (max-width:699px){ .li{padding:12px 14px;gap:12px;} }
/* 数字卡：一个数、一行说明。 .stats 一排几张，手机上两张一行。 */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:900px){ .stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));} }
.stat{background:var(--white);padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0;}
.stat .k{font-size:13px;color:var(--muted);}
.stat .v{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.15;}
.stat .n{font-size:12px;color:var(--faint);}
/* 深紫的「台子」：今天的总额、收银台的应收。一页最多一个。 */
.stage{background:var(--stage);color:var(--stage-ink);padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.stage .k{font-size:13px;color:var(--stage-muted);}
.stage .stage-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--stage-line);padding-top:12px;}
.stage .stage-row > div{display:flex;flex-direction:column;gap:2px;padding:0 14px;border-left:1px solid var(--stage-line);min-width:0;}
.stage .stage-row > div:first-child{padding-left:0;border-left:0;}
.stage .stage-row .v{font-family:var(--f-display);font-weight:600;font-size:20px;}
.stage .note{font-size:12px;color:var(--stage-muted);}
@media (max-width:699px){ .stage{padding:16px;} .stage .stage-row .v{font-size:17px;} .stage .stage-row > div{padding:0 10px;} }
/* 工具条：搜索、筛选、排序，放在列表上面；手机上搜索占一整行，其余横向滑。 */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.toolbar .search{flex:1 1 260px;min-width:0;}
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;flex-wrap:nowrap;}
.filters > *{flex:none;}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);background:var(--white);color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;}
.pill.on{background:var(--plum-soft);border-color:var(--plum);color:var(--plum);}
.pill .n{font-weight:500;opacity:.75;}
@media (max-width:699px){ .toolbar .search{flex-basis:100%;} .toolbar .filters{flex:1;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);max-width:none;} .filters.bleed{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);max-width:none;} .hide-phone{display:none !important;} }
/* 数据表：电脑上是表格（表头可排序）；手机上每行变成一张卡，td 前面显示 data-label。 */
.dtable{width:100%;border-collapse:collapse;font-size:14px;background:var(--white);}
.dtable th{font-weight:600;font-size:12px;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap;position:sticky;top:0;z-index:1;}
.dtable th.sort{cursor:pointer;user-select:none;}
.dtable th.sort::after{content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:var(--line-strong);transform:translateY(2px);}
.dtable th.asc::after{border-top-color:transparent;border-bottom-color:var(--ink);transform:translateY(-2px);}
.dtable th.desc::after{border-top-color:var(--ink);}
.dtable td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.dtable tr.click{cursor:pointer;}
.dtable .num,.dtable th.num{text-align:right;white-space:nowrap;}
.dtable td.thumb{width:56px;padding-right:0;}
@media (max-width:699px){
  .dtable.cards,.dtable.cards tbody,.dtable.cards tr,.dtable.cards td{display:block;width:100%;}
  .dtable.cards thead{display:none;}
  .dtable.cards tr{padding:12px 14px;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:2px 12px;}
  .dtable.cards td{padding:0;border:0;}
  .dtable.cards td.thumb{grid-row:1 / span 3;width:56px;}
  .dtable.cards td.main{grid-column:2;}
  .dtable.cards td.end{grid-column:3;grid-row:1;text-align:right;}
  .dtable.cards td.sub{grid-column:2 / -1;font-size:13px;color:var(--muted);}
  .dtable.cards td.hide-m{display:none;}
}
/* 空状态、加载、页尾 */
.empty{padding:32px 16px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px;}
.loading{padding:28px 16px;color:var(--faint);}
.more-row{padding:12px 18px;text-align:center;}
/* 吸底操作条（手机上的主要按钮） */
.sticky-actions{position:sticky;bottom:0;z-index:4;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;}
.sticky-actions > .btn{flex:1;}
@media (max-width:699px){ .sticky-actions{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:12px;} } /* 手机上让出底部标签栏 */

/* 旧版式（还没改完的页面在用）：.phone-page 现在在宽屏上也铺满，内容用 .page 收住。 */
.phone-page{display:flex;flex-direction:column;flex:1;width:100%;}
.app.wide .phone-page{min-height:100%;}
.pos-page{flex:1;display:grid;min-height:0;background:var(--white);}
.pos-page > *{min-height:0;overflow:auto;}
.office-page{width:100%;max-width:1280px;margin:0 auto;padding:28px var(--gutter) 48px;display:flex;flex-direction:column;gap:24px;}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 var(--gutter);border-bottom:1px solid var(--line-soft);background:var(--white);}
.bar h1{font-weight:600;font-size:20px;line-height:1.2;}
.bar .sub{font-size:13px;color:var(--muted);}
.iconbtn{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);padding:0;cursor:pointer;text-decoration:none;}
.scr a.iconbtn{color:var(--ink);}
.linkbtn{border:0;background:transparent;padding:0;color:var(--plum);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}

/* 顶部的条：断网（黄）、页面旧了（红） */
.topbar{display:flex;align-items:center;gap:12px;padding:10px var(--gutter);font-weight:600;}
.topbar.offline{background:var(--warn-soft);border-bottom:1px solid var(--warn);color:var(--warn);}
.topbar.stale{background:var(--bad-soft);border-bottom:1px solid var(--bad);color:var(--bad);}
.topbar .btn{margin-left:auto;}
.demo-chip{cursor:pointer;line-height:24px;}
.demo-float{position:fixed;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:20;box-shadow:0 2px 8px rgba(29,27,25,.15);}

/* 弹层（.overlay > .sheet，固定在屏幕中间；手机上从底部升起、占满宽） */
.overlay{position:fixed;inset:0;z-index:50;}
.overlay > .sheet{left:50%;top:50%;transform:translate(-50%,-50%);max-height:calc(100dvh - 32px);overflow:auto;display:flex;flex-direction:column;}
.sheet-head{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 24px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--white);z-index:1;}
.sheet-head h2{font-size:18px;font-weight:600;}
.sheet-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:18px;}
@media (max-width:699px){
  .overlay > .sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100% !important;max-width:none !important;max-height:92dvh;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);}
  .sheet-body{padding:16px 16px 20px;}
  .sheet-head{padding:10px 8px 10px 16px;}
}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--white);padding:12px 18px;font-weight:600;font-size:14px;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(29,27,25,.2);}
/* 提示条一律放在屏幕顶上：放在底部会盖住吸底的按钮（付款条、等 Zelle 的操作、保存）。电脑上居中在内容区。 */
@media (min-width:1100px){ .toast{left:calc(50% + var(--rail) / 2);} }
/* 大屏上小字加一号（12/13px 在 1440 上偏小） */
@media (min-width:1280px){ .small{font-size:14px;} .dtable th{font-size:13px;} .li .s{font-size:14px;} }
/* 成功、失败都是深色条（整块红、绿太吵）；失败前面一个红点 */
.toast.bad,.toast.good{background:var(--ink);}
.toast.bad::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e8705f;margin-right:8px;vertical-align:1px;}

/* 小部件 */
.switch{width:52px;height:30px;border:0;padding:3px;background:var(--line-strong);display:flex;justify-content:flex-start;cursor:pointer;flex:none;}
.switch::after{content:"";width:24px;height:24px;background:var(--white);}
.switch[aria-checked="true"]{background:var(--plum);justify-content:flex-end;}
.switch[disabled]{background:var(--faint);cursor:default;}
.stepper{display:inline-flex;border:1px solid var(--line-strong);background:var(--white);}
.stepper button{width:38px;height:34px;border:0;background:var(--white);cursor:pointer;font-size:17px;}
.stepper button[disabled]{color:var(--faint);cursor:default;}
.stepper span{width:38px;display:grid;place-items:center;border-left:1px solid var(--line);border-right:1px solid var(--line);}
.codebox{width:56px;height:72px;display:grid;place-items:center;border:1px solid var(--ink);font-family:var(--f-display);font-weight:600;font-size:36px;background:var(--white);}
.codebox.cur{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft);}
.codebox.bad{border-color:var(--bad);background:var(--bad-soft);}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;}
table.tbl thead th{font-weight:600;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;text-align:left;}
table.tbl td,table.tbl tbody th{padding:10px 10px 10px 0;border-bottom:1px solid var(--line-soft);}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (prefers-reduced-motion:reduce){ .scr *{transition:none !important;animation:none !important;} }
@media print{
  .rail,.posbar,.tabbar,.topbar,.demo-chip,.demo-float,.sticky-actions{display:none !important;}
  .app.desk{display:block;}
}

/* ---------- 2026-10-24 设计审查后加的公共部件 ---------- */
/* 手机上提示条放在底栏和吸底按钮条上面（以前在顶上，盖住页标题） */
@media (max-width:699px){ .toast{bottom:calc(140px + env(safe-area-inset-bottom));} }
/* 数字对齐：时间、单号、金额列用系统字 + 等宽数字（等宽字体只给吊牌和备注码） */
.num{font-variant-numeric:tabular-nums;}
/* 弹层底部的按钮条：「算了」在左、主按钮在右；手机上吸在弹层底部，内容太高时按钮不会被切掉 */
.sheet-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.sheet-actions > .quiet,.sheet-actions > .cancel{margin-right:auto;}
@media (max-width:699px){
  .sheet-actions{position:sticky;bottom:0;margin:0 -16px -20px;padding:12px 16px;background:var(--white);border-top:1px solid var(--line-soft);z-index:2;}
  .sheet-actions > .btn{flex:1;}
  .sheet-actions > .quiet,.sheet-actions > .cancel{flex:0 0 auto;}
}
/* 「怎么算的」：长口径说明收进弹层，页面上只留一个文字按钮 */
.howcalc{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;opacity:.8;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.howcalc-body{font-size:15px;line-height:1.65;color:var(--ink);}
.howcalc-body p + p{margin-top:10px;}
/* 表单报错和必填（B、C 两路页面里各写了一份，挪到这里）：出错的框描红，提示就近写在框下面 */
.input.bad,.textarea.bad,.select.bad{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft);}
.hint.bad,.f-err{color:var(--bad);font-size:13px;font-weight:600;}
.req{margin-left:6px;font-size:12px;font-weight:500;color:var(--faint);}
/* 只要等宽数字、不要右对齐（表格里的 .num 会右对齐，时间列用这个） */
.tn{font-variant-numeric:tabular-nums;}
/* 只给读屏看的字 */
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- 2026-10-24 第二轮设计审查：表格标准、宽页、点击区、带撤销的提示条 ---------- */
/* 表格页在大屏上放宽（货品、单子、到账记录、月报的表）：最宽 1600，靠左贴侧栏；别的页照旧 1280 */
@media (min-width:1100px){ .page.wide{max-width:1600px;margin-left:0;} }
/* 数据表标准（货品表是样板）：行高 48、缩略图 36、等宽数字、整行是链接（⌘-点击新标签）、空状态一格横跨 */
/* 只管表格样子的宽屏；手机上 .dtable 变成一张张卡片，不套行高和小缩略图 */
@media (min-width:700px){
  .dtable.std td{padding:6px 12px;height:48px;}
  .dtable.std td.thumb{width:48px;padding-right:0;}
  .dtable.std td.thumb .ph,.dtable.std td.thumb .geo{width:36px !important;height:36px !important;}
}
.dtable td,.dtable th{font-variant-numeric:tabular-nums;}
.dtable tr.rowlink{position:relative;}
.dtable a.rowlink{position:absolute;inset:0;z-index:0;}
/* 只把能点的东西（按钮、链接、勾选框）抬到整行链接上面；文字、缩略图留在下面，点上去也是打开这一行 */
.dtable tr.rowlink td :is(a:not(.rowlink),button,label,input,select,textarea){position:relative;z-index:1;}
.dtable td.empty-cell{display:table-cell !important;text-align:left;color:var(--muted);padding:28px 16px;height:auto;}
/* 手指点的地方至少 44px（步进器、「拿掉」、文字链接） */
.tap{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;}
.linkbtn.tap{justify-content:flex-start;}
/* 带「撤销」的提示条（undoToast） */
.toast.undo{display:flex;align-items:center;gap:14px;pointer-events:auto;}
/* 弹层开着时提示条挪到屏幕顶上，不压弹层底部的键盘和按钮 */
body:has(.overlay) .toast{top:calc(12px + env(safe-area-inset-top));bottom:auto;}
.toast.undo button{white-space:nowrap;flex-shrink:0;border:0;background:none;color:#e9d9e5;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px;min-height:32px;}
/* 手机横屏（壳给 .app.phone）：吸底的按钮条也让出底栏，提示条放在底栏上面 */
.app.phone .sticky-actions{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:12px;}
@media (pointer:coarse) and (max-height:500px){ .toast{bottom:calc(76px + env(safe-area-inset-bottom));} }

/* 悬停样式只给鼠标（第七轮手机版：手机上点过的东西会一直「悬停」——到账记录看起来两个筛选都选中、复制成功的绿色出不来） */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--paper);}
  .btn.pri:hover{background:var(--plum-2);}
  .btn.go:hover{background:var(--plum-2);}
  .btn.line:hover{border-color:var(--ink);background:var(--white);}
  .btn.quiet:hover{color:var(--ink);background:transparent;}
  :where(.scr) a:hover{color:var(--plum-2);}
  .rail a.nav:hover{color:var(--ink);background:rgba(255,255,255,.55);}
  .bar-more .menu a:hover{background:var(--paper);}
  .page-head .back:hover{color:var(--ink);}
  a.li:hover,button.li:hover{background:var(--paper);}
  .pill:hover{color:var(--ink);border-color:var(--ink);}
  .dtable th.sort:hover{color:var(--ink);}
  .dtable tr.click:hover td{background:var(--paper);}
  .howcalc:hover{opacity:1;}
}

/* ---------- 2026-10-25 第七轮手机版：像 App 一样的触感、点击区、提示条 ---------- */
/* 能点的东西：不选中文字、不弹长按菜单、不等双击放大（iOS 实测：长按数字键会选中「5」、出放大镜，这一下没输进去） */
.btn,.pill,.li,.keys button,.seg button,.tabbar a,.iconbtn,.stepper button,.switch,.linkbtn{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
/* 按下去的样子（没有悬停的手机上，这是唯一的反馈） */
.btn:active:not([disabled]){transform:translateY(1px);filter:brightness(.94);}
a.li:active,button.li:active,.pill:active,.keys button:active,.iconbtn:active,.stepper button:active{background:var(--paper-2);}
.keys button:active{transform:translateY(1px);}
/* 点击区：手机上小按钮、筛选条至少 40 高，文字返回链接撑到 44 */
@media (max-width:699px){
  .btn.sm{min-height:40px;}
  .pill{min-height:40px;}
  .page-head .back{display:inline-flex;align-items:center;min-height:44px;}
  /* iOS 点进字号小于 16px 的输入框会把整页放大 */
  .select,select{font-size:16px;}
}
/* 提示条：左右各留 16px、按文字宽度居中（以前按内容收缩只剩半屏宽，长句断成两行）；不带撤销的不挡下面的按钮 */
.toast{left:16px;right:16px;margin:0 auto;width:fit-content;transform:none;max-width:calc(100vw - 32px);pointer-events:none;}
.toast.undo{pointer-events:auto;}
@media (min-width:1100px){ .toast{left:calc(var(--rail) + 16px);} }
/* 表格里展开的那一行不定高（到账记录展开一行，详情盖住下面几行） */
.dtable tr[class*="detail"] td{height:auto;}
/* 空状态：各页一个样子（ui.emptyState） */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 16px;text-align:center;color:var(--muted);font-size:15px;}
.empty-state p{margin:0;max-width:32em;}
.empty-state .es-ic{color:var(--faint);}
/* 壳启动时的骨架（第七轮：以前整页白一下才出来） */
.boot-skel{display:flex;flex-direction:column;gap:12px;padding-top:24px;}
.sk{background:var(--paper-2);}
.sk-title{width:40%;height:28px;}
.sk-line{width:70%;height:14px;}
.sk-block{height:160px;margin-top:8px;}
@media (prefers-reduced-motion:no-preference){ .sk{animation:sk-pulse 1.2s ease-in-out infinite alternate;} @keyframes sk-pulse{from{opacity:.55}to{opacity:1}} }