/* ==========================================================================
   扶摇酒铺 · 进销存经营台
   配色取品牌色：玄青 / 宣白 / 朱砂 / 陈金 / 木褐
   ========================================================================== */

:root{
  --ink:#22302F;
  --ink-2:#33433F;
  --ink-3:#5A6B66;
  --paper:#F3EFE6;
  --paper-2:#EAE4D7;
  --card:#FFFFFF;
  --cinnabar:#A8362A;
  --gold:#B79A62;
  --gold-soft:#E6DCC4;
  --wood:#4A3A2E;
  --line:#E3DBCB;
  --line-2:#D3C9B5;
  --muted:#8A8172;
  --ok:#3E7A5D;
  --warn:#B07419;
  --bad:#A8362A;

  --r-s:8px;
  --r-m:12px;
  --r-l:16px;
  --r-xl:22px;

  --sh-1:0 1px 2px rgba(34,48,47,.06), 0 1px 3px rgba(34,48,47,.04);
  --sh-2:0 2px 6px rgba(34,48,47,.07), 0 8px 24px rgba(34,48,47,.06);
  --sh-3:0 10px 40px rgba(34,48,47,.16);

  --sidebar-w:236px;
  --topbar-h:60px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Source Han Serif SC",
                "Noto Serif SC", Georgia, serif;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}

h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.3;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}

/* ---------- 布局 ---------- */
.shell{min-height:100%;display:flex;}

.sidebar{
  width:var(--sidebar-w);
  flex:none;
  background:var(--ink);
  color:#E9E4D8;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
  z-index:60;
  transition:transform .26s cubic-bezier(.4,0,.2,1), width .22s ease;
}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px;}
.brand-mark{
  width:46px;height:46px;flex:none;border-radius:12px;
  background:linear-gradient(155deg,var(--gold) 0%,#8E7440 100%);
  display:grid;place-items:center;
  font-family:var(--font-serif);font-size:15px;letter-spacing:1px;
  color:#1C2726;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
/* 标换成矢量印章之后，底下那层金色圆角方块要撤掉 ——
   不然朱红印压在金色块上，两个"底"打架。 */
.brand-mark.has-seal{background:none;box-shadow:none;border-radius:0;}
.brand-mark.has-seal svg{display:block;}
/* ⚠️ 这块是 display:grid，会盖掉浏览器给 [hidden] 的默认 display:none。
   店主把「显示标识」关了的时候要真藏得住，必须显式写死。 */
.brand-mark[hidden]{display:none;}
.brand-text{display:flex;flex-direction:column;min-width:0;}
.brand-text strong{font-family:var(--font-serif);font-size:17px;letter-spacing:2px;color:#F3EFE6;}
.brand-text span{font-size:11px;color:#8FA09B;letter-spacing:1.5px;}

/* 门店切换（侧栏）：只有总部、且不止一家店时才出现。
   门店信息每家一份、互不覆盖，这个按钮只是「换一家看」。 */
.shop-switch{
  display:flex;align-items:center;gap:9px;
  margin:0 12px 10px;padding:8px 11px;width:calc(100% - 24px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:10px;color:#DCD6C8;cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
}
.shop-switch:hover{background:rgba(255,255,255,.11);border-color:rgba(183,154,98,.45);}
.shop-switch .icon{width:15px;height:15px;color:var(--gold);}
.shop-switch .ss-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;}
.shop-switch .ss-text em{font-style:normal;font-size:10px;color:#8FA09B;letter-spacing:1px;}
.shop-switch .ss-text strong{
  font-size:13.5px;font-weight:600;color:#F3EFE6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shop-switch .ss-go{font-size:11px;color:var(--gold);flex:none;}
/* ⚠️ 这块是 display:flex，会盖掉浏览器给 [hidden] 的 display:none，必须显式写死 */
.shop-switch[hidden]{display:none;}

/* 「换一家店看」弹窗里的门店列表 */
.shop-pick{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.shop-pick-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:10px;width:100%;
  background:#fff;border:1px solid var(--line);
  cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;
}
.shop-pick-row:hover{border-color:var(--gold);background:#FBF8F1;}
.shop-pick-row.is-on{background:#F5F1E7;border-color:var(--gold);cursor:default;}
.shop-pick-row .sp-badge{
  flex:none;font-size:11px;letter-spacing:.5px;color:#6E807B;font-weight:600;
  background:#F1ECE0;border-radius:6px;padding:3px 7px;
}
.shop-pick-row .sp-name{flex:1;min-width:0;font-size:14.5px;color:var(--ink);}
.shop-pick-row .sp-tag{
  flex:none;font-size:10.5px;color:#6E807B;background:#F1ECE0;
  border-radius:5px;padding:2px 6px;
}
.shop-pick-row .sp-tag.is-on{color:#8A6A22;background:rgba(183,154,98,.2);}

.nav{flex:1;overflow-y:auto;padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  background:none;border:0;width:100%;text-align:left;
  cursor:pointer;color:#B9C6C2;font-size:14.5px;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#F3EFE6;}
.nav-item.is-active{background:rgba(183,154,98,.18);color:#F3EFE6;}
.nav-item.is-active .icon{color:var(--gold);}
.nav-item .nav-badge{
  margin-left:auto;font-size:11px;padding:1px 7px;border-radius:20px;
  background:var(--cinnabar);color:#fff;font-weight:600;
}
.nav-group{padding:14px 12px 6px;font-size:10.5px;letter-spacing:2px;color:#6E807B;}

.sidebar-foot{padding:12px 16px 18px;border-top:1px solid rgba(255,255,255,.08);}
.conn{display:flex;align-items:center;gap:7px;font-size:12px;color:#93A5A0;}
.conn .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;}
.conn.is-ok .dot{background:#5FB98B;}
.conn.is-err .dot{background:var(--cinnabar);}
.stamp{margin-top:9px;font-family:var(--font-serif);font-size:11.5px;color:#6E807B;letter-spacing:2px;}

.scrim{position:fixed;inset:0;background:rgba(20,28,27,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .24s;}
body.nav-open .scrim{opacity:1;pointer-events:auto;}

.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column;transition:margin-left .22s ease;}

.topbar{
  height:var(--topbar-h);flex:none;
  display:flex;align-items:center;gap:12px;
  padding:0 18px;
  background:rgba(243,239,230,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.topbar-title{min-width:0;}
.topbar-title h1{font-family:var(--font-serif);font-size:19px;letter-spacing:1.5px;}
.topbar-title p{font-size:12px;color:var(--muted);margin-top:1px;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.today{font-size:12.5px;color:var(--muted);white-space:nowrap;}

.icon-btn{
  width:36px;height:36px;flex:none;border-radius:10px;
  border:1px solid transparent;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
  transition:background .15s,border-color .15s;
}
.icon-btn:hover{background:rgba(34,48,47,.06);}
.icon-btn.is-busy .icon{animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.view{flex:1;padding:20px 22px 90px;max-width:1360px;width:100%;}
.view:focus{outline:none;}

/* ---------- 通用组件 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--sh-1);
  padding:18px;
}
.card + .card{margin-top:14px;}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.card-head h2{font-family:var(--font-serif);font-size:15.5px;letter-spacing:1px;}
.card-head .sub{font-size:12px;color:var(--muted);}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

.grid{display:grid;gap:14px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

.stack{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;gap:10px;align-items:center;}
.row-wrap{flex-wrap:wrap;}
.spacer{margin-left:auto;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line-2);
  background:#fff;color:var(--ink);cursor:pointer;font-size:14px;font-weight:500;
  transition:background .15s,border-color .15s,transform .06s;
  white-space:nowrap;
}
.btn:hover{background:var(--paper-2);}
.btn:active{transform:translateY(1px);}
.btn .icon{width:17px;height:17px;}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#F3EFE6;}
.btn-primary:hover{background:var(--ink-2);}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#241E14;}
.btn-gold:hover{filter:brightness(1.06);}
.btn-danger{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;}
.btn-danger:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-3);}
.btn-ghost:hover{background:rgba(34,48,47,.06);}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px;}
.btn-sm .icon{width:15px;height:15px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12.5px;color:var(--ink-3);font-weight:500;}
.field .hint{font-size:11.5px;color:var(--muted);}
input,select,textarea{
  font:inherit;font-size:14.5px;color:var(--ink);
  padding:9px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:#fff;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(183,154,98,.18);
}
textarea{resize:vertical;min-height:70px;}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8172' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9.5 12 15.2 18 9.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;padding-right:30px;}
input[type=checkbox]{width:auto;}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:20px;font-size:12.5px;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;
  color:var(--ink-3);transition:all .15s;white-space:nowrap;
}
.chip:hover{border-color:var(--gold);}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#F3EFE6;}

.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;
  font-size:11.5px;font-weight:600;line-height:1.7;white-space:nowrap;}
.tag-ok{background:rgba(62,122,93,.12);color:var(--ok);}
.tag-warn{background:rgba(176,116,25,.13);color:var(--warn);}
.tag-bad{background:rgba(168,54,42,.11);color:var(--bad);}
.tag-info{background:rgba(34,48,47,.07);color:var(--ink-3);}
.tag-gold{background:rgba(183,154,98,.2);color:#7A6432;}

.metric{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:15px 16px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.metric .k{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.metric .v{font-family:var(--font-serif);font-size:26px;font-weight:600;letter-spacing:.5px;
  margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.15;}
.metric .v small{font-size:14px;font-weight:400;color:var(--muted);margin-left:3px;font-family:var(--font);}
.metric .d{font-size:12px;color:var(--muted);margin-top:4px;}
.metric.is-accent{background:linear-gradient(160deg,#283936,var(--ink));border-color:var(--ink);}
.metric.is-accent .k,.metric.is-accent .d{color:#9FB0AB;}
.metric.is-accent .v{color:#F3EFE6;}
.metric.is-cinnabar .v{color:var(--cinnabar);}

.empty{
  padding:46px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line-2);border-radius:var(--r-l);background:rgba(255,255,255,.5);
}
.empty h3{font-size:15px;color:var(--ink-2);margin-bottom:6px;font-family:var(--font-serif);letter-spacing:1px;}
.empty p{font-size:13px;margin-bottom:14px;}

.bar{height:7px;border-radius:20px;background:var(--paper-2);overflow:hidden;}
.bar > i{display:block;height:100%;background:var(--gold);border-radius:20px;transition:width .4s;}
.bar.is-ok > i{background:var(--ok);}
.bar.is-bad > i{background:var(--cinnabar);}

.split-bar{display:flex;height:10px;border-radius:20px;overflow:hidden;background:var(--paper-2);}
.split-bar > i{display:block;height:100%;}

/* 列表 */
.list{display:flex;flex-direction:column;}
.list-row{
  display:flex;align-items:center;gap:12px;padding:12px 2px;
  border-bottom:1px solid var(--line);
}
.list-row:last-child{border-bottom:0;}
.list-row .main-col{min-width:0;flex:1;}
.list-row .t1{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.list-row .t2{font-size:12.5px;color:var(--muted);margin-top:2px;}
.list-row .num{font-variant-numeric:tabular-nums;text-align:right;font-weight:600;font-size:15px;}

/* 商品缩略图：从供应商表里抠出来的图 / 自己拍的图，统一压成小图存着 */
.pthumb{
  display:block;flex:none;object-fit:cover;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.list-row > .pthumb{width:44px;height:44px;}

/* 批量删：行首勾选方块、整行可点选、选中态 */
.list-row.is-bulk{cursor:pointer;border-radius:10px;}
.list-row.is-sel{background:rgba(168,54,42,.06);}
.bulk-tick{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:6px;background:#fff;color:transparent;}
.bulk-tick svg{width:14px;height:14px;}
.bulk-tick.is-on{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff;}
/* 底部操作条：跟着列表滚，始终在眼前 */
.bulk-bar{position:sticky;bottom:0;z-index:6;margin-top:10px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 -2px 10px rgba(0,0,0,.05);}
/* ⚠️ 上面是 display:flex，会盖掉浏览器给 [hidden] 的 display:none，必须显式写死（同 .brand-mark 的坑） */
.bulk-bar[hidden]{display:none;}
.bulk-note{display:flex;align-items:baseline;gap:6px;font-size:13.5px;}
/* 商品图是后台单独补的：还没填上 src 的占位先隐形，免得列表先闪一排空框 */
img.pthumb[data-pid]:not([src]){visibility:hidden;}
.pcard .pthumb-card{align-self:center;border-radius:10px;}
.thumb-edit{display:flex;align-items:center;gap:12px;}
.thumb-frame{
  position:relative;width:96px;height:96px;flex:none;
  border:1px dashed var(--line);border-radius:10px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.thumb-frame .pthumb{width:100%;height:100%;border:0;border-radius:0;}
.thumb-none{font-size:12px;color:var(--muted);}
.thumb-edit.has-img .thumb-none{display:none;}

/* 表格 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px;}
table.tb{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px;}
table.tb th{
  text-align:left;padding:9px 10px;font-size:12px;color:var(--muted);
  font-weight:500;border-bottom:1px solid var(--line-2);white-space:nowrap;
  position:sticky;top:0;background:var(--card);
}
table.tb td{padding:10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
table.tb tr:last-child td{border-bottom:0;}
table.tb tr:hover td{background:rgba(183,154,98,.05);}
table.tb .n{text-align:right;}
table.tb .nm{font-weight:500;}
/* ⭐ 序号列 + 合计行：全系统数据表格统一口径 */
table.tb th.rn,table.tb td.rn{width:34px;min-width:34px;padding-left:8px;padding-right:0;
  text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
table.tb th.rn{font-weight:500;}
table.tb tfoot td{padding:10px;border-top:2px solid var(--line-2);font-weight:600;
  font-variant-numeric:tabular-nums;background:rgba(183,154,98,.06);}
table.tb tfoot td.rn{background:transparent;border-top:2px solid var(--line-2);}
table.tb tfoot .lab{color:var(--muted);font-weight:500;}

/* ---------- 销售统计的小表（2026-10-27） ----------
   四列（款/瓶数/销额/毛利），手机上要一屏放得下，不能横滚。
   ⚠️ 必须写成 table.tb.sls：只写 .sls{min-width:0} 特异性不够，
   会被上面 table.tb{min-width:620px} 压住，小表照样被迫横滚。 */
table.tb.sls{min-width:0;}
table.tb.sls th,table.tb.sls td{padding:8px;}
table.tb.sls th{font-size:12px;font-weight:500;}
table.tb.sls td.nm{white-space:normal;line-height:1.45;min-width:92px;}
table.tb.sls td.n{white-space:nowrap;}

/* ---------- 商品表格（2026-10-20「把商品库存做成表格」） ----------
   目的只有一个：一列只说一件事，同类的数上下对齐。
   手机屏窄，所以序号和品名两列**钉在左边**（sticky）——
   横着滚到右边看操作时，还知道自己在看哪一款。
   ⚠️ sticky 列要求 border-collapse:separate，否则边框会跟着滚走。 */
table.tb.pt{
  /* ⚠️ 2026-10-22 修：「显示不全」不是列太窄，是**整张表被压扁**。
     `table-layout:fixed` + `width:100%` 下，表格宽度取 min-width 与容器宽的大者，
     而**列宽总和一旦超过它，浏览器会按比例把所有列一起缩**——
     94px 的平台列实际只渲染成 70 出头，右边三列的文字就全溢出去被挡住了。
       所以这里必须 ≥ 下面各列宽之和（实算 1556）：
       32 + 260 + 80 + 52 + 98 + 78 + 104 + 96 + 104 + 168 + 112×3 + 148 = 1556。
       以后再往里加列，**先把这个数加上**，否则新列一定是坏的（而且只在手机上看得出来）。
       `harness50` 会把这条算式真算一遍，加列忘了改就红。 */
  min-width:1560px;font-size:13px;border-collapse:separate;border-spacing:0;
  /* ⚠️ 必须 fixed：auto 布局下表格会被「品名 + 一串小字」撑到 1700px 以外，
     电脑上也得左右滚 —— 那就不是「一目了然」了。列宽写在下面，超出的换行。 */
  table-layout:fixed;width:100%;
}
table.tb.pt th,table.tb.pt td{padding:7px 8px;vertical-align:middle;}
table.tb.pt tbody tr.is-off td{opacity:.5;}
/* ⚠️ c-name 用**固定 px** 而不是 26%：百分比会随表格宽度变，
   让「列宽总和」算不准，上面那个 min-width 就没法一次算对。
   品名两行截断（CSS 里 .t2 已 -webkit-line-clamp:2），240px 够放。 */
table.tb.pt th.c-name,table.tb.pt td.c-name{
  position:sticky;left:32px;z-index:2;background:var(--card);width:260px;
}
table.tb.pt th.c-name{z-index:4;}
table.tb.pt th.rn,table.tb.pt td.rn{
  position:sticky;left:0;z-index:2;background:var(--card);width:32px;
}
table.tb.pt th.rn{z-index:4;}
table.tb.pt th.c-brand,table.tb.pt td.c-brand{width:80px;}
table.tb.pt th.c-cat,table.tb.pt td.c-cat{width:52px;font-size:12px;color:var(--muted);}
table.tb.pt th.c-stock,table.tb.pt td.c-stock{width:98px;}
table.tb.pt th.c-cost,table.tb.pt td.c-cost{width:78px;}
table.tb.pt th.c-price,table.tb.pt td.c-price{width:104px;}
table.tb.pt th.c-margin,table.tb.pt td.c-margin{width:96px;}
table.tb.pt td.c-margin .xsmall{white-space:nowrap;}
table.tb.pt th.c-show,table.tb.pt td.c-show{width:104px;}
table.tb.pt th.c-sup,table.tb.pt td.c-sup{width:168px;}
/* ⭐ 2026-10-21 平台挂价列（美团/抖音/淘宝）：窄列，右对齐，三行小字（挂价/到手/赚）。
   整箱挂价是大字，到手/利润是辅助小字，别让它们换行把行撑高。 */
table.tb.pt th.c-plat,table.tb.pt td.c-plat{width:112px;min-width:112px;text-align:right;}
/* ⚠️ 2026-10-22：这里原来是 nowrap —— 挤在一行里「到手 ¥76.00（单瓶 ¥3.17）」要 160px 宽，
   112px 的列根本放不下，加上表格被压扁，右边三列就成了「显示不全」。
   改成允许折行：宁可这一行高一点，也不能把字截掉（截掉等于没写）。 */
table.tb.pt td.c-plat .xsmall{white-space:normal;line-height:1.35;}
table.tb.pt th.c-plat .xsmall{font-weight:400;}
table.tb.pt td.c-plat .basis-tag{display:inline-block;font-size:11px;line-height:1;color:#7a5c3e;background:#f0e6d2;border:1px solid #d9c6a3;border-radius:3px;padding:1px 3px;margin-right:3px;font-weight:700;vertical-align:1px;}
table.tb.pt td.c-plat .money-cell.is-strong .basis-tag{font-size:11px;}
table.tb.pt td.c-plat .money-cell.is-strong.is-editable{cursor:pointer;}
table.tb.pt td.c-plat .money-cell.is-strong.is-editable:hover{color:var(--wood);text-decoration:underline dotted;}
table.tb.pt td.c-plat .each-line{margin-top:1px;color:#3f5a6b;}
table.tb.pt td.c-plat .basis-tag.each{font-size:10px;color:#2f4f63;background:#e3edf2;border-color:#c4d6df;font-weight:600;}
table.tb.pt th.c-ops,table.tb.pt td.c-ops{width:148px;}
/* ⚠️ 老样式 `.list-row` 是给 div 列表用的（display:flex + padding + gap）。
   表格行也叫 .list-row（批量选中逻辑、老回归都靠这个类认行），
   所以这里必须把它显式改回 table-row —— 否则 <tr> 被 flex 排成一根窄条，
   数据全挤在左边几像素里（2026-10-20 真踩过，截图一眼就看出来）。 */
table.tb.pt tr.list-row{display:table-row;padding:0;gap:0;border-bottom:0;}
table.tb.pt tr.list-row > td{border-bottom:1px solid var(--line);}
table.tb.pt tr.list-row:last-child > td{border-bottom:0;}
table.tb.pt tr.list-row.is-bulk{cursor:pointer;}
table.tb.pt tr.list-row:hover > td{background:rgba(183,154,98,.06);}
table.tb.pt tr.list-row:hover > td.rn,
table.tb.pt tr.list-row:hover > td.c-name{background:var(--card);}

table.tb.pt .nm-wrap{display:flex;align-items:center;gap:8px;min-width:0;}
table.tb.pt .nm-txt{min-width:0;flex:1;}
table.tb.pt .t1{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13.5px;}
table.tb.pt .t1 .nm{font-weight:600;}
table.tb.pt .t2{
  font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;
  /* 最多两行：再多就把行高撑开，一屏能看见的款数就少了 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
table.tb.pt .pbrand{
  display:inline-block;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;padding:1px 6px;border-radius:5px;
  background:rgba(183,154,98,.16);color:var(--ink);
}
table.tb.pt .pbrand.is-none{background:transparent;border:1px dashed var(--line);color:var(--muted);}
table.tb.pt .money-cell{font-variant-numeric:tabular-nums;}
table.tb.pt .money-cell.is-strong{font-weight:600;font-size:14px;}
/* 「整箱卖价」小字挂在单瓶卖价下面（2026-10-20）：
   跟进价那列的「整箱进价」对齐，一箱卖多少钱不用再自己乘。
   没定整箱价的那种（按瓶价 × 箱规算出来的）压淡一点 + 后面写「（未定）」，
   绝不跟「定过的」长得一样 —— 认错比不认更糟，会静默算错账。 */
table.tb.pt .case-line{
  font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.35;
}
table.tb.pt .case-line.is-auto{opacity:.78;}
table.tb.pt .case-line.is-editable{cursor:pointer;}
table.tb.pt .case-line.is-editable:hover{color:var(--wood);text-decoration:underline dotted;}
table.tb.pt .kv-sm{font-weight:600;font-variant-numeric:tabular-nums;}
table.tb.pt .kv-sm.muted{font-weight:400;color:var(--muted);}
table.tb.pt .kv-btn{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:15px;font-weight:600;line-height:1.2;color:inherit;font-variant-numeric:tabular-nums;
  border-bottom:1px dotted transparent;
}
table.tb.pt .kv-btn:hover{border-bottom-color:var(--gold);}
table.tb.pt .kv-btn.is-bad{color:var(--cinnabar);}
/* 2026-10-22 店主：「供应商按公司名和简称一起显示，不要只显示简称」。
   一行写「全称（简称）」得 210px 往上，那张表本来就嫌宽；所以竖着摆两行：
   第一行公司名（长了省略，全名在 title 里），第二行简称（小字灰）。
   行高由品名那列（两行）顶着，这么摆等于不额外占高度。 */
table.tb.pt .sup-cell{
  max-width:168px;overflow:hidden;font-size:12px;line-height:1.35;
}
table.tb.pt .sup-cell .sup-n{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
table.tb.pt .sup-cell .sup-s{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;line-height:1.25;color:var(--muted);
}
/* 库存列里那些小字一行说完（「安全 6」「散瓶 24 瓶 · 30天卖 8」），
   折行会把行高撑到四行，一屏就看不见几款了 */
table.tb.pt .nowrap{white-space:nowrap;}
table.tb.pt .sup-cell.is-none{color:var(--muted);}
table.tb.pt .ops{display:flex;gap:0;justify-content:flex-end;}
/* 表格里的图标按钮要小一号：36px × 5 个 = 180px，一行就被它占掉半截 */
table.tb.pt .ops .icon-btn{width:28px;height:28px;border-radius:8px;}
table.tb.pt .ops .icon-btn .icon{width:16px;height:16px;}
table.tb.pt td.c-show .tag{display:inline-block;margin:1px 3px 1px 0;}
/* 点一下就能改的格子：鼠标移上去给个暗示，别让人猜 */
table.tb.pt td.is-editable{cursor:pointer;}
table.tb.pt td.is-editable:hover{background:rgba(183,154,98,.12);box-shadow:inset 0 0 0 1px rgba(183,154,98,.4);}
table.tb.pt td.is-editing{padding:3px 4px;}
table.tb.pt .cell-in{
  width:100%;min-width:52px;font:inherit;padding:3px 5px;
  border:1px solid var(--gold);border-radius:5px;background:#fff;color:var(--ink);
}
/* 三个筛子（供应商/品牌/展示端）并排：标签在上、下拉在下，窄屏自动叠 */
.fsel{display:flex;flex-direction:column;gap:3px;min-width:0;}

/* ⭐ 这一页「你在哪个区」（2026-10-22 第二轮）
   区条已经被左侧导航取代：顶部只留一条**确认**，不再给第二个能点的地方。
   两处都能切换区，他必然改错那处（这条规矩在 2026-10 的坑里已经吃过两次）。 */
.area-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--gold);
  background:var(--card);border-radius:var(--r-s);
}
.area-bar-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.area-bar-name{font-size:14.5px;font-weight:700;color:var(--ink);}
.area-bar .n{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;}
/* 新增商品时「归哪个区」是一行字，不是下拉 —— 在哪个区传的就落哪个区 */
.area-lock{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--r-s);}
.area-lock b{font-size:13.5px;}

/* 旧「区条」样式（2026-10-22 第一轮的横排四个区）。
   页面上已经不用了，留着是因为两条路并存过一小会儿（老入口 #stock 还走 render）。
   真删之前先确认没有测试在数 .zone-tab。 */
.zone-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.zone-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);
  cursor:pointer;white-space:nowrap;line-height:1.2;
  -webkit-tap-highlight-color:transparent;
}
.zone-tab .n{
  font-size:11.5px;font-weight:600;color:var(--muted);
  background:rgba(34,48,47,.07);border-radius:999px;padding:1px 6px;
}
.zone-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.zone-tab.is-on .n{background:rgba(255,255,255,.24);color:#fff;}
/* 「不上展示」不是区，是收纳筐：虚线、小一号、不抢眼 */
.zone-tab.is-minor{font-weight:500;font-size:12px;color:var(--muted);border-style:dashed;}
.zone-tab:disabled{opacity:.45;cursor:not-allowed;}

/* 「表格能左右滑」这句只在手机上出现 —— 电脑上一眼看全，不用提醒 */
.pt-hint{display:none;}
@media (max-width:760px){
  .pt-hint{display:block;margin-top:6px;}
}


.list-row .rn{flex:none;width:26px;text-align:center;color:var(--muted);
  font-size:12px;font-variant-numeric:tabular-nums;align-self:center;}
/* 操作记录（.log-row）和账号门店（.org-row）是自有行结构，不是 .list-row ——
   序号要单独给样式，否则 .rn 只是个没宽度的 span，数字会贴到内容上去 */
.log-row .rn,.org-row .rn{flex:none;width:20px;text-align:center;color:var(--muted);
  font-size:11.5px;font-variant-numeric:tabular-nums;}
.log-row .rn{padding-top:2px;}
.list-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  margin-top:2px;padding:10px 12px;border-top:2px solid var(--line-2);
  background:rgba(183,154,98,.06);font-size:13px;font-variant-numeric:tabular-nums;}
.list-sum .lab{color:var(--muted);margin-right:2px;}
.list-sum b{font-weight:600;}
.list-sum .si{white-space:nowrap;}

/* 弹窗 */
.modal-root{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;}
/* 关键：class 的 display:flex 会盖掉 [hidden] 的默认 display:none，
   导致弹窗关着时那层半透明遮罩仍在全屏拦截点击。必须显式关掉。 */
.modal-root[hidden]{display:none;}
.modal-scrim{position:absolute;inset:0;background:rgba(20,28,27,.5);backdrop-filter:blur(2px);}
.modal{
  position:relative;background:var(--card);width:100%;max-width:560px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);
  max-height:92vh;display:flex;flex-direction:column;
  animation:sheetUp .26s cubic-bezier(.3,0,.2,1);
}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}
.modal-head{
  display:flex;align-items:center;gap:10px;padding:16px 18px 12px;
  border-bottom:1px solid var(--line);flex:none;
}
.modal-head h3{font-family:var(--font-serif);font-size:16px;letter-spacing:1px;}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1;}
.modal-foot{
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:flex;gap:10px;flex:none;
}
.modal-foot .btn{flex:1;}

/* Toast */
.toast-root{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
.toast{
  background:var(--ink);color:#F3EFE6;padding:10px 18px;border-radius:24px;
  font-size:13.5px;box-shadow:var(--sh-3);animation:toastIn .22s ease;
  display:flex;align-items:center;gap:8px;
  pointer-events:auto;cursor:pointer;   /* 挡视线时点一下就叫它走 */
}
.toast.is-err{background:var(--cinnabar);}
.toast.is-ok{background:var(--ok);}
@keyframes toastIn{from{transform:translateY(12px);opacity:0;}to{transform:none;opacity:1;}}

/* 骨架 */
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,#F6F2EA 50%,var(--paper-2) 75%);
  background-size:200% 100%;animation:shim 1.3s infinite;border-radius:8px;}
@keyframes shim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* 收银台 */
.pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;}
.pos-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 12px;cursor:pointer;text-align:left;
  transition:border-color .14s,box-shadow .14s,transform .06s;
  display:flex;flex-direction:column;gap:6px;min-height:96px;
}
.pcard:hover{border-color:var(--gold);box-shadow:var(--sh-2);}
.pcard:active{transform:scale(.985);}
.pcard .pn{font-size:14px;font-weight:500;line-height:1.35;}
.pcard .ps{font-size:11.5px;color:var(--muted);}
.pcard .pf{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;gap:6px;}
.pcard .pp{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--cinnabar);}
.pcard .pp small{font-size:11px;color:var(--muted);font-family:var(--font);font-weight:400;}
.pcard .stk{font-size:11.5px;color:var(--muted);}
/* 官方指导价（2026-10-20）：收银台上那行小字，给店主"客户问起能答"用的。
   ⚠️ 收款仍按上面那颗红字的本店价，这一行只是参考。 */
.pcard .pg{font-size:11px;color:var(--gold);}
.pcard.out{opacity:.5;}

.cart-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);position:sticky;top:calc(var(--topbar-h) + 16px);
  display:flex;flex-direction:column;max-height:calc(100vh - var(--topbar-h) - 40px);
}
.cart-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;}
.cart-head h2{font-family:var(--font-serif);font-size:15px;letter-spacing:1px;}
.cart-items{flex:1;overflow-y:auto;padding:6px 16px;}
.cart-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);}
.cart-line:last-child{border-bottom:0;}
.cart-line .cl-main{flex:1;min-width:0;}
.cart-line .cl-name{font-size:13.5px;font-weight:500;line-height:1.35;}
.cart-line .cl-price{font-size:12px;color:var(--muted);margin-top:1px;}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;flex:none;}
.stepper button{width:28px;height:28px;border:0;background:#fff;cursor:pointer;font-size:16px;
  display:grid;place-items:center;color:var(--ink-2);line-height:1;}
.stepper button:hover{background:var(--paper-2);}
.stepper input{width:42px;border:0;text-align:center;padding:0;font-size:13.5px;height:28px;border-radius:0;}
.stepper input:focus{box-shadow:none;border:0;}

.cart-foot{border-top:1px solid var(--line);padding:14px 16px calc(14px + env(safe-area-inset-bottom));}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;}
.cart-total .lbl{font-size:13px;color:var(--muted);}
.cart-total .amt{font-family:var(--font-serif);font-size:28px;font-weight:600;color:var(--cinnabar);font-variant-numeric:tabular-nums;}
.cart-total .amt small{font-size:14px;font-weight:400;color:var(--muted);font-family:var(--font);}
/* 外卖单：金额右边再挂两行小字（抽成 / 到手），必须包成一列，否则会撑歪两栏布局 */
.cart-total .amt-col{text-align:right;flex:none;}
.cart-total .net{font-size:12px;color:var(--muted);line-height:1.45;font-variant-numeric:tabular-nums;}
.cart-total .net:last-child{color:var(--ink);font-weight:600;}

.mobile-cart-btn{display:none;}

/* 分析条 */
.hbar{display:flex;align-items:center;gap:10px;padding:8px 0;}
.hbar .lbl{width:132px;flex:none;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hbar .track{flex:1;height:16px;background:var(--paper-2);border-radius:5px;overflow:hidden;}
.hbar .track > i{display:block;height:100%;border-radius:5px;background:var(--gold);}
.hbar .val{width:96px;flex:none;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);}

/* 开店进度 */
.stage{border-left:2px solid var(--line-2);padding-left:16px;position:relative;margin-left:5px;}
.stage + .stage{margin-top:20px;}
.stage::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);}
.stage.is-done::before{background:var(--ok);border-color:var(--ok);}
.stage.is-doing::before{background:var(--gold);border-color:var(--gold);}
.stage-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.stage-head h3{font-family:var(--font-serif);font-size:15px;letter-spacing:1.5px;}
.stage-head .pct{margin-left:auto;font-size:12.5px;color:var(--muted);}

.task{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);}
.task:last-child{border-bottom:0;}
.task .cb{
  width:19px;height:19px;flex:none;border-radius:6px;border:1.5px solid var(--line-2);
  background:#fff;cursor:pointer;display:grid;place-items:center;margin-top:1px;padding:0;
}
.task .cb .icon{width:13px;height:13px;stroke-width:2.6;color:#fff;opacity:0;}
.task.is-done .cb{background:var(--ok);border-color:var(--ok);}
.task.is-done .cb .icon{opacity:1;}
.task.is-done .tt{color:var(--muted);text-decoration:line-through;}
.task .tt{font-size:14px;line-height:1.45;}
.task .tmeta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:9px;flex-wrap:wrap;}
.task .tact{margin-left:auto;display:flex;gap:2px;flex:none;}

/* AI */
.ai-wrap{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:16px;align-items:start;}
.ai-thread{display:flex;flex-direction:column;gap:14px;min-height:280px;}
.msg{display:flex;gap:10px;max-width:100%;}
.msg .av{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:12px;
  font-family:var(--font-serif);font-weight:700;}
.msg.is-ai .av{background:var(--ink);color:var(--gold);}
.msg.is-me .av{background:var(--gold-soft);color:var(--wood);}
.msg .bubble{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:14px;line-height:1.72;max-width:calc(100% - 44px);overflow-wrap:break-word;}
.msg.is-me{flex-direction:row-reverse;}
.msg.is-me .bubble{background:var(--ink);color:#EFEBE0;border-color:var(--ink);}
.bubble h4{margin:12px 0 6px;font-size:14px;letter-spacing:.5px;color:var(--gold);}
.bubble h4:first-child{margin-top:0;}
.bubble ul{margin:6px 0;padding-left:19px;}
.bubble li{margin:3px 0;}
.bubble strong{color:var(--cinnabar);font-weight:600;}
.msg.is-me .bubble strong{color:var(--gold);}
.bubble code{background:rgba(183,154,98,.18);padding:1px 5px;border-radius:4px;font-size:12.5px;}
.cursor::after{content:"▌";animation:blink 1s steps(2) infinite;color:var(--gold);}
@keyframes blink{50%{opacity:0;}}

.ai-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--topbar-h) + 16px);}
.qbtn{text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:13px;line-height:1.45;transition:all .15s;}
.qbtn:hover{border-color:var(--gold);background:rgba(183,154,98,.06);}

/* 工具类 */
.muted{color:var(--muted);}
.small{font-size:12.5px;}
.xsmall{font-size:11.5px;}
.bold{font-weight:600;}
.right{text-align:right;}
.center{text-align:center;}
.nowrap{white-space:nowrap;}
.mono{font-variant-numeric:tabular-nums;}
.only-mobile{display:none;}
.pos-num{color:var(--cinnabar);}
.neg-num{color:var(--ok);}
.hr{height:1px;background:var(--line);margin:14px 0;border:0;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mt8{margin-top:8px;}.mt14{margin-top:14px;}.mt20{margin-top:20px;}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .pos-wrap,.ai-wrap{grid-template-columns:minmax(0,1fr);}
  .cart-panel{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;z-index:90;
    border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-3);
    transform:translateY(102%);transition:transform .28s cubic-bezier(.3,0,.2,1);}
  body.cart-open .cart-panel{transform:none;}
  body.cart-open .scrim{opacity:1;pointer-events:auto;}
  .mobile-cart-btn{display:inline-flex;}
  .ai-side{position:static;}
}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:760px){
  :root{--topbar-h:56px;}
  .sidebar{transform:translateX(-100%);box-shadow:var(--sh-3);}
  body.nav-open .sidebar{transform:none;}
  .main{margin-left:0;}
  .only-mobile{display:grid;}
  .view{padding:14px 14px 96px;}
  .topbar{padding:0 12px;gap:8px;}
  .topbar-title h1{font-size:17px;}
  .today{display:none;}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr);}
  .metric .v{font-size:23px;}
  .card{padding:15px 14px;border-radius:var(--r-m);}
  .table-wrap{margin:0 -14px;padding:0 14px;}
  .hbar .lbl{width:88px;font-size:12px;}
  .hbar .val{width:78px;font-size:12px;}
  .modal{max-width:100%;}
}

@media (min-width:761px){
  .modal-root{align-items:center;}
  .modal{border-radius:var(--r-xl);max-height:86vh;}
}

/* ==========================================================================
   经手人：谁记的账（2026-10-06 新增）
   ========================================================================== */

/* 顶栏「当前操作人」胶囊 */
.actor-chip{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 13px 0 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);
  cursor:pointer;font-size:13px;color:var(--ink-2);white-space:nowrap;
  transition:border-color .15s,background .15s;
}
.actor-chip:hover{border-color:var(--gold);background:#fff;}
.actor-chip .a-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;}
.actor-chip .a-name{font-weight:600;}
.actor-chip .a-dev{color:var(--muted);font-size:11.5px;font-weight:400;}
.actor-chip.is-unset{border-style:dashed;border-color:var(--warn);color:var(--warn);}
.actor-chip.is-unset .a-dot{background:var(--warn);}

/* 列表里的经手人小标 */
.op-by{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);white-space:nowrap;}
.op-by i{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none;}
.op-by.is-none{color:var(--muted);}
td .op-by{font-size:12px;}

/* 操作人筛选条 */
.actor-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.actor-tab{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border-radius:9px;border:1px solid var(--line-2);background:var(--card);
  cursor:pointer;font-size:13px;color:var(--ink-2);
}
.actor-tab i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;}
.actor-tab.is-on{background:var(--ink);border-color:var(--ink);color:#F3EFE6;}
.actor-tab.is-on i{background:var(--gold);}
.actor-tab .n{color:var(--muted);font-size:11.5px;}
.actor-tab.is-on .n{color:#B9C6C2;}

/* 选人遮罩（首次打开 / 手动切换） */
.who-gate{
  position:fixed;inset:0;z-index:300;
  background:rgba(34,48,47,.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.who-card{
  width:100%;max-width:392px;background:var(--card);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:26px 22px 20px;text-align:center;
  animation:popIn .26s cubic-bezier(.2,.9,.3,1.08);
  max-height:92vh;overflow-y:auto;
}
@keyframes popIn{from{transform:translateY(14px) scale(.97);opacity:0;}to{transform:none;opacity:1;}}
.who-mark{
  width:52px;height:52px;margin:0 auto 14px;border-radius:14px;
  background:linear-gradient(155deg,var(--gold) 0%,#8E7440 100%);
  display:grid;place-items:center;font-family:var(--font-serif);
  font-size:15px;letter-spacing:1px;color:#1C2726;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.who-card h2{font-family:var(--font-serif);font-size:19px;letter-spacing:1.5px;}
.who-card p{margin-top:8px;line-height:1.7;}
.who-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.who-choice{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:14px 10px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--paper);
  cursor:pointer;transition:border-color .15s,background .15s,transform .1s;
}
.who-choice:hover{border-color:var(--gold);background:#fff;transform:translateY(-1px);}
.who-choice strong{font-size:16px;font-family:var(--font-serif);letter-spacing:1px;}
.who-choice span{font-size:11.5px;color:var(--muted);}
.who-custom{display:flex;gap:8px;margin-top:12px;}
.who-input{
  flex:1;min-width:0;height:40px;padding:0 12px;border-radius:var(--r-s);
  border:1px solid var(--line-2);background:#fff;font-size:14px;font-family:var(--font);
}
.who-input:focus{outline:none;border-color:var(--gold);}
.who-note{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);}
.who-cancel{margin-top:10px;width:100%;}

/* ==========================================================================
   登录页（2026-10-06 新增：账号登录）
   ========================================================================== */
.auth-gate{
  position:fixed;inset:0;z-index:400;
  background:linear-gradient(165deg,#22302F 0%,#2C3D3B 55%,#3A4E4B 100%);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;overflow-y:auto;
}
.auth-card{
  width:100%;max-width:376px;background:var(--card);
  border-radius:var(--r-xl);box-shadow:0 24px 60px rgba(0,0,0,.34);
  padding:28px 24px 22px;text-align:center;
  animation:popIn .28s cubic-bezier(.2,.9,.3,1.08);
  max-height:94vh;overflow-y:auto;
}
.auth-mark{
  width:56px;height:56px;margin:0 auto 14px;border-radius:16px;
  background:linear-gradient(155deg,var(--gold) 0%,#8E7440 100%);
  display:grid;place-items:center;font-family:var(--font-serif);
  font-size:16px;letter-spacing:1px;color:#1C2726;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
/* 同 .brand-mark：出印章时撤掉金色底；关标时 [hidden] 要真起作用 */
.auth-mark.has-seal{background:none;box-shadow:none;border-radius:0;}
.auth-mark.has-seal svg{display:block;}
.auth-mark[hidden]{display:none;}
.auth-card h2{font-family:var(--font-serif);font-size:20px;letter-spacing:2px;}
.auth-lead{margin-top:7px;}
.auth-accs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0 4px;}
.auth-acc{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border-radius:var(--r-m);
  border:1px solid var(--line-2);background:var(--paper);
  cursor:pointer;font-family:var(--font);transition:border-color .15s,background .15s;
}
.auth-acc:hover{border-color:var(--gold);background:#fff;}
.auth-acc i{width:8px;height:8px;border-radius:50%;flex:none;}
.auth-acc strong{font-size:14px;font-family:var(--font-serif);letter-spacing:1px;}
.auth-acc span{font-size:11px;color:var(--muted);}
.auth-card .field{text-align:left;margin-top:13px;}
.auth-err{min-height:18px;margin-top:10px;font-size:12.5px;color:var(--cinnabar);text-align:left;}
.auth-card .btn-block{margin-top:4px;}
.auth-note{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);text-align:center;line-height:1.65;}
.auth-cancel{margin-top:8px;}

/* 顶栏账号菜单 */
.acct-head{display:flex;align-items:center;gap:10px;padding:2px 0 12px;border-bottom:1px solid var(--line);}
.acct-head strong{font-size:15px;}
.acct-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.kv{margin-top:10px;}
.kv-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.kv-row:last-child{border-bottom:none;}
.kv-row span{color:var(--muted);}
.kv-row b{font-weight:600;}

/* 操作记录页 */
.log-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.log-stat .s{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px 13px;
}
.log-stat .s .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.log-stat .s .k i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;}
.log-stat .s .v{font-size:20px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums;}
.log-stat .s .v small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px;}
.log-day{display:flex;align-items:center;gap:10px;margin:20px 0 2px;}
.log-day span{font-family:var(--font-serif);font-size:13.5px;letter-spacing:1px;color:var(--ink-2);white-space:nowrap;}
.log-day i{flex:1;height:1px;background:var(--line);}
.log-day em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.log-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.log-row:last-child{border-bottom:0;}
.log-time{flex:none;width:66px;font-size:12px;color:var(--muted);line-height:1.5;font-variant-numeric:tabular-nums;}
.log-body{flex:1;min-width:0;}
.log-body .t{font-size:13.5px;line-height:1.5;word-break:break-word;}
.log-body .t b{font-weight:600;}
.log-body .c{font-size:12px;color:var(--muted);margin-top:3px;word-break:break-word;}
.log-amt{flex:none;font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:1px;}

@media (max-width:760px){
  .actor-chip{padding:0 10px;height:34px;}
  .actor-chip .a-dev{display:none;}
  .log-time{width:52px;font-size:11.5px;}
  .log-amt{font-size:12.5px;}
}

/* ==========================================================================
   采购与供应商（2026-10-06 新增）
   ========================================================================== */

/* 页内切换：采购单 / 待收货 / 快速入库 / 进货记录 */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--paper-2);border-radius:var(--r-m);flex-wrap:wrap;}
.seg-item{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:7px 14px;border-radius:9px;font-size:13.5px;font-weight:500;
  color:var(--ink-3);font-family:inherit;white-space:nowrap;transition:background .15s,color .15s;
}
.seg-item:hover{color:var(--ink);}
.seg-item.is-on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1);font-weight:600;}

/* 指标卡：金色描边（用于「在途/未收齐」） */
.metric.is-gold{border-color:var(--gold);background:linear-gradient(160deg,#FFFDF7,var(--card));}
.metric.is-gold .v{color:var(--wood);}

/* 价格涨跌（采购价变贵/变便宜） */
.c-up{color:var(--cinnabar);font-weight:600;}
.c-down{color:var(--ok);font-weight:600;}

/* 说明块 */
.note{
  font-size:12.5px;line-height:1.75;color:var(--ink-3);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 13px;
}

/* 采购单/收货单里的动态行 */
.po-row{
  border:1px solid var(--line);border-radius:var(--r-m);
  padding:11px 12px;background:var(--card);
}
.po-row + .po-row{margin-top:9px;}
.po-row-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.po-row-top select{flex:1;min-width:0;}
.po-row-no{
  flex:none;width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);color:var(--ink-3);
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.po-row-top .po-row-no{width:auto;min-width:34px;padding:0 7px;}
.po-row-del{flex:none;color:var(--muted);}
.po-row-del:hover{color:var(--cinnabar);}
.po-row .field{gap:3px;}
.po-row .field label{font-size:12px;}
.po-row .field input{padding:7px 9px;font-size:13.5px;}
.po-row-cal{
  border-left:2px solid var(--gold-soft);padding-left:10px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.po-row-cal .k{font-size:11.5px;color:var(--muted);}
.po-row-cal .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}
.po-row-cal .d{font-size:11.5px;color:var(--gold);font-weight:500;}
.hint.strong{font-weight:600;color:var(--wood);}

/* 采购单明细：就地改价（2026-10-19）
   —— 店主说「有一款进货价错了」，所以每行的采购价旁边就有个「改」，
      点了原地变输入框。不做成弹窗：弹窗里再开弹窗会被 openModal 把头一层毁掉。 */
.po-price-edit{margin-left:5px;padding:2px 7px;font-size:11.5px;color:var(--ink-3);}
.po-price-edit:hover{color:var(--cinnabar);}
.po-price-edit-box{display:block;min-width:96px;}
.po-price-edit-box input{padding:4px 6px;font-size:13px;text-align:right;}
.po-warn-bar{
  border:1px solid var(--gold-soft);border-left:3px solid var(--gold);
  background:var(--gold-bg,#fbf7ea);border-radius:var(--r-s);
  padding:9px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.po-warn-bar .t{font-size:13px;font-weight:600;color:var(--wood);}

/* 补记运费（采购单明细里内嵌的那一块）——
   input 给个固定宽度：整行拉满会把「存 / 算了」挤到看不见。 */
.po-freight-box{
  border:1px solid var(--gold-soft);border-left:3px solid var(--gold);
  background:var(--gold-bg,#fbf7ea);border-radius:var(--r-s);
  padding:9px 12px;display:flex;flex-direction:column;gap:6px;
}
.po-freight-box input{max-width:150px;text-align:right;}
.po-freight-box .xsmall{line-height:1.5;}

/* ==========================================================================
   箱 + 瓶 录入（采购单 / 收货 / 快速入库 三处共用）
   --------------------------------------------------------------------------
   为什么拆两个框：酒是整箱搬回来、按瓶卖出去的。只给一个框填「件」，
   填 10（箱）和填 120（瓶）在框里长得一模一样，错了要等对账才发现。
   拆开之后「箱」永远是箱、「瓶」永远是瓶，右边再把总数折算出来给人核对。
   ========================================================================== */
.pk{display:flex;flex-direction:column;gap:4px;}
.pk-in{display:flex;align-items:center;gap:5px;}
.pk-in input{width:100%;min-width:0;text-align:center;padding:8px 6px;font-size:14px;}
.pk-u{flex:none;font-size:12px;color:var(--muted);}
.pk-plus{flex:none;font-size:14px;color:var(--muted);font-weight:600;}
.pk-eq{
  font-size:12px;font-weight:600;color:var(--wood);
  font-variant-numeric:tabular-nums;min-height:16px;
}
.pk-eq.is-empty{color:var(--muted);font-weight:400;}
.pk-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.pk-per{display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--muted);flex:none;}
.pk-per input.pk-per-in{
  width:38px;padding:2px 4px;font-size:11.5px;text-align:center;
  border-radius:6px;background:transparent;border-color:transparent;
}
.pk-per input.pk-per-in:focus{background:#fff;border-color:var(--line);}
/* 手机上两个框别挤成一条缝 */
@media (max-width:520px){
  .pk-in input{padding:8px 4px;}
}

/* 选中的商品摆一眼：图 + 名 + 规格 + 手上还有多少。
   名字一多，光看下拉里的字最容易拿错货，对着图认最快。 */
.pick-card{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);border-radius:var(--r-m);
  padding:9px 11px;background:var(--paper);
}
/* ⚠️ 上面是 display:flex，会盖掉浏览器给 [hidden] 的 display:none，必须显式写死 */
.pick-card[hidden]{display:none;}
.pick-card .pick-thumb{
  width:64px;height:64px;flex:none;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.pick-card .pick-thumb .pthumb{width:100%;height:100%;border:0;border-radius:0;}
.pick-info{min-width:0;flex:1;}
.pick-name{font-size:15px;font-weight:600;line-height:1.3;}
.pick-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.pick-stock{font-size:12.5px;margin-top:3px;font-variant-numeric:tabular-nums;}

/* 采购单 / 收货 行内的小图 */
.po-row-pic{
  width:38px;height:38px;flex:none;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.po-row-pic .pthumb{width:100%;height:100%;border:0;border-radius:0;}
.po-row-pic .thumb-none{font-size:10px;}

/* 表格里的「商品」格：小图 + 名字。
   采购明细、收货点货、进货记录都用它 —— 名字像的货太多
   （张弓酒业 / 张弓老酒酒业、同款不同度数），图是认货的最后一道关。 */
.nm-cell{display:flex;align-items:center;gap:8px;min-width:0;}
.nm-cell .pthumb{width:34px;height:34px;flex:none;border-radius:7px;}
.nm-cell .nm-t{min-width:0;}
/* 数量格：箱打头、瓶做小字（采购链路一律这么写 —— 单子上只写瓶，店主得自己除 6） */
.qc{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;}
.qc b{font-variant-numeric:tabular-nums;}

/* 没货的那一段：跟有货的分开摆，别混在一起数不清 */
.no-stock-head{
  display:flex;align-items:center;gap:9px;margin:14px 0 2px;
  font-size:12.5px;color:var(--muted);
}
.no-stock-head::before,.no-stock-head::after{
  content:'';height:1px;background:var(--line);flex:1;
}

/* ==========================================================================
   快速入库：一批多行的明细（一行一个商品）
   ========================================================================== */
.qi-rows{display:flex;flex-direction:column;gap:10px;}
.qi-row{
  border:1px solid var(--line);border-radius:var(--r-m);
  padding:10px 11px;background:var(--paper);
  display:flex;flex-direction:column;gap:8px;
}
.qi-top{display:flex;align-items:center;gap:10px;}
.qi-thumb{
  width:44px;height:44px;flex:none;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.qi-thumb .pthumb{width:100%;height:100%;border:0;border-radius:0;}
.qi-thumb .thumb-none{font-size:10px;}
.qi-pick{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;}
.qi-pick select{width:100%;min-width:0;}
.qi-sub{font-size:12px;color:var(--muted);line-height:1.35;}
/* 这一批的合计，压在明细下面单独一行 */
.qi-sum{
  font-size:13px;font-weight:600;color:var(--ink);
  padding:8px 11px;border-radius:var(--r-m);
  background:var(--gold-soft);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
/* 随货搭赠（2026-10-21 跨款）：买这款、供应商另送的那款 —— 虚线框，跟主货区隔开 */
.qi-gift-wrap{
  margin-top:8px;padding:8px 10px;border-radius:var(--r-m);
  background:var(--paper-2);border:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:7px;
}
.qi-gift{display:flex;flex-direction:column;gap:7px;}
.qi-gift-row{display:flex;align-items:flex-start;gap:8px;}
.qi-gift-pick{min-width:0;flex:1;}
.qi-gift-pick select{width:100%;min-width:0;}
.qi-gift-row .pk{flex:0 0 auto;}
.qi-gift-row .icon-btn{flex:0 0 auto;margin-top:3px;}
/* 跨款搭赠的公允价分摊预览：尖庄 实付¥140 → 尖庄¥98 + 蓝带¥42 */
.qi-alloc{background:var(--gold-soft);border:1px solid var(--line-2);font-weight:600;color:var(--ink);}

/* --------------------------------------------------------------------------
   搭赠编辑器（2026-10-21 第二轮）：一处「选哪一款 + 几箱几瓶」
   —— 采购单、收货、快速入库三处共用，所以样式挂 .ge 而不是某一张表的类名。
   一行里：下拉（本款 / 别的款） + 箱瓶控件 + 删；窄屏自动换行。
   -------------------------------------------------------------------------- */
.ge{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ge-list{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ge-row{display:flex;align-items:flex-start;gap:8px;min-width:0;flex-wrap:wrap;}
.ge-pick{min-width:0;flex:1 1 150px;}
.ge-pick select{width:100%;min-width:0;}
.ge-row .pk{flex:0 0 auto;}
.ge-row .icon-btn{flex:0 0 auto;margin-top:3px;}
.ge-blank{flex:0 0 auto;width:28px;}
/* 采购单那行是四列网格：搭赠这一格比别的宽一点（下拉里带公允价，字长） */
.ge-field{min-width:0;}
.ge-tip{margin:0;}
/* 收银台网格下面那行「有货 N 个 / 另有 N 个已售罄」 */
.pos-grid-note{margin-top:9px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;}

/* --------------------------------------------------------------------------
   「按供应商批量挑货」面板（采购单 / 快速入库共用）
   它的活是**在长清单里快速勾几行、填个数量**，所以：
     · 一行压到三行以内，一屏能看十几个货
     · 勾选框在最左边，一眼扫得下来「哪几个勾了」
     · 没勾的行整行压暗（is-off）—— 勾了的自然跳出来
   -------------------------------------------------------------------------- */
.pick-panel{
  border:1px solid var(--line-2);border-radius:var(--r-m);
  background:var(--paper-2);padding:11px 12px;
  display:flex;flex-direction:column;gap:9px;
}
.pick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.pick-head-t{font-size:14px;font-weight:600;}
.pick-search input{width:100%;max-width:260px;padding:7px 10px;font-size:13.5px;}
.pick-list{
  display:flex;flex-direction:column;
  max-height:min(46vh,420px);overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);
}
.pick-row{
  display:flex;align-items:flex-start;gap:9px;
  padding:8px 10px;border-bottom:1px solid var(--line);
}
.pick-row:last-child{border-bottom:0;}
/* 没勾的压暗：不隐藏（还要能看见有什么货可选），只是视觉上退到后面 */
.pick-row.is-off{opacity:.62;}
.pick-row.is-off:hover{opacity:1;}
.pick-row .pick-thumb-none{
  width:34px;height:34px;flex:none;border-radius:8px;
  border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--muted);
}
.pick-row .pthumb{width:34px;height:34px;flex:none;border-radius:8px;}
.pick-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.pick-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:500;}
/* 产品名那一块是**可点的**（点一下＝选中这一款）—— 给个手型，别让人以为只能点左边的小方块 */
.pick-name{cursor:pointer;user-select:none;}
.pick-thumb-none,.pick-row .pthumb{cursor:pointer;}
.pick-tag{
  flex:none;font-size:11px;font-weight:400;color:var(--ink-3);
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:99px;padding:1px 7px;white-space:nowrap;
}
.pick-tag.is-empty{color:var(--cinnabar);border-color:rgba(168,54,42,.35);}
.pick-tag.is-price{color:var(--wood);border-color:var(--gold-soft);background:var(--gold-soft);}
.pick-in{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pick-num{width:62px;flex:none;}
.pick-num input{width:100%;text-align:center;padding:5px 6px;font-size:13px;}
.pick-in .pk-u{font-size:11.5px;}
.pick-in-2 .pick-num{width:56px;}
.pick-eq{
  font-size:12px;color:var(--wood);font-variant-numeric:tabular-nums;
  margin-left:2px;
}
.pick-eq.is-dim{color:var(--muted);}
/* 勾选框：跟「开店进度」的 .cb 同一个观感 —— 点了才有实底 */
.pick-tick{
  flex:none;width:22px;height:22px;margin-top:5px;border-radius:6px;
  border:1px solid var(--line-2);background:var(--card);
  color:transparent;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.pick-tick.is-on{background:var(--gold);border-color:var(--gold);color:#fff;}
.pick-tick svg{width:13px;height:13px;}

@media (max-width:760px){
  .pick-list{max-height:52vh;}
  .pick-row{flex-wrap:wrap;}
  .pick-num{width:56px;}
}

/* --------------------------------------------------------------------------
   收银台：卡片上的「本单 N 瓶」与多选
   -------------------------------------------------------------------------- */
/* 卡片里现在有「− N ＋」三个小按钮，.pcard 从 <button> 改成了 <div>
   （button 套 button 是非法结构，点击会串到外层去）—— 这里补相对定位挂角标 */
.pcard{position:relative;}
.pcard .pcart{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-top:7px;padding:3px 4px;border-radius:9px;
  background:var(--gold-soft);border:1px solid var(--line);
}
/* ⚠️ 上面是 display:flex，会盖掉浏览器给 [hidden] 的 display:none（同 .bulk-bar 的坑） */
.pcard .pcart[hidden]{display:none;}
.pc-b{
  width:26px;height:26px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.pc-b:hover{border-color:var(--gold);}
.pc-q{font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
/* 多选模式：整卡可勾，勾中的压一个朱砂角标 */
.pcard.is-pick-mode{border-style:dashed;}
.pcard.is-picked{border-color:var(--cinnabar);box-shadow:inset 0 0 0 2px rgba(168,54,42,.12);}
.pc-tick{
  position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;
  background:var(--cinnabar);color:#fff;display:flex;align-items:center;justify-content:center;
}
.pc-tick[hidden]{display:none;}
.pc-tick svg{width:12px;height:12px;}
.pick-bar{margin-top:10px;}

/* 手机上购物车是抽屉，加了东西看不出来 —— 数量变多时闪一下 */
@keyframes pcBump{
  0%{transform:scale(1);}
  35%{transform:scale(1.06);}
  100%{transform:scale(1);}
}
.mobile-cart-btn.is-bump{animation:pcBump .42s ease;}

/* --------------------------------------------------------------------------
   结算时的收款码：客人扫这个码付钱，钱直接进店主自己的账户
   -------------------------------------------------------------------------- */
.pay-qr-box{display:flex;justify-content:center;padding:4px 0;}
.pay-qr-img{
  width:100%;max-width:280px;height:auto;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:12px;
}
.hint.center{text-align:center;}

/* --------------------------------------------------------------------------
   开店进度：收银台收款码（每店一份）
   ⚠️ 这里的图比商品图大得多（720px）—— 二维码一糊当场扫不出来，不能按商品图压
   -------------------------------------------------------------------------- */
.qr-grid{margin-top:4px;}
.qr-slot{
  display:flex;flex-direction:column;gap:8px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);
}
.qr-frame{
  position:relative;width:100%;max-width:186px;aspect-ratio:1/1;margin:0 auto;
  border:1px dashed var(--line);border-radius:10px;background:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.qr-frame .qr-prev{width:100%;height:100%;object-fit:contain;}
.qr-frame .qr-none{font-size:12px;color:var(--muted);}
.qr-frame.has-img .qr-none{display:none;}

/* 宽弹窗（采购单明细行多） */
.modal.is-wide{max-width:900px;}
@media (max-width:760px){
  .po-row .grid{gap:8px !important;}
  .po-row-cal{border-left:0;padding-left:0;margin-top:2px;}
}

/* ==========================================================================
   硬件接入：扫码反馈、摄像头预览、条码与标签预览
   ========================================================================== */

/* 扫码结果提示条。扫到了必须马上有反馈，否则不知道扫上没有。
   用品牌玄青做底色，浅色深色主题下都看得见。 */
.scan-flash{
  position:fixed;left:50%;top:18px;transform:translate(-50%,-14px);
  z-index:9999;pointer-events:none;
  padding:9px 18px;border-radius:999px;
  background:#22302F;color:#F3EFE6;
  font-size:13.5px;font-weight:500;letter-spacing:.2px;
  opacity:0;transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  max-width:88vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scan-flash.is-on{opacity:1;transform:translate(-50%,0);}
.scan-flash.is-bad{background:#A8362A;color:#F3EFE6;}

/* 摄像头扫码预览（没买枪时先用手机/电脑摄像头顶着） */
.scan-video{width:100%;max-width:420px;border-radius:12px;background:#000;display:block;}

/* 条码画不出来时的提示 */
.bc-bad{font-size:12.5px;color:var(--cinnabar);}

/* 页面里展示条码。
   宽度收在 300px：条码本身就够宽够清楚，再宽会把弹窗里的别的内容顶出屏幕。 */
.bc-box{background:#fff;padding:6px 8px;border-radius:8px;max-width:220px;}
.bc-box svg{display:block;width:100%;height:auto;}

/* 箱码标签在屏幕上的预览。
   注意：屏幕预览是缩过的，真正尺寸以打印出来的为准（打印走独立 iframe，按 mm 排版）。 */
.lab-preview{
  display:inline-block;background:#fff;color:#000;
  border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;width:196px;vertical-align:top;
}
.lab-preview .lp-t{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lab-preview .lp-s{font-size:10.5px;color:#666;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lab-preview .lp-bc{margin-top:5px;}
.lab-preview .lp-bc svg{display:block;width:100%;height:auto;}
.lab-preview .lp-f{font-size:10.5px;color:#666;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- 扫码条（收银台 / 收货 / 盘点都在用） ---------- */
.scan-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:10px 0 12px;padding:8px 10px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-m);
}
.scan-bar-in{
  display:flex;align-items:center;gap:6px;flex:1 1 240px;min-width:200px;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:0 10px;height:38px;
}
.scan-bar-in svg{width:18px;height:18px;flex:none;color:var(--ink-3);}
.scan-input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--mono);font-size:14px;letter-spacing:.6px;
}
.scan-video-host{margin:0 0 12px;}
.scan-video-host:empty{display:none;}

/* 购物车行里「扫的哪几个箱」 */
.cl-boxes{
  font-family:var(--mono);font-size:11px;letter-spacing:.3px;
  margin-top:2px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 扫箱码后拉出来的「这箱是什么」卡片 */
.box-hit{display:grid;gap:6px;}
/* 卡头里的小条码：只做核对用，不占地方 */
.box-hit .bc-inline{margin-left:auto;}
.box-hit .bc-inline svg{display:block;width:150px;height:auto;}
.box-hit .bh-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.box-hit .bh-no{font-family:var(--mono,monospace);font-size:15px;font-weight:600;letter-spacing:.4px;}
.box-hit .bh-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.box-hit .bh-row .k{color:var(--muted);}

/* ==========================================================================
   客户置换：凭条号
   --------------------------------------------------------------------------
   凭条号要能一眼念出来、也一眼认出是「这一批的号」，所以做成等宽字体
   加一个可点的胶囊，点一下就看这笔的全过程。
   ========================================================================== */
.ex-code{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper-2);
  font-family:var(--mono,monospace);font-size:12.5px;letter-spacing:.6px;
  font-variant-numeric:tabular-nums;color:var(--ink);
  cursor:pointer;transition:border-color .15s,background .15s;
}
.ex-code svg{width:14px;height:14px;flex:none;color:var(--ink-3);}
.ex-code:hover{border-color:var(--gold);background:var(--gold-soft);}
.ex-code.is-none{
  cursor:default;color:var(--muted);font-family:inherit;
  letter-spacing:0;font-size:11.5px;border-style:dashed;
}
.ex-code.is-none:hover{border-color:var(--line-2);background:var(--paper-2);}

/* 详情里的分隔细线（比 .hr 轻，列表里连着用不抢眼） */
.hr-sm{border-top:1px solid var(--line);margin:2px 0;}

/* ==========================================================================
   货架位胶囊（置换台账用）
   --------------------------------------------------------------------------
   「我的酒摆在哪儿」是客户最想知道的一件事，所以在台账列表上直接亮出来，
   而且做成可点的——点一下就能挪位，店里最高频的动作之一。
   注意：它是个 button，得把浏览器默认的按钮外观按回去。
   ========================================================================== */
button.tag.ex-loc{
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  line-height:1.45;
  padding:3px 9px;
  transition:filter .15s,box-shadow .15s;
}
button.tag.ex-loc:hover{filter:brightness(.97);box-shadow:0 1px 4px rgba(34,48,47,.12);}

/* ==========================================================================
   客户自助查询（设置页里那一块）
   --------------------------------------------------------------------------
   左边一张码给店家看效果，右边说清楚这个码是干什么的、链接是什么。
   ========================================================================== */
.cust-qr-card{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  margin-top:12px;padding:14px;
  border:1px solid var(--line,#E4DFD4);border-radius:14px;
  background:var(--paper,#F3EFE6);
}
.cq-img{flex:0 0 auto;line-height:0;background:#fff;padding:9px;border-radius:12px;border:1px solid var(--line,#E4DFD4);}
.cq-img svg{display:block;width:190px;height:190px;}
.cq-txt{flex:1;min-width:220px;}
/* 网址拆两行：域名一行、路径一行。
   以前整串 word-break:break-all，手机上会把 `.host` 折成 `.hos` + `t/c.html`，
   看着像链接坏了。拆开后永远断在斜杠上。（2026-10-19 店主报「二维码排版有误」） */
.cq-url{
  color:var(--ink2,#5A6B66);word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff;border:1px solid var(--line,#E4DFD4);border-radius:8px;
  padding:7px 10px;margin-bottom:8px;
}
.cq-url .u-host{display:block;font-size:11.5px;color:var(--muted,#7A736A);line-height:1.45;}
.cq-url .u-path{display:block;font-size:13.5px;color:var(--ink,#22302F);font-weight:600;line-height:1.4;}
@media (max-width:720px){
  /* 手机上横排会「码在左上、右边一大片空白」—— 改成竖排居中，码也放大一点 */
  .cust-qr-card{flex-direction:column;align-items:stretch;gap:12px;}
  .cq-img{align-self:center;padding:8px;}
  .cq-img svg{width:160px;height:160px;}
  .cq-txt{min-width:0;width:100%;}
}

/* ==========================================================================
   扶摇公益
   --------------------------------------------------------------------------
   这个板块要「看得出分量」：它是拿出去讲的东西，不能做得跟普通台账一样寡淡。
   色调沿用品牌的金，但克制——公益不该比卖货更抢眼，只是要一直在。
   ========================================================================== */
.charity-card,.charity-hero{border-color:rgba(183,154,98,.38);}
.charity-hero{background:linear-gradient(180deg,rgba(230,220,196,.5),transparent 62%);}

.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;letter-spacing:.6px;
  color:var(--ink-2);background:var(--gold-soft);
  border:1px solid rgba(183,154,98,.4);
  padding:3px 10px;border-radius:999px;
}
.hero-badge .icon{width:14px;height:14px;}

.charity-slogan{
  font-size:15.5px;line-height:1.9;margin-top:11px;
  color:var(--ink);font-weight:500;
}

/* 年度目标进度 */
.goal-wrap{margin-top:14px;}
.goal-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px;}
.goal-track{height:8px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden;}
.goal-track i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),#D8C08C);
  transition:width .45s ease;
}
.goal-foot{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6;}

/* 三个数：该提 / 已捐 / 还欠着 */
.charity-metrics .metric.is-warn{border-color:rgba(168,54,42,.32);}
.charity-metrics .metric.is-warn .v{color:var(--cinnabar);}
.charity-metrics .metric.is-ok .v{color:var(--ok);}

/* 键值行 */
.kv-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--line);
}
.kv-line:last-child{border-bottom:0;}
.kv-line>span{color:var(--muted);}
.kv-line>b{font-variant-numeric:tabular-nums;font-weight:600;}
.kv-line.big{
  font-size:14.5px;border-bottom:0;padding:10px 12px;
  background:var(--paper-2);border-radius:var(--r-s);
}
.kv-list{padding:2px 0;}

/* 带单位后缀的输入框（元/瓶、%） */
.input-with-unit{display:flex;align-items:center;gap:8px;}
.input-with-unit input{flex:1;min-width:0;}
.rule-unit{flex:none;font-size:12.5px;color:var(--muted);white-space:nowrap;}

/* 规则预览与说明块 */
.rule-preview{
  font-size:13px;line-height:1.75;padding:10px 12px;border-radius:var(--r-s);
  background:var(--gold-soft);border:1px solid rgba(183,154,98,.35);color:var(--ink-2);
}
.callout{
  border-left:3px solid var(--gold);background:var(--paper-2);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 12px;
}
.callout-t{font-weight:600;font-size:13px;margin-bottom:4px;}
.callout-b{font-size:12.5px;line-height:1.8;color:var(--muted);}

/* 捐赠台账 */
.charity-total-line{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 0 10px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
.charity-total-line b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;}
.list-row.is-locked{opacity:.6;}
.ch-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.ch-acts{display:flex;gap:4px;}
.icon-btn.sm{width:26px;height:26px;}
.icon-btn.sm .icon{width:14px;height:14px;}

/* 驾驶舱里那一小块公益 */
.charity-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:9px;flex:none;
  background:var(--gold-soft);color:var(--ink-2);
}
.charity-chip .icon{width:16px;height:16px;}
.charity-hint{border-left:3px solid var(--gold);padding-left:9px;}

/* ==========================================================================
   品牌标识预览（设置页「门店信息」里那一块）
   --------------------------------------------------------------------------
   左边是客户手机上看到的（朱红实底），右边是打在小票上的（黑色单色稿）。
   两版并排摆，是为了让店主一眼看明白：**热敏小票机只有黑色**，
   朱红实底印打不出来，纸上会自动换成「白底黑框黑字」，像盖钢印。
   不这么摆，店主会以为印坏了。
   ========================================================================== */
.brand-pv-row{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--line);
}
.brand-pv-item{flex:1 1 150px;min-width:0;}
/* 底用白：这两枚标本来就画在"纸上"，深色底会看不出黑框 */
.brand-pv{
  margin-top:7px;min-height:72px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:8px;
}
.brand-pv svg{display:block;}

/* ==========================================================================
   账号与门店（view-org.js）
   一页把「有哪几家店、谁在哪家店」摊平。行做高一点、信息分三层，
   手指点得中；这是管理页，好认好点比好看要紧。
   ========================================================================== */
.org-head h2{font-family:var(--font-serif);font-size:16px;letter-spacing:1px;margin-bottom:4px;}
.org-head p{font-size:12.5px;color:var(--muted);}

.org-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.org-block-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.org-block-head h3{font-family:var(--font-serif);font-size:14.5px;letter-spacing:1px;margin-bottom:3px;}
.org-block-head p{font-size:12px;color:var(--muted);}
.org-block-head .btn{margin-left:auto;flex:none;}

.org-list{display:flex;flex-direction:column;gap:8px;}
.org-row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-m);background:#fff;
}
.org-row.is-off{opacity:.62;background:var(--paper-2);}

.org-badge{
  width:42px;height:42px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  background:var(--paper-2);color:var(--wood);
  border:1px solid var(--line-2);
  font-family:var(--font-serif);font-size:15px;letter-spacing:.5px;
}
.org-badge.is-boss{background:var(--cinnabar);color:#F7EFE4;border-color:var(--cinnabar);}

.org-main{min-width:0;flex:1;}
.org-t1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;}
.org-t2,.org-t3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.org-t2{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.org-t3{font-size:11.5px;color:var(--muted);margin-top:2px;}

.org-tag{
  font-size:11px;padding:1px 7px;border-radius:5px;white-space:nowrap;
  background:rgba(34,48,47,.07);color:var(--ink-3);
}
.org-tag.is-main{background:rgba(62,122,93,.13);color:var(--ok);}
.org-tag.is-me{background:rgba(183,154,98,.22);color:#7A6432;}
.org-tag.is-off{background:rgba(138,129,114,.16);color:var(--muted);}
/* 主体没填：这件事印在纸上就是「谁出的」缺一环，得让人一眼看见 */
.org-tag.is-warn{background:rgba(168,54,42,.14);color:var(--cinnabar);}

.org-btns{margin-left:auto;display:flex;gap:6px;flex:none;}
.org-btns .btn{white-space:nowrap;}

.org-note{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line);}
.org-note .hint{margin-top:8px;}

/* 手机上让按钮换行，别把名字和店名挤没了 */
@media (max-width:640px){
  .org-row{flex-wrap:wrap;}
  .org-btns{width:100%;margin-left:0;padding-left:54px;}
}

/* ---------- 版本自检（见 js/config.js 的 FY.build / js/app.js 的 checkFresh） ----------
   病根：手机浏览器（尤其是加到主屏幕那个图标）会把整页扣在缓存里，
   页面不重载就永远跑上一次的 JS，店主只能看着旧界面纳闷「怎么改了没变」。
   所以：侧栏底下常驻一个版本徽标，点它 = 带时间戳重载；
   真发现手上的比线上旧，才在顶栏下面拉一条红杠说话。 */
.build-chip{
  margin-top:9px;padding:3px 8px;border-radius:6px;
  border:1px solid rgba(255,255,255,.14);background:transparent;
  color:#6E807B;font-family:var(--font);font-size:11px;
  font-variant-numeric:tabular-nums;letter-spacing:.5px;cursor:pointer;
}
.build-chip:hover{color:#A9BAB5;border-color:rgba(255,255,255,.3);}

.stale-bar{
  position:sticky;top:var(--topbar-h);z-index:39;flex:none;
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;background:var(--cinnabar);color:#fff;font-size:13.5px;
}
/* ⚠️ 自己给了 display:flex，就必须自己管住 [hidden] —— 否则属性被样式盖掉，
   这条红杠会永远挂在页面上 */
.stale-bar[hidden]{display:none;}
.stale-bar span{flex:1;min-width:0;}
.stale-bar .btn{flex:none;background:#fff;border-color:#fff;color:var(--cinnabar);font-weight:600;}

/* 一行字建档 —— 商品表单最上面那一行。
   左边一道金线，是提醒它「跟下面那 20 个格子不是一回事」：
   你只管打一行字，下面自己会填好。 */
.quick-box{
  padding:10px 12px;
  border-left:3px solid var(--gold,#B79A62);
  background:var(--paper-2,#EAE4D7);
  border-radius:0 10px 10px 0;
}
.quick-box input{
  width:100%;box-sizing:border-box;
  padding:8px 10px;border-radius:8px;
  border:1px solid var(--line,#E3DBCB);
  background:var(--paper,#fff);
  font-size:13.5px;
}


/* ==========================================================================
   整箱 / 拆箱（2026-10-19）
   店主：「商品库存显示未拆一箱，实际已拆，摆上货架，怎么调整为已拆」
   —— 功能一直都在，但「未拆 1 箱」是死文字、入口是无文字的图标。
   下面这两组样式就是让那行字看起来**能点**，让弹窗里的主动作**像个按钮**。
   ========================================================================== */
.num .box-open-btn{
  display:inline-block;
  margin-top:3px;
  padding:2px 6px;
  border:1px dashed rgba(183,154,98,.6);
  border-radius:5px;
  background:rgba(183,154,98,.10);
  color:var(--gold);
  font:inherit;font-size:11px;line-height:1.5;
  cursor:pointer;
  white-space:nowrap;
}
.num .box-open-btn:hover{background:rgba(183,154,98,.22);}
.num .box-open-btn:active{transform:translateY(1px);}

.box-do{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;
  border-radius:var(--r-s);
  border:1px solid rgba(183,154,98,.3);
  background:var(--paper-2);
}
.box-do .box-do-tip{
  font-size:12px;line-height:1.65;color:var(--ink-3);
}
.box-do .field label{color:var(--muted);}

/* ==========================================================================
   展示端标记（门店款 / 线上预售款）— 2026-10-19
   店主：「把商品库存里，标记为门店款和线上预售款」
   列表上那个标签**能点**（坑表第 31 条：状态标签本身就是入口），
   所以它得看起来像能点的：虚线 / 有底 / 悬停变色，跟「未拆 N 箱 ›」一套语言。
   ========================================================================== */
.tag.show-tag{
  appearance:none;border:1px dashed var(--line-2);
  background:transparent;color:var(--muted);
  font:inherit;font-size:11px;line-height:1.5;
  padding:1px 7px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
}
.tag.show-tag:hover{border-color:var(--gold);color:var(--gold);}
.tag.show-tag.is-on{
  border-style:solid;
  border-color:rgba(183,154,98,.55);
  background:var(--gold-soft);
  color:var(--wood);
}
.tag.show-tag .st-warn{
  color:var(--cinnabar);font-size:10px;font-weight:600;
}
/* 配送方式标签（2026-10-20）：跟「展示端标记」并排，但用青色区分 ——
   一个说的是"上不上架"，一个说的是"怎么送"，两个概念别长得一样。 */
.tag.show-tag.is-ship:hover{border-color:#2E6B5C;color:#2E6B5C;}
.tag.show-tag.is-ship.is-on{
  border-style:solid;
  border-color:rgba(46,107,92,.42);
  background:rgba(46,107,92,.09);
  color:#2E6B5C;
}

/* 多选小标签（2026-10-20）：配送方式从单选改多选 —— 勾中的那颗带勾、镶青边。
   为什么不用原生 checkbox：手机上那颗小方块点不中，整块可点才用得起来。 */
.chk-chips{display:flex;flex-wrap:wrap;gap:6px;}
.chk-chip{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 11px;border-radius:999px;
  border:1px dashed var(--line-2);background:transparent;
  color:var(--muted);font:inherit;font-size:12.5px;line-height:1.2;
  cursor:pointer;
}
.chk-chip .icon{width:12px;height:12px;margin-left:-2px;opacity:0;transition:opacity .12s;}
.chk-chip:hover{border-color:#2E6B5C;color:#2E6B5C;}
.chk-chip.is-on{
  border-style:solid;border-color:rgba(46,107,92,.45);
  background:rgba(46,107,92,.09);color:#2E6B5C;
}
.chk-chip.is-on .icon{opacity:1;}
/* 多选弹窗里那颗「已选」：单选时代没有它，多选必须让店主一眼看出勾了哪几个 */
.show-opt .so-on{display:none;margin-left:6px;font-size:11px;font-weight:600;color:var(--gold);}
.show-opt.is-on .so-on{display:inline;}

/* 选一个标记：整块可点，选中那块的左边一道金线 */
.show-opt{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  width:100%;box-sizing:border-box;
  padding:10px 12px;border-radius:var(--r-s);
  border:1px solid var(--line);background:var(--card);
  text-align:left;font:inherit;cursor:pointer;
  border-left:3px solid transparent;
}
.show-opt:hover{border-color:var(--line-2);background:var(--paper);}
.show-opt.is-on{
  border-left-color:var(--gold);
  background:var(--paper-2);
  cursor:default;
}
.show-opt .so-t{
  display:flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}
.show-opt.is-on .so-t{color:var(--wood);}
.show-opt .so-d{font-size:12px;line-height:1.6;color:var(--muted);}

/* ==========================================================================
   批量设整箱售价 · 逐款预览（2026-10-19）
   一次改几十款，**必须逐款摆出来给他核**，所以这一块要能扫读：
   名字在左、原价 → 新价 → 折合每瓶在右，省多少用绿色小字。
   ========================================================================== */
.bcp-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 2px;border-bottom:1px dashed var(--line);
}
.bcp-row:last-of-type{border-bottom:0;}
.bcp-row .bcp-n{
  min-width:0;flex:1;font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bcp-row .bcp-v{
  flex:none;display:flex;align-items:baseline;gap:5px;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
.bcp-row .bcp-arrow{color:var(--muted);}
.bcp-row .bcp-save{color:var(--ok);font-size:11.5px;}
.bcp-row .bcp-warn{color:var(--cinnabar);font-size:11.5px;font-weight:600;}

@media (max-width:520px){
  .bcp-row{flex-wrap:wrap;gap:2px;}
  .bcp-row .bcp-v{width:100%;justify-content:flex-start;}
}

/* ==========================================================================
   二维码盒子（2026-10-20 修「发给客户的二维码是乱码」）
   --------------------------------------------------------------------------
   qrcode.js 出来的 SVG 带 width="168mm"（打印要 1:1 落纸）。
   屏幕上套一层 .qr-box，把 SVG 按容器缩成像素 —— 不套的话 168mm ≈ 635px，
   会把 168px 的小盒子撑爆，二维码裁成花的，扫不出来。
   打印那条路（print.js）不走这个类，那边本来就是 mm，别动。
   ========================================================================== */
.qr-box{line-height:0;background:#fff;display:block;overflow:hidden;}
.qr-box svg{display:block;width:100%;height:100%;}

/* ==========================================================================
   平台对接（view-platform.js）— 2026-10-22 加
   ========================================================================== */
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr;} }

.pf-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.pf-step{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-m);padding:8px 12px;flex:1 1 160px;}
.pf-step-n{width:22px;height:22px;border-radius:50%;background:var(--cinnabar);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pf-step-t{font-size:13px;font-weight:600;color:var(--ink);}
.pf-step-s{font-size:11px;color:var(--muted);}

.pf-card .pf-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.pf-bad{font-size:11px;line-height:1;padding:4px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap;}
.pf-bad.is-on{background:rgba(62,122,93,.12);color:var(--ok);border-color:rgba(62,122,93,.3);}
.pf-bad.is-off{background:rgba(138,129,114,.12);color:var(--muted);border-color:var(--line);}
.pf-bad.is-info{background:rgba(183,154,98,.14);color:var(--wood);border-color:rgba(183,154,98,.35);}
.pf-bad.is-err{background:rgba(168,54,42,.1);color:var(--bad);border-color:rgba(168,54,42,.3);}

.pf-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);
  margin:10px 0 2px;cursor:pointer;}
.pf-check input{width:16px;height:16px;accent-color:var(--cinnabar);}

.pf-backend{display:flex;align-items:flex-start;gap:10px;}
.pf-dot{width:10px;height:10px;border-radius:50%;margin-top:4px;flex:0 0 auto;}
.pf-dot.is-off{background:var(--muted);box-shadow:0 0 0 3px rgba(138,129,114,.18);}
.pf-dot.is-on{background:var(--ok);box-shadow:0 0 0 3px rgba(62,122,93,.18);}

/* ==========================================================================
   左侧栏折叠（2026-10-22）— 桌面收成图标栏，把宽度让给右侧宽表
   --------------------------------------------------------------------------
   店主：「侧栏可折叠，留出空间给右边，不然商品库存显示不全」。
   商品库存表 min-width 1500、而 .view 原本封顶 1360 —— 只收侧栏还不够，
   所以收起来时**一并放开 .view 的宽度上限**，腾出的地方才真给到表。
   手机（<=760）走抽屉，这套只在桌面生效，绝不碰手机。
   ========================================================================== */
@media (min-width:761px){
  body.nav-collapsed{ --sidebar-w:64px; }
  body.nav-collapsed .view{ max-width:none; }

  body.nav-collapsed .brand{ justify-content:center; padding:18px 0 16px; }
  body.nav-collapsed .brand-text{ display:none; }
  body.nav-collapsed .brand-mark{ width:38px; height:38px; font-size:12px; letter-spacing:0; }
  body.nav-collapsed .shop-switch{ display:none; }

  body.nav-collapsed .nav{ padding:8px 8px 12px; }
  body.nav-collapsed .nav-group{ display:none; }
  body.nav-collapsed .nav-item{ justify-content:center; padding:11px 0; position:relative; gap:0; }
  body.nav-collapsed .nav-item > span:not(.nav-badge){ display:none; }
  body.nav-collapsed .nav-item .icon{ width:22px; height:22px; }
  body.nav-collapsed .nav-item .nav-badge{
    position:absolute; top:3px; right:6px; margin:0;
    padding:0 4px; height:14px; line-height:14px; min-width:14px;
    font-size:9px; text-align:center;
  }

  body.nav-collapsed .sidebar-foot{ padding:12px 0 14px; display:flex; flex-direction:column; align-items:center; gap:8px; }
  body.nav-collapsed .conn span{ display:none; }
  body.nav-collapsed .stamp{ display:none; }
  body.nav-collapsed .build-chip{ display:none; }
}
@media (max-width:760px){ .only-desktop{ display:none !important; } }

/* ==========================================================================
   建店总投入总账（2026-10-23）
   --------------------------------------------------------------------------
   店主：「建店总投入，包含货品，不只是装修，这一定是总账」。
   总账里「架上货品」那一行不是开销记的，是从批次算的存货成本 ——
   底色跟上面几行稍微分开一点，让人一眼看出它性质不同。
   ========================================================================== */
table.tb tbody tr.is-goods td{ background:rgba(183,154,98,.10); font-weight:600; }
table.tb tbody tr.is-goods td:nth-child(4){ font-weight:400; color:var(--muted); font-size:12.5px; }

/* ==========================================================================
   系统设置 · 页内跳转 + 二维码排版（2026-10-23）
   --------------------------------------------------------------------------
   店主：「自己核价的二维码可以排排版，更容易看一些，省的不好看，不好找」。
   两件事：
     ① 设置页七块内容太长，想找那张码要滚半天 → 页首给一排跳转 chip；
     ② 码卡里塞了四五段说明，挤得码都显小 → 说明收进 <details>，码放大到 190。
   ========================================================================== */
.set-nav{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.set-nav .chip{ font-size:12.5px; padding:5px 11px; }

.cq-fold{ margin-top:10px; background:#fff; border:1px solid var(--line,#E4DFD4); border-radius:10px; }
.cq-fold > summary{
  cursor:pointer; list-style:none; padding:8px 11px;
  font-size:12.5px; color:var(--ink2,#5A6B66); user-select:none;
}
.cq-fold > summary::-webkit-details-marker{ display:none; }
.cq-fold > summary::before{ content:'▸ '; color:var(--gold); }
.cq-fold[open] > summary::before{ content:'▾ '; }
.cq-fold[open] > summary{ border-bottom:1px solid var(--line,#E4DFD4); }
.cq-fold-body{ padding:4px 11px 11px; }
.cq-fold-body .hint{ margin-top:8px; }
.cq-fold-body .hint:first-child{ margin-top:4px; }

/* 自家人那张码：跟客户码长得不一样 —— 两张都白底黑码，扫错那张是真会出事 */
.cust-qr-card.is-own{ background:#FBF7EC; border-color:rgba(183,154,98,.55); }

/* ==========================================================================
   商品成本台账加三列（2026-10-23）
   --------------------------------------------------------------------------
   店主：「把品鉴、自用、运损的都在系统上做出来，而且可以统计……要折算出
   付出的成本和收入比例」。台账从 8 列变 11 列（品鉴 / 三项成本 / 占营业额），
   默认 620px 会把数字挤成两行，这里给它一条更宽的底线 —— 屏窄了就横滚，
   跟库存表一个规矩：宁可滑一下，也不许把数字压成两行。
   ========================================================================== */
table.tb.xl{ min-width:900px; }

/* ==========================================================================
   品鉴 / 自用 / 运损 · 统计（三类各一张表，2026-10-26）
   --------------------------------------------------------------------------
   店主：「里面按照三类统计，而不是两个同样的统计表」。
   以前是「按酒汇总」+「逐笔记录」两张同构列表，同一个数看两遍；
   现在每一类一块：名字 + 一句人话 + 瓶数 + 成本 + 占三项合计的多少，
   下面才是这类里是哪几款酒。逐笔收进「点开看」，不单占一块。
   三块之间用一条极浅的分隔，别用重边框 —— 弹窗里已经够花了。
   ========================================================================== */
.ns-kinds{ display:flex; flex-direction:column; gap:10px; }

.ns-kind{ background:#fff; border:1px solid var(--line, #E4DFD4); border-radius:12px; padding:10px 12px; }
.ns-kind + .ns-kind{ margin-top:0; }

/* 顶行：名字 | 解释（占满剩下的宽度，窄屏自动折行） | 瓶数 | 成本 | 占比 */
.ns-kind-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ns-kind-t{ font-weight:700; font-size:14px; color:var(--ink, #22302F); flex:none; }
.ns-kind-hint{ font-size:12px; color:var(--muted, #7C8B86); flex:1 1 160px; min-width:0; }
.ns-kind-num{ flex:none; font-size:13px; color:var(--ink-3, #5A6B66); }
.ns-kind-cost{ flex:none; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.ns-kind-share{
  flex:none; font-size:11.5px; color:var(--gold, #B79A62);
  background:rgba(183,154,98,.12); border-radius:999px; padding:1px 8px;
}

/* 类里的小表：贴着顶行，不要撑太宽。
   ⚠️ 必须写 `table.tb.ns-tb` 才压得住全局的 `table.tb{min-width:620px}` ——
   只有三个列（酒 / 瓶数 / 成本），手机上还剩 200 多像素却被迫横滚，纯属自找麻烦。 */
table.tb.ns-tb{ margin-top:8px; min-width:0; width:100%; }
.ns-tb th, .ns-tb td{ padding:5px 8px; font-size:12.5px; }
.ns-tb thead th{ font-size:11.5px; }

/* 三类各自的记号：品鉴偏金（是投入）、自用墨青（自己人）、运损朱砂（损失） */
.ns-kind.is-taste{ border-left:3px solid var(--gold, #B79A62); }
.ns-kind.is-self{ border-left:3px solid var(--ink, #22302F); }
.ns-kind.is-damage{ border-left:3px solid var(--cinnabar, #A8362A); }

/* 合计那一条：一行说完，不再占一块列表 */
.ns-total{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:8px 12px; border-radius:10px; background:rgba(34,48,47,.05);
  font-size:13px; font-variant-numeric:tabular-nums;
}
.ns-total .ns-total-t{ font-weight:700; color:var(--ink, #22302F); }