/* ==========================================================================
 * 物业收付通 共享组件库
 * 组件结构沿袭收银台原型底座（卡片/按钮/分段/药丸/弹层/时间线等），
 * 移动优先；后台页面为 PC 宽屏布局（见 admin 追加段）。
 * ========================================================================== */

/* ---------- 图标 ---------- */
.ic { display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic-13 { width: 13px; height: 13px; }
.ic-15 { width: 15px; height: 15px; }
.ic-16 { width: 16px; height: 16px; }
.ic-17 { width: 17px; height: 17px; }
.ic-18 { width: 18px; height: 18px; }
.ic-19 { width: 19px; height: 19px; }
.ic-20 { width: 20px; height: 20px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.ic-26 { width: 26px; height: 26px; }
.ic-28 { width: 28px; height: 28px; }
.ic-32 { width: 32px; height: 32px; }
.ic-40 { width: 40px; height: 40px; }
.ic-48 { width: 48px; height: 48px; }
.ic-52 { width: 52px; height: 52px; }

/* ---------- 应用骨架 ---------- */
.app { display: flex; height: 100dvh; overflow: hidden; background: var(--bg); }
/* 小程序页宽屏上限：模拟微信 PC 端小程序竖窗形态（导航仍在底部 tabbar） */
@media (min-width: 768px) {
  body:has(> .app) { background: var(--canvas); }
  .app { max-width: 430px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 30px rgba(20, 23, 26, 0.10); }
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.page-pad { padding: 12px 16px 24px; }

/* ---------- 全局隐藏滚动条（可滚动但一律不显示滑条） ---------- */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card-pad { padding: 14px; }
.card-pad-lg { padding: 16px; }
.card-inner { background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-inner); padding: 14px; }
/* 卡片纵向间距一律由列表容器 gap 控制（各列表均 gap:12px），
   不再用 .card+.card 兄弟边距——曾与 gap 叠加成 24px 双倍间距，已移除 */

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-btn); padding: 0 22px; border-radius: var(--r-btn); font-size: 16px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; user-select: none; transition: filter .12s ease, transform .06s ease; }
.btn:active { transform: scale(0.975); filter: brightness(0.94); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-inline { height: var(--h-btn-inline); font-size: 15px; padding: 0 26px; }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink-2); font-weight: 600; }
.btn-accent-soft { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); font-weight: 700; }
.btn-danger-ghost { background: var(--card); border-color: var(--danger-line); color: var(--danger); font-weight: 700; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn-lg { height: 56px; font-size: 17px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 15px; font-weight: 600; }

/* ---------- 图标按钮（40px 圆角 13） ---------- */
.icon-btn { position: relative; width: var(--h-icon-btn); height: var(--h-icon-btn); border-radius: var(--r-icon-btn); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-btn.is-tint { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }
.icon-btn:active { filter: brightness(0.94); }

/* ---------- 徽标 ---------- */
.badge { position: absolute; top: -3px; left: 50%; margin-left: 6px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; font-family: var(--font-num); }

/* ---------- 分段控件（52 行高 / 槽 40） ---------- */
.seg-row { height: 52px; padding: 0 16px; display: flex; align-items: center; flex-shrink: 0; }
.seg { width: 100%; height: 40px; background: var(--seg-track); border-radius: var(--r-seg); padding: 4px; display: flex; gap: 2px; }
.seg-item { flex: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-2); cursor: pointer; white-space: nowrap; user-select: none; }
.seg-item.is-on { background: var(--card); box-shadow: var(--shadow-seg); font-weight: 700; color: var(--ink); }

/* ---------- 筛选药丸（32px，选中墨黑） ---------- */
.pill-row { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.pill-row::-webkit-scrollbar { display: none; }
.pill { height: var(--h-pill); padding: 0 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; user-select: none; }
.pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

/* ---------- 自绘下拉 sm-select（替代原生 select：展开态与原型同风格；事件 sm-select-change，detail.value） ---------- */
.sm-select { position: relative; flex-shrink: 0; }
.sm-select-btn { height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: flex; align-items: center; gap: 5px; padding: 0 12px; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sm-select-label { flex: 1; text-align: left; white-space: nowrap; }
.sm-select-btn > svg { transition: transform .18s; }
.sm-select.is-open .sm-select-btn > svg { transform: rotate(180deg); }
.sm-select-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(20,23,26,.18); padding: 6px; z-index: 70; display: none; }
.sm-select.is-open .sm-select-menu { display: block; }
.sm-select.is-right .sm-select-menu { left: auto; right: 0; } /* 靠右工具行用，防菜单右溢出 */
.sm-select-item { width: 100%; min-height: 38px; border-radius: 9px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; background: none; border: 0; }
.sm-select-item:hover { background: var(--seg-track); }
.sm-select-item.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.sm-select-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; } /* 选项色点（如状态色） */

/* ---------- 状态药丸（14px 圆角，文字色+同色浅底） ---------- */
.st { font-size: 12px; font-weight: 700; border-radius: var(--r-status); padding: 4px 10px; white-space: nowrap; }
.st-pending { color: var(--st-pending); background: var(--divider); }
.st-paid { color: var(--st-paid); background: var(--st-paid-bg); }
.st-nosend { color: var(--st-nosend); background: var(--st-nosend-bg); }
.st-ready { color: var(--st-ready); background: var(--st-ready-bg); }
.st-deliver { color: var(--st-deliver); background: var(--st-deliver-bg); }
.st-done { color: var(--st-done); background: var(--st-done-bg); }
.st-refund { color: var(--st-refund); background: var(--st-refund-bg); }
.st-review { color: var(--st-nosend); background: var(--st-nosend-bg); } /* 待审核同待发货色 */

/* ---------- 小标签（渠道等，6px 灰底） ---------- */
.tag { font-size: 11px; color: var(--ink-2); background: var(--divider); border-radius: var(--r-tag); padding: 3px 7px; white-space: nowrap; }
.tag-danger { color: var(--danger); background: var(--danger-bg); font-weight: 700; }
.tag-accent { color: var(--accent); background: var(--accent-bg); font-weight: 700; }

/* ---------- 页头（接单台系：大标题+门店行+右侧动作） ---------- */
.page-head { padding: 20px 16px 14px; display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.page-head-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.page-head-sub { font-size: 13px; color: var(--ink-2); }
.page-head-sub .num { font-size: 15px; font-weight: 700; color: var(--accent); }
.page-head-sub .num.is-danger { color: var(--danger); }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; }
.store-line { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; color: var(--ink-2); cursor: pointer; width: fit-content; }
.store-line .ic { color: var(--ink-3); }
a.store-line:hover { color: var(--ink); }

/* ---------- 导航栏（52px 返回+标题+动作） ---------- */
.navbar { height: 52px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 12px; flex-shrink: 0; }
.navbar-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.navbar-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.navbar-side { min-width: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.navbar-link { font-size: 14px; color: var(--ink-2); font-weight: 600; padding: 4px 6px; }

/* ---------- 底部 Tab 栏（手机 <1024） ---------- */
.tabbar { height: var(--h-tabbar); background: var(--card); border-top: 1px solid var(--line); display: flex; align-items: flex-start; padding-top: 10px; flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0); }
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; color: var(--ink-3); font-size: 11px; cursor: pointer; }
.tabbar-item.is-on { color: var(--accent); font-weight: 700; }

/* ---------- 左侧 rail（平板 >=1024；本原型未使用 rail，保留规则备用） ----------
 * 注意：底座原规则在 >=1024px 隐藏 .tabbar（收银台平板切 rail）；
 * 本原型小程序页宽屏为竖窗形态、无 rail，tabbar 须全尺寸保留，故移除该隐藏规则。 */
.rail { display: none; }
@media (min-width: 1024px) {
  .rail { width: var(--rail-w); background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 6px; flex-shrink: 0; }
}
.rail-logo { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.rail-item { width: 56px; height: 58px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; color: var(--ink-3); font-size: 10px; cursor: pointer; }
.rail-item.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.rail-spacer { flex: 1; }
.rail-avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }

/* ---------- 底部常驻动作栏 ---------- */
.action-bar { background: var(--card); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0)); flex-shrink: 0; }
.action-bar .btn { flex: 1; }
.action-bar .btn.is-narrow { flex: 0 0 auto; }

/* ---------- 告警横幅（新单，暖橙） ---------- */
.banner-warn { margin: 6px 16px 0; min-height: 54px; border-radius: var(--r-btn); background: var(--warn-bg); border: 1px solid var(--warn-line); display: flex; align-items: center; gap: 10px; padding: 8px 12px; flex-shrink: 0; }
.banner-warn-ic { width: 32px; height: 32px; border-radius: 11px; background: var(--warn); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.banner-warn-title { font-size: 14px; font-weight: 700; color: var(--warn-ink); }
.banner-warn-sub { font-size: 11px; color: var(--warn-ink-2); }
.banner-warn-btn { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--card); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; flex-shrink: 0; }

/* ---------- 卡片顶部告警条（打印失败） ---------- */
.card-alert { margin: -14px -14px 10px; height: 34px; background: var(--danger-bg); border-bottom: 1px solid #F3D6D2; border-radius: 17px 17px 0 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; flex-shrink: 0; }
.card-alert-text { font-size: 12px; font-weight: 700; color: var(--danger); flex: 1; }
.card-alert-btn { height: 24px; padding: 0 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--danger-line); color: var(--danger); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- 键值行 ---------- */
.kv { display: flex; align-items: center; min-height: 24px; gap: 10px; }
.kv-k { font-size: 14px; color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kv-v { font-size: 14px; color: var(--ink); font-family: var(--font-num); flex-shrink: 0; }
.kv-v.no-num { font-family: var(--font); }
.divider { height: 1px; background: var(--divider); margin: 9px 0; flex-shrink: 0; }
.divider-lg { height: 1px; background: var(--divider); margin: 12px 0; flex-shrink: 0; }

/* ---------- 商品行（订单详情 25px 行） ---------- */
.goods-row { min-height: 25px; display: flex; align-items: center; gap: 10px; }
.goods-row-name { font-size: 14px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.goods-row-qty { font-size: 13px; color: var(--ink-3); width: 30px; flex-shrink: 0; font-family: var(--font-num); }
.goods-row-amt { font-size: 14px; color: var(--ink); width: 64px; text-align: right; flex-shrink: 0; font-family: var(--font-num); }
.goods-row .spec { font-size: 12px; color: var(--ink-3); }

/* ---------- 备注块（暖色） ---------- */
.note-block { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 7px 10px; font-size: 12px; line-height: 17px; color: var(--warn-ink); }
.note-block-neutral { background: var(--inset); border: none; color: var(--ink-2); }

/* ---------- 金额大字 ---------- */
.price-lg { display: flex; align-items: baseline; gap: 2px; }
.price-lg .cur { font-size: 14px; font-weight: 700; color: var(--accent); font-family: var(--font-num); }
.price-lg .val { font-size: 22px; font-weight: 700; color: var(--ink); font-family: var(--font-num); letter-spacing: 0.2px; }
.price-xl .cur { font-size: 16px; font-weight: 700; color: var(--accent); font-family: var(--font-num); }
.price-xl .val { font-size: 34px; font-weight: 700; color: var(--ink); font-family: var(--font-num); letter-spacing: -0.5px; }

/* ---------- 时间线（订单进度） ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item { min-height: 26px; display: flex; align-items: center; gap: 10px; }
.timeline-dot { width: 9px; height: 9px; border-radius: 5px; background: var(--accent); flex-shrink: 0; }
.timeline-item.is-todo .timeline-dot { border: 1.5px solid var(--ink-4); background: var(--card); }
.timeline-text { font-size: 13px; color: var(--ink); flex: 1; min-width: 0; }
.timeline-item.is-todo .timeline-text { color: var(--ink-3); }
.timeline-time { font-size: 12px; color: var(--ink-3); font-family: var(--font-num); flex-shrink: 0; }

/* ---------- 输入框（52px） ---------- */
.input { height: var(--h-input); border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--inset); display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 0; }
.input .ic { color: var(--ink-3); }
.input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; color: var(--ink); height: 100%; }
.input input[readonly] { color: var(--ink); cursor: pointer; }
.input.is-plain { background: var(--card); }

/* ---------- 列表行（设置系 48px） ---------- */
.list-row { min-height: 48px; display: flex; align-items: center; gap: 10px; }
.list-row-k { font-size: 15px; color: var(--ink); flex: 1; min-width: 0; }
.list-row-v { font-size: 14px; color: var(--ink-3); flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.list-row-v.is-warn { color: var(--warn); }
.list-row-arrow { color: var(--ink-4); flex-shrink: 0; }

/* ---------- 开关 ---------- */
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--ink-4); display: flex; align-items: center; padding: 0 3px; justify-content: flex-start; flex-shrink: 0; transition: background .15s ease; cursor: pointer; }
.switch::after { content: ''; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.switch.is-on { background: var(--accent); justify-content: flex-end; }

/* ---------- 头像 ---------- */
.avatar { width: 48px; height: 48px; border-radius: 24px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; flex-shrink: 0; }

/* ---------- 底部弹层 ---------- */
.sheet-mask { position: fixed; inset: 0; background: rgba(15, 18, 22, 0.45); z-index: var(--z-sheet); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1); background: var(--card); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-sheet); transform: translateY(103%); transition: transform .22s cubic-bezier(.32,.72,.35,1), visibility 0s .22s; max-height: 86dvh; display: flex; flex-direction: column; visibility: hidden; }
.sheet.is-open { transform: translateY(0); visibility: visible; transition: transform .22s cubic-bezier(.32,.72,.35,1); }
.sheet-mask.is-open { opacity: 1; pointer-events: auto; }
.sheet-head { padding: 16px 16px 10px; display: flex; align-items: center; flex-shrink: 0; }
.sheet-title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; }
.sheet-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.sheet-body { padding: 4px 16px 16px; overflow-y: auto; min-height: 0; }
.sheet-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0)); display: flex; gap: 10px; border-top: 1px solid var(--divider); flex-shrink: 0; }
.sheet-foot .btn { flex: 1; }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; }
@media (min-width: 768px) {
  .sheet { left: 50%; right: auto; width: 520px; transform: translate(-50%, 103%); border-radius: 20px; bottom: 24px; }
  .sheet.is-open { transform: translate(-50%, 0); }
}

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(12px); background: rgba(20, 23, 26, 0.86); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 12px; z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: all .2s ease; white-space: nowrap; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 空态 ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--ink-3); }
.empty-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--divider); display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.empty-text { font-size: 14px; }

/* ---------- 统计数字 ---------- */
.stat-num { font-size: 18px; font-weight: 700; color: var(--ink); font-family: var(--font-num); }
.stat-label { font-size: 11px; color: var(--ink-3); }
.trend-up { display: inline-flex; align-items: center; gap: 3px; background: var(--accent-bg); border-radius: 12px; padding: 3px 8px; color: var(--accent); font-size: 11px; font-weight: 700; }

/* ---------- 柱状图（看板） ---------- */
.bars { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--line); }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 124px; flex: 1; }
.bar-val { height: 16px; font-size: 10px; font-weight: 700; color: var(--ink); font-family: var(--font-num); display: flex; align-items: flex-end; }
.bar { width: 26px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-date { height: 18px; font-size: 10px; color: var(--ink-3); font-family: var(--font-num); display: flex; align-items: flex-end; }
.bar-date.is-today { color: var(--ink); font-weight: 700; font-family: var(--font); }

/* ---------- 进度条行（渠道分布） ---------- */
.meter-row { height: 26px; display: flex; align-items: center; gap: 10px; }
.meter-k { font-size: 14px; color: var(--ink); width: 62px; flex-shrink: 0; white-space: nowrap; }
.meter-track { flex: 1; height: 8px; border-radius: 4px; background: var(--divider); overflow: hidden; }
.meter-fill { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
.meter-v { font-size: 13px; color: var(--ink-2); width: 108px; flex-shrink: 0; text-align: right; font-family: var(--font-num); }

/* ---------- 搜索框 ---------- */
.search-box { height: 40px; border-radius: 12px; background: var(--seg-track); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ink-3); }
.search-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: var(--ink); }

/* ---------- 数字键盘（收银/快收） ---------- */
.kbd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kbd-key { height: 56px; border-radius: var(--r-btn); background: var(--card); border: 1px solid var(--line); font-size: 22px; font-weight: 600; color: var(--ink); font-family: var(--font-num); display: flex; align-items: center; justify-content: center; user-select: none; }
.kbd-key:active { background: var(--seg-track); }
.kbd-key.is-fn { font-size: 16px; font-weight: 700; color: var(--ink-2); font-family: var(--font); }
.kbd-key.is-ok { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 17px; font-weight: 700; font-family: var(--font); }
.kbd-key.is-off { opacity: .35; pointer-events: none; }

/* ---------- 内置数字键盘弹层（input[data-numpad] 唤起，替代系统键盘） ---------- */
.num-pad-sheet .sheet-body { padding-top: 0; }
.num-pad-display { margin: 2px 16px 10px; min-height: 56px; border-radius: var(--r-btn); background: var(--inset); border: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; overflow: hidden; }
.num-pad-display .val { font-size: 30px; font-weight: 700; font-family: var(--font-num); color: var(--ink); letter-spacing: 0.5px; white-space: nowrap; }
.num-pad-display .val.is-empty { color: var(--ink-4); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.num-pad-sheet .kbd-key { height: 52px; background: var(--inset); }
@media (min-width: 768px) { .num-pad-sheet { width: 420px; } }

/* ---------- 字母数字键盘（data-numpad="search" 搜索用；非模态，开着也能点页面） ---------- */
.num-pad-sheet.is-alpha { z-index: 940; }
.num-pad-sheet.is-alpha .num-pad-display { justify-content: flex-start; }
.num-pad-sheet.is-alpha .num-pad-display .val { font-size: 20px; font-weight: 600; font-family: var(--font); }
.kbd-alpha { display: flex; flex-direction: column; gap: 7px; }
.kbd-alpha-row { display: flex; gap: 6px; }
.kbd-alpha-row.is-mid { padding: 0 14px; } /* A 行缩进对齐 QWERTY 手感 */
.kbd-alpha-row .kbd-key { flex: 1; min-width: 0; height: 46px; font-size: 17px; font-weight: 600; font-family: var(--font); }
.kbd-alpha-row .kbd-key.is-fn { flex: 1.6; font-size: 14px; }
@media (min-width: 768px) { .num-pad-sheet.is-alpha { width: 560px; } .kbd-alpha-row .kbd-key { height: 50px; } }

/* ---------- 双栏容器（平板接单台 / POS） ---------- */
.split { flex: 1; min-height: 0; display: flex; }
.col-detail { display: none; }
@media (min-width: 1024px) {
  .col-list { width: 452px; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; min-height: 0; }
  .col-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); min-height: 0; }
}
@media (max-width: 1023.5px) {
  .col-list { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .split.show-detail .col-list { display: none; }
  .split.show-detail .col-detail { display: flex; flex: 1; }
}

/* ---------- 订单卡选中态（平板） ---------- */
.order-card.is-active { border: 2px solid var(--accent); box-shadow: 0 2px 10px rgba(31, 79, 163, 0.12); padding: 13px; }

/* ==========================================================================
 * 全局视觉范式标准件（对齐 ewei 收银端设计语言，2026-09 五轮落地）
 * ========================================================================== */

/* 选中态双信号：2px 主题描边 + 投影（商品卡/会员卡/支付方式卡通用；
   用 outline 而非 border 实现，避免 2px 边框引起的内容位移跳动） */
.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 4px 16px rgba(31, 79, 163, 0.16); }

/* 会员等级徽章（金渐变，会员体系唯一视觉锚点；三级缩放：.is-sm 收银条迷你 / 默认 / .is-lg 详情大卡） */
.lv-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 9px; background: linear-gradient(135deg, #FFF4E1, #EEC084); color: #845019; font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.3; }
.lv-badge.is-sm { padding: 1px 6px; border-radius: 8px; font-size: 9px; }
.lv-badge.is-lg { padding: 6px 12px; border-radius: 13px; font-size: 12px; gap: 5px; }

/* 票据虚线分隔（5px 灰点拼线，金额卡收底/交班小票专用，引出实付金额） */
.ticket-dash { height: 1px; background-image: linear-gradient(90deg, var(--ink-4) 5px, transparent 5px); background-size: 9px 1px; background-repeat: repeat-x; background-position: bottom; margin: 10px 0; }

/* 色条区块头（3×14 主题色竖条 + 标题，详情/核对类信息分区统一入口） */
.sec-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.sec-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }

/* 确认弹窗标准件结构（sheet 内：居中图标圆块 + 标题 + 副文案 + 等宽双按钮） */
.confirm-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.confirm-hero .confirm-ic { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }

/* 分页器标准件（列表分页：上一页/页码/下一页，会员管理/会员识别等通用） */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; }
.pager .pg-btn { min-width: 64px; height: 34px; border-radius: 17px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.pager .pg-btn.is-off { opacity: .4; pointer-events: none; }
.pager .pg-num { font-size: 13px; color: var(--ink-3); font-family: var(--font-num); }

/* 单选圆点（会员卡/优惠券等行选通用；父级 .is-on 控制） */
.radio-dot { width: 21px; height: 21px; border-radius: 11px; border: 1.5px solid var(--ink-4); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.is-on > .radio-dot, .is-on .radio-dot { border-color: var(--accent); background: var(--accent); }
.radio-dot svg { opacity: 0; }
.is-on > .radio-dot svg, .is-on .radio-dot svg { opacity: 1; }

/* 支付方式大卡（触屏友好；选中=描边+投影双信号；收银结算/会员充值等收款场景通用） */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-big { min-height: 96px; border-radius: 14px; background: var(--inset); border: 1.5px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink); position: relative; }
.pay-big .pay-big-d { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.pay-big.is-on { background: var(--card); border-color: var(--accent); box-shadow: 0 4px 16px rgba(31,79,163,.16); }
.pay-big .pay-radio { position: absolute; top: 8px; right: 8px; width: 19px; height: 19px; border-radius: 10px; border: 1.5px solid var(--ink-4); display: flex; align-items: center; justify-content: center; background: var(--card); }
.pay-big.is-on .pay-radio { border-color: var(--accent); background: var(--accent); }
.pay-big .pay-radio svg { opacity: 0; }
.pay-big.is-on .pay-radio svg { opacity: 1; }

/* 平铺限宽（平板单列页内容限宽居中） */
@media (min-width: 768px) and (max-width: 1023.5px) {
  .limit-pad { padding-left: 32px; padding-right: 32px; }
}

/* ---------- 工具类 ---------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.grow { flex: 1; min-width: 0; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; }
.t11 { font-size: 11px; } .t12 { font-size: 12px; } .t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t16 { font-size: 16px; } .t17 { font-size: 17px; }
.bold { font-weight: 700; } .semi { font-weight: 600; }
.c2 { color: var(--ink-2); } .c3 { color: var(--ink-3); } .c4 { color: var(--ink-4); } .ca { color: var(--accent); } .cd { color: var(--danger); } .cw { color: var(--warn); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hide { display: none !important; }

/* ==========================================================================
 * 后台管理端组件（平台后台 / 商家后台，PC 宽屏；页面骨架 .admin）
 * 交互件（分段/药丸/开关/弹层/Toast/下拉）沿用上方共享件 + prototype.js
 * ========================================================================== */
.admin { display: flex; height: 100dvh; overflow: hidden; background: var(--bg); }
/* 左侧导航 */
.admin-side { width: 232px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; }
.admin-logo { height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.admin-logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-logo-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.admin-logo-sub { font-size: 11px; color: var(--ink-3); }
.admin-nav { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.admin-nav-group { font-size: 11px; color: var(--ink-4); padding: 14px 10px 6px; font-weight: 700; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 11px; color: var(--ink-2); font-size: 14px; cursor: pointer; margin-top: 2px; user-select: none; }
.admin-nav-item:hover { background: var(--bg); }
.admin-nav-item.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.admin-nav-item .cnt { margin-left: auto; min-width: 19px; height: 19px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-family: var(--font-num); }
.admin-user { padding: 12px 16px; border-top: 1px solid var(--divider); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 右侧：顶栏 + 内容 */
.admin-right { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.admin-top { height: 60px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 22px; flex-shrink: 0; }
.admin-top-title { font-size: 16px; font-weight: 700; }
.admin-top-sub { font-size: 12px; color: var(--ink-3); }
.admin-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.admin-main { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 32px; }
.admin-grid { display: grid; gap: 14px; }
/* 统计卡 */
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; }
.stat-card-label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.stat-card-num { font-size: 26px; font-weight: 700; font-family: var(--font-num); margin-top: 6px; letter-spacing: -0.3px; }
.stat-card-sub { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* 表格 */
.tbl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 12px; color: var(--ink-3); font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--inset); white-space: nowrap; }
.tbl td { font-size: 13.5px; color: var(--ink); padding: 12px 14px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: #FAFBFD; }
/* 工具行 */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .search-box { width: 240px; background: var(--card); border: 1px solid var(--line); }
/* 后台输入（40px） */
.a-input { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 0 12px; font-size: 13.5px; color: var(--ink); width: 100%; outline: none; font-family: inherit; }
.a-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-bg); }
textarea.a-input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
/* 表单 */
.form-row { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; }
.form-label { width: 110px; flex-shrink: 0; font-size: 13.5px; color: var(--ink-2); padding-top: 10px; text-align: right; }
.form-label .req { color: var(--danger); margin-right: 2px; }
.form-ctrl { flex: 1; min-width: 0; max-width: 480px; }
.form-hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
/* 后台按钮尺寸 */
.btn-a { height: 36px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; font-weight: 600; }
.btn-a.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
/* 描述列表 */
.desc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.desc-item { display: flex; padding: 9px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.desc-k { width: 122px; color: var(--ink-3); font-size: 13px; flex-shrink: 0; }
.desc-v { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); }
/* 上传占位（发票/图片上传） */
.upload-box { border: 1.5px dashed var(--line); border-radius: 12px; background: var(--inset); min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); cursor: pointer; font-size: 12.5px; padding: 14px; text-align: center; }
.upload-box:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-bg); }
/* 步骤条（工单/进度） */
.steps { display: flex; align-items: flex-start; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; min-width: 0; }
.step::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--divider); }
.step:first-child::before { display: none; }
.step-dot { width: 28px; height: 28px; border-radius: 14px; background: var(--card); border: 2px solid var(--divider); color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-num); position: relative; z-index: 1; }
.step-t { font-size: 12px; color: var(--ink-3); text-align: center; }
.step.is-done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.is-done .step-t { color: var(--ink); font-weight: 600; }
.step.is-done::before { background: var(--accent); }
.step.is-cur .step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.step.is-cur .step-t { color: var(--accent); font-weight: 700; }