/* pos-printer-win WebUI - 2026-07-31 椋庢牸閲嶅

/* ============================================================
   2026-08-26: 现代新中式重写 (字体 import)
   - 字体: Noto Serif SC (标题) + Noto Sans SC (UI body)
   - 色板: 墨色 + 暖白 + 茶色金 (降饱和)
   - 布局: 240px 侧边栏 + 主区
   - 玻璃效果只在订单状态条保留 1 处
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
   鏈ㄨ川鏆栬皟 + 鐜荤拑鍗婇€?+ 閲戣壊鐐圭紑
   - 鏈ㄨ川: 鑳屾櫙 / 鍗＄墖搴?   - 鐜荤拑: 鎸夐挳 / 椤舵爮 / 寮圭獥
   - 閲戣壊: 寮€鍏虫寜閽?/ 寮鸿皟 active
*/

* { box-sizing: border-box; }

:root {
  /* 鏈ㄨ川鑹?(鑳屾櫙 / 妗? */
  --wood-1: #f5ead2;             /* 娴呯背鏈?*/
  --wood-2: #ecddc2;             /* 涓湪 */
  --wood-3: #d4c19a;             /* 娣辨湪 */
  --wood-card: rgba(255, 252, 240, 0.72);
  --wood-border: rgba(200, 159, 91, 0.32);
  --wood-border-strong: rgba(168, 128, 76, 0.55);
  --wood-text: #3a2616;          /* 娣辨湪瀛?*/
  --wood-text-2: #8b6f47;        /* 鏆栫伆妫?*/
  --wood-text-3: #b89a6f;        /* 娴呮殩妫?*/

  /* 閲戣壊 (寮€鍏?/ 寮鸿皟) 鈥?2026-07-31 閲戝睘璐ㄦ劅 (澶氳壊娓愬彉妯℃嫙鍙嶅厜) */
  --gold-1: #e0b53e;             /* 涓噾 (涓昏壊) */
  --gold-2: #f4d77f;             /* 娴呴噾 */
  --gold-3: #fbe9a3;             /* 閲戦珮鍏?(杩戠櫧) */
  --gold-4: #b8860b;             /* 娣遍噾 */
  --gold-5: #6b4d0a;             /* 鏆楅噾 (闃村奖) */
  --gold-glow: rgba(224, 181, 62, 0.5);
  --gold-glow-soft: rgba(224, 181, 62, 0.18);
  --gold-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 50%);

  /* 鐜荤拑 (2026-07-31 鍐嶆鎻愰珮閫忔槑搴? 鏈ㄧ汗閫忓嚭鏇存槑鏄? */
  --glass-bg: rgba(255, 252, 240, 0.15);
  --glass-bg-2: rgba(255, 252, 240, 0.28);
  --glass-bg-3: rgba(255, 252, 240, 0.45);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-strong: rgba(200, 159, 91, 0.4);
  --glass-shadow: 0 4px 16px rgba(120, 90, 50, 0.12);
  --glass-shadow-2: 0 8px 32px rgba(120, 90, 50, 0.2);

  /* 鐘舵€佽壊 (鏆栬壊璋? 鏇挎崲鍘熷喎鑹? */
  --success: #5a8a3a;
  --success-bg: #e8f0d8;
  --success-border: #b8d098;
  --danger: #b8453a;
  --danger-bg: #f8d8d2;
  --danger-border: #e0a89e;
  --info: #6b8e9a;
  --info-bg: #d8e3e8;
  --warning: #c89f5b;
  --warning-bg: #f5e3c2;

  /* ==== 2026-07-31: macOS 26 Liquid Glass 配方 (只反光不发光) ==== */
  /* 真实 liquid glass 边缘不发光, 只有 顶反光 + 底环境反射 + 外投影 */
  --liquid-shadow:
    /* 外深度: 玻璃下方投影 (光照在背景上, 不是发光) */
    0 12px 48px rgba(60, 40, 20, 0.25),
    /* 顶高光: 玻璃顶部反光 (光从上面来) */
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    /* 底描暖: 玻璃底反射环境暖色 */
    inset 0 -1px 0 rgba(234, 88, 12, 0.08);
  --liquid-blur: blur(20px) saturate(180%) contrast(110%);
  --medium-blur: var(--medium-blur);  /* 2026-08-08: 轻量 glass 容器, 统一替代 8/10/16px 的散值 */
  --light-blur: var(--light-blur);    /* 2026-08-08: 行级 / 小容器 glass */
}

/* ============================================================
   2026-07-31: 閲戝睘鎸夐挳鐨?闆曞埢瀛?鏁堟灉
   - 榛樿 (鐭?涓瓑鎸夐挳, 娴呴噾鍖?: 鏆楅噾瀛?+ 椤剁櫧楂樺厜 (瀛?鍑?璧?
   - 闀挎寜閽?(#btn-checkout, 涓娣遍噾): 鐧藉瓧 + 鏆栭噾鎻忚竟 + 鏆楀奖 (瀛?娴?鍑?
   ============================================================ */
.shop-toggle-btn.open,
.btn-primary,
.reason-confirm-btn,
.badge-new-order,
.tab-pill.active,
.ci-btn.primary,
.btn-danger {
  color: #4a3206 !important;
  font-weight: 800 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(60, 30, 0, 0.4) !important;
  letter-spacing: 0.5px;
}

/* 缁撹处鎵撳嵃鎸夐挳 鈥?100% 瀹? 涓鏄繁閲戞媺涓濆尯, 鏆楅噾瀛楀湪娣遍噾涓婄湅涓嶆竻
   鐢ㄧ櫧瀛?+ 鏆栭噾鎻忚竟 + 鏆楀奖, 鍦ㄦ祬閲?娣遍噾鍖洪兘鑳界湅娓?*/
#btn-checkout {
  color: #fff5e0 !important;
  font-weight: 800 !important;
  text-shadow:
    -0.5px -0.5px 0 rgba(74, 50, 6, 0.7),
    0.5px -0.5px 0 rgba(74, 50, 6, 0.7),
    -0.5px 0.5px 0 rgba(74, 50, 6, 0.7),
    0.5px 0.5px 0 rgba(74, 50, 6, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.5) !important;
  letter-spacing: 0.5px;
}

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--wood-text);
  min-height: 100vh;
  /* 2026-08-26: 壁纸系统已删, body 背景恢复纯色 (月白) */
  background: var(--surface);
}

/* 2026-08-26: 壁纸系统已删, .bg-layer 样式不需要了 */

/* ============================================================
   2026-07-31: macOS 26 Liquid Glass 全局增强
   只给大玻璃容器加 backdrop-filter, 排除所有子元素/小容器
   2026-07-31 v3: 排除 cart 子元素 (cart-panel/header/foot/list/coupon) — 都被 .pos-center 罩住
   ============================================================ */

/* 小卡片统一 Liquid Glass 阴影 (4 层 inset 色散 + 外深度)
   2026-07-31: 移除 .product-card — 它现在用 transparent + 边框, 跟 pos-left 共享玻璃 */
.order-card, .delivery-card, .metric-card, .user-row, .user-detail-body,
.trigger-row, .cond-row, .cond-row-del {
  box-shadow: var(--liquid-shadow) !important;
}

/* ============================================================
   2026-07-31: 按钮靠近呼吸效果 (鼠标距离二次反比)
   JS 设置 CSS 变量, 这里 transform + box-shadow 跟随变量动
   ============================================================ */
.btn, .icon-btn, .tab-pill, .ff-btn, .ci-btn, .badge-btn,
.shop-toggle-btn, .reason-confirm-btn, .tag-chip, .badge-new-order,
.product-card {
  --hover-lift: 0px;
  --hover-scale: 1;
  --hover-blur: 0px;
  --hover-alpha: 0;
  transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
  transform-origin: center center;
  transition: transform 0.12s ease-out,
              box-shadow 0.12s ease-out,
              background 0.12s ease-out;
}
/* 增强 box-shadow: 基础层 + 暖金 hover 加强层 (透明度由 --hover-alpha 控制) */
.btn, .icon-btn, .tab-pill, .ff-btn, .ci-btn, .badge-btn,
.shop-toggle-btn, .reason-confirm-btn, .tag-chip, .badge-new-order,
.product-card {
  box-shadow:
    0 2px 6px rgba(120, 90, 50, 0.1),
    0 calc(2px + var(--hover-blur)) calc(8px + var(--hover-blur)) rgba(224, 181, 62, var(--hover-alpha, 0));
}

.hidden { display: none !important; }
.muted {
  color: var(--wood-text);
  /* 2026-07-31: 暖色阴影让字在玻璃背景上"凸"起来, 增强可读性 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 1px rgba(60, 40, 20, 0.15);
}
.muted.small {
  color: var(--wood-text-3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
/* 2026-08-01: 玻璃内所有暖色字 — 字加粗 + 字色加深 + 弱外发 */
/* 直接让字本身更深更明显, 不靠阴影 */
.muted, .muted.small, .link-btn, .empty-hint, .empty-hint-tip,
.product-desc, .order-meta, .kv-k,
.ci-price, .ci-detail, .ci-name, .ci-qty,
.cart-coupon-label, .cart-total, .cart-total span, .total-amount,
.pay-toggle span {
  font-weight: 600;                                       /* 字加粗 */
  color: var(--wood-text);                                /* 字加深 (用最深色) */
  text-shadow:
    0 0 2px rgba(255, 220, 150, 0.4),                     /* 弱暖光晕 */
    0 0 5px rgba(255, 200, 120, 0.25);                    /* 远散光 */
}

/* 2026-08-01: .empty-hint-tip (app.js 渲染的 "所有金额单位 元" 小字) */
.empty-hint-tip {
  font-size: 12px;
  margin-top: 4px;
}

/* 2026-08-01: 优惠券 emoji 改色 — 红橙 → 金色, 适配主题 */
.emoji-ticket {
  display: inline-block;
  filter: hue-rotate(45deg) saturate(1.5) brightness(1.05);
  /* 🎫 默认红橙色, hue-rotate 45deg + saturate 1.5 把它推向金黄 */
}

/* 2026-08-01: 今日订单数 动态变化时短暂高亮动画 */
@keyframes count-bump {
  0%   { transform: scale(1);    color: var(--wood-text); }
  35%  { transform: scale(1.18); color: var(--gold-3); font-weight: 800; }
  100% { transform: scale(1);    color: var(--wood-text); }
}
.count-bump {
  display: inline-block;
  animation: count-bump 0.65s ease-out;
}

/* 2026-08-01: #orders-count 强制深色 (虽然带 .muted.small, 数字要明显) */
#orders-count {
  color: var(--wood-text);
  font-weight: 700;
}
.mono { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; }
.small { font-size: 12px; }

/* ===== Splash ===== */
.splash {
  position: fixed; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(120, 80, 30, 0.06) 0px,
      rgba(120, 80, 30, 0.06) 2px,
      transparent 2px,
      transparent 6px),
    linear-gradient(135deg, #4a3520 0%, #2d1f10 100%);
  color: var(--gold-3);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.splash-icon { font-size: 80px; margin-bottom: 16px; filter: drop-shadow(0 4px 16px rgba(200, 159, 91, 0.4)); }
.splash-text {
  font-size: 32px; font-weight: 800; margin-bottom: 24px;
  background: linear-gradient(135deg, #fff5d0 0%, #fbe9a3 20%, #f4d77f 40%, #e8c142 60%, #d4a030 80%, #b8860b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 24px rgba(224, 181, 62, 0.4);
  letter-spacing: 4px;
}
/* 2026-10-11 v30.7: splash 小字改纯白不透明 — 老样式 opacity:0.7 + var(--gold-3) 在深棕底上对比度太弱,
   用户反馈"加载什么"看不清; 改成 #fff + opacity:1, 行号后缀单独半透明白 */
.splash-tip {
  font-size: 14px;
  color: #fff;
  opacity: 1;
  letter-spacing: 0.05em;
  text-align: center;
  min-height: 18px;
}
.splash-tip-line {
  color: rgba(255, 255, 255, 0.55);
  margin-left: 8px;
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ===== App ===== */
.app {
  max-width: 1400px; margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: transparent;  /* 閫忓嚭 body 鐨勬湪璐ㄨ儗鏅?*/
}

/* New-order live notification (SSE-driven) 鈥?閲戝睘閲?*/
.badge-new-order {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  background: var(--gold-grad);
  border: 1px solid var(--gold-4);
  color: white;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  animation: pulse-new 1.2s ease-in-out infinite;
  box-shadow: 0 2px 6px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 1px rgba(107, 77, 10, 0.3);
}
/* 2026-08-08: 之前是 pulse scale 动画, 改为静态 box-shadow, 避免持续动画分散注意力 */
@keyframes pulse-new {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50%      { box-shadow: 0 0 0 4px rgba(200, 159, 91, 0); }
}

/* ===== 寮€搴?闂簵鍒囨崲鎸夐挳 (閲戣壊 / 鏆栫孩) ===== */
.shop-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: 12px;  /* 2026-08-08: 20→12 收紧, 偏工不偏软 */
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.shop-toggle-btn.open {
  background: var(--gold-grad);
  color: white;
  border: 1px solid var(--gold-4);
  box-shadow: 0 2px 8px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 2px rgba(107, 77, 10, 0.4);
}
.shop-toggle-btn.open:hover {
  box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.05);
}
.shop-toggle-btn.closed {
  background: linear-gradient(135deg, #c25549 0%, var(--danger) 100%);
  color: white;
  border: 1px solid #6b2018;
  box-shadow: 0 2px 8px rgba(184, 69, 58, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.shop-toggle-btn.closed:hover {
  background: linear-gradient(135deg, #d26658 0%, #c25549 100%);
  box-shadow: 0 4px 12px rgba(184, 69, 58, 0.5);
}
.shop-toggle-btn:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15); }

/* 2026-09-21 v23.4: 营业时间设置 (营业中按钮右边)
   跟 shop-toggle-btn 同高, 整体一块并排, 不抢戏但清晰可读
   label/input/sep/save 跟 shop-reason-input 风格统一 */
.shop-hours-label {
  font-size: 12px;
  color: #6b4423;
  font-weight: 500;
  margin-left: 8px;
  margin-right: 2px;
}
.shop-hours-input {
  width: 90px;
  padding: 5px 6px;
  border: 1px solid var(--wood-border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--paper-bg);
  color: #2c1810;
  height: 30px;
  box-sizing: border-box;
}
.shop-hours-input:focus {
  outline: none;
  border-color: #c4a574;
  box-shadow: 0 0 0 2px rgba(196, 165, 116, 0.25);
}
.shop-hours-sep {
  font-size: 12px;
  color: #6b4423;
  margin: 0 2px;
  font-weight: 600;
}
.shop-hours-save-btn {
  padding: 5px 12px;
  border: 1px solid #c4a574;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff8e7 0%, #f5e6c8 100%);
  color: #6b4423;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
  height: 30px;
  box-sizing: border-box;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}
.shop-hours-save-btn:hover {
  background: linear-gradient(135deg, #f5e6c8 0%, #e8d4a8 100%);
}
.shop-hours-save-btn:active {
  transform: scale(0.96);
}

/* 2026-09-21 v23.7: 自动开闭店 / 仅工作日 两个 checkbox
   跟营业时间设置同高, 暖奶色, 不抢戏但清晰可读
   紧凑 inline-flex 排列, 顶部 topbar 不挤 */
.shop-flag {
  display: inline-flex;
  align-items: center;
  gap: 4rpx;
  padding: 4rpx 8rpx;
  margin-left: 8rpx;
  border: 1rpx solid var(--wood-border);
  border-radius: 8rpx;
  background: rgba(255, 248, 231, 0.6);
  font-size: 12rpx;
  color: #6b4423;
  cursor: pointer;
  user-select: none;
  height: 30rpx;
  box-sizing: border-box;
  white-space: nowrap;
}
.shop-flag input[type="checkbox"] {
  margin: 0;
  padding: 0;
  width: 14rpx;
  height: 14rpx;
  cursor: pointer;
  accent-color: #c4a574;
}
.shop-flag-text {
  font-weight: 500;
}

/* 2026-09-21 v23.8: 明日状态 chip — 显示明天是工作日/周末/调休/节日
   跟 .shop-flag 同高, 4 种状态用不同颜色区分 (绿色=工作日/调休, 灰色=周末, 红色=节日)
   紧凑 inline-flex, topbar 不抢戏 */
.next-day-chip {
  display: inline-flex;
  align-items: center;
  gap: 4rpx;
  padding: 4rpx 8rpx;
  margin-left: 4rpx;
  border: 1rpx solid var(--wood-border);
  border-radius: 8rpx;
  background: rgba(255, 248, 231, 0.6);
  font-size: 12rpx;
  color: #6b4423;
  height: 30rpx;
  box-sizing: border-box;
  white-space: nowrap;
  cursor: default;
}
.next-day-label {
  font-weight: 500;
  opacity: 0.7;
}
.next-day-type {
  font-weight: 600;
  padding: 1rpx 6rpx;
  border-radius: 6rpx;
}
/* 4 种状态配色 — 工作日/调休绿色, 周末灰色, 节日红色 */
.next-day-type.t-workday,
.next-day-type.t-tiaoxiu {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
}
.next-day-type.t-weekend {
  background: rgba(120, 113, 108, 0.18);
  color: #44403c;
}
.next-day-type.t-holiday {
  background: rgba(239, 68, 68, 0.15);
  color: #991b1b;
}

/* 闂簵鍘熷洜杈撳叆妗?*/
.shop-reason-input {
  width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--wood-border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.7);
  color: var(--wood-text);
  transition: all 0.15s;
}
.shop-reason-input:focus {
  outline: none;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px var(--gold-glow-soft);
  background: white;
}
.shop-reason-input::placeholder {
  color: var(--wood-text-3);
}

/* 闂簵鍘熷洜纭鎸夐挳 (閲戣壊閲戝睘) */
.reason-confirm-btn {
  display: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gold-4);
  border-radius: 6px;
  background: var(--gold-grad);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 1px rgba(107, 77, 10, 0.3);
}
.reason-confirm-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 10px var(--gold-glow);
}
.reason-confirm-btn:active { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); }
.reason-confirm-btn.visible {
  display: inline-flex;
}

/* ===== Top bar (2026-07-31: 大圆角 + 漂浮) ===== */
.topbar {
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  margin: 10px 10px 0 10px;  /* 顶部 + 左右留空, 显漂浮 */
  background: rgba(255, 252, 240, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--liquid-shadow);
  position: sticky; top: 10px; z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.brand { font-size: 24px; }
.shop-name { font-size: 18px; font-weight: 700; color: var(--wood-text); }
/* 2026-09-30 v29.7.2: 营业中按钮左边秒级本地时间
   - 等宽数字字体 (tabular-nums): 11:12:23 → 11:12:24 时数字不抖
   - 暖木纹系色调, 比 brand 字号略小, 不抢戏但一眼能看到 */
.shop-clock {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', 'Consolas', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--wood-text, #5C2E1F);
  letter-spacing: 0.04em;
  user-select: none;
  /* 跟品牌名/按钮的 12px gap 复用 .topbar-left gap, 不另设 margin */
  background: rgba(255, 255, 255, 0.45);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(92, 46, 31, 0.15);
  min-width: 72px;        /* "HH:MM:SS" 8 字符 + padding 兜底, 防止数字宽度变化抖动 */
  text-align: center;
}
/* 2026-07-22 16:04: 鍒?.shop-status / .dot 绯诲垪 (椤舵爮涓嶆樉绀?printer 鐘舵€? */

/* ===== 鎵爜鐩掑瓙鐘舵€侊紙USB-HID 閿洏妯″紡鐩戝惉锛?===== */
.scan-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: #f1f5f9; color: var(--wood-text);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  font-family: ui-monospace, monospace;
  transition: all 0.1s;
  user-select: none;
}
.scan-status.scan-active {
  background: #fef3c7; color: #92400e;
  box-shadow: 0 0 0 2px #fde68a;
}
.scan-status.scan-ok {
  background: #d1fae5; color: #047857;
  animation: scanOkFlash 0.6s ease-out;
}
.scan-status.scan-err {
  background: #fee2e2; color: #b91c1c;
}
@keyframes scanOkFlash {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.topbar-right { display: flex; gap: 6px; }

.icon-btn {
  backdrop-filter: var(--light-blur);
  -webkit-backdrop-filter: var(--light-blur);
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--wood-text);
  transition: all 0.1s;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(120, 90, 50, 0.08);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(120, 90, 50, 0.15);
}
.icon-btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); }

/* ===== Tab nav ===== */
.tab-nav {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  display: flex;
  background: rgba(255, 252, 240, 0.3);
  border-bottom: 1px solid var(--wood-border);
  padding: 0 20px;
  gap: 4px;
}
.tab {
  background: none; border: none;
  padding: 14px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--wood-text);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.tab:hover { color: #0f172a; }
.tab.active {
  color: var(--cocoa);
  border-bottom-color: var(--cocoa);
}

/* ===== Main ===== */
.main {
  flex: 1;
  padding: 20px;
}
/* 2026-09-20: 锁 body 高度, 避免页面整体滚动, 让 .webui-product-main 内部滚动 */
/* 2026-09-28: 改 max-height + overflow-y:auto — view 内容多 (报表/订单) 时 view 自己滚,
   之前 height: 100vh + overflow: hidden 锁死 → 内容溢出被剪无法滚到 */
/* 2026-10-04 v30.0.1: view 自己滚 (内容多时不靠 body 整体滚)
   .view 加 max-height + overflow-y: auto, 不动 .view.active 的 display 布局
   (保持 block, 不要轻易改 display: flex, 避免连锁破坏其他 view 的 layout)
   === 二次踩坑 (12:30): max-height 在 block 容器 + 内容自然撑高时不生效
   (view.height = 内容高度, max-height 不收缩). 必须让 view 在 main (flex column)
   里当 flex:1 拿固定高度, 才有 overflow-y:auto 的滚动容器意义.
   所以 view.active 改成 flex column (跟 v29.2p 同款), view 加 flex:1 + min-height:0
   让 main 给它剩余空间, view 自己 overflow-y: auto 滚. */
html, body { height: 100%; overflow: hidden; }
.view {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.view.active {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}
/* view-order 内部 pos-wrap 是固定 height calc(100vh - 140px), 别被 flex stretch 拉坏 */
#view-order > .pos-wrap { flex-shrink: 0; }

/* 2026-09-22 v27: view-tags 标签管理 — 让 .card 内部可滚
   之前 .view 锁 100vh + overflow hidden, 但 .card 没设 flex, 内容溢出被截无法滚
   flex 嵌套滚动三件套: flex:1 + min-height:0 + overflow-y:auto
   只针对 #view-tags (标签管理 view), 不影响其他多 card 视图
   2026-09-26 v29.2i: 用 min-height: 100vh + overflow-y: auto 兜底
   之前 .card flex:1 在某些屏幕 (1080p) 上撑满整个 view 导致 tags-list 不溢出 → 没滚动条 → 滚不动
   现在: 不依赖父容器高度, .card 始终有自己的 min-height 100vh, 标签列表超出时直接滚
   2026-09-26 v29.2p: 终极兜底 — 根因排查发现 .view.active 在 line 3123 被另一条规则覆盖成
     display:block (而我们想要 flex column), 导致 card 的 flex:1 不生效 → card 用内容高度
     撑爆 view-tags → view-tags overflow:hidden 直接 clip → 永远不滚.
     用 !important 强制 #view-tags 是 flex column, card 是 flex:1 + overflow-y:auto,
     card 本身就是 scroll container, 自带滚动条 + 自定义 webkit 样式
   2026-09-26 v29.2q: 用户反馈"标签本身和搜索框应该隔离开".
     之前整个 card 是一个滚动容器, 标题 + 搜索框 + 添加按钮 跟着滚走, 用户拖滚动条时
     头部消失, 体感很怪 ("为什么我把搜索框滚没了").
     现在 card 改成 flex column 容器 (不滚), .tags-header 固定在顶部 (标题+说明+搜索框+添加按钮),
     .tags-body 才是真正的滚动容器 (只有标签列表滚). 滚动条样式从 card 移到 body. */
/* 2026-09-28: 必须用 .active 限定 !important — 之前无条件 !important 让 view-tags 即使没 active 也 display: flex,
   导致切到 stats 等其它 tab 时 view-tags 仍显示 (覆盖了通用 .view { display: none }) */
#view-tags.active {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;  /* 自己不滚, 让 .tags-body 滚 */
}
#view-tags > .card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;       /* card 不滚, 头部 + body 分区 */
  margin: 12px 16px !important;       /* v29.2u: 16 20 → 12 16, 再省 8px 上下 */
  padding: 0 !important;             /* 移除默认 padding, 让 header/body 自己控 padding */
}
/* header: 标题 + 说明 + 搜索框 + 添加按钮 — 永远固定在顶部, 不滚
   2026-09-26 v29.2r: padding 20 20 14 → 14 20 10, 让 header 更紧凑,
   配合 v29.2r 减小的行 padding/gap, 整个 tags card 模块高度更小,
   用户反馈"列标签的模块高度减小一点, 下面看不到"
   2026-09-26 v29.2t: padding → 10 20 8, 进一步紧凑
   2026-09-26 v29.2u: 拿铁还在 viewport 外 (差 ~2px), 再压: padding → 6 20 4,
     card-title margin-bottom 4 → 0, description margin-bottom 6 → 2 */
#view-tags > .card > .tags-header {
  flex: 0 0 auto;
  padding: 6px 20px 4px;
  border-bottom: 1rpx solid rgba(180, 83, 9, 0.12);  /* 跟 body 视觉分隔 */
}
#view-tags > .card > .tags-header .card-title { margin-bottom: 0; }  /* v29.2u: 4 → 0 */
#view-tags > .card > .tags-header .muted.small { margin-bottom: 2px !important; }  /* v29.2u: 6 → 2 */
/* body: 标签列表 — 真正的滚动容器
   2026-09-26 v29.2r: padding 12 20 20 → 8 20 14, 让 body 紧凑
   2026-09-26 v29.2t: padding → 6 20 10, 进一步紧凑
   2026-09-26 v29.2u: → 4 16 8, 跟 card margin 同步缩, 让 body 最大化可显示 */
#view-tags > .card > .tags-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 4px 16px 8px;
}
/* 2026-09-22 v27.2: 自定义滚动条 — webkit 浏览器原本的滚动条太细看不见 */
#view-tags > .card > .tags-body::-webkit-scrollbar { width: 12px; }
#view-tags > .card > .tags-body::-webkit-scrollbar-track {
  background: rgba(180, 130, 70, 0.08);
  border-radius: 6px;
}
#view-tags > .card > .tags-body::-webkit-scrollbar-thumb {
  background: rgba(180, 83, 9, 0.45);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#view-tags > .card > .tags-body::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 83, 9, 0.7);
  background-clip: padding-box;
}

/* ===== Cards (鐜荤拑 + 鏆栭噾缁嗚竟) ===== */
.card {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  background: var(--wood-card);
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--glass-shadow);
}
.card-title {
  font-size: 18px; font-weight: 700;
  margin-bottom: 16px;
  color: var(--wood-text);
}

/* ===== Filter bar ===== */
.filter-bar {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}
.filter-bar.inline { margin-bottom: 8px; }
.filter-bar .meta-input { flex: 1; }
.filter-bar .btn {
  backdrop-filter: var(--light-blur);
  -webkit-backdrop-filter: var(--light-blur); flex: 0 0 auto; min-width: 100px; }
/* 2026-08-01: 订单过滤的 select 胶囊化 v3 — 大圆角 + 透明度增加 + 外距上沿留空 */
.filter-bar select.meta-input {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);   /* 0.18 → 0.32, 玻璃更明显 */
  padding: 10px 18px;                      /* 上下对称 10px, 文字居中 */
  font-size: 13px;
  font-weight: 500;
  color: var(--wood-text);
  appearance: none;                        /* 去掉系统箭头, 用 ::after 自定义 */
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  margin-top: 6px;                         /* 外距上方留空 (按钮和上方元素的距离) */
  border: 1px solid rgba(180, 130, 70, 0.4);
  /* 文字阴影让字在玻璃背景上清晰 */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 1px rgba(60, 40, 20, 0.18);
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.15s;
}
.filter-bar select.meta-input:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(180, 130, 70, 0.6);
  box-shadow: 0 4px 10px rgba(60, 40, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===== Order list ===== */
.orders-list {
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.order-card {
  backdrop-filter: var(--light-blur);
  -webkit-backdrop-filter: var(--light-blur);
  background: rgba(255, 252, 240, 0.35);
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 8px rgba(120, 90, 50, 0.08);
  transition: all 0.15s;
}
.order-card:hover {
  background: rgba(255, 252, 240, 0.85);
  box-shadow: 0 4px 14px rgba(120, 90, 50, 0.15);
  border-color: var(--wood-border-strong);
}
.order-info { flex: 1; min-width: 0; }   /* v2.6: min-width 160→0, 允许内容收缩, 避免长订单名/长电话被裁 */
.order-id { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700; color: #0f172a; }
.order-items { font-size: 14px; font-weight: 600; margin: 2px 0; word-break: break-word; }   /* v2.6: 长商品名可换行 */
/* 2026-09-20: 订单备注显示 — 标签只印前 14 字, webui 展示完整内容 */
.order-item-line { line-height: 1.4; margin-bottom: 1px; }
.order-item-remark {
  color: #b45309;             /* 暖琥珀色, 跟"提醒/警示"语义对齐 */
  font-size: 12px;
  font-weight: 500;
  padding-left: 18px;
  margin-top: 1px;
  word-break: break-word;
}
/* 2026-10-09 v30.0.19.14: 订单卡片显示自选变量词 (糖度/冰度/份量...) — 跟 cart ci-detail 风格一致
   2026-10-10 v30.0.19.18: 灰色细字 — 不抢主商品名视线
   2026-10-10 v30.0.19.19: 加深 (#6b7280 → #4b5563) 之前 v18 调色太浅
   2026-10-10 v30.0.19.20: 字稍微粗 (300 → 400) v18/v19 太细了, normal 看得清
   2026-10-10 v30.0.19.21: 颜色跟主文字同 (var(--ink) = #3D1E12) — #4b5563 仍偏浅, 跟主色同才有存在感
     字号 11px 跟主 14px 拉开层级, 但颜色跟主色一样显得"是订单的一部分"而不是"附注"
     不再 italic — 斜体 + 同色 跟主文视觉冲突 */
.order-item-vars {
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  padding-left: 18px;
  margin-top: 1px;
  word-break: break-word;
  letter-spacing: 0.3px;
}
.ff-tag { font-weight: 700; font-size: 12px; margin-left: 4px; }
.ff-delivery { color: #7c3aed; }
.ff-pickup { color: var(--cocoa); }
.order-meta { font-size: 12px; color: var(--wood-text-2); }
.order-meta span { margin-right: 12px; }
.order-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex-shrink: 0; }
.order-actions-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.order-advance-btn { width: 100%; }

/* ===== Status badges ===== */
.badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.badge-placed { background: #f5e3c2; color: #a8804c; }
.badge-making { background: #fbd8b8; color: #b8451a; }
.badge-delivering { background: #d8e3e8; color: #4a6770; }
.badge-completed { background: #e8f0d8; color: #5a8a3a; }
.badge-completed.badge-no-bg { background: transparent; color: #8b6f47; }
.badge-cancelled { background: #f0e8d8; color: #8b6f47; text-decoration: line-through; }
.badge-pending { background: #f5ead2; color: #8b6f47; }
.badge-printed { background: #e8f0d8; color: #5a8a3a; }
/* 2026-09-02: 预定时间标签 (立即单不显示) */
.badge-scheduled { background: rgba(254, 215, 170, 0.55); color: #7c2d12; border: 1px solid rgba(217, 119, 6, 0.45); font-weight: 500; }
/* 2026-10-11 v30.6.7: 店员协助收银 (mode='staff') — 浅蓝标识, 跟已付/未打印区分 */
.badge-staff { background: rgba(96, 165, 250, 0.18); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.35); font-weight: 600; }
/* 2026-10-11 v30.6.9: "📋 加载到购物车" 按钮从普通 staff 协助单移除 — 只草稿单保留 (renderDraftOrders 里) */
/* 2026-10-11 v30.6.8: 草稿订单 — 浅蓝底, badge 跟"店员协助"标识区分 */
.badge-draft { background: rgba(96, 165, 250, 0.22); color: #1e3a8a; border: 1px solid rgba(37, 99, 235, 0.40); font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.order-card-draft { background: rgba(96, 165, 250, 0.06); border-left: 3px solid #60a5fa; }
/* 2026-10-11 v30.6.8: 草稿 sub-tab 有单时蓝色高亮 (跟 scheduled 红色高亮区分) */
.orders-subtab.has-drafts .orders-subtab-count { background: #3b82f6; color: #fff; }
/* 2026-10-11 v30.6.9.2: 新草稿单到达时, sub-tab 闪烁 3 次吸引注意 (用户不在草稿 tab 也能看到)
   - 大 box-shadow 脉动 + 浅蓝底色 + scale 放大, 视觉冲击让店员立刻感知 */
@keyframes draft-tab-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); transform: scale(1); background: transparent; }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.0), 0 4px 16px rgba(59, 130, 246, 0.4); transform: scale(1.08); background: rgba(96, 165, 250, 0.22); }
}
.orders-subtab.draft-just-arrived {
  animation: draft-tab-pulse 0.55s ease-in-out 3;
  border-radius: 10px;
}

/* 2026-09-02: 订单 sub-tab (进行中 / 预订单) */
.orders-subtabs {
  display: flex;
  gap: 6px;
  margin: 8px 12px 6px 12px;
  padding: 4px;
  background: rgba(241, 245, 249, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(180, 130, 70, 0.15);
}
.orders-subtab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #4a3a2a;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.orders-subtab:hover { background: rgba(255, 255, 255, 0.5); }
.orders-subtab.is-active {
  background: #fff;
  color: #7c2d12;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(180, 130, 70, 0.18);
}
.orders-subtab-icon { font-size: 14px; }
.orders-subtab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(180, 130, 70, 0.18);
  color: #7c2d12;
  border-radius: 9px;
}
.orders-subtab.has-scheduled .orders-subtab-count {
  background: rgba(217, 119, 6, 0.85);
  color: #fff;
  animation: pulse-count 2s ease-in-out infinite;
}
@keyframes pulse-count {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* 2026-09-02: 预订单卡片 (scheduled 状态) — 浅暖底 + 左色带突出 */
.order-card-scheduled {
  background: linear-gradient(135deg, rgba(254, 215, 170, 0.30) 0%, rgba(254, 243, 199, 0.40) 100%);
  border-left: 3px solid #d97706;
}
.order-cancel-btn {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid rgba(185, 28, 28, 0.35) !important;
}
.order-cancel-btn:hover {
  background: #fee2e2 !important;
  border-color: rgba(185, 28, 28, 0.55) !important;
}

/* 2026-09-06: 预订单 3 按钮组 (立即开始 / 改时间 / 取消预定) — 横排紧凑 */
.scheduled-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.scheduled-actions .btn {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 4px 10px;
  min-width: 0;
}
.order-start-btn {
  background: #166534 !important;
  color: #fff !important;
  border: 1px solid #14532d !important;
  font-weight: 600;
}
.order-start-btn:hover {
  background: #15803d !important;
  border-color: #166534 !important;
}
.order-reschedule-btn {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1px solid rgba(146, 64, 14, 0.35) !important;
}
.order-reschedule-btn:hover {
  background: #fef3c7 !important;
  border-color: rgba(146, 64, 14, 0.55) !important;
}
.badge-btn { cursor: pointer; transition: all 0.1s; border: none; font-family: inherit; }
.badge-btn:hover { filter: brightness(0.92); }
.badge-btn:active { filter: brightness(0.85); }
.badge-failed { background: #f8d8d2; color: #b8453a; }
/* 2026-07-22 16:04: 澶氭鐘舵€佹満 badge */
.badge-ready { background: #fbd8b8; color: #c2410c; }       /* 娴呮 鍒朵綔濂?*/
.badge-delivering { background: #d8e3e8; color: #4a6770; }   /* 娴呴潚钃?閰嶉€佷腑 */
.badge-delivered { background: #e8f0d8; color: #5a8a3a; }    /* 娴呯豢 宸查€佽揪 */
.badge-delivered.badge-no-bg { background: transparent; color: #8b6f47; }

/* 2026-07-22 16:04: 閰嶉€?tab 鍗＄墖鏍峰紡 (4 鍏冪礌: 鐘舵€?鎺ㄨ繘鎸夐挳/鐢佃瘽/鍦板潃) */
.delivery-card {
  backdrop-filter: var(--light-blur);
  -webkit-backdrop-filter: var(--light-blur);
  display: flex; flex-direction: column;
  background: rgba(255, 252, 240, 0.35);
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(120, 90, 50, 0.06);
}
.delivery-card:hover {
  background: rgba(255, 252, 240, 0.85);
  box-shadow: 0 4px 12px rgba(120, 90, 50, 0.15);
  border-color: var(--wood-border-strong);
}
.delivery-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.delivery-next { font-size: 12px; padding: 4px 10px; }
.delivery-phone {
  font-size: 16px; font-weight: 600; color: #2563eb;
  text-decoration: none; padding: 2px 0;
}
.delivery-phone.muted { color: var(--wood-text-3); font-weight: 400; }
.delivery-addr {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  font-size: 14px; color: #334155;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  word-break: break-all;
}
.delivery-addr:hover { background: var(--sand-soft); }
.addr-missing { color: #dc2626; font-weight: 600; }

/* ===== Buttons (鐜荤拑 + 閲戣壊 primary) ===== */
.btn {
  padding: 10px 16px;
  border: 1px solid var(--glass-border); border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  background: var(--glass-bg);
  color: var(--wood-text);
  box-shadow: 0 2px 6px rgba(120, 90, 50, 0.08);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--gold-grad);
  color: white;
  border: 1px solid var(--gold-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);   /* 2026-08-08: 删 0 2px 8px var(--gold-glow), 共享 hover 增强已覆盖 */
  text-shadow: 0 1px 1px rgba(107, 77, 10, 0.3);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  filter: brightness(1.05);
}
.btn-primary:active:not(:disabled) { filter: brightness(0.92); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); }
.btn-secondary {
  background: var(--glass-bg);
  color: var(--wood-text);
  border: 1px solid var(--glass-border);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(120, 90, 50, 0.15);
}
.btn-danger {
  background: linear-gradient(135deg, #c25549 0%, var(--danger) 100%);
  color: white;
  border: 1px solid #6b2018;
  box-shadow: 0 2px 8px rgba(184, 69, 58, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #d26658 0%, #c25549 100%);
  box-shadow: 0 4px 12px rgba(184, 69, 58, 0.5);
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ===== Forms ===== */
.meta-input, .form-row input, .form-row select {
  padding: 10px 12px;
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 8px;
  font-size: 16px;   /* 2026-08-08: 14→16, 避免 iOS Safari input 字号 < 16px 自动 zoom */
  background: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  color: var(--wood-text);
  transition: all 0.15s;
}
.meta-input:focus, .form-row input:focus, .form-row select:focus {
  outline: none;
  border-color: var(--gold-1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px var(--gold-glow-soft);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.form-row {
  display: flex; align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row label {
  min-width: 120px;
  font-size: 14px;
  color: var(--wood-text);
  font-weight: 500;
}
.form-row input, .form-row select { flex: 1; }
.form-row input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; }

/* ===== Key-value list ===== */
.kv { display: flex; flex-direction: column; gap: 8px; }
.kv-row { display: flex; gap: 12px; }
.kv-k { min-width: 80px; color: var(--wood-text); font-size: 13px; }
.kv-v { color: #0f172a; font-size: 14px; }

/* ===== Log list ===== */
.log-list { display: flex; flex-direction: column; gap: 6px; }
.log-list-item {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--wood-text);
  padding: 6px 8px;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
}
.log-tail {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #0f172a;
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 8px;
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

/* ===== POS view (product grid + cart on left, orders on right) ===== */
.pos-wrap {
  display: flex;
  gap: 16px;
  min-height: 0;
  /* 2026-09-20: 高度占满 view (view 100vh, 去掉 140px 固定偏移) */
  flex: 1;
  height: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}
.pos-left {
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
  flex: 1;
  display: flex; flex-direction: column;
  background: rgba(255, 252, 240, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  box-shadow: var(--liquid-shadow);
  gap: 8px;
  min-width: 0;
  /* 2026-09-20: min-height: 0 关键 — flex column 中 webui-pos-body (flex:1) 需要父允许收缩到内容以下, 否则高度撑爆父容器, main/sidebar 不滚动 */
  min-height: 0;
}
.pos-right {
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
  flex: 0 0 420px;
  width: 420px;
  display: flex; flex-direction: column;
  background: rgba(255, 252, 240, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--liquid-shadow);
  box-shadow: var(--glass-shadow);
  flex: 0 0 420px;
}
.orders-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex: 0 0 auto;
}
.product-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  /* 2026-07-24: auto-fill -> 2 鍒? 鍗＄墖鏇村, 閰嶅悎鍥惧乏+鏂囧彸妯帓甯冨眬 */
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
  padding: 4px;
  min-height: 0;
}

/* Cart panel inside pos-left, below product grid (2026-07-31: 透明, 跟 pos-center 一层玻璃) */
.cart-panel {
  flex: 0 0 auto;
  height: 280px;
  display: flex; flex-direction: column;
  margin: 0 -12px -12px;
  background: transparent;          /* 不再叠一层玻璃 */
  border-top: 1px solid rgba(255, 255, 255, 0.25);  /* 细分隔线 (弱) */
}
.product-card {
  /* 2026-07-31: 微弱玻璃底 + 阴影 + 暖金深边 — 卡片有"自己"的存在感 */
  background: rgba(255, 252, 240, 0.18);
  border: 1px solid rgba(180, 130, 70, 0.35);     /* 暖金深边, 卡片有"实体"感 */
  border-radius: 10px;
  padding: 10px;
  display: flex; flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  /* 简化版 macOS 阴影: 外深度 + 顶高光 + 底描暖, 不发光 */
  box-shadow:
    0 2px 8px rgba(60, 40, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.product-card:hover {
  background: rgba(255, 252, 240, 0.18);         /* hover 时玻璃变亮 */
  border-color: var(--gold-1);
  box-shadow:
    0 4px 14px rgba(60, 40, 20, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.product-card:active {
  background: rgba(255, 252, 240, 0.95);
  border-color: var(--gold-1);
  box-shadow: inset 0 1px 3px rgba(120, 90, 50, 0.1);
}
.product-emoji { font-size: 36px; line-height: 1; }
/* 2026-07-24: 鍟嗗搧鍥?(宸? 鍥哄畾 72x72) */
.product-img-wrap {
  flex-shrink: 0;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 6px;
  background: rgba(255, 252, 240, 0.32);   /* 2026-08-01: 跟 product-card 一致 */
  border: 1px solid var(--glass-border);
  margin: 0;
}
.product-img { width: 100%; height: 100%; object-fit: cover; }
/* 2026-08-27: SVG 矢量图 (跟界面融为一体) — 不裁切 + 暖棕投影 */
.product-img-svg { object-fit: contain; padding: 8%; filter: drop-shadow(0 1px 4px rgba(120, 53, 15, 0.20)); }
.product-emoji-fallback { font-size: 36px; line-height: 1; }
.product-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.product-tag { display: inline-block; font-size: 11px; color: var(--cocoa); background: var(--sand-soft); padding: 1px 6px; border-radius: 4px; align-self: flex-start; max-width: fit-content; }
.product-desc { font-size: 11px; color: var(--wood-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; transition: color 0.15s; }   /* 2026-07-24: 2 -> 1, 璺熷皬绋嬪簭涓€鑷? 绗竴鐪煎彧鐪嬮挬瀛?*/
.product-desc:hover { color: var(--wood-text); }
.product-desc.expanded { -webkit-line-clamp: unset; display: block; color: #334155; }
.product-name { font-size: 15px; font-weight: 600; color: var(--wood-text); line-height: 1.3; }
.product-price { font-size: 16px; font-weight: 700; color: var(--cocoa); letter-spacing: 0.01em; }  /* 2026-08-26: var(--danger) 红 → var(--cocoa) 招牌深棕红 */
/* 2026-08-27 v15: 商品卡 / 购物车 — 一口价优惠 (划线原价 + 现价) */
.product-price-original { font-size: 12px; font-weight: 500; color: #a8a29e; text-decoration: line-through; margin-right: 4px; }
.product-price-current { font-size: 16px; font-weight: 700; color: var(--primary); }   /* 暖橙 跟小程序一致 */
.ci-price-original { font-size: 11px; font-weight: 500; color: #a8a29e; text-decoration: line-through; margin-right: 4px; }
.ci-price-current { font-size: 12px; font-weight: 700; color: var(--primary); }
/* 2026-08-27 v15: 点单弹层合计行 — 一口价优惠 (划线 + 现价) */
.opt-price-original { font-size: 13px; font-weight: 500; color: #a8a29e; text-decoration: line-through; margin-right: 6px; }
.opt-price-current { font-size: 18px; font-weight: 700; color: var(--primary); }
/* 2026-08-27 v15: 商品卡 / 购物车 — 一口价优惠 (划线原价 + 现价) */
.product-price-original { font-size: 12px; font-weight: 500; color: #a8a29e; text-decoration: line-through; margin-right: 4px; }
.product-price-current { font-size: 16px; font-weight: 700; color: var(--primary); }   /* 暖橙 跟小程序一致 */
.ci-price-original { font-size: 11px; font-weight: 500; color: #a8a29e; text-decoration: line-through; margin-right: 4px; }
.ci-price-current { font-size: 12px; font-weight: 700; color: var(--primary); }

/* Cart */
.cart-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);  /* 2026-07-31: 弱分隔线 */
  background: transparent;
}
.cart-title { font-size: 16px; font-weight: 700; }
.link-btn {
  background: none; border: none; color: var(--wood-text); font-size: 14px; padding: 4px 8px; cursor: pointer;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.link-btn:hover { color: var(--danger); }

.cart-list {
  flex: 1; overflow-y: auto;
  padding: 8px 16px;
  background: transparent;
}
.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.cart-item:last-child { border-bottom: none; }
.ci-info { flex: 1; min-width: 0; }
.ci-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ci-price { font-size: 12px; color: var(--wood-text); margin-top: 2px; }
.ci-actions { display: flex; align-items: center; gap: 4px; }
.ci-btn {
  width: 28px; height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.4);    /* 2026-07-31: 弱边框, 不用玻璃底 */
  background: transparent;                          /* 2026-07-31: 透出 pos-center 玻璃, 不叠层 */
  border-radius: 6px; font-size: 16px; font-weight: 700;
  color: var(--wood-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(120, 90, 50, 0.08);
}
.ci-btn:hover { background: rgba(255, 252, 240, 0.9); border-color: var(--gold-1); }
.ci-btn.primary {
  background: var(--gold-grad);
  color: white;
  border-color: var(--gold-4);
  box-shadow: 0 2px 6px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ci-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.ci-qty { min-width: 28px; text-align: center; font-weight: 700; font-size: 14px; }

.cart-foot {
  flex: 0 1 auto;
  min-height: 170px;
  padding: 8px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);  /* 2026-07-31: 细分隔线 (弱) */
  background: transparent;                              /* 不再叠一层玻璃 */
}
.cart-meta { display: flex; gap: 8px; margin-bottom: 8px; }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-size: 14px; color: var(--wood-text);
}
.total-amount { font-size: 24px; font-weight: 800; color: #ef4444; }
/* 2026-09-27: 实收金额输入行 — 默认=合计, 可手动改 (抹零/凑整/散单) */
.cart-final-row {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 10px;
  padding: 8px 10px;
  background: rgba(254, 243, 199, 0.45);
  border: 1rpx dashed rgba(217, 119, 6, 0.35);
  border-radius: 6px;
}
.cart-final-label {
  font-size: 13px; font-weight: 600; color: #92400e;
  white-space: nowrap;
}
.cart-final-input-wrap {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  background: white;
  border: 1rpx solid rgba(217, 119, 6, 0.30);
  border-radius: 4px;
  padding: 0 8px;
}
.cart-final-yuan {
  font-size: 14px; font-weight: 600; color: #b45309;
}
.cart-final-input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  padding: 6px 0;
  font-size: 16px; font-weight: 700;
  color: #b91c1c;
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.cart-final-input::-webkit-outer-spin-button,
.cart-final-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-final-input[type=number] { -moz-appearance: textfield; }
.cart-final-input::placeholder { color: #d6d3d1; font-weight: 400; }
.cart-final-input.has-value {
  background: rgba(254, 243, 199, 0.55);  /* 手动改过 → 高亮提示 */
  border-color: rgba(217, 119, 6, 0.50);
}
.cart-final-reset {
  background: transparent; border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 16px; color: #92400e;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cart-final-reset:hover { background: rgba(217, 119, 6, 0.18); }

.cart-actions { display: flex; gap: 8px; }
.cart-actions .btn { flex: 1; }
.cart-actions .btn-secondary { flex: 0 0 70px; }
.cart-actions #btn-cash {
  /* 2026-09-27: 现金按钮 — 暖金底色突出 */
  flex: 0 0 88px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1rpx solid rgba(217, 119, 6, 0.40);
  color: #92400e;
}
.cart-actions #btn-cash:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
}

/* 2026-07-24: 浠樻 toggle 妗? 榛樿鍕句笂, 鍐冲畾瑕佷笉瑕佽蛋鎵爜鏀舵 */
.pay-toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  font-size: 13px; color: var(--wood-text);
  cursor: pointer; user-select: none;
  flex: 0 0 auto;
  white-space: nowrap;
}
.pay-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--gold-3);        /* 2026-08-01: 蓝色 var(--cocoa) → 金色 --gold-3, 适配主题 */
}
.pay-toggle:hover { color: var(--gold-4); }   /* 2026-08-01: hover 也从蓝→金 */

/* ===== Modal ===== */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal.hidden { display: none !important; }
.modal.modal-show { animation: modal-fade-in 0.25s ease-out; }
@keyframes modal-fade-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* 2026-10-11 v30.7.2: 删 v29.6 .tier-reward-* 全部 CSS — webui 是店员软件, 不弹返券庆祝 modal
   券由后端 print-relay 静默打印, 店员只需看 toast */
.modal-mask {
  position: absolute; inset: 0;
  background: rgba(60, 40, 20, 0.45);
  backdrop-filter: blur(4px);                /* 2026-08-01: 遮罩模糊背景看穿 */
  -webkit-backdrop-filter: blur(4px);
}
.modal-body {
  position: relative;
  background: rgba(255, 252, 240, 0.95);
  /* 2026-08-01: backdrop-filter 由全局 liquid-blur !important 提供, 不要再叠层 */
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 14px;
  padding: 24px;
  width: 90%; max-width: 480px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(60, 40, 20, 0.4), 0 0 0 1px rgba(200, 159, 91, 0.15);
}
.modal-body.wide { max-width: 720px; }
/* 2026-09-20: 商品编辑 modal 8 列字段 (名称/key/所有值/小程序可见/默认/标签打印规则/操作) 需要更宽 */
.modal-body.product-wide { max-width: 920px; }
/* 2026-10-10 v30.5.1: 次卡系统用了 .modal-card, 跟 .modal-body 同样样式 (避免编辑框透明) */
.modal-card {
  position: relative;
  background: rgba(255, 252, 240, 0.95);
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 14px;
  padding: 24px;
  width: 90%; max-width: 480px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 50px rgba(60, 40, 20, 0.4), 0 0 0 1px rgba(200, 159, 91, 0.15);
  overflow-y: auto;
}
.modal-title {
  font-size: 18px; font-weight: 700;
  margin-bottom: 16px;
  color: var(--wood-text);
}
.modal-content {
  flex: 1; overflow-y: auto;
  margin-bottom: 16px;
}
.modal-remark { margin-bottom: 16px; }
.modal-remark label {
  display: block;
  font-size: 13px; color: var(--wood-text); font-weight: 500;
  margin-bottom: 4px;
}
.modal-remark input { width: 100%; }
.modal-remark label {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
.remark-counter {
  font-size: 12px;
  color: var(--wood-text-3);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.remark-counter.full {
  color: #dc2626;
  font-weight: 600;
}
.modal-actions {
  display: flex; gap: 8px;
  justify-content: flex-end;
}
.modal-actions .btn { flex: 0 0 auto; min-width: 100px; }

/* 2026-07-24: 閰嶉€佸憳閫佽揪寮规鏍峰紡 (澶囨敞+鍥剧墖) */
.delivery-img-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dc-file-input {
  flex: 1;
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 13px;
  cursor: pointer;
}
#dc-camera-btn {
  white-space: nowrap;
}
.dc-image-preview {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  margin-top: 8px;
  position: relative;
  display: inline-block;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
}
.dc-image-preview img {
  max-width: 200px;
  max-height: 200px;
  display: block;
  border-radius: 4px;
}
.dc-image-preview .btn-tiny {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
}
.dc-image-preview .btn-tiny:hover { background: #dc2626; }
.muted.small { color: var(--wood-text-3); font-size: 12px; margin-top: 4px; }

/* 2026-07-24: 鎵爜鏀粯寮规鏍峰紡 */
.pay-amount {
  text-align: center; padding: 8px 0 16px;
  border-bottom: 1px dashed #e2e8f0; margin-bottom: 16px;
}
.pay-amount-num {
  font-size: 36px; font-weight: 800; color: #ef4444;
  margin-top: 4px;
}
/* 2026-09-27: 支付方式选择 — 三个按钮 (微信/支付宝/银联), 暖柔派样式 */
.pay-methods {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin: 0 0 14px;
}
.pay-method {
  /* 默认未激活: 暖奶白底 + 暖金边 */
  padding: 8px 14px;
  border: 1rpx solid rgba(180, 83, 9, 0.25);
  border-radius: 999rpx;
  background: rgba(255, 248, 235, 0.7);
  color: #5C2E1F;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.pay-method:hover { background: rgba(255, 230, 170, 0.55); }
.pay-method.active {
  /* 激活: 暖橙渐变 (跟主按钮同款) */
  background: linear-gradient(135deg, #fdba74 0%, #fb923c 45%, #f97316 100%);
  color: white;
  border-color: rgba(251, 146, 60, 0.30);
  box-shadow: 0 2rpx 6rpx rgba(249, 115, 22, 0.22);
}
.pay-method-icon { font-size: 16px; margin-right: 4px; vertical-align: -2px; }
/* 通道禁用 (未开通) */
.pay-method.disabled { opacity: 0.4; pointer-events: none; text-decoration: line-through; }
.pay-methods-empty { font-size: 13px; color: #a16207; padding: 8px 0; text-align: center; }
.pay-methods-hint {
  text-align: center; font-size: 12px; color: #92400e;
  margin: -4px 0 12px; padding: 0 8px;
  background: rgba(254, 215, 170, 0.30);
  border-radius: 6px; padding: 6px 8px;
}
/* 2026-09-27: 扫码盒子输入框 — USB 键盘扫码盒子扫到的字符输入到这里
   焦点常驻, 扫码盒子扫一次自动收款 */
.pay-scan-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 2rpx dashed rgba(180, 83, 9, 0.35);
  border-radius: 8px;
  background: rgba(255, 248, 235, 0.5);
  color: #5C2E1F;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 12px;
  font-family: monospace;
  letter-spacing: 1rpx;
}
.pay-scan-input:focus {
  border-color: rgba(249, 115, 22, 0.65);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4rpx rgba(251, 146, 60, 0.18);
}

.pay-status { padding: 4px 0; }
.pay-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0;
  font-size: 14px; color: var(--wood-text);
  line-height: 1.5;
}
.pay-step-num {
  flex: 0 0 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%;
  background: var(--cocoa); color: white;
  font-size: 12px; font-weight: 700;
}
.pay-step-text { flex: 1; }
.pay-spinner {
  text-align: center; padding: 16px 0;
  font-size: 14px; color: var(--cocoa); font-weight: 600;
}
.pay-result {
  text-align: center; padding: 16px 0;
  font-size: 15px; font-weight: 600;
  border-radius: 8px; margin-top: 8px;
}
.pay-result.success { background: #ecfdf5; color: #059669; }
.pay-result.fail { background: #fef2f2; color: #dc2626; }
.pay-result.pending { background: #fffbeb; color: #b45309; }

/* 2026-09-28: 退款 modal 字段 + 订单卡片退款按钮 */
.refund-fields { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.refund-field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 13px; color: var(--wood-text);
}
.refund-field-row > span { flex: 0 0 auto; min-width: 80px; }
.refund-field-row input {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 14px; background: #fff;
  transition: border-color 0.15s;
}
.refund-field-row input:focus {
  outline: none; border-color: var(--accent, #b45309);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}
.refund-hint {
  background: #fef9f0; padding: 8px 10px; border-radius: 6px;
  border-left: 3px solid var(--accent, #b45309);
  font-size: 12px; color: #92400e;
}
.order-refund-btn {
  background: #fff7ed; color: #c2410c; border: 1px solid #fdba74;
  font-weight: 500;
}
.order-refund-btn:hover { background: #fed7aa; }
.order-actions-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.badge-paid {
  background: #ecfdf5; color: #047857;
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
}
.badge-refunded {
  background: #f3f4f6; color: #4b5563;
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
  border: 1px solid #d1d5db;
}
/* 2026-09-28 v29.2x: 退款状态标签 — processing(处理中) / mock(测试记账) / failed(失败可重试) */
.badge-refunding {
  background: #fef3c7; color: #b45309;
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
  border: 1px solid #fcd34d;
}
.badge-refunded-mock {
  background: #f5f3ff; color: #6d28d9;
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
  border: 1px dashed #c4b5fd;
}
.badge-refund-failed {
  background: #fef2f2; color: #b91c1c;
  padding: 3px 8px; border-radius: 6px; font-size: 12px;
  border: 1px solid #fecaca;
}
.btn-warning {
  background: #fbbf24; color: #78350f; border: 1px solid #f59e0b;
}
.btn-warning:hover { background: #f59e0b; color: white; }

/* Options groups inside modal */
.opt-group { margin-bottom: 16px; }
.opt-label {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--wood-text);
  margin-bottom: 6px;
}
.opt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn {
  padding: 8px 14px;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 18px; font-size: 13px; font-weight: 500;
  color: var(--wood-text); cursor: pointer;
  transition: all 0.1s;
}
.opt-btn:hover { background: var(--sand-soft); }
.opt-btn.active { background: var(--cocoa); color: white; border-color: var(--cocoa); }
/* 2026-09-30 v29.7.3: opt-btn 内的 delta 标记 — 一桶 +¥3.00 这种带价格调整的 chip 显示
   active 状态下用浅金色 (不是纯白, 否则跟主文字混淆看不清) */
.opt-btn-delta {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.opt-btn.active .opt-btn-delta {
  color: #fcd34d;   /* 浅金黄, 在深棕底上对比度够 */
  opacity: 1;
}

/* Product manager list */
.mgr-list { display: flex; flex-direction: column; gap: 6px; }
.mgr-item {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;  border-radius: 6px;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
}
.mgr-thumb {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
}
.mgr-drag {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--wood-text-3);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  letter-spacing: -3px;  /* 紧贴 */
  opacity: 0.6;
  transition: opacity 0.15s;
}
.mgr-drag:hover { opacity: 1; color: var(--cocoa); }
.mgr-drag:active { cursor: grabbing; }
.mgr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mgr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mgr-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mgr-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.mgr-cat { font-size: 11px; color: var(--wood-text); background: #f1f5f9; padding: 0 4px; border-radius: 3px; }
.mgr-tag { font-size: 11px; color: var(--cocoa); background: var(--sand-soft); padding: 0 4px; border-radius: 3px; }
.mgr-emoji { font-size: 20px; }
.mgr-name { flex: 1; font-size: 14px; font-weight: 600; }
.mgr-price { color: #ef4444; font-size: 13px; font-weight: 600; }
.mgr-actions { display: flex; gap: 4px; }
.mgr-btn {
  background: white; border: 1px solid #e2e8f0;
  border-radius: 4px; padding: 4px 10px;
  font-size: 12px; cursor: pointer;
}
.mgr-btn:hover { background: #f1f5f9; }
.mgr-btn.danger { color: #ef4444; border-color: #fecaca; }
/* 2026-08-29 v45: 商品隐藏/显示 切换按钮 (icon-only) */
.mgr-btn.toggle {
  padding: 4px 6px;
  font-size: 14px;
  min-width: 28px;
  line-height: 1;
}
.mgr-btn.toggle:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(217, 119, 6, 0.45); }
.mgr-btn.toggle.is-hidden {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.06);
}
/* 2026-08-29 v45: 隐藏商品整行灰显 + 名字旁 "已隐藏" 小标签 */
.mgr-item-hidden { opacity: 0.55; }
.mgr-item-hidden .mgr-thumb { filter: grayscale(0.85); }
.mgr-hidden-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 3px;
  vertical-align: 1px;
}

/* 2026-08-29: 低库存滚动字幕 (主界面 toolbar "管理商品" 按钮右边, stock<5 触发) */
.mgr-low-stock-ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 120px;
  max-width: 420px;
  margin-left: 8px;
  padding: 4px 8px;
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.85) 0%, rgba(254, 243, 199, 0.75) 100%);
  border: 1px solid rgba(220, 38, 38, 0.30);
  border-radius: 6px;
  overflow: hidden;
  height: 28px;
}
.mgr-ticker-icon { font-size: 13px; flex-shrink: 0; line-height: 1; }
.mgr-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.mgr-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: tickerScroll 24s linear infinite;
  will-change: transform;
}
.mgr-ticker-track:hover { animation-play-state: paused; }
.mgr-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 11.5px;
  color: #7c2d12;
}
.mgr-ticker-name { font-weight: 600; }
.mgr-ticker-num {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 3px;
  padding: 0 5px;
  font-weight: 600;
}
.mgr-ticker-out {
  color: #fff;
  background: #b91c1c;
  border-radius: 3px;
  padding: 0 5px;
  font-weight: 600;
  font-size: 10.5px;
}
.mgr-ticker-sep { color: #d4c19a; padding: 0 6px; font-size: 10px; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* v45: 库存输入框 (管理商品弹层) */
.mgr-stock-cell {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mgr-stock-input {
  width: 68px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border-radius: 6px;
  border: 1px solid transparent;
  outline: none;
  background: rgba(255, 252, 240, 0.6);
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;     /* 隐藏 Firefox 数字微调 */
  appearance: textfield;
}
.mgr-stock-input::-webkit-outer-spin-button,
.mgr-stock-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mgr-stock-input:focus {
  border-color: rgba(180, 83, 9, 0.55);
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.20);
  background: #fffdf5;
}
.mgr-stock-input.stock-ok  { color: #047857; border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.08); }
.mgr-stock-input.stock-low { color: #92400e; border-color: rgba(217, 119, 6, 0.45); background: rgba(245, 158, 11, 0.12); }
.mgr-stock-input.stock-out { color: #b91c1c; border-color: rgba(220, 38, 38, 0.45); background: rgba(220, 38, 38, 0.12); animation: stockOutBlink 1.6s ease-in-out infinite; }
.mgr-stock-initial {
  font-size: 10px;
  color: var(--wood-text-3);
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 0.85;
}
@keyframes stockOutBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* v45: 主架低库存 / 售罄 警告 */
.product-card.is-out { border-color: rgba(220, 38, 38, 0.35); background: rgba(254, 226, 226, 0.30); }
.product-card.is-low { border-color: rgba(217, 119, 6, 0.40); background: rgba(254, 243, 199, 0.35); }
.product-stock-warn {
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  align-self: flex-start;
  letter-spacing: 0.5px;
}
.product-stock-warn.stock-out { background: rgba(220, 38, 38, 0.15); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.35); }
.product-stock-warn.stock-low { background: rgba(245, 158, 11, 0.18); color: #92400e; border: 1px solid rgba(217, 119, 6, 0.40); }

/* v45: 重置库存按钮 — 暖金警告色, 跟其他按钮区分 */
.btn.btn-warning {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #7c2d12;
  border-color: rgba(217, 119, 6, 0.4);
  font-weight: 600;
}
.btn.btn-warning:hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }

/* Product edit form */
.prod-form .form-row { margin-bottom: 10px; }
.prod-image-edit { display: flex; flex-direction: column; gap: 6px; }
.prod-image-preview { width: 120px; height: 120px; border: 1px dashed #cbd5e1; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f8fafc; }
.prod-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.prod-image-edit input[type="file"] { font-size: 12px; padding: 4px 0; }
.prod-options-edit {
  border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 8px; background: #f8fafc;
}
/* 2026-09-20: 改成 HTML table 布局 — 表格引擎自动列对齐, 不再 flex cell 挤在一起 */
.opt-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;     /* 列宽按 th/td 设定分配, 不受内容撑开 */
  font-size: 12px;
}
.opt-table th,
.opt-table td {
  padding: 4px 6px;
  vertical-align: middle;
  text-align: left;
}
.opt-table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--wood-text-3);
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}
.opt-table input {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  box-sizing: border-box;
  min-width: 0;
}
.opt-table .mgr-btn { padding: 2px 6px; }
.prod-option-row td { padding-top: 6px; padding-bottom: 6px; }

/* 2026-09-20: 列宽分配 — 名称/key 短, 所有值最长, 默认/操作窄 */
.opt-td-label    { width: 11%; }
.opt-td-key      { width: 8%;  }
.opt-td-vals     { width: 22%; }
.opt-td-prices   { width: 11%; }
.opt-td-customer { width: 17%; }
.opt-td-default  { width: 7%;  }
.opt-td-print    { width: 14%; }
.opt-td-actions  { width: 10%; }
.opt-td-actions  button { margin-right: 4px; }
.opt-td-actions  button:last-child { margin-right: 0; }

/* 2026-09-20: 标签打印规则 badge + ? 帮助按钮 */
.opt-print-rule {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  min-width: 80px; height: 22px;
}
.opt-print-rule.rule-print-all {
  background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;
}
.opt-print-rule.rule-skip-default {
  background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7;
}
.opt-help {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%; font-size: 12px; font-weight: 700;
  background: #f3f4f6; color: #4b5563; border: 1px solid #d1d5db;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
}
.opt-help:hover {
  background: #e5e7eb; color: #1f2937; border-color: #9ca3af;
}
.opt-hdr-action { max-width: 36px; }
.prod-options-edit .add-opt {
  font-size: 12px; color: var(--cocoa); background: none; border: none;
  cursor: pointer; padding: 4px 0;
}

/* Cart item details */
.ci-detail { font-size: 12px; color: var(--wood-text); margin-top: 2px; line-height: 1.3; }
.ci-tag {
  display: inline-block;
  padding: 1px 6px; background: var(--sand-soft); color: #0369a1;
  border-radius: 8px; font-size: 11px;
  margin-right: 4px; margin-top: 2px;
}

/* POS toolbar */
.pos-toolbar {
  display: flex; justify-content: flex-start; align-items: center;
  gap: 8px;
  padding: 0 4px 8px 4px;
}
.pos-toolbar .muted { font-size: 12px; }

/* ===== 鎼滅储鏍?+ 鏍囩绛涢€夛紙2026-07-26锛?===== */
.product-filter-bar {
  padding: 0 4px 8px;
  display: flex; flex-direction: column; gap: 6px;
}

/* 2026-09-20: webui 点单 tab 商品列表 — 左侧 tag sidebar + 右侧 sections, 跟顾客点单 UI / 小程序 menu 一样的滚动列表 */
.webui-pos-body {
  display: flex;
  /* 2026-09-20: align-items: stretch (不是 flex-start), 让 sidebar + main 跟容器同高 — 否则 main height = 内容, overflow-y: auto 不触发 */
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  /* 2026-09-20: 占 pos-left 剩余高度, 内部 sidebar + main 各自 overflow-y auto */
  flex: 1;
  overflow: hidden;
}
.webui-tag-sidebar {
  width: 130px;
  flex: 0 0 130px;
  display: flex; flex-direction: column; gap: 4px;
  /* 2026-09-20: 不再 sticky (pos-left 是 flex 容器, sticky 没意义), 改为 stretch + overflow-y auto */
  position: static;
  top: auto;
  /* 高度跟 webui-pos-body 同 (align-items: stretch) — 不用 max-height */
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: none;
}
.webui-tag-sidebar::-webkit-scrollbar { display: none; }
.webui-tag-sidebar button {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2, #475569);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font-family: inherit;
  background: transparent;
}
.webui-tag-sidebar button:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink, #3d1e12);
}
.webui-tag-sidebar button.active {
  background: var(--ink, #3d1e12);
  color: #fff7ed;
  border-color: var(--ink, #3d1e12);
  box-shadow: 0 2px 6px rgba(61, 30, 18, 0.18);
}
.webui-product-main {
  flex: 1; min-width: 0;
  /* 2026-09-20: min-height: 0 关键 — flex item 默认 min-height: auto, 阻止父容器收缩到内容以下, 导致 overflow 不生效 */
  min-height: 0;
  /* 2026-09-20: 只有商品 main 区域内部滚, toolbar + sidebar 固定不动 */
  overflow-y: auto;
  padding-right: 6px;
}
.webui-product-section {
  margin-bottom: 20px;
  /* 2026-09-20: scroll-margin-top 0 — 不再有 sticky header 偏移 (toolbar 外部固定) */
  scroll-margin-top: 0;
}
.webui-section-header {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--surface-2, #e2e8f0);
}
.webui-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #3d1e12);
  margin: 0;
}
.webui-section-count {
  font-size: 12px;
  color: var(--ink-3, #94a3b8);
}
.webui-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.product-search-wrap {
  position: relative;
  display: flex; align-items: center;
}
.product-search {
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
  width: 100%;
  padding: 8px 32px 8px 12px;
  border-radius: 12px;  /* 2026-08-08: 20→12 收紧 */
  font-size: 14px;
  font-family: inherit;
  /* 2026-07-31: 微弱玻璃, 跟周围一致, 不叠层 */
  background: rgba(255, 252, 240, 0.18);
  border: 1px solid var(--glass-border);
  transition: all 0.15s;
  outline: none;
}
.product-search:focus {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px var(--gold-glow-soft);
  background: rgba(255, 252, 240, 0.18);
}
.product-search::placeholder { color: var(--wood-text-3); font-size: 13px; }
.product-search-clear {
  position: absolute; right: 10px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--wood-text-3);
  font-size: 12px; cursor: pointer;
  transition: all 0.1s;
  user-select: none;
}
.product-search-clear:hover { background: #e2e8f0; color: var(--wood-text); }
.product-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tag-chip {
  display: inline-flex; align-items: center;
  padding: 4px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;                       /* 2026-07-31: 胶囊大圆角 */
  font-size: 12px;
  color: var(--wood-text);
  background: rgba(255, 255, 255, 0.18);     /* 2026-07-31: 微弱玻璃, 不叠层 */
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.tag-chip:hover {
  border-color: var(--gold-1);
  color: var(--gold-4);
  background: rgba(255, 252, 240, 0.3);
}
.tag-chip.tag-active {
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-1) 100%);
  color: white;
  border-color: var(--gold-4);
  font-weight: 700;
  box-shadow: 0 2px 6px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Products source badge */
.badge-source {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-source-remote { background: #dbeafe; color: #1e40af; }
.badge-source-cache  { background: #fef3c7; color: #92400e; }
.badge-source-local  { background: #e0e7ff; color: #3730a3; }
.badge-source-unknown { background: #f1f5f9; color: var(--wood-text); }
.badge-source-error  { background: #fee2e2; color: #b91c1c; }

/* ===== Cancel order modal ===== */
.cancel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}
.cancel-row:last-child { border-bottom: none; }
.cancel-info { flex: 1; min-width: 0; }
.cancel-id { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #0f172a; }
.cancel-items { font-size: 14px; margin: 2px 0; }
.cancel-meta { font-size: 12px; color: var(--wood-text); }

/* ===== Empty state ===== */
.empty-hint {
  text-align: center; color: var(--wood-text);
  padding: 40px 20px;
  font-size: 16px;
}
.empty-hint.loading-hint { color: var(--wood-text-2); }
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--gold-2);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Undo button in top bar ===== */
#btn-undo:disabled { opacity: 0.35; }
#btn-undo.undo-active { color: var(--cocoa); background: var(--sand-soft); }
#btn-undo.undo-active:hover { background: #bae6fd; }

/* ===== Toast (堆叠容器, 多个 toast 共存, 不互相覆盖) ===== */
.toast-container {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9998;
  pointer-events: none;
  max-width: 90vw;
}
.toast {
  background: #0f172a; color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast.toast-hide { opacity: 0; transform: translateY(-8px); }
.toast.success { background: #10b981; }
.toast.error { background: #ef4444; }
.toast.warn { background: #f59e0b; }
@keyframes slideDown {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* 锟斤拷锟斤拷/锟斤拷锟结按钮 */
.cart-fulfillment {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
}
.ff-btn {
  flex: 1;
  background: transparent;                  /* 2026-07-31: 透出 pos-center 玻璃, 不叠层 */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ff-btn.active {
  background: rgba(255, 252, 240, 0.3);     /* 2026-07-31: 微弱玻璃底, 突出选中态 */
  border-color: var(--gold-1);
  color: var(--gold-4);
  font-weight: 700;
  /* 加阴影: 让选中态"浮"起来, 跟默认态明显区分 */
  box-shadow:
    0 2px 6px rgba(120, 90, 50, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ff-btn:hover {
  border-color: var(--gold-1);
}

/* ===== 2026-07-26 閲嶅啓: 鎵嬫満绔畬鏁撮€傞厤 ===== */

/* 鎵嬫満 (< 768px) */
@media (max-width: 768px) {
  /* 鈹€鈹€ 鍩虹瀹瑰櫒 鈹€鈹€ */
  .app { max-width: 100%; }
  .main { padding: 8px; padding-bottom: 60px; } /* 搴曢儴鐣欏嚭 tab 绌洪棿 */

  /* 鈹€鈹€ 椤舵爮澶у箙绠€鍖?鈹€鈹€ */
  .topbar {
    padding: 6px 8px;
    flex-wrap: wrap;
    gap: 4px;
    position: sticky; top: 0; z-index: 100;
  }
  .topbar-left { gap: 4px; flex-wrap: wrap; }
  .topbar-right { gap: 2px; }
  .brand { font-size: 16px; }
  .shop-name { font-size: 14px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shop-clock { font-size: 11px; padding: 2px 5px; min-width: 56px; }
  .shop-toggle-btn { font-size: 11px; padding: 3px 8px; }
  .shop-reason-input { font-size: 11px; max-width: 80px; padding: 4px 6px; }
  .icon-btn { font-size: 11px; padding: 4px 6px; min-width: 28px; height: 28px; }
  #btn-cancel-order, #btn-undo { display: none; } /* 鎵嬫満涓嶆樉鍙栨秷/鎾ら攢 */
  .scan-status { font-size: 10px; padding: 2px 5px; }
  .badge-new-order { font-size: 10px; padding: 2px 8px; }

  /* 鈹€鈹€ Tab 瀵艰埅: 鍥哄畾鍦ㄥ簳鏍?(thumb 鍙嬪ソ) 鈹€鈹€ */
  .tab-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: rgba(255, 252, 240, 0.32);
    backdrop-filter: var(--medium-blur);
    -webkit-backdrop-filter: var(--medium-blur);
    display: flex;
    justify-content: space-around;
    padding: 4px 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 4px));
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
  }
  .tab {
    padding: 6px 2px;
    font-size: 11px;
    flex: 1;
    text-align: center;
    border-bottom: none;
    border-top: 2px solid transparent;
    min-height: 44px; /* 瓒冲瑙︽帶 */
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tab.active {
    border-top-color: var(--cocoa);
    border-bottom-color: transparent;
  }

  /* 鈹€鈹€ POS 瑙嗗浘: 涓婁笅鍫嗗彔 鈹€鈹€ */
  .pos-wrap {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 6px;
  }
  .pos-left {
    width: 100%;
    border-radius: 8px;
    padding: 6px;
  }
  .pos-right {
    width: 100%;
    flex: none;
    max-height: 50vh;
    border-radius: 8px;
  }

  /* 鈹€鈹€ 鍟嗗搧缃戞牸: 2 鍒?鈹€鈹€ */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .pos-right { width: 100%; flex: 0 0 auto; }
  .pos-left { border-radius: 8px 8px 0 0; }
  .product-card {
    padding: 6px;
    gap: 8px;
    min-height: 72px;
  }
  .product-emoji { font-size: 24px; }
  .product-name { font-size: 13px; }
  .product-price { font-size: 14px; }
  .product-desc { font-size: 10px; -webkit-line-clamp: 1; }
  .product-img-wrap { width: 52px; height: 52px; }
  .product-img { width: 52px; height: 52px; }
  .product-emoji-fallback { font-size: 26px; }
  .pos-toolbar {
    padding: 0 2px 4px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .pos-toolbar .muted { display: none; }
  .pos-toolbar .btn { font-size: 11px; padding: 3px 8px; }

  /* 鈹€鈹€ 璐墿杞?鈹€鈹€ */
  .cart-panel { height: auto; max-height: 240px; padding: 6px; margin: 0 -6px -6px; }
  .cart-header { font-size: 12px; margin-bottom: 2px; }
  .cart-list { max-height: 140px; }
  .cart-foot { padding-top: 4px; gap: 4px; }
  .cart-total .total-amount { font-size: 16px; }
  .cart-total span:first-child { font-size: 12px; }
  .ff-btn { font-size: 12px; padding: 6px 8px; }
  .pay-toggle { font-size: 11px; }
  .pay-toggle input[type="checkbox"] { width: 14px; height: 14px; }
  .btn { font-size: 13px; padding: 8px 12px; }
  .btn-sm { font-size: 11px; padding: 4px 8px; }
  .btn-primary { font-size: 15px; padding: 10px 16px; }

  /* 鈹€鈹€ 璁㈠崟鍒楄〃 鈹€鈹€ */
  .orders-list { padding: 4px; gap: 6px; }
  .order-card {
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .order-info { min-width: 0; width: 100%; }
  .order-id { font-size: 12px; }
  .order-items { font-size: 13px; }
  .order-meta { font-size: 11px; flex-wrap: wrap; }
  .order-meta span { margin-right: 8px; }
  .order-actions {
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
  }
  .order-actions-badges { justify-content: flex-start; gap: 4px; }
  .order-advance-btn { font-size: 12px; padding: 6px 12px; width: auto; }

  /* 鈹€鈹€ 閰嶉€?tab 鈹€鈹€ */
  .delivery-card { padding: 8px; }
  .delivery-row { flex-wrap: wrap; }
  .delivery-phone { font-size: 14px; }
  .delivery-addr { font-size: 13px; padding: 4px 6px; }

  /* 鈹€鈹€ 寮规: 鍏ㄥ睆 鈹€鈹€ */
  .modal-overlay { align-items: flex-end; }
  .modal-body {
    width: 100%; max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    padding: 16px;
    overflow-y: auto;
  }
  .modal-body.wide { width: 100%; max-width: 100%; }

  /* 浠樻寮规 */
  .pay-modal-amount { font-size: 28px; padding: 16px 0; }
  .pay-step { font-size: 13px; padding: 6px 10px; }
  .pay-step-num { width: 22px; height: 22px; font-size: 12px; }

  /* 鍟嗗搧绠＄悊寮规 */
  .product-edit-modal { padding: 10px; }
  .product-edit-modal .form-row { padding: 0; }

  /* 鈹€鈹€ 绛涢€夋爮 鈹€鈹€ */
  .filter-bar { padding: 0; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
  .filter-bar .meta-input { font-size: 12px; min-width: 0; flex: 1; padding: 6px 8px; }
  .filter-bar .btn { flex: 0 0 auto; min-width: 0; padding: 6px 10px; font-size: 11px; }

  /* 鈹€鈹€ 鍗＄墖 鈹€鈹€ */
  .card { padding: 8px 10px; }
  .card-title { font-size: 13px; margin-bottom: 8px; }

  /* 鈹€鈹€ 璁剧疆/鎵撳嵃鏈?鏃ュ織 鈹€鈹€ */
  .kv-row { font-size: 12px; gap: 8px; }
  .kv-k { min-width: 50px; font-size: 11px; }
  .kv-v { font-size: 12px; word-break: break-all; }
  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 8px;
  }
  .form-row label { font-size: 12px; margin-bottom: 0; }
  .form-row input, .form-row select { font-size: 13px; padding: 8px; }
  .meta-input { font-size: 13px; padding: 6px 8px; }
  .log-list-item { font-size: 11px; padding: 4px 6px; }
  .log-tail { font-size: 11px; padding: 8px; max-height: 300px; }

  /* 鈹€鈹€ 鐘舵€?badge (璁㈠崟鐘舵€佹寜閽? 鈹€鈹€ */
  .badge { padding: 4px 8px; font-size: 11px; }
  .badge-btn { font-size: 11px; padding: 4px 8px; }

  /* 鈹€鈹€ toast 鈹€鈹€ */
  .toast { top: 60px; font-size: 12px; padding: 8px 14px; max-width: 90%; }
}

/* 灏忓睆鎵嬫満 (< 420px) */
@media (max-width: 420px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .product-card { padding: 4px; min-height: 60px; gap: 4px; }
  .product-name { font-size: 12px; }
  .product-price { font-size: 13px; }
  .product-emoji { font-size: 20px; }
  .product-img-wrap { width: 44px; height: 44px; }
  .product-img { width: 44px; height: 44px; }
  .product-emoji-fallback { font-size: 22px; }
  .shop-name { font-size: 12px; max-width: 60px; }
  .icon-btn { font-size: 10px; padding: 3px 5px; min-width: 24px; height: 24px; }
  .tab { font-size: 10px; padding: 4px 1px; }
  .main { padding: 4px; padding-bottom: 54px; }
}

/* 澶у睆鎵嬫満/灏忓钩鏉?(>= 768px) 淇濈暀妗岄潰甯冨眬 */
@media (min-width: 769px) {
  .tab-nav { position: static; } /* 妗岄潰绔?tab 姝ｅ父鏄剧ず鍦ㄩ《閮?*/
}

/* 瓒呭ぇ灞?(>= 1600px): 鏇村妯悜绌洪棿鍒╃敤 */
@media (min-width: 1600px) {
  .app { max-width: 1800px; }
  .main { padding: 24px 32px; }
  .pos-wrap { gap: 24px; }
  .pos-left { padding: 16px; }
  .pos-right { width: 480px; flex: 0 0 480px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .product-card { min-height: 100px; padding: 12px; }
  .product-name { font-size: 16px; }
  .product-price { font-size: 18px; }
  .cart-panel { height: 320px; }
  .topbar { padding: 14px 28px; }
  .tab-nav { padding: 0 28px; }
}

/* ============================================================
   2026-07-28: Coupons (浼樻儬鍒?tab)
   ============================================================ */

.coupon-batch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 2026-10-11 v30.7.5: 按用途分组的标题行 — 浅金小标签 + 数量角标 */
.coupon-batch-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.6);
  border-radius: 6px;
  font-size: 13px; font-weight: 700; color: #78350f;
  letter-spacing: 0.02em;
}
.coupon-batch-group-header:first-child { margin-top: 0; }
.coupon-batch-group-count {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(245, 158, 11, 0.18); color: #78350f;
}
.coupon-batch-row {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: background 0.1s;
}
.coupon-batch-row:hover { background: #f1f5f9; }

  /* 2026-10-04 v30.0: 加购换购规则列表 — 跟 coupon-batch-row 风格一致, 略紧凑 */
  .upgrade-rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .upgrade-rule-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 247, 237, 0.45);
    border: 1px solid #fed7aa;
    border-radius: 8px;
    transition: background 0.1s;
  }
  .upgrade-rule-row:hover { background: rgba(255, 247, 237, 0.75); }
  .upgrade-rule-name { font-weight: 600; color: var(--wood-text); }
  .upgrade-rule-detail { font-size: 12px; color: var(--wood-text); margin-top: 4px; line-height: 1.7; }
  .upgrade-rule-actions { text-align: right; }
.coupon-batch-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coupon-batch-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.coupon-batch-name { font-weight: 600; font-size: 15px; }
.coupon-batch-rule { font-size: 14px; color: #0f172a; margin-top: 2px; }
.coupon-batch-stats {
  display: flex;
  gap: 12px;
  padding: 0 12px;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}
.coupon-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}
.coupon-stat span { font-size: 11px; color: var(--wood-text); }
.coupon-stat b { font-size: 18px; color: #0f172a; }
.coupon-batch-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 鎵规鐘舵€佸窘绔?*/
.badge-active  { background: #d1fae5; color: #047857; }
.badge-paused  { background: #fef3c7; color: #b45309; }
.badge-closed  { background: #f1f5f9; color: var(--wood-text); text-decoration: line-through; }

/* 璇︽儏寮圭獥 - stats row */
.coupon-detail { display: flex; flex-direction: column; gap: 16px; }
.coupon-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.coupon-stat-card {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  background: rgba(255, 252, 240, 0.32);
  border: 1px solid var(--glass-border);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
}
.coupon-stat-card .num { font-size: 20px; font-weight: 600; color: #0f172a; }
.coupon-stat-card > div:last-child { font-size: 11px; color: var(--wood-text); margin-top: 2px; }

/* 鎵爜缁撴灉鍖?*/
.coupon-scan-result { margin-top: 12px; min-height: 40px; }
.coupon-scan-ok, .coupon-scan-err {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
}
.coupon-scan-ok { background: #f0fdf4; box-shadow: inset 3px 0 0 #16a34a; }
.coupon-scan-err { background: #fef2f2; box-shadow: inset 3px 0 0 #dc2626; }
.coupon-scan-head { display: flex; align-items: center; gap: 8px; }
.coupon-scan-discount {
  margin-top: 4px;
  font-size: 16px;
  color: #16a34a;
}

/* 缂栬緫琛ㄥ崟棰勮 */
.ce-preview {
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 14px;
  color: #0f172a;
}

/* 鐢熸垚缁撴灉 */
.cg-result { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cg-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f0fdf4;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cg-codes {
  width: 100%;
  font-size: 14px;
  letter-spacing: 1px;
  resize: vertical;
}

@media (max-width: 720px) {
  .coupon-batch-row { grid-template-columns: 1fr; }
  .coupon-batch-stats { border-left: none; border-right: none; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: 8px 0; }
  .coupon-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   2026-07-28: Cart 浼樻儬鍒告壂鐮佽
   ============================================================ */
.cart-discount {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
}
.cart-discount-default {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.cart-discount-label {
  font-size: 13px;
  color: var(--wood-text);
  white-space: nowrap;
}
#cart-discount-input {
  flex: 1;
  min-width: 120px;
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cart-discount-applied-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
/* 已应用 coupon row (合并后) */
.cart-coupon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fdba74;
  border-radius: 8px;
  font-size: 13px;
}
.cart-coupon-row-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.cart-coupon-row-emoji { font-size: 14px; }
.cart-coupon-row-name {
  color: #9a3412;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-coupon-row-amt {
  color: #9a3412;
  font-weight: 600;
  white-space: nowrap;
}
/* 已应用 pass row (跟之前 cart-pass-row 同样样式) */
.cart-pass-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #86efac;
  border-radius: 8px;
  font-size: 13px;
}
.cart-pass-row-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.cart-pass-row-emoji { font-size: 14px; }
.cart-pass-row-code {
  font-family: monospace;
  font-weight: 600;
  color: #047857;
  letter-spacing: 1px;
}
.cart-pass-row-arrow { color: #94a3b8; }
.cart-pass-row-item {
  color: var(--wood-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-pass-row-amt {
  color: #047857;
  font-weight: 600;
  white-space: nowrap;
}
.ci-pass-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #d1fae5;
  color: #047857;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* 2026-10-10 v30.6: 团购开票 toggle — 5+ 件才显示 */
.cart-invoice-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-top: 1px dashed #e2e8f0;
  margin-top: 2px;
}
.cart-invoice-row.hidden { display: none; }
.invoice-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--wood-text);
  cursor: pointer;
  user-select: none;
}
.invoice-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #d97706;
}
.invoice-hint {
  color: #94a3b8;
  font-size: 11px;
  font-weight: normal;
}

.cart-total .total-amount.has-discount {
  color: #16a34a;
  font-weight: 600;
}
.cart-total .total-discount {
  font-size: 12px;
  color: #16a34a;
  margin-left: 8px;
  font-weight: normal;
}

/* ============================================================
   2026-07-28: 鐢熸垚鍒稿脊绐?鈥?鎵撳嵃杩涘害
   ============================================================ */
.cg-print-progress {
  backdrop-filter: var(--medium-blur);
  -webkit-backdrop-filter: var(--medium-blur);
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 252, 240, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cg-print-stats {
  display: flex;
  gap: 16px;
  font-size: 13px;
  flex-wrap: wrap;
}
.cg-stat-pending b { color: #b45309; }
.cg-stat-printed b { color: #16a34a; }
.cg-stat-failed  b { color: #dc2626; }


  /* ============================================================
     2026-07-29: 鐢ㄦ埛 tab (view-users)
     ============================================================ */
  .users-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 245, 210, 0.65);   /* 2026-08-01: 0.55→0.65, 更暖更不透明 */
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 12px;
    border-radius: 8px; margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .users-toolbar .meta-input { flex: 1; max-width: 320px; }
  .users-list { display: flex; flex-direction: column; gap: 6px; }
  .user-row {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 245, 210, 0.65);   /* 2026-08-01: 0.55→0.65, 更暖更不透明 */
    border: 1px solid var(--glass-border);
    border-radius: 8px; cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(120, 90, 50, 0.06);
  }
  .user-row:hover { background: rgba(255, 252, 240, 0.9); box-shadow: 0 2px 8px rgba(120, 90, 50, 0.12); }
  .user-avatar { font-size: 28px; line-height: 1; }
  .user-row-main { flex: 1; min-width: 0; }
  .user-row-name { font-weight: 600; color: var(--wood-text); }
  .user-row-meta { font-size: 12px; color: var(--wood-text); font-weight: 500; margin-top: 2px; }  /* 2026-08-01: 加深 wood-text-2→wood-text */
  .user-row-card { text-align: right; font-size: 12px; }
  .user-row-card .level { font-weight: 600; color: var(--gold-4); }
  .user-row-card .balance { color: var(--wood-text); font-weight: 500; margin-top: 2px; }  /* 2026-08-01: 加深 */
  /* 2026-10-04 v30.0: 用户 tab 频率 tag chip — auto: 前缀 + 频次关键词 */
  .user-row-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
  .tag-chip {
    font-size: 11px; padding: 2px 8px; border-radius: 10px;
    background: rgba(255, 247, 237, 0.95); color: var(--wood-text);
    border: 1px solid #fde68a;
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 500; line-height: 1.4;
  }
  .tag-chip.tag-loyal {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: white; border-color: #d97706; font-weight: 600;
  }
  .tag-chip.tag-high-frequency {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #7c2d12; border-color: #f59e0b; font-weight: 600;
  }
  .tag-chip.tag-mid-frequency {
    background: #fef3c7; color: #92400e; border-color: #fde68a;
  }
  .tag-chip.tag-first-order {
    background: #ecfeff; color: #155e75; border-color: #a5f3fc;
  }
  .tag-chip.tag-sleeping {
    background: #e5e7eb; color: #6b7280; border-color: #d1d5db;
  }
  .tag-chip.tag-default {
    background: #f3f4f6; color: #4b5563; border-color: #e5e7eb;
  }
  .user-detail { padding: 16px; }
  .user-detail-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
  }
  .user-detail-header h3 { margin: 0; font-size: 18px; color: var(--wood-text); }
  .user-detail-body {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 245, 210, 0.65);   /* 2026-08-01: 0.55→0.65, 更暖更不透明 */
    border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 16px;
  }
  .user-info-grid { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; }
  .user-info-grid .lbl { color: var(--wood-text); font-weight: 500; }  /* 2026-08-01: 加深 */

  /* ============================================================
     2026-08-08: 制作 tab + 大屏流程
     ============================================================ */
  .making-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
  .making-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; cursor: pointer;
    min-width: 0;
    background: rgba(255, 245, 210, 0.65);
    border: 1px solid rgba(180, 130, 70, 0.35);
    border-radius: 10px;
    transition: all 0.15s;
  }
  .making-row:hover {
    background: rgba(255, 252, 240, 0.95);
    border-color: var(--gold-1);
    box-shadow: 0 4px 12px rgba(120, 90, 50, 0.18);
    transform: translateY(-1px);
  }
  .making-row-info { flex: 1; min-width: 0; }
  .making-row-id { font-family: ui-monospace, monospace; font-size: 13px; color: var(--wood-text-2); font-weight: 600; }
  .making-row-name { font-size: 15px; font-weight: 600; color: var(--wood-text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .making-row-items { font-size: 13px; color: var(--wood-text-2); margin-top: 2px; }
  .making-row-time { font-size: 13px; color: var(--wood-text-3); white-space: nowrap; }

  /* 2026-09-11: 制作物料配比行 — 名字 + 配比 + 操作按钮 */
  .making-row-ings { font-size: 13px; color: var(--wood-text-2); margin-top: 4px; line-height: 1.5; }
  .making-row-ings b { color: var(--gold-4); font-weight: 700; }
  .making-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
  /* 2026-10-09 v30.0.19.3: 算用量按钮大 — 默认就显眼, 改配比/删除小按钮只在编辑模式显示 */
  .making-calc-btn { padding: 8px 16px; font-size: 14px; font-weight: 600; border-radius: 8px; }
  .making-toggle.is-active { background: var(--gold-1); color: #fff; border-color: var(--gold-1); }

  /* 2026-08-08: 手动预做行 — 复用 making-row 风格, 加类型标 + ✅/🗑 按钮 */
  .manual-row .making-row-time { display: flex; align-items: center; gap: 6px; }
  .manual-time { font-family: ui-monospace, monospace; font-size: 12px; color: var(--wood-text-3); }
  .manual-note { font-size: 13px; color: var(--wood-text-2); font-weight: 500; }
  .btn-manual-done, .btn-manual-del {
    background: transparent; border: 1px solid var(--gold-2);
    border-radius: 6px; padding: 4px 8px; cursor: pointer;
    font-size: 14px; line-height: 1;
    transition: all 0.15s;
  }
  .btn-manual-done:hover { background: rgba(232, 193, 66, 0.18); border-color: var(--gold-3); }
  .btn-manual-del:hover  { background: rgba(220, 80, 80, 0.12);  border-color: #c75050; }

  /* 大屏流程展示 — modal 撑满屏幕, 步骤按分类分组 */
  .making-detail-body {
    position: relative;
    width: 95vw; max-width: 1200px; height: 92vh;
    padding: 32px 36px;
    background: rgba(255, 248, 225, 0.96);
    border: 2px solid rgba(180, 130, 70, 0.4);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(60, 40, 20, 0.4);
    overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .making-detail-header { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid rgba(180, 130, 70, 0.3); margin-bottom: 20px; }
  .making-detail-header .id { font-family: ui-monospace, monospace; font-size: 20px; color: var(--wood-text-2); font-weight: 700; }
  .making-detail-header .name { font-size: 32px; font-weight: 800; color: var(--wood-text); flex: 1; }
  .making-detail-header .qty { font-size: 22px; color: var(--gold-4); font-weight: 800; padding: 6px 16px; background: rgba(255, 245, 200, 0.6); border-radius: 10px; }
  .making-detail-header .close-x { background: none; border: 1px solid var(--glass-border); border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 18px; color: var(--wood-text); }
  .making-detail-header .close-x:hover { background: rgba(255, 240, 200, 0.6); }
  .making-detail-content { flex: 1; overflow-y: auto; }
  .making-detail-actions { display: flex; gap: 10px; padding-top: 16px; border-top: 2px solid rgba(180, 130, 70, 0.3); margin-top: 16px; }
  .making-detail-actions .btn { flex: 1; padding: 14px 20px; font-size: 16px; font-weight: 600; }

  /* 流程步骤按 stepType 分组 */
  .recipe-group { margin-bottom: 32px; }
  .recipe-group-title {
    font-size: 28px; font-weight: 800; color: var(--wood-text);
    padding: 14px 20px;
    background: rgba(255, 220, 150, 0.5);
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: inset 0 -3px 0 var(--gold-3);
  }
  .recipe-step {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 24px 28px; margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(180, 130, 70, 0.25);
    border-radius: 12px;
  }
  .recipe-step-num {
    flex-shrink: 0; width: 56px; height: 56px;
    background: var(--gold-grad);
    color: white; font-weight: 800; font-size: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  .recipe-step-body { flex: 1; }
  .recipe-step-title { font-size: 26px; font-weight: 800; color: var(--wood-text); margin-bottom: 10px; }
  .recipe-step-content { font-size: 22px; color: var(--wood-text); line-height: 1.7; white-space: pre-wrap; font-weight: 500; }

  .recipe-empty {
    text-align: center; padding: 40px 20px;
    color: var(--wood-text-2); font-size: 16px;
  }

  /* ============================================================
     2026-08-08: 中间原料 tab (tea/syrup/fruit 配方列表)
     ============================================================ */
  .intermediates-filter { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
  .intermediates-filter .iftype {
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--glass-border);
    color: var(--wood-text); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.12s;
  }
  .intermediates-filter .iftype:hover { background: rgba(255, 245, 200, 0.7); }
  .intermediates-filter .iftype.active {
    background: var(--gold-grad);
    color: white; font-weight: 700;
    border-color: var(--gold-4);
    box-shadow: 0 2px 6px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  .intermediates-list { display: flex; flex-direction: column; gap: 8px; }
  .intermediate-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 245, 210, 0.65);
    border: 1px solid rgba(180, 130, 70, 0.35);
    border-radius: 10px;
    transition: all 0.15s;
  }
  .intermediate-row:hover {
    background: rgba(255, 252, 240, 0.95);
    border-color: var(--gold-1);
    box-shadow: 0 4px 12px rgba(120, 90, 50, 0.18);
  }
  .intermediate-row-info { flex: 1; min-width: 0; }
  .intermediate-row-name { font-size: 16px; font-weight: 700; color: var(--wood-text); }
  .intermediate-row-desc { font-size: 13px; color: var(--wood-text-2); margin-top: 2px; }
  .intermediate-row-types { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
  .intermediate-row-type {
    font-size: 11px; padding: 1px 8px; border-radius: 4px;
    background: rgba(255, 220, 150, 0.5);
    color: var(--wood-text); font-weight: 600;
  }
  .intermediate-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .intermediate-row-actions .mgr-btn { font-size: 12px; padding: 4px 10px; }
  .user-section-title { margin-top: 20px; margin-bottom: 8px; font-weight: 600; }

  /* ============================================================
     2026-07-29: 浼樻儬鍒歌鍒?CRUD
     ============================================================ */
  .triggers-list { display: flex; flex-direction: column; gap: 6px; }
  .trigger-row {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 252, 240, 0.32);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(120, 90, 50, 0.06);
  }
  .trigger-row .event-tag {
    padding: 2px 8px; border-radius: 4px; font-size: 12px;
    background: #d8e3e8; color: #4a6770;
  }
  .trigger-row .event-tag.order_completed { background: #f5e3c2; color: #a8804c; }
  /* 2026-09-30 v29.6: 系统内置规则 (阶梯优惠) — 暖金底色, 区别于用户规则 */
  .trigger-row.system-rule {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
  }
  .trigger-row .event-tag.system {
    background: linear-gradient(135deg, #f59e0b, #c2410c);
    color: #fff;
    font-weight: 600;
  }
  /* 2026-09-29 v29.4: 移除 .event-tag.stamps_redeemed — 集章卡砍了 */
  .trigger-row .batch-name { font-weight: 600; color: var(--wood-text); }
  .trigger-row .cond-text {
    font-family: monospace; font-size: 12px; color: var(--wood-text);
    max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .trigger-row .enabled-toggle { display: flex; align-items: center; gap: 4px; }
  .trigger-form {
    display: grid; grid-template-columns: 1fr;
    gap: 8px; padding: 12px;
    background: rgba(255, 252, 240, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px; margin-bottom: 12px;
  }
  .trigger-form .form-row { display: flex; gap: 8px; align-items: center; }
  .trigger-form .form-row label { min-width: 80px; color: var(--wood-text); font-size: 13px; }
  .trigger-form .form-row input, .trigger-form .form-row select, .trigger-form .form-row textarea {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--wood-border);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px; font-size: 13px;
    color: var(--wood-text);
  }
  .trigger-form .form-row textarea { font-family: monospace; min-height: 60px; }
  /* 2026-07-29: 瑙﹀彂鍣ㄦ潯浠跺彲瑙嗗寲鏋勫缓鍣?*/
  .cond-rows { display: flex; flex-direction: column; gap: 6px; }
  .cond-row {
    display: flex; gap: 6px; align-items: center;
    padding: 6px 8px;
    background: rgba(255, 252, 240, 0.32);
    border: 1px solid var(--glass-border); border-radius: 6px;
  }
  .cond-row select, .cond-row input {
    padding: 4px 8px; font-size: 13px;
    border: 1px solid var(--wood-border);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    color: var(--wood-text);
  }
  .cond-row .cond-row-del {
    padding: 2px 8px; color: var(--danger);
    border: 1px solid var(--danger-border);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
  }
  .cond-row .cond-row-del:hover { background: #fef2f2; }

  /* 2026-07-30: 閫夊畾鐢ㄦ埛鍙戞斁 (targeted grant) 缁撴灉灞曠ず */
  .tg-result {
    margin-top: 12px;
    padding: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
  }
  .tg-result.tg-error { background: #fef2f2; border-color: #fecaca; }
  .tg-result .tg-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
  .tg-result .tg-stat { padding: 4px 8px; border-radius: 4px; }
  .tg-result .tg-stat-granted { background: #d1fae5; color: #047857; }
  .tg-result .tg-stat-skipped { background: #fef3c7; color: #92400e; }
  .tg-result .tg-stat-failed  { background: #fecaca; color: #b91c1c; }
  .tg-result .tg-stat-total   { background: #e0e7ff; color: #3730a3; }
  .tg-result .tg-details { margin-top: 8px; max-height: 200px; overflow-y: auto; font-size: 12px; color: var(--wood-text); font-family: monospace; }

  /* 2026-07-30: 鑷姩鍙戞斁瑙勫垯鐨勪袱涓瓙妯″潡 (鈶?浜嬩欢瑙﹀彂 / 鈶?瀹氬悜鍙戞斁) */
  .rule-subsection { margin-top: 16px; }
  .rule-subsection + .rule-subsection {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #cbd5e1;
  }
  .rule-sub-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--wood-text);
    margin-bottom: 8px;
  }

  /* ============================================================
     2026-07-30: 鏈嶅姟鍣ㄧ洃鎺ц鍥?     ============================================================ */
  .monitor-auto { user-select: none; cursor: pointer; }
  .monitor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  @media (max-width: 1100px) { .monitor-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .monitor-grid { grid-template-columns: 1fr; } }

  .metric-card {
  backdrop-filter: var(--light-blur);
  -webkit-backdrop-filter: var(--light-blur);
    background: rgba(255, 252, 240, 0.7);
    border: 1px solid rgba(180, 130, 70, 0.35);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(120, 90, 50, 0.08);
  }
  .metric-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--wood-text); font-size: 13px; font-weight: 600; }
  .metric-icon { font-size: 18px; }
  .metric-value { font-size: 32px; font-weight: 800; color: #0f172a; line-height: 1.1; }
  .metric-value.muted { color: var(--wood-text-3); }
  .metric-bar { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
  .metric-bar-fill { height: 100%; background: #10b981; transition: width 0.3s, background-color 0.3s; }
  .metric-bar-fill.warn { background: #f59e0b; }
  .metric-bar-fill.danger { background: #ef4444; }
  .metric-detail { font-size: 12px; color: var(--wood-text); }
  .metric-value.warn { color: #f59e0b; }
  .metric-value.danger { color: #ef4444; }

  .monitor-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 1100px) { .monitor-detail-row { grid-template-columns: 1fr; } }
  .monitor-subcard { margin: 0; }

  .metric-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .metric-table th, .metric-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; text-align: left; }
  .metric-table th { color: var(--wood-text); font-weight: 600; background: #f8fafc; }
  .metric-table td { font-family: monospace; }
  .metric-table tr:last-child td { border-bottom: none; }

  /* ============================================================
     2026-07-29: coupon generate 鍔?source 閫夋嫨
     ============================================================ */
  .source-radio-group { display: flex; gap: 12px; padding: 8px 0; }
  .source-radio-group label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  #user-select-row.hidden { display: none; }
  .user-select-input { width: 100%; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; }

  /* ===== 2026-07-29: tab 鍚堝苟鍒?topbar (鍗曡 .tab-pill) 鈥?2026-07-31 椋庢牸閲嶅 ===== */
  .tab-pill {
    padding: 5px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--wood-text);     /* 2026-08-01: wood-text-2→wood-text 加深 */
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-weight: 600;
  }
  .tab-pill:hover {
    background: rgba(255, 255, 255, 0.75);
    color: var(--wood-text);
  }
  .tab-pill.active {
    background: var(--gold-grad);
    color: white;
    font-weight: 700;
    border-color: var(--gold-4);
    box-shadow: 0 2px 8px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 1px rgba(107, 77, 10, 0.3);
  }
  .topbar-sep {
    color: #cbd5e1;
    margin: 0 4px;
    user-select: none;
  }
  /* topbar 鍏佽 flex-wrap (灞忓箷绐勬椂鎹㈣, 涓嶆尋) */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-left { flex-wrap: wrap; row-gap: 4px; }

  /* 鍒?.tab-nav 鍧?(鏁磋, 鏃ф牱寮忎笉鍐嶇敤) */

  /* ===== 2026-07-29: 3-col pos-wrap (鍟嗗搧 | 璐墿杞?缁撹处 | 璁㈠崟) ===== */
  .pos-center {
  backdrop-filter: var(--liquid-blur);
  -webkit-backdrop-filter: var(--liquid-blur);
    flex: 0 0 380px;
    display: flex; flex-direction: column;
    background: rgba(255, 252, 240, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--liquid-shadow);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    min-height: 0;
    padding-bottom: 14px;
  }
  .pos-center .cart-panel {
    flex: 1;
    height: auto;       /* 瑕嗙洊涔嬪墠鍥哄畾 400px, 鐜板湪璁?pos-center 鎾戞弧 */
    min-height: 0;
    display: flex; flex-direction: column;
    border-radius: 0;
    padding-bottom: 6px;        /* 2026-07-29: 浜屾淇濋櫓, 鎸夐挳绂诲簳杈瑰啀杩?6px */
  }
  .pos-center .cart-list { flex: 1; min-height: 0; }

  /* 鎵嬫満绔? 3 鍒楀爢鍙?(鍘熼『搴? 鍟嗗搧 鈫?璐墿杞?鈫?璁㈠崟) */
  @media (max-width: 768px) {
    .pos-center { flex: 0 0 auto; width: 100%; max-height: 50vh; }
    .pos-center .cart-panel { max-height: 50vh; }
  }






/* 2026-08-08: Reduced Motion — 用户系统偏好"减少动效"时关掉所有 animation/transition */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 2026-08-08: 键盘焦点环 (WCAG 2.1 AA) — 鼠标点击不显示, Tab 键盘聚焦才显示 */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--gold-3);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 193, 66, 0.25);
}

/* 2026-08-08: 大屏 modal 主按钮加大 (95vw 站着按容易够着) */
.making-detail-actions .btn {
  min-height: 64px;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 28px;
}


/* 2026-08-08: 手动预做折叠 details — 默认收起, 闲时点开 */
.making-manual-card { padding: 0; }
.making-manual-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px;
  user-select: none;
  display: flex; align-items: center;
  border-radius: 14px;
  transition: background 0.15s;
}
.making-manual-card > summary::-webkit-details-marker { display: none; }
.making-manual-card > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  font-size: 12px;
  color: var(--wood-text-2);
  transition: transform 0.15s;
}
.making-manual-card[open] > summary::before { transform: rotate(90deg); }
.making-manual-card > summary:hover { background: rgba(255, 252, 240, 0.6); }
.making-manual-card > summary > .card-title,
.making-manual-card > summary.card-title { margin-bottom: 0; }
.making-manual-card[open] > :not(summary) { padding: 0 20px 20px 20px; }


/* =====================================================================
   2026-08-26: 现代新中式设计系统 (完整覆盖旧样式)
   - 此块在文件最末, 自动覆盖上面同选择器旧样式
   - 浏览器渲染: 下面的优先级更高
   ===================================================================== */

/* 1. 全局字体 (覆盖原 PingFang SC fallback) */
html, body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: #3D1E12;            /* v2: 深招牌色, 替代墨色 */
  background-color: #F0EDE3; /* v2: 月白, 替代暖白 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. 根色板 token 覆盖
   v2: 招牌深棕红 + 沙土 + 月白 (跟"有点颠"店招完全统一品牌色)
   - 招牌深棕红: 主品牌色, 用于按钮/激活态/印章底 (取自店招字)
   - 沙土: 暖中性点缀, 用于印章字/数字/状态点
   - 月白: 主背景, 干净素雅, 跟招牌色形成自然反差
*/
:root {
  --ink: #3D1E12;            /* 深招牌色 - 主文字 (替代墨色) */
  --ink-2: #6B4A3A;          /* 中招牌色 - 次要文字 */
  --ink-3: #A89080;          /* 灰招牌 - 弱文字 */
  --surface: #F0EDE3;        /* 月白 - 主背景 */
  --surface-2: #E5E2D5;      /* 深月白 - 分隔/hover */
  --surface-3: #D6D2C2;      /* 沙白 - active hover */
  --cocoa: #5C2E1F;          /* 招牌深棕红 - 品牌主色 (取自店招) */
  --cocoa-2: #7A3D26;        /* 亮招牌 - hover */
  --cocoa-3: #3D1E12;        /* 深招牌 - 边/重点 */
  --cocoa-soft: rgba(92, 46, 31, 0.12);  /* 招牌透明 - 背景 */
  --sand: #C2A878;           /* 沙土 - 点缀/印章字/数字 */
  --sand-2: #D4B68A;         /* 浅沙土 - hover */
  --sand-soft: rgba(194, 168, 120, 0.18); /* 沙土透明 - 背景 */
  /* 旧 token 重定向 (上方文件 L31-41 / 247+ / 270+ / 891+ / 932+ / 1240+ / 1340+ / 1838+ / 1871+ / 1909+ / 1979+ / 2164+ / 2232+ 等大量引用 --gold-1/2/3/4/5/glow/glow-soft/grad/texture, 全部映射到 v2 cocoa/sand 体系) */
  --gold-1: #5C2E1F;         /* 招牌深棕红 - border (替代主金) */
  --gold-2: #C2A878;         /* 沙土 - text/gradient */
  --gold-3: #5C2E1F;         /* 招牌 - 重点 */
  --gold-4: #3D1E12;         /* 深招牌 - 边/重 text */
  --gold-5: #2A1408;         /* 最深招牌 - 阴影 */
  --gold-glow: rgba(92, 46, 31, 0.4);     /* 招牌 glow */
  --gold-glow-soft: rgba(92, 46, 31, 0.15); /* 招牌 soft */
  --gold-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 50%);
  /* 主旧 token 别名 (v1 的 .btn-primary / .ff-btn.active / .tab-pill.active / .shop-toggle-btn.open 等"墨底金字"位置) */
  --gold: #5C2E1F;           /* 招牌深棕红, 替代"金色主色" */
  --gold-soft: rgba(92, 46, 31, 0.12);
  --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'STZhongsong', 'SimSun', serif;
  --font-body: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  /* 覆盖旧液体玻璃 (新设计只在订单状态条保留 1 处) */
  --liquid-blur: none;
  --medium-blur: none;
  --light-blur: none;
}

/* 3. App 容器: 从 column (顶栏+主区) 改为 row (sidebar + 主区)
   === 2026-10-04 v30.0.1.1: 加 height: 100vh 锁死, 让 main (column flex) 把 view 的 flex:1 撑成固定高度.
   之前只有 min-height: 100vh, 内容撑开 #app 到 >100vh, main 跟着撑开, view 自己 overflow-y: auto 永远不触发. */
#app.app {
  display: flex !important;
  flex-direction: row !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: var(--surface) !important;
}

/* 4. 侧边栏 (240px 竖排 nav) */
.sidebar {
  width: 240px;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--surface-2);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  padding: 28px 0 24px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--surface-2);
}
.brand-mark {
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  border-radius: 6px;
  flex-shrink: 0;
}
.brand-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.08em;
  line-height: 1;
}
.brand-sub {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}
.sidebar-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 14px 16px;
}

/* 5. Tab pill: 改 block 竖排 (覆盖原 inline 横排) */
.tab-pill {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  text-align: left !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em;
  transition: background 0.12s ease, color 0.12s ease !important;
  transform: none !important;
  box-shadow: none !important;
}
.tab-pill:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}
.tab-pill.active {
  background: var(--cocoa) !important;          /* v2: 招牌深棕红, 替代墨色 */
  color: var(--surface) !important;             /* v2: 月白, 替代金色 */
  font-weight: 600 !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(61, 30, 18, 0.20) !important;
  transform: none !important;
}

/* 6. Top bar 简化: 去掉玻璃效果, 改为简洁横条 */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 32px !important;
  margin: 0 !important;
  background: var(--surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--surface-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  top: 0 !important;
  z-index: 1 !important;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: 0.05em;
  margin-right: 16px;
}
.topbar-sep { display: none !important; }

/* 7. 营业按钮 (v2 polish: 加大字号 + 加粗 + 字色纯白 + 文字阴影, 让"营业中"清晰可读) */
.shop-toggle-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.04em;
}
.shop-toggle-btn.open {
  background: var(--cocoa);          /* v2: 招牌深棕红, 纯色 */
  color: #FFFFFF;                    /* v2.4: 纯白 (12.5:1 对比度, 棕底最清晰), 之前用 #F5E8C7 浅米色在屏幕上看着糊 */
  border-color: var(--cocoa-3);
  font-weight: 800 !important;        /* 加粗到 800, 进一步强化可读性 */
  letter-spacing: 0.10em !important; /* 字距加宽, 字更"张开"易读 */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);  /* 浅阴影让字有立体感, 不糊 */
}
.shop-toggle-btn.open:hover {
  background: var(--cocoa-2);
  box-shadow: 0 4px 10px rgba(92, 46, 31, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.shop-toggle-btn.closed {
  background: var(--surface);
  color: var(--ink-3);
  border-color: var(--surface-3);
}

/* 8. Main 容器: 简化为正常块级 */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface);
}
/* 2026-10-04 v30.0.1: .view/.view-active 合并到 line 611-615 (删除此重复规则 — 它覆盖了 flex column 设计意图,
   导致 view-coupons 等 view 都滑不下去) */

/* 9. icon-btn (topbar 工具按钮): 简洁文字按钮 */
.icon-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--surface-3);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.12s;
}
.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 10. 旧液体玻璃变量 (新设计简化, 已覆盖到 :root 里) */
/* --liquid-blur / --medium-blur / --light-blur 已在上面 :root 设为 none */


/* =====================================================================
   2026-08-26 第二波 polish (在第一波基础上, 收残留的旧金色细节)
   ===================================================================== */

/* 1. 删 --liquid-shadow 残留 (禁用 macOS 26 液体玻璃) */
:root {
  --liquid-shadow: none !important;
  --liquid-blur: none !important;
  --medium-blur: none !important;
  --light-blur: none !important;
  --glass-bg: transparent !important;
  --glass-bg-2: transparent !important;
  --glass-bg-3: transparent !important;
  --glass-shadow: none !important;
  --glass-shadow-2: none !important;
}

/* 2. 订单/配送/会员/触发器卡片: 走新色板 (干净白底 + 浅边) */
.order-card, .delivery-card, .metric-card, .user-row, .user-detail-body,
.trigger-row, .cond-row, .cond-row-del, .product-card, .cart-item {
  background: var(--surface) !important;
  border: 1px solid var(--surface-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* 3. 自提/外送按钮 (ff-btn): 走新色板 */
.ff-btn {
  background: var(--surface) !important;
  border: 1px solid var(--surface-2) !important;
  color: var(--ink-2) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  transition: all 0.12s !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.ff-btn:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.ff-btn.active {
  background: var(--cocoa) !important;          /* v2: 招牌深棕红 */
  color: var(--surface) !important;            /* v2: 月白 */
  border-color: var(--cocoa-3) !important;
  font-weight: 600 !important;
}

/* 4. 空态文字: 字距收紧 (避免 16px 字符间距大) */
.empty-hint {
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  color: var(--ink-3) !important;
  font-size: 14px !important;
}

/* 5. 通用 .btn: 走新色板 (v2: 招牌深棕红底月白字, 次要按钮浅边) */
.btn-primary {
  background: var(--cocoa) !important;
  color: var(--surface) !important;
  border: none !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.btn-secondary, .btn {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--surface-2) !important;
  border-radius: 6px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.btn:hover { background: var(--surface-2) !important; }

/* 6. 营业按钮: v2.5 彻底重做可读性 — 字距 0.12em + weight 800 + 加描边 + 强阴影, 月白边把字"浮"起来 */
.shop-toggle-btn.open {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  font-size: 14.5px !important;
  padding: 8px 20px !important;
  border: 2px solid #FFFDE8 !important;  /* 月白描边, 招牌底+月白字+月白边的"印章"感 */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.15) !important;  /* 极细黑边让字"实心" */
}

/* 7. 移除 emoji-ticket 的 hue-rotate 滤镜 (新设计不用 emoji) */
.emoji-ticket { display: none !important; }


/* =====================================================================
   2026-08-26 第三波: 修 pos-wrap 宽度 + 加 brand-mark 圆形印章
   ===================================================================== */

/* 强制 pos-wrap 100% 宽 (覆盖 .view padding: 32px 后, pos-wrap 默认 width: auto 计算异常) */
.pos-wrap {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 强制 pos-left 撑满 (flex:1 + min-width:0) */
.pos-left {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* brand-mark 圆形 LOGO (v2.4: 招牌深棕红底 + 店招矢量"颠"字 + 沙土边)
   2026-08-26: "颠"字从 Noto Serif SC 字体改为 inline SVG 矢量 (potrace 4K 提取), 跟店招完全一致 */
.brand-mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--cocoa) !important;
  color: var(--sand) !important;
  border: 2px solid var(--sand) !important;
  box-shadow: 0 0 0 1px var(--cocoa-3) !important;
  overflow: hidden !important;
  padding: 5px !important;
  flex-shrink: 0 !important;
}

/* 矢量"颠"字 SVG: 100% 填充圆形章, fill 用 currentColor (CSS 控色) */
.brand-mark .brand-mark-svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  display: block !important;
}

/* .view 高度 fill 父容器 (从 main 的 flex column 撑满) */
.view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}


/* =====================================================================
   2026-08-26 第四波: 彻底改用 grid 布局, 不依赖 flex:1 计算
   ===================================================================== */

/* 强制 pos-wrap 用 grid 布局 (1fr + 260 + 500), 不受 flex 1 计算影响
   2026-08-26 v2.4: 订单列 320→400, 商品列留 2 个横向 grid 位置 (repeat 2) + 商品卡更宽, 购物车略缩
   2026-08-26 v2.5: 订单列 400→440 (用户反馈"右边订单的宽度可以宽一点, 就能显示全了")
   2026-08-26 v2.6: 订单列 440→500 + 购物车 280→260 (订单卡内容显示完整需要更多空间) */
.pos-wrap {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) 260px 500px !important;
  gap: 14px !important;
  width: 100% !important;
  height: calc(100vh - 140px) !important;
  box-sizing: border-box !important;
}

/* pos-left grid item, 不需要 flex */
.pos-left {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--surface-2) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  overflow-y: auto !important;
}

.pos-right {
  width: auto !important;
  flex: none !important;
  background: var(--surface) !important;
  border: 1px solid var(--surface-2) !important;
  border-radius: 8px !important;
}


/* =====================================================================
   2026-08-26 第五波: "颠"字价格圈 (店招矢量字嵌入商品卡)
   ===================================================================== */

/* .product-price: 2026-08-26 改成普通行内文字 (删了矢量"颠"字章) */
.product-price {
  margin-top: 2px !important;
}

/* "颠"字价格章 (2026-08-26 已删, 商品价格直接显示数字, 矢量字只保留在 sidebar 品牌 LOGO) */

/* price 容器允许 flex 排版, 价格数字本身的样式由其他位置定义 */


/* =====================================================================
   2026-08-26: 主品推荐管理 (拖拽 + 卡片)
   ===================================================================== */

/* 上面"已选"区: 横排卡片,可拖拽 */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  min-height: 120px;
  padding: 8px 0;
}
.featured-card {
  position: relative;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border: 2px solid #fbbf24;
  border-radius: 14px;
  padding: 12px 12px 12px 36px;       /* 左留 36px 给 drag handle */
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.10);
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.featured-card.is-dragging {
  opacity: 0.4;
  transform: scale(0.97);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25);
}
.featured-card.is-drop-target {
  border-color: #ea580c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.20), 0 4px 12px rgba(234, 88, 12, 0.15);
  transform: translateY(-2px);
}
.featured-card-handle {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #b45309;
  cursor: grab;
  user-select: none;
  letter-spacing: -2px;
  line-height: 0.7;
  touch-action: none;
}
.featured-card-handle:active {
  cursor: grabbing;
}
.featured-card-order {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 1px 8px;
}
.featured-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.featured-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-card-img .img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: 10px;
}
.featured-card-img:hover .img-overlay { opacity: 1; }
.featured-card-img .img-overlay label {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
}
.featured-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
  margin-bottom: 4px;
  line-height: 1.3;
  /* 衬线字体 — 跟店招字同族 */
  font-family: "Songti SC", "STSongti-SC-Regular", "Songti TC", "Noto Serif CJK SC", serif;
}
.featured-card-desc {
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 30px;
}
.featured-card-price {
  font-size: 13px;
  font-weight: 700;
  color: #ea580c;
  margin-bottom: 8px;
}
.featured-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.featured-card-actions .btn-tiny {
  flex: 1;
  font-size: 11px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.featured-card-actions .btn-tiny:hover {
  background: #fff;
  border-color: #f59e0b;
}
.featured-card-actions .btn-tiny.danger {
  color: #dc2626;
  border-color: #fecaca;
}
.featured-card-actions .btn-tiny.danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.featured-card-actions input[type="file"] { display: none; }

/* 下面"可添加"区: 网格,小卡片 */
.featured-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.catalog-item {
  background: #fff;
  border: 1px solid #fef3c7;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.catalog-item:hover {
  background: #fffbeb;
  border-color: #fbbf24;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.10);
}
.catalog-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.catalog-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-item-info {
  flex: 1;
  min-width: 0;
}
.catalog-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-item-price {
  font-size: 11px;
  color: #ea580c;
  font-weight: 600;
  margin-top: 2px;
}
.catalog-item-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
.catalog-item-add:hover {
  background: #ea580c;
}

/* dragover placeholder (空槽位提示) */
.featured-card.is-drop-placeholder {
  border-style: dashed;
  border-color: #f59e0b;
  background: #fffbeb;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #d97706;
  opacity: 0.6;
}

/* 2026-08-26: 主品推荐"保存顺序"按钮未保存时闪 */
.btn-warning-flash {
  background: #ea580c !important;
  color: #fff !important;
  animation: btnFlash 1.2s ease-in-out infinite;
}
@keyframes btnFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
}

/* ===========================================
   2026-08-28 v35: 配送区设置 (view-delivery-zone)
   =========================================== */
.dz-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  height: calc(100vh - 110px);  /* 填满 main 区域 */
  padding: 12px;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .dz-layout { grid-template-columns: 1fr; height: auto; }
}

/* 左: 地图卡片 */
.dz-map-card {
  background: var(--paper, #fffdf5);
  border: 1px solid rgba(180, 83, 9, 0.30);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(120, 53, 15, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 600px;
}
.dz-hint-bar {
  padding: 8px 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-bottom: 1px solid rgba(180, 83, 9, 0.20);
  font-size: 13px;
  color: #78350f;
  font-weight: 500;
}
.dz-hint b { color: #c2410c; }

#dz-map {
  flex: 1;
  min-height: 500px;
  background: #f8fafc;
}
.dz-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 1000;
  background: rgba(255, 253, 245, 0.95);
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #5C2E1F;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dz-legend-row { display: flex; align-items: center; gap: 6px; }
.dz-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* 右: 控制面板 */
.dz-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.dz-card {
  background: var(--paper, #fffdf5);
  border: 1px solid rgba(180, 83, 9, 0.20);
  border-radius: 12px;
  padding: 14px 16px;
}
.dz-mode-row {
  display: flex;
  gap: 6px;
  margin: 6px 0 10px;
}
.dz-mode-btn {
  flex: 1;
  padding: 10px 4px;
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 8px;
  background: var(--paper, #fffdf5);
  color: #5C2E1F;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.dz-mode-btn:hover {
  background: rgba(254, 215, 170, 0.4);
}
.dz-mode-btn.active {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  border-color: rgba(217, 119, 6, 0.5);
  color: #7c2d12;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.20);
}
.dz-hint-small {
  font-size: 12px;
  color: #78350f;
  line-height: 1.6;
  padding: 8px 10px;
  background: rgba(254, 215, 170, 0.30);
  border-radius: 6px;
  margin-bottom: 10px;
}
.dz-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dz-action-row .btn {
  font-size: 13px;
  padding: 6px 12px;
}
.dz-status {
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
  padding: 6px 0 0;
  min-height: 18px;
  font-family: "KaiTi", "STKaiti", serif;
  letter-spacing: 0.5px;
}
.dz-status.ok { color: #047857; }
.dz-status.err { color: #b91c1c; }
.dz-status.warn { color: #92400e; }

/* 2026-08-28 v36: 店铺坐标显示 + 复制按钮 (拖完红点拿到精确坐标给 Mavis 硬编码) */
.dz-store-coord-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(254, 243, 199, 0.6);
  border: 1px dashed #d97706;
  border-radius: 6px;
  font-size: 11px;
}
.dz-store-coord-label {
  color: #92400e;
  font-weight: 600;
  white-space: nowrap;
}
.dz-store-coord-value {
  flex: 1;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 11px;
  color: #1f2937;
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
  user-select: all;
}

/* 顶点列表 */
.dz-points-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px dashed rgba(180, 83, 9, 0.25);
  border-radius: 6px;
  padding: 4px;
}
.dz-points-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  padding: 12px;
}
.dz-pt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.dz-pt-row:hover { background: rgba(254, 215, 170, 0.3); }
.dz-pt-row.active { background: rgba(254, 215, 170, 0.7); }
.dz-pt-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #7c2d12;
}
.dz-pt-num.range {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  color: #fff;
}
.dz-pt-coord {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
}
.dz-pt-coord input {
  width: 90px;
  padding: 3px 6px;
  border: 1px solid rgba(180, 83, 9, 0.25);
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  background: var(--paper, #fffdf5);
}
.dz-pt-coord input:focus {
  outline: none;
  border-color: #f59e0b;
}
.dz-pt-del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: #b91c1c;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.dz-pt-del:hover { background: rgba(220, 38, 38, 0.15); border-radius: 4px; }

/* Leaflet 自定义 marker */
.dz-marker-free {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  width: 14px !important;
  height: 14px !important;
  cursor: grab;
}
.dz-marker-free:active { cursor: grabbing; }
.dz-marker-free.first { background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.40); }
.dz-marker-range {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  width: 14px !important;
  height: 14px !important;
  cursor: grab;
}
.dz-marker-range:active { cursor: grabbing; }
.dz-marker-range.first { background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.40); }
.dz-marker-store {
  background: linear-gradient(135deg, #fda4af 0%, #f43f5e 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  width: 16px !important;
  height: 16px !important;
  cursor: grab;
}
.dz-marker-store:active { cursor: grabbing; }

/* ===== 2026-08-31: 配送员备注预设 chip (放在 textarea 上面) ===== */
.dc-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  width: 100%;
  margin: 0 0 8px 0;
}
.dc-preset-chip {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--gold-1, #b48246);
  background: rgba(244, 215, 127, 0.22);  /* 浅暖金底 */
  border: 1px solid rgba(180, 130, 70, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.dc-preset-chip:hover {
  background: rgba(244, 215, 127, 0.45);
  border-color: var(--gold-1, #b48246);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(180, 130, 70, 0.18);
}
.dc-preset-chip:active { transform: translateY(0); }
.dc-preset-chip.is-active {
  background: var(--gold-1, #b48246);
  color: #fff;
  border-color: var(--gold-1, #b48246);
  box-shadow: 0 1px 4px rgba(180, 130, 70, 0.35);
}

/* ===== 2026-09-04: 主品推荐 — ➕ 添加占位卡 ===== */
.featured-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  border: 2px dashed rgba(217, 119, 6, 0.45);
  border-radius: 16px;
  background: rgba(255, 247, 230, 0.35);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  padding: 24px;
}
.featured-card-add:hover {
  background: rgba(254, 215, 170, 0.45);
  border-color: rgba(217, 119, 6, 0.75);
  transform: translateY(-1px);
}
.featured-card-add-icon {
  font-size: 64px;
  color: #d97706;
  line-height: 1;
  margin-bottom: 12px;
}
.featured-card-add-text {
  font-size: 28px;
  font-weight: 600;
  color: #7c2d12;
  margin-bottom: 6px;
}
.featured-card-add-hint {
  font-size: 22px;
  color: var(--muted, #6b5b4a);
}

/* ===== 2026-09-04: 主品推荐 — 加新卡 modal 列表项 ===== */
.featured-add-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(180, 130, 70, 0.20);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.featured-add-item:hover {
  background: rgba(254, 215, 170, 0.25);
  border-color: rgba(217, 119, 6, 0.45);
}
.featured-add-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #fef3c7;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.featured-add-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-add-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.featured-add-info { flex: 1; min-width: 0; }
.featured-add-name { font-size: 26px; font-weight: 500; color: #2c1810; }
.featured-add-price { font-size: 22px; color: #b48246; margin-top: 2px; }
.featured-add-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 24px;
  background: linear-gradient(135deg, #fed7aa 0%, #fde68a 100%);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 999px;
  color: #7c2d12;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.featured-add-btn:hover {
  background: linear-gradient(135deg, #fdba74 0%, #fcd34d 100%);
  transform: translateY(-1px);
}

/* modal 关闭按钮 (复用 modal-title 内的 ✕) */
.modal-close {
  background: none; border: none;
  font-size: 32px;
  color: var(--muted, #6b5b4a);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  font-family: inherit;
}
.modal-close:hover { color: #2c1810; }

/* 2026-09-28: 报表 tab 样式 */
#view-stats {
  /* 内容多 (概览+按天+按小时+商品 TOP+渠道), .view overflow hidden 会锁住没法滚;
     用 overflow-y: auto 让 card 列表自己撑开滚动 */
  overflow-y: auto !important;
  padding: 20px !important;
}

/* 报表 tab: 不要嵌 max-height + overflow, 让 view 自己整体滚 — 嵌套滚动用户找不到底 */
#view-stats {
  /* 内容多 (概览+按天+按小时+商品 TOP+渠道), .view overflow hidden 会锁住没法滚;
     用 overflow-y: auto 让 card 列表自己撑开滚动 */
  overflow-y: auto !important;
  padding: 20px !important;
}
.stats-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.stats-period {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stats-period-btn {
  padding: 5px 12px;
  border: 1rpx solid rgba(180, 83, 9, 0.25);
  border-radius: 16px;
  background: transparent;
  color: var(--muted, #6b5b4a);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.stats-period-btn:hover {
  border-color: var(--accent, #b45309);
  color: var(--accent, #b45309);
}
.stats-period-btn.active {
  background: var(--accent, #b45309);
  border-color: var(--accent, #b45309);
  color: #fff;
}

.stats-overview-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stats-card {
  background: linear-gradient(135deg, #fff 0%, #faf6ef 100%);
  border: 1rpx solid rgba(180, 83, 9, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.stats-card-revenue {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: rgba(180, 83, 9, 0.3);
}
.stats-card-label {
  font-size: 12px;
  color: var(--muted, #6b5b4a);
  margin-bottom: 6px;
}
.stats-card-value {
  font-size: 24px;
  font-weight: 600;
  color: #2c1810;
  line-height: 1.2;
}
.stats-card-revenue .stats-card-value {
  color: #b45309;
}
.stats-card-sub {
  font-size: 11px;
  color: var(--muted, #6b5b4a);
  margin-top: 4px;
}

.stats-row-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
}
/* 2026-09-28 v29.2v: 窄屏 (≤1100px) 改成上下排, 商品 TOP 占整宽读起来更舒服 */
@media (max-width: 1100px) {
  .stats-row-split { grid-template-columns: 1fr; }
}
.stats-sub-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6b5b4a);
  margin: 8px 0 6px;
}
.stats-sub-title:first-child {
  margin-top: 0;
}

.stats-table {
  font-size: 12px;
}
.stats-table table {
  width: 100%;
  border-collapse: collapse;
}
.stats-table th,
.stats-table td {
  padding: 4px 10px;
  text-align: left;
  border-bottom: 1rpx solid rgba(180, 83, 9, 0.08);
}
.stats-table th {
  font-weight: 500;
  color: var(--muted, #6b5b4a);
  font-size: 11px;
}
.stats-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stats-table .day-revenue {
  color: #b45309;
  font-weight: 500;
}

/* 2026-10-11 v30.7.8: 按天分布 — 平滑曲线图 */
.stats-by-day-chart {
  width: 100%;
  padding: 4px 0 0;
}
.stats-by-day-chart .chart-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--ink);
}
.stats-by-day-chart .chart-summary b {
  color: #b45309;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stats-by-day-chart .chart-svg {
  /* 2026-10-11 v30.7.8.5: 高度写死 200px (用户要求"不要自适应").
     之前是 height:auto — 配合 viewBox 720x200 会让高度 = 容器宽/3.6,
     并把整个 SVG (含 12px 文字) 整体放大 2.5x, 字号跟旁边对不上.
     现在 JS 里 W 直接取容器 clientWidth, viewBox 坐标系 == CSS 像素坐标系,
     1:1 映射, 文字不再变形. */
  width: 100%;
  height: 200px;
  display: block;
  overflow: visible;
}
.stats-by-day-chart .chart-grid {
  stroke: rgba(92, 46, 31, 0.08);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.stats-by-day-chart .chart-y-label {
  font-size: 12px;
  fill: #a89080;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  dominant-baseline: middle;
}
.stats-by-day-chart .chart-x-label {
  font-size: 12px;
  fill: #6b5b4a;
  font-weight: 600;
}
.stats-by-day-chart .chart-x-label-wd {
  font-size: 11px;
  fill: #a89080;
  font-weight: 400;
}
.stats-by-day-chart .chart-line {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.stats-by-day-chart .chart-fill {
  stroke: none;
}
.stats-by-day-chart .chart-dot {
  fill: #5C2E1F;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 0.15s ease;
}
.stats-by-day-chart .chart-dot:hover { r: 5.5; }
.stats-by-day-chart .chart-zero {
  stroke: rgba(92, 46, 31, 0.15);
  stroke-width: 1;
}

.stats-bars-wrap {
  font-size: 13px;
}
.stats-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.stats-bar-label {
  width: 80px;
  flex-shrink: 0;
  color: var(--muted, #6b5b4a);
  font-variant-numeric: tabular-nums;
}
.stats-bar-track {
  flex: 1;
  height: 18px;
  background: rgba(180, 83, 9, 0.06);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.stats-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #b45309 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.stats-bar-value {
  width: 50px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #2c1810;
}
.stats-bar-empty {
  color: var(--muted, #6b5b4a);
  font-size: 12px;
  padding: 4px 0;
}

/* ============================================================
   2026-10-02 v29.10.1: 删 cart-member-* (7 个) + v29.5 注释
   原 v29.5 引入会员身份条 (cart 顶部) — 2026-10-01 v29.10.1 删 HTML 模板 + 删 renderCart 内 caller
   死 CSS 一并清理; mbr modal (.mbr-*) 和 cart 内 _cartUserInfo 引用 (toast/tier-reward) 不动
   ============================================================ */

/* 2026-09-29 v29.6: 阶梯优惠提示条 (cart 顶部) */
.cart-tier-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
}
.cart-tier-bar.reached {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: #10b981;
  color: #064e3b;
}
.cart-tier-bar.reached b {
  color: #047857;
  font-weight: 700;
  font-size: 14px;
}
.cart-tier-bar.next {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  border-color: #6366f1;
  color: #312e81;
}
.cart-tier-bar.groupbuy {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
  color: #78350f;
}
.cart-tier-bar.has-coupon {
  background: #f5f5f4;
  border-color: #d6d3d1;
  color: #57534e;
}
.cart-tier-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.cart-tier-text {
  flex: 1;
}
}

/* ============================================================
   2026-09-29 v29.5: 会员码 modal (扫码后身份面板)
   ============================================================ */
.mbr-card {
  max-width: 420px;
  background: #fffaf2;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}
.mbr-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fed7aa, #fdba74);
  position: relative;
}
.mbr-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ea580c;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}
.mbr-info {
  flex: 1;
  min-width: 0;
}
.mbr-name {
  font-size: 18px;
  font-weight: 700;
  color: #1c1917;
  letter-spacing: 0.5px;
}
.mbr-no {
  font-size: 12px;
  color: #78350f;
  margin-top: 2px;
  font-family: monospace;
}
.mbr-close {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #78350f;
}
.mbr-close:hover {
  background: rgba(255, 255, 255, 0.7);
}
.mbr-section-title {
  padding: 16px 24px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #57534e;
  letter-spacing: 1px;
}
.mbr-list {
  padding: 0 16px 8px;
  max-height: 280px;
  overflow-y: auto;
}
.mbr-ent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(180, 130, 70, 0.1);
}
.mbr-ent-row:last-child {
  border-bottom: none;
}
.mbr-ent-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.mbr-ent-info {
  flex: 1;
  min-width: 0;
}
.mbr-ent-label {
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
}
.mbr-ent-detail {
  font-size: 12px;
  color: #78716c;
  margin-top: 2px;
}
.mbr-no-ent {
  padding: 24px;
  text-align: center;
  color: #a8a29e;
  font-size: 14px;
}
.mbr-tip {
  padding: 12px 24px;
  background: #fffbeb;
  font-size: 12px;
  color: #92400e;
  border-top: 1px solid #fde68a;
}
.mbr-actions {
  display: flex;
  gap: 12px;
  padding: 16px 24px 20px;
  background: #fffaf2;
}
.mbr-actions .btn {
  flex: 1;
  padding: 10px 16px;
}

/* 2026-10-04 v30.0.4: webui 不再渲染加购换购 (用户反馈 cart 太乱)
   加购换购策略仍保留在 优惠券 tab → 加购换购策略 区块, 后端 /api/upgrade-rules/suggestions 接口继续工作 (小程序端用)
   webui 这里不显示, 保持购物车干净
   原 v29.10 + v30.0.3 的 .cart-upgrade-* 样式全部清理 */

/* 2026-10-01 v29.10: 订单批量编辑 (多选 + 删除)
   顶部工具栏 + 每张 card 左边 checkbox */
.orders-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(217, 119, 6, 0.30);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.35) 0%, rgba(254, 215, 170, 0.20) 100%);
  font-size: 13px;
}
.orders-bulk-bar.hidden {
  display: none;
}
.orders-bulk-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  color: #92400e;
}
.orders-bulk-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.orders-bulk-count {
  color: #b45309;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.orders-bulk-spacer {
  flex: 1;
}
.orders-bulk-bar .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
/* 单 card 的 checkbox — 跟 card 一起 */
.order-card-select {
  display: none;
  align-items: center;
  margin-right: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.order-card-select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.order-card.is-selected {
  border: 1.5px solid #d97706 !important;
  background: rgba(254, 215, 170, 0.20) !important;
}

/* 2026-10-01 v29.10: 订单编辑模式 — 默认隐藏 checkbox + 工具栏, 点了"编辑"才显示
   防误删 (默认安全, 编辑模式才解锁多选) */
#orders-list.orders-edit-mode .order-card-select {
  display: inline-flex;
}
/* 编辑模式下 card 视觉提示 — 边框高亮 (选中时 + 暖色背景) */
#orders-list.orders-edit-mode .order-card {
  border-style: dashed;
  border-color: rgba(217, 119, 6, 0.40);
}

/* ===== 2026-10-04: 库存管理 tab — 全局低库存告急 banner ===== */
.inventory-alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 0 0;            /* 紧贴 topbar, 不吃 .view 的 padding */
  background: linear-gradient(90deg, #fef2f2 0%, #fff7ed 100%);
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
  font-size: 13px;
  font-weight: 500;
  animation: inv-alert-flash 2.4s ease-in-out infinite;
}
@keyframes inv-alert-flash {
  0%, 100% { background: linear-gradient(90deg, #fef2f2 0%, #fff7ed 100%); }
  50%      { background: linear-gradient(90deg, #fee2e2 0%, #ffedd5 100%); }
}
.inventory-alert-banner .alert-icon {
  font-size: 16px;
}
.inventory-alert-banner .alert-text {
  flex: 1;
  min-width: 0;
}
/* v30.0.10: banner 告急品名可点链接 — 下划线 + 暖红强调 + hover 加深 */
.inventory-alert-banner .inv-alert-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(220, 38, 38, 0.4);
  text-underline-offset: 2rpx;
  font-weight: 600;
  transition: color 0.15s ease;
}
.inventory-alert-banner .inv-alert-link:hover {
  color: #991b1b;
  text-decoration-color: #991b1b;
}
.inventory-alert-banner .alert-action {
  background: #dc2626;
  color: white;
  border: none;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.inventory-alert-banner .alert-action:hover { background: #b91c1c; }
.inventory-alert-banner .alert-close {
  background: transparent;
  border: none;
  color: #991b1b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.inventory-alert-banner .alert-close:hover { background: rgba(220, 38, 38, 0.1); }

/* ===== 2026-10-04: 库存 tab — view 布局 (header + 滚动列表) ===== */
#view-inventory > .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}
#view-inventory > .card > .inventory-header {
  flex: 0 0 auto !important;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(180, 83, 9, 0.12);
}
#view-inventory > .card > .inventory-header .card-title { margin-bottom: 0; }
#view-inventory > .card > .inventory-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 6px 16px 12px;
}
#view-inventory > .card > .inventory-body::-webkit-scrollbar { width: 12px; }
#view-inventory > .card > .inventory-body::-webkit-scrollbar-track {
  background: rgba(180, 130, 70, 0.08);
  border-radius: 6px;
}
#view-inventory > .card > .inventory-body::-webkit-scrollbar-thumb {
  background: rgba(180, 83, 9, 0.45);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#view-inventory > .card > .inventory-body::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 83, 9, 0.7);
  background-clip: padding-box;
}

/* ===== 库存行 hover 效果 ===== */
.inv-row:hover { background: #f1f5f9 !important; }
.inv-row.inv-alert:hover { background: #fee2e2 !important; }

/* 告急 chip */
.inv-alert-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dc2626;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 库存进度条 (visual gauge: 当前库存 vs 阈值×2) */
.inv-bar {
  position: relative;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}
.inv-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.25s, background 0.25s;
}
.inv-bar-min {
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 10px;
  color: #94a3b8;
}

/* 小按钮 (快速消耗 -1) */
.btn-tiny {
  padding: 4px 10px !important;
  font-size: 12px !important;
  min-width: 32px !important;
}

/* ===== topbar 扫码 input (跟 .meta-input 风格一致, 但宽 120) ===== */
#topbar-scan-input {
  font-size: 12px;
  padding: 4px 8px !important;
}

/* ===== 2026-10-04: 补打 modal 单选选项 ===== */
.reprint-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: #f8fafc;
}
.reprint-option:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.reprint-option:has(input:checked) {
  background: #fef3c7;
  border-color: #d97706;
}
.reprint-option input[type="radio"] {
  margin-top: 4px;
  cursor: pointer;
  accent-color: #d97706;
}
.reprint-option-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}

/* ===== 2026-10-10 v30.5: 次卡 tab 样式 ===== */
.passes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pass-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #ffffff;
  transition: border-color 0.15s;
}
.pass-card:hover { border-color: #cbd5e1; }
.pass-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pass-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pass-card-title strong {
  font-size: 15px;
  color: #0f172a;
}
.pass-emoji { font-size: 18px; }
.pass-meta {
  font-size: 12px;
  color: #64748b;
}
.pass-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pass-badge-active { background: #dcfce7; color: #166534; }
.pass-badge-used { background: #f1f5f9; color: #64748b; }
.pass-badge-expired { background: #fee2e2; color: #991b1b; }

.pass-card-body { margin-bottom: 8px; }
.pass-progress {
  position: relative;
  height: 22px;
  background: #f1f5f9;
  border-radius: 11px;
  overflow: hidden;
}
.pass-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #f97316 0%, #fb923c 100%);
  border-radius: 11px;
  transition: width 0.3s;
}
.pass-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  mix-blend-mode: normal;
}
.pass-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* 创建次卡表单结果 */
.pcf-result {
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
}
.pcf-result-ok {
  background: #dcfce7;
  color: #166534;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  font-size: 13px;
}
.pcf-result-err {
  background: #fee2e2;
  color: #991b1b;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  font-size: 13px;
}

/* ===== 2026-10-10 v30.5.1: 次卡 (类 + 单张) ===== */
.pass-classes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pass-day-group {
  margin-top: 16px;
}
.pass-day-group:first-child {
  margin-top: 0;
}
.pass-day-header {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 6px 4px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 8px;
}
.pass-find-result {
  margin-bottom: 12px;
}

/* ===== 2026-10-10 v30.5.1: 次卡 print 状态 badge ===== */
.pass-badge-pending { background: #fef3c7; color: #92400e; }
.pass-badge-printed { background: #dbeafe; color: #1e40af; }
.pass-badge-failed { background: #fee2e2; color: #991b1b; }