/* 接单台
   配色：深墨绿顶栏 + 红主色（与小程序主题 A 同源）；待接单用红边强调。
   设计目标是「一眼看见新单、一手点掉」——不是好看，是别漏单。
*/

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

/* ★★ hidden 属性必须真的藏住。
   浏览器给 [hidden] 的默认样式是 display:none，但它只是**元素选择器**
   优先级 —— 任何写了 display:flex / display:grid 的类都会盖掉它。

   实际踩过的后果（2026-10-30 截图才看出来）：
     · .closed-tip（打烊提示） / .reprint-tip（补打提示）都是 display:flex
       → 没打烊、没补打的时候，顶栏下面挂着两条**空白横条**，
         老板以为是加载失败
     · .stat（待支付统计卡）也是 display:flex
       → 一张待支付都没有时，顶栏一直显示「0 待支付」

   只在 .cfg-mask 上补过一条 [hidden]，结果另外三处全漏。
   这类事不该靠「记得给每个类补一条」，一条全局规则解决。 */
[hidden] { display: none !important; }

:root {
  --ink: #1E332C;
  --ink-2: #2A463C;
  --primary: #D93B2B;
  --primary-dk: #B22C1E;
  --warn: #E8890C;
  --ok: #00A870;
  --text-1: #1A1A1A;
  --text-2: #5A615C;
  --text-3: #8C948E;
  --line: #E5E7E4;
  --bg: #F4F5F3;
  --card: #FFFFFF;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ==================== 顶栏 ==================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(0, 168, 112, .22);
}
.dot.offline { background: var(--primary); box-shadow: 0 0 0 3px rgba(217, 59, 43, .22); }
.brand-name { font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.brand-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  border-left: 1px solid rgba(255, 255, 255, .2);
  padding-left: 8px;
  margin-left: 2px;
}

.stats {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stat b {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat span {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
/* 有待接单时数字变亮黄，余光就能扫到 */
.stat b.alert { color: #FFC61A; }

/* 待支付：不是主流程，压暗一档。
   不能做成醒目的红色 —— 顾客填个地址都要十几秒，全程闪红只会让老板麻木。 */
.stat-mute b { color: rgba(255, 255, 255, .45); }
.stat-mute span { color: rgba(255, 255, 255, .35); }

.actions {
  display: flex;
  gap: 10px;
  flex: none;
}
.btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .2); }
.btn.ghost.on {
  background: #FFC61A;
  color: var(--ink);
}

/* ==================== 看板 ==================== */
.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px 20px;
  align-items: start;
}

.col {
  background: #EDEFEC;
  border-radius: 12px;
  overflow: hidden;
}
.col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #E4E7E3;
}
.col-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.col-cnt {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.col-cnt.gray { background: #B6BDB7; }

.col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 120px;
}

/* ==================== 订单卡 ==================== */
.card {
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border-left: 4px solid transparent;
}
/* 待接单：红边 + 轻微呼吸，最需要被看见 */
.card.wait {
  border-left-color: var(--primary);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 3px rgba(217, 59, 43, .12), var(--shadow); }
}
.card.doing { border-left-color: var(--warn); }
.card.ready { border-left-color: var(--ok); }
.card.new { animation: flash .6s ease-out 3; }
@keyframes flash {
  0%, 100% { background: var(--card); }
  40% { background: #FFF4E5; }
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 8px;
}

.badge-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
/* 桌号 / 取餐码是本卡片最该被一眼读到的信息 */
.code {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.code.pickup { color: var(--primary); }
.code-label {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .06em;
}

.meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ff {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #EEF1EE;
  color: var(--text-2);
}
.wait-time {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wait-time.long { color: var(--primary); font-weight: 700; }

.items {
  padding: 0 14px 10px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 8px;
}
.item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.item .n { flex: 1; color: var(--text-1); }
.item .s { font-size: 11px; color: var(--text-3); }
.item .q {
  flex: none;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.note {
  margin: 0 14px 10px;
  padding: 7px 10px;
  background: #FFF8E5;
  border-radius: 6px;
  font-size: 12px;
  color: #8A5B00;
  line-height: 1.5;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  background: #FAFBFA;
  border-top: 1px solid var(--line);
}
.total {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.total .cur { font-size: 11px; font-weight: 600; }

/* 优惠标签：跟在金额后面，只在顾客真用了券时出现
   ★ 老板关心的不是「减了几元」，是「这钱谁掏的」——
     所以标签里必须带出资方，不能只写「-5」。 */
.total .disc-tag {
  font-size: 11px;
  font-weight: 400;
  color: #8A5B00;
  background: #FFF8E5;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}
.total .disc-tag s { color: #9AA3AE; }

.act {
  height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background: var(--ink);
}
.act.accept { background: var(--primary); }
.act.accept:hover { background: var(--primary-dk); }
.act.ready { background: var(--ok); }
.act.done { background: var(--ink); }
.act.cancel {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--line);
  font-weight: 500;
}
.act:active { transform: translateY(1px); }

.col-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* ==================== 沽清面板 ==================== */
.panel {
  margin: 0 20px 24px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.panel-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.panel-hint {
  font-size: 12px;
  color: var(--text-3);
}
.panel-toggle {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 16px 18px 18px;
}
.dish-grid.hidden { display: none; }

.dish {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.dish.out {
  background: #FAFAF9;
  border-style: dashed;
}
.dish-info { flex: 1; min-width: 0; }
.dish-name {
  font-size: 13px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dish.out .dish-name { color: var(--text-3); text-decoration: line-through; }
.dish-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* 开关：44px 高，手指/鼠标都好点 */
.toggle {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: 0;
  background: #D6DAD6;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.toggle.on { background: var(--primary); }
.toggle.on::after { left: 23px; }

/* ==================== 其他 ==================== */
.empty-tip {
  margin: 0 20px 20px;
  padding: 14px 18px;
  background: #FFF8E5;
  border-radius: 10px;
  font-size: 13px;
  color: #8A5B00;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 100;
}
.toast.show { opacity: 1; }

/* ==================== 窄屏 ==================== */
@media (max-width: 1000px) {
  .board { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px; }
  .stats { margin-left: 0; }
  .actions { margin-left: auto; }
}

/* 营业额：金额比单数重要，给它更宽的呼吸感 */
.stat-money b {
  font-size: 24px;
  letter-spacing: -0.5px;
}
.stat-money span {
  font-size: 11px;
  opacity: 0.85;
}

/* 营业开关按钮：平时低调，打烊时变红 —— 这是「异常状态」，
   老板一眼要看到「店是关着的」 */
#btnOpen.closed {
  background: rgba(217, 59, 43, .18);
  border-color: rgba(217, 59, 43, .6);
  color: #FF8A80;
}

/* 打烊提示条：横贯一条，不抢三列的注意力，但不可能看不见 */
.closed-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 20px 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 143, 31, .12);
  border: 1px solid rgba(255, 143, 31, .45);
  font-size: 13px;
  color: #FFD8A8;
}
.ct-btn {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 143, 31, .7);
  background: transparent;
  color: #FFD8A8;
  font-size: 12px;
  cursor: pointer;
}
.ct-btn:hover {
  background: rgba(255, 143, 31, .2);
}

/* ---------------- 出餐口标签 ---------------- */
/* 卡片顶部：这单要跑几个档口。
   两个以上才显示 —— 只有一个档口时显示等于噪音。 */
.st-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.st-tag {
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 198, 26, .16);
  border: 1px solid rgba(255, 198, 26, .35);
  color: #FFC61A;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

/* 菜品行里的小档口标：压得很淡，只是让老板知道这道菜在哪拿 */
.st-mini {
  flex: none;
  padding: 0 5px;
  margin-right: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  line-height: 16px;
}

/* ---------------- 打印结果 ----------------
   分单后会出现「后厨出了、水吧没出」。这是必须看见的信息：
   只看到后厨的纸就以为齐了，那杯奶茶永远没人做。 */
.print-tip {
  margin: 0 14px 10px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
}
.print-tip.ok {
  background: rgba(0, 168, 112, .1);
  color: rgba(122, 226, 187, .9);
}
.print-tip.bad {
  background: rgba(217, 59, 43, .18);
  border: 1px solid rgba(217, 59, 43, .45);
  color: #FF8A80;
  font-weight: 600;
}

/* ---------------- 档口出餐按钮 ----------------
   每个档口一个按钮，出过的变绿并打勾。
   比「整单出餐」多几个按钮，但换来的是「不会再出现奶茶没摇就叫人取餐」。 */
.act.st {
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .06);
}
.act.st:hover {
  background: rgba(255, 255, 255, .13);
}
.act.st.st-done {
  background: rgba(0, 168, 112, .22);
  border-color: rgba(0, 168, 112, .6);
  color: #7AE2BB;
}

/* 卡片底部按钮多的时候要能换行，否则窄屏会挤成一坨 */
.card-foot {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* 还差哪几档：一句话，压在主色上，比红字轻一点
   （这是「正常进行中」不是「出错」，不该用报警色） */
.pending-tip {
  margin: 0 14px 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 198, 26, .1);
  color: rgba(255, 198, 26, .85);
  font-size: 11px;
  line-height: 1.5;
}

/* 出票中：灰蓝，比「已出票」轻、比失败更不像问题
   （正在打是正常过程，不该用报警色） */
.print-tip.run {
  background: rgba(120, 170, 255, .12);
  color: rgba(170, 200, 255, .95);
}
/* 无需打印（没启用 / 本单无菜品）：最轻，不要占注意力 */
.print-tip.mute {
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .45);
}

/* 补打标记：这张票是服务重启后补出来的，后厨手里可能已有一张。
   橙色描边而非填充 —— 要看得见，但不能像「新单」那么抢眼。 */
.tag-reprint {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 143, 31, .8);
  color: #FFB067;
  font-size: 10px;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------------- 补打提示 ----------------
   服务重启后自动补打了若干单。用蓝色系而不是橙色：
   这不是问题（系统正常补救了），只是「你可能想不到」的信息。
   橙色是给「已打烊」「打印未完成」这些需要马上处理的。 */
.reprint-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 20px 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(120, 170, 255, .1);
  border: 1px solid rgba(120, 170, 255, .35);
  font-size: 13px;
  color: rgba(190, 215, 255, .95);
}
.rp-txt {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}
.rp-btn {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 170, 255, .55);
  background: transparent;
  color: rgba(190, 215, 255, .95);
  font-size: 12px;
  cursor: pointer;
}
.rp-btn:hover {
  background: rgba(120, 170, 255, .18);
}

/* ==================== 店铺设置面板 ====================
   为什么是浮层不是新页面：老板改到一半想瞄一眼订单，
   跳走再回来又要重新找位置、重新选分类。浮层关掉就回到原处。

   配色沿用接单台（浅底深字）。注意 .btn.ghost 原本是给深色顶栏用的
   （白字 + 半透明白底），放进浅底面板要单独覆盖，否则看不见字。
*/
.cfg-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 30, 26, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* 这条是这一处单独的补丁，现在由文件顶部的全局 [hidden] 规则兜底。
   留着不删是因为它记录了这个坑：【display:flex 会盖掉 hidden】。
   但下次别再靠「给每个类补一条」—— 那正是当初只修了一处、
   另外三处全漏的原因。 */

.cfg-panel {
  width: min(1080px, 96vw);
  height: min(86vh, 840px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cfg-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.cfg-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.cfg-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  padding: 3px;
  border-radius: 9px;
}
.cfg-tab {
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.cfg-tab.is-on {
  background: #fff;
  color: var(--text-1);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.cfg-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cfg-dirty {
  font-size: 12px;
  color: var(--warn);
  font-weight: 600;
}
.cfg-panel .btn.ghost {
  background: #fff;
  color: var(--text-2);
  border: 1px solid var(--line);
  font-weight: 500;
}
.cfg-panel .btn.ghost:hover { background: var(--bg); }
.cfg-panel .btn.primary {
  background: var(--primary);
  color: #fff;
}
.cfg-panel .btn.primary:hover { background: var(--primary-dk); }
.cfg-panel .btn.primary:disabled {
  background: #C9CDCA;
  cursor: default;
}

.cfg-alert, .cfg-warn {
  margin: 0;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.7;
  flex: none;
  border-bottom: 1px solid transparent;
}
.cfg-alert {
  background: #FDF0EE;
  color: #A32D2D;
  border-bottom-color: #F5C4B3;
}
.cfg-warn {
  background: #FDF6E7;
  color: #854F0B;
  border-bottom-color: #FAC775;
}
.cfg-alert[hidden], .cfg-warn[hidden] { display: none; }
.cfg-err { white-space: pre-wrap; }

.cfg-body {
  flex: 1;
  overflow: auto;
  padding: 16px 18px;
}
.cfg-tabpane[hidden] { display: none; }

.cfg-split {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  align-items: start;
}

/* ---------- 左：分类 ---------- */
.cfg-cats {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.cfg-cats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}
.cfg-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.cfg-cat:last-child { border-bottom: 0; }
.cfg-cat:hover { background: var(--bg); }
.cfg-cat.is-on {
  background: #FDF0EE;
  box-shadow: inset 3px 0 0 var(--primary);
}
.cfg-cat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfg-cat-n {
  font-size: 11px;
  color: var(--text-3);
}

/* ---------- 右：菜品 ---------- */
.cfg-dishes-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  min-height: 32px;
}
.cfg-dishes-head > span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.cfg-dish {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.cfg-dish {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.cfg-dish.off { opacity: .55; }
.cfg-dish-main { flex: 1; min-width: 0; }

/* 菜品图：84px 缩略图 + 换图按钮。
   图必须看得见 —— 老板改完图不给预览，他不知道自己换成了哪一张。 */
.cfg-dish-img {
  width: 84px;
  flex: none;
}
.cfg-dish-img img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  display: block;
}
.cfg-dish-img .mini {
  width: 100%;
  margin-top: 6px;
}
.cfg-dish-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cfg-dish-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cfg-dish-row3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cfg-lab {
  font-size: 12px;
  color: var(--text-3);
  width: 30px;
  flex: none;
}
.cfg-yen {
  font-size: 13px;
  color: var(--text-3);
  margin-left: 4px;
}

/* ---------- 控件 ---------- */
.cfg-in {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-1);
  background: #fff;
  min-width: 0;
}
.cfg-in:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(217, 59, 43, .12);
}
.cfg-in.name { flex: 1; font-weight: 500; }
.cfg-in.price { width: 88px; text-align: right; }
.cfg-in.t { width: 118px; }
.cat-name-in { width: 190px; font-weight: 600; }
#tablesIn { width: 100%; }

.cfg-sel {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-1);
  background: #fff;
  cursor: pointer;
}

.cfg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.cfg-chip input { display: none; }
.cfg-chip.is-on {
  border-color: var(--primary);
  background: #FDF0EE;
  color: var(--primary-dk);
  font-weight: 600;
}
.cfg-chip.sm { height: 24px; padding: 0 8px; }

.mini {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  flex: none;
}
.mini:hover { background: var(--bg); }
.mini.danger { color: var(--primary-dk); border-color: #F5C4B3; }
.mini.danger:hover { background: #FDF0EE; }

/* ---------- 店铺表单 ---------- */
.cfg-form { max-width: 720px; }
.cfg-field { margin-bottom: 16px; }
.cfg-field > label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 6px;
  font-weight: 500;
}
.cfg-field .cfg-in { width: 100%; max-width: 420px; }
.cfg-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  max-width: 620px;
}
.cfg-row2 .cfg-in { width: 100%; max-width: none; }
.cfg-hours { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cfg-hour { display: flex; align-items: center; gap: 8px; }
.cfg-ff { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-mut { color: var(--text-3); font-size: 13px; }
.cfg-mut.sm { font-size: 12px; line-height: 1.6; margin-top: 6px; }
.cfg-note {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}

/* 提醒级说明：背景色 + 左边框，跟普通说明区分开
   ★ 数据备份这条必须"看得见"——老板不会主动点开一个灰字说明，
     等真丢数据时才后悔。 */
.cfg-note.warn {
  background: #FFF8E5;
  border-left: 3px solid #E0A800;
  border-radius: 6px;
  padding: 10px 12px;
  color: #7A5200;
}

/* 工具条：一排按钮（备份页签的导出按钮用） */
.cfg-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.cfg-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* ---------- 备份 ---------- */
.cfg-bk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-bottom: 8px;
  font-size: 13px;
}
.cfg-bk-t { color: var(--text-1); font-weight: 500; width: 150px; flex: none; }
.cfg-bk-n { color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-bk-s { color: var(--text-3); font-size: 12px; width: 64px; text-align: right; flex: none; }

/* ---------- 底栏 ---------- */
.cfg-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex: none;
}
.cfg-hint { font-size: 12px; color: var(--text-3); }
.cfg-actions { margin-left: auto; display: flex; gap: 10px; }

/* ---------- 规格组 ---------- */
.cfg-specs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.cfg-specs-head .cfg-note { margin: 0; }

.cfg-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
}
.cfg-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cfg-in.g-name { width: 170px; font-weight: 600; }
.cfg-sel.g-type { width: 84px; }
.cfg-group-head .g-used { margin-left: auto; }
.cfg-group-head .mini.danger { flex: none; }

.cfg-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cfg-opt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cfg-opt .cfg-yen { margin: 0; flex: none; }
.cfg-in.opt-name { width: 170px; }
.cfg-in.opt-price { width: 76px; text-align: right; }
.cfg-in.opt-max {
  width: 54px;
  height: 24px;
  padding: 0 6px;
  text-align: center;
}
.cfg-def {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  flex: none;
}
.cfg-def input { margin: 0; }
.cfg-opt .mini.danger { margin-left: auto; flex: none; }

@media (max-width: 900px) {
  .cfg-split { grid-template-columns: 1fr; }
  .cfg-row2 { grid-template-columns: 1fr; }
  .cfg-group-head .g-used { margin-left: 0; }
}

/* ================= 开店准备（首次启动引导） =================
   ★ 为什么单独写一套类名，不复用 .chip / .stat：
     那两个是顶栏统计卡的样式（min-width:130px、无文字色），
     拿来当按钮会渲染成一排压扁的灰条、字都看不见。
     界面上的类名不许复用 —— 这是第二次踩，记在这里。 */
.setup {
  margin: 0 16px 12px;
  padding: 14px 16px 12px;
  background: #FFFDF7;
  border: 1px solid #F0E2C0;
  border-radius: 10px;
}

.setup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.setup-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
}

.setup-count {
  font-size: 12px;
  font-weight: 700;
  color: #8A6A1F;
  background: #FBEBC7;
  border-radius: 20px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

.setup-sub {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
}

.setup-x {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.setup-x:hover { background: #F3EAD5; color: var(--text-2); }

/* 四列：一屏看全，不用滚动。窄屏退成两列。 */
.setup-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.setup-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 11px;
  background: #FFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.setup-step:hover { border-color: #E4C97E; box-shadow: 0 2px 8px rgba(180, 140, 40, .12); }

/* 未完成：红点提醒（跟「待接单」同一个视觉语言） */
.setup-step:not(.is-done) .ss-mark {
  background: var(--primary);
  color: #FFF;
  border-color: var(--primary);
}
.setup-step.is-done { background: #F7FBF8; border-color: #D8EDE2; }
.setup-step.is-done .ss-mark { background: var(--ok); color: #FFF; border-color: var(--ok); }
.setup-step.is-done .ss-title { color: var(--text-2); }

.ss-mark {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid #C9CFC9;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: transparent;
}

.ss-body { min-width: 0; }
.ss-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.ss-hint {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

/* 完成一条就把「去填写」换成对勾，别让人以为还要点 */
.ss-go {
  margin-left: auto;
  align-self: center;
  font-size: 11px;
  color: #8A6A1F;
  white-space: nowrap;
}
.setup-step.is-done .ss-go { display: none; }

@media (max-width: 1100px) {
  .setup-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ================= 未授权提示条 =================
   用暖红而不是纯红：它是「提醒」不是「故障」，别让老板以为系统坏了。
   常驻在开店准备卡之上，因为「授权」比「配菜单」更靠前。 */
.lic-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 10px;
  padding: 9px 14px;
  background: #FDF0EC;
  border: 1px solid #F3C9BC;
  border-radius: 8px;
  font-size: 13px;
  color: #8C3A20;
}
.lic-tip b { font-weight: 700; }
.lic-btn {
  margin-left: auto;
  border: 1px solid #E0A38C;
  background: #FFF;
  color: #8C3A20;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.lic-btn:hover { background: #FCEEE8; }

/* ============================================================================
   历史订单 + 导出
   复用 .cfg-mask / .cfg-panel / .cfg-head 那套骨架，这里只补内容区自己的样式。
   ========================================================================== */

.his-panel {
  /* 列表比设置面板长，给高一点；小屏自动缩 */
  height: min(88vh, 900px);
}

/* ---------------- 筛选条 ---------------- */
.his-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.his-quick {
  display: flex;
  gap: 6px;
}

/* ★ 别复用 .cfg-chip：那个是"勾选框"样式，带 3px 进度条，用在这里会压成一条线 */
.his-q {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.his-q:hover { border-color: var(--text-3); }

.his-q.is-on {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.his-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
}

.his-dates input,
.his-sel,
.his-kw {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-1);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.his-dates input:focus,
.his-sel:focus,
.his-kw:focus { border-color: var(--primary); }

.his-kw { flex: 1; min-width: 150px; }

/* ---------------- 汇总行（左统计 右导出） ---------------- */
.his-sumrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}

.his-sum {
  font-size: 14px;
  color: var(--text-2);
}

.his-sum b { color: var(--text-1); font-size: 16px; }
.his-sum .his-money { color: var(--primary); }
.his-sum .his-range { color: var(--text-3); margin-right: 10px; }
.his-sum .his-note { color: var(--text-3); font-size: 12px; margin-left: 6px; }

.his-actions { display: flex; gap: 8px; }

/* ---------------- 列表 ---------------- */
.his-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 18px 18px;
}

.his-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

.his-row {
  border-bottom: 1px solid var(--line);
}

.his-row.is-open { background: #FAFBFA; }

.his-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  font-size: 14px;
  cursor: pointer;
}

.his-line:hover { background: var(--bg); }

.his-time { width: 52px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.his-no   { width: 130px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.his-ff   { width: 44px; color: var(--text-3); font-size: 12px; }
.his-who  { flex: 1; color: var(--text-1); }

.his-amt {
  width: 90px;
  text-align: right;
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.his-amt.is-cancel { color: var(--text-3); text-decoration: line-through; }

/* 状态徽标：颜色只用来区分，不靠颜色单独传达信息（文字也在） */
.his-st {
  width: 68px;
  text-align: center;
  font-size: 12px;
  padding: 3px 0;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-2);
}

.his-st.st-1 { background: #FFF1ED; color: var(--primary); }
.his-st.st-2 { background: #FFF7E6; color: var(--warn); }
.his-st.st-3 { background: #E9F7F1; color: var(--ok); }
.his-st.st-4 { background: #EFF2F0; color: var(--text-2); }
.his-st.st-5 { background: #F5F5F5; color: var(--text-3); }
.his-st.st-0 { background: #F5F5F5; color: var(--text-3); }

.his-arrow { width: 16px; text-align: center; color: var(--text-3); }

/* ---------------- 展开明细 ---------------- */
.his-detail {
  padding: 4px 6px 16px 6px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 18px;
}

@media (max-width: 720px) {
  .his-detail { grid-template-columns: 1fr; gap: 10px; }
}

.his-sec-t {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.his-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.hi-name { flex: 1; color: var(--text-1); }
.hi-qty  { width: 40px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hi-amt  { width: 70px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

.his-kv {
  display: flex;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}

.his-k { width: 78px; flex: none; color: var(--text-3); }
.his-v { color: var(--text-1); word-break: break-all; }