/* 两块头 全局样式
 * 默认主题：渐变活力（蓝紫→青绿）；其余皮肤走 data-theme 变量切换
 * 主色全部走变量，后续换色仅需改 :root
 */
:root {
  --brand: #6c5ce7;        /* 品牌主色 · 活力紫 */
  --brand-deep: #5a48d6;   /* 深端（渐变深端 / 按钮 hover） */
  --brand-hover: #7d6ff0;  /* 激活项 / 悬停背景 */
  --brand-mid: #00cec9;    /* 次级青（图表 / 渐变亮端） */
  --gold: #d4af37;         /* 点缀金（激活下划线 / 强调） */
  --danger: #e74c6f;        /* 玫红 · 全局红色警告/危险色 */
  --danger-deep: #c63a57;   /* 玫红深端（按压 / 渐变深端） */
  --danger-light: #fdeef1;  /* 玫红浅背景 */
  --danger-border: #f4c0cb; /* 玫红浅边框 */
  --success: #18a058;      /* 正常/已完成绿（对账差额平衡） */
  --ink-sidebar: #241f4e;  /* 侧边栏底色 */
  --ink-text: #eef0ff;     /* 侧边栏主文字 */
  --ink-sub: #b9b4e0;      /* 侧边栏次要文字 */
  --bg: #f4f1ff;
  --bg-soft: #ece7fb;
  --line: #e3def6;
  --text: #23203a;
  --text-sub: #8b86a8;
  /* 默认玻璃变量（无 data-theme 兜底 = 渐变活力） */
  --card-glass: rgba(255,255,255,.82); --card-glass2: rgba(255,255,255,.66); --line-soft: rgba(108,92,231,.12);
  --shadow-card: 0 2px 6px rgba(108,92,231,.14), 0 12px 30px rgba(108,92,231,.16);
  --shadow-btn: 0 3px 8px rgba(108,92,231,.3), inset 0 1px 0 rgba(255,255,255,.45);
  --radius-card: 14px; --radius-btn: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }

/* ---------- 登录 ---------- */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 55%, var(--brand-deep) 100%); }
.login-card { width: min(380px, 92vw); background: #fff; border-radius: 12px; padding: 36px 36px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-logo { font-size: 30px; font-weight: 700; color: var(--brand); text-align: center; }
.login-sub { text-align: center; color: var(--text-sub); margin: 6px 0 22px; }
.login-msg { color: var(--danger); text-align: center; min-height: 20px; margin-top: 10px; font-size: 13px; }
.login-tip { text-align: center; color: #b0b3b8; font-size: 12px; margin-top: 14px; }

/* ---------- 布局 ---------- */
#app { display: flex; height: 100vh; }
.sidebar { width: 216px; background: var(--ink-sidebar); color: var(--ink-text); display: flex; flex-direction: column; flex-shrink: 0; }
.brand { padding: 20px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand b { font-size: 20px; letter-spacing: 2px; display: block; }
.brand span { font-size: 11px; color: var(--ink-sub); }
.sidebar nav { flex: 1; overflow-y: auto; padding: 10px 0; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 11px 20px; color: #ccd9ea; text-decoration: none; cursor: pointer; border-left: 3px solid transparent; }
.menu-item:hover { background: rgba(255,255,255,.08); }
.menu-item.active { background: var(--brand-hover); border-left-color: var(--gold); color: #fff; }
.mi { width: 18px; text-align: center; }
.mi svg, .dr-i svg { width: 16px; height: 16px; vertical-align: -2px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 52px; background: #fff; border-bottom: 1px solid #e4e7ed; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.crumb { font-size: 16px; font-weight: 600; color: var(--brand); }
.top-right { display: flex; align-items: center; gap: 10px; }
.user-name { color: #606266; }
/* 右上角用户菜单：点姓名/「我的」展开「修改密码 / 退出登录」 */
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid #e4e7ed; background: #fff; border-radius: 15px; cursor: pointer; font-size: 13px; color: #3d4350; line-height: 1; font-family: inherit; }
.user-btn:hover { border-color: var(--brand); color: var(--brand); }
.user-btn .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; }
.user-mobile { display: none; }
.user-drop { position: absolute; right: 0; top: calc(100% + 8px); width: max-content; min-width: 0; background: #fff; border: 1px solid #e8ebf0; border-radius: 12px; box-shadow: 0 10px 28px rgba(31, 35, 41, .14); padding: 6px; z-index: 60; }
.user-drop[hidden] { display: none; }
.ud-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 14px; border-radius: 8px; font-size: 14px; color: #2b3038; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ud-item:hover { background: var(--bg-soft); }
.ud-danger { color: #c0392b; }
.greeting { font-size: 13px; color: var(--text-sub); white-space: nowrap; }

/* 订阅到期横幅：全局展示在顶栏下方（PC/移动共用），7 天内琥珀色提醒、已到期朱红警示 */
.sub-banner {
  display: none;
  position: relative;
  z-index: 20;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.sub-banner.warn { background: #FFF7E6; color: #B86E00; border-bottom: 1px solid #F2D9A6; }
.sub-banner.danger { background: var(--danger-light); color: var(--danger); border-bottom: 1px solid var(--danger-border); font-weight: 600; }

.view { flex: 1; overflow-y: auto; padding: 18px 22px; }

/* ---------- 卡片 ---------- */
.card { background: #fff; border: 1px solid rgba(0,0,0,.04); border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06); padding: 16px 18px; margin-bottom: 16px; }
.card h3 { font-size: 15px; color: var(--brand); margin-bottom: 12px; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title h3 { margin: 0; }
/* 卡片标题区筛选控件等高（桌面端，与移动端一致：日期框=下拉框=按钮） */
.card-title .filter input, .card-title .filter select { height: 34px; box-sizing: border-box; padding: 0 8px; }
/* 标题 + 下方小字浅灰说明（如每日对账） */
.ct-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.ct-sub { margin: 3px 0 0; font-size: 12px; color: var(--text-sub); line-height: 1.5; font-weight: 400; }
/* 标题区右侧操作组（如期初页 +添加行 / 保存并应用） */
.op-acts { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

/* ---------- 指标卡 ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: #fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 4px solid var(--brand); }
.kpi .label { color: var(--text-sub); font-size: 12px; }
.kpi .value { font-size: 24px; font-weight: 700; color: var(--brand); margin-top: 6px; }
/* 卡片数值配色：全部取主题变量，随皮肤整体改色（brand 主色 / brand-deep 深一档；红绿为语义色） */
.kpi.blue { border-left-color: var(--brand); } .kpi.blue .value { color: var(--brand-deep); }
.kpi.orange { border-left-color: var(--gold); } .kpi.orange .value { color: var(--brand-deep); }
.kpi.red { border-left-color: var(--danger); } .kpi.red .value { color: var(--danger); }
.kpi.green { border-left-color: var(--success); } .kpi.green .value { color: var(--success); }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; }
.tbl th { background: var(--bg-soft); color: var(--brand); font-weight: 600; padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid #e4e7ed; }
.tbl td { padding: 9px 12px; border-bottom: 1px solid #f0f2f5; vertical-align: top; word-break: break-all; }
.tbl tr:hover td { background: #f7f9fd; }
.tbl .empty { text-align: center; color: var(--text-sub); padding: 28px; }
/* 库存查询表：仓库表头下拉、细线文字（数量除外） */
.jk-wh-sel { border: none; background: transparent; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; outline: none; }
.jk-tbl td { font-weight: 300; }
.jk-tbl td.qty b { font-weight: 700; }
.jk-tbl .tag { font-weight: 500; }
/* 库存查询商品单元格：图左名右 */
.jk-tbl td.prod-cell { display: flex; align-items: center; gap: 8px; }
.jk-tbl td.prod-cell img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: #f2f3f5; flex: 0 0 auto; }
.jk-tbl td.prod-cell .prod-ph { width: 36px; height: 36px; border-radius: 4px; background: #f2f3f5; flex: 0 0 auto; }
.jk-tbl td.prod-cell .prod-name { font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 商品名+时间上下排列（流水表） */
.jk-tbl td.prod-cell .prod-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.jk-tbl td.prod-cell .prod-info .st-sub { font-weight: 300; }
/* 仓库列居中 */
.jk-tbl th.c, .jk-tbl td.c { text-align: center; }
.jk-tbl th.c select { text-align: center; }
/* 库存流水表：文字小一号、类型图标 */
.jk-flow .tbl th, .jk-flow .tbl td { font-size: 12px; }
.jk-flow .tbl td.prod-cell .prod-name { font-size: 12px; }
.jk-flow .flow-ic svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
/* 销售/采购记录列表：门店左对齐、金额与操作列右对齐 */
.sale-records .tbl th { text-align: left; }
.sale-records .tbl th:nth-child(2), .sale-records .tbl td:nth-child(2) { text-align: right; }
.sale-records .tbl th:last-child, .sale-records .tbl td:last-child { text-align: right; white-space: nowrap; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #ecf5ff; color: #409eff; }
.tag.green { background: #f0f9eb; color: #67c23a; }
.tag.orange { background: #fdf6ec; color: #e6a23c; }
.tag.red { background: var(--danger-light); color: var(--danger); }
.tag.gray { background: #f4f4f5; color: var(--text-sub); }
.tag.warn-tag { background: #FFF7E6; color: #B86E00; }
.st-sub { display: block; font-size: 10px; color: var(--text-sub); margin-top: 2px; font-style: normal; }
.fl-hint { font-size: 12px; color: var(--text-sub); margin-top: 3px; line-height: 1.5; }
.form .fi.sep { border-top: 1px dashed #e4e7ed; padding-top: 10px; margin-top: 6px; }
@media (max-width: 640px) { .st-sub { font-size: 9px; } }

/* ---------- 按钮 ---------- */
.btn { display: inline-block; padding: 7px 16px; border: 1px solid #d9dce0; background: #fff; border-radius: 4px; cursor: pointer; color: #606266; font-size: 13px; box-shadow: 0 2px 5px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.65); }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(0,47,167,.22), inset 0 1px 0 rgba(255,255,255,.28); }
.btn.primary:hover { background: var(--brand-deep); }
.btn.danger { color: var(--danger); border-color: var(--danger-border); }
.btn.danger:hover { border-color: var(--danger); }
.btn.mini { padding: 3px 10px; font-size: 12px; }
/* 收款渠道卡片标题操作组：+新增渠道 / 切换收款通道 同一行右侧、按钮加高 */
.pc-acts { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: 8px; }
.pc-acts .btn { height: 32px; line-height: 30px; padding: 0 14px; box-sizing: border-box; }
.btn.block { width: 100%; margin-top: 4px; padding: 10px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 表单 ---------- */
.form .fi { margin-bottom: 12px; display: flex; align-items: flex-start; }
/* 开单表单两列布局：桌面端一行两项（半行），移动端一列 */
.form-grid { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.form-grid .fi { width: 50%; box-sizing: border-box; padding: 0 6px; }
.form .fi label { width: 104px; color: #606266; padding-top: 7px; flex-shrink: 0; }
.form .fi input, .form .fi select, .form .fi textarea { flex: 1; border: 1px solid #dcdfe6; border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; min-width: 0; }
.form .fi input:focus, .form .fi select:focus, .form .fi textarea:focus { border-color: var(--brand); }
.form .fi textarea { min-height: 64px; resize: vertical; }
/* 日常收支新增：两行式字段（标签一行左右各半，控件下一行并排各占一半） */
.ie-pair-lab { display: flex; gap: 10px; margin-bottom: 6px; }
.ie-pair-lab span { flex: 1; min-width: 0; color: #606266; font-size: 13px; }
.ie-pair-fld { display: flex; gap: 10px; margin-bottom: 12px; }
.ie-pair-fld select, .ie-pair-fld input { flex: 1; min-width: 0; border: 1px solid #dcdfe6; border-radius: 4px; padding: 7px 10px; font-size: 13px; outline: none; background: #fff; }
.ie-pair-fld select:focus, .ie-pair-fld input:focus { border-color: var(--brand); }
/* 只读展示值 + 盘点单商品行 */
.form .fi .fval { flex: 1; padding: 7px 10px; font-size: 13px; color: #303133; word-break: break-all; }
.form .fi .fval b { color: var(--brand); font-weight: 600; }
/* 盘点单弹窗：对齐开单表单 */
.st-no { font-size: 12px; color: var(--text-sub); text-align: right; padding: 0 2px 6px; }
.st-head .fl-value { flex: 1; min-width: 0; font-size: 12px; color: var(--text-sub); text-align: right; padding: 6px 0; }
.st-remark-box { padding: 8px 2px 2px; }
.st-remark-box .fl-input { width: 100%; box-sizing: border-box; font-size: 13px; color: #606266; border: 1px solid #dcdfe6; border-radius: 6px; background: #fff; padding: 8px 10px; text-align: left; }
/* 通用：商品名称前商品图（列表/明细/盘点表内） */
.pcell-prod { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.pcell-prod img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid #e4e7ed; background: #f7f9fd; flex-shrink: 0; }
.pcell-prod .pph { width: 34px; height: 34px; border-radius: 4px; background: #f2f3f5; flex-shrink: 0; }
.pcell-prod .pname-txt { font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-items { padding: 0; }
.st-items .tbl-wrap { margin-top: 10px; border-radius: 6px; overflow: hidden; }
.st-items .tbl th, .st-items .tbl td { padding: 8px 10px; white-space: nowrap; }
.st-items input.st-qty { width: 68px; text-align: center; border: 1px solid #dcdfe6; border-radius: 4px; padding: 5px 6px; font-size: 13px; outline: none; }
.st-items input.st-qty:focus { border-color: var(--brand); }
.st-items .st-diff-td { font-size: 12px; color: var(--text-sub); }
.st-items .st-diff-td b { color: var(--brand); font-weight: 600; }
/* 销售/采购记录筛选时间：小字 */
.rec-filters .rec-date { font-size: 12px; width: 76px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 3px 6px; color: #606266; text-align: center; background: #fff; -webkit-appearance: none; appearance: none; }
/* 库存查询表头筛选：小字小框 */
.jk-tbl th.c select, .jk-tbl th select, #jk-store { font-size: 12px; padding: 2px 6px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: #606266; }
/* 盘点记录列表：除差异数量与表头外小字 */
.st-list .tbl th { font-size: 14px; }
.st-list .tbl td { font-size: 12px; color: #606266; }
.st-list .tbl td .st-diff-num { font-size: 14px; color: var(--brand); font-weight: 600; }
.form .fi.st-row { align-items: center; }
.st-row label.st-p { width: auto; flex: 1; min-width: 0; padding-top: 0; display: flex; flex-direction: column; font-weight: 500; line-height: 1.5; }
.st-row label.st-p em { font-size: 11px; color: var(--text-sub); font-style: normal; font-weight: 400; }
.st-row input[type="number"] { flex: 0 0 auto; width: 86px; max-width: 86px; text-align: center; }
.st-row .st-diff { flex: 0 0 auto; font-size: 12px; color: var(--text-sub); padding-left: 10px; white-space: nowrap; }
.st-row .st-diff b { color: var(--brand); font-weight: 600; }
/* 业务日期输入：数字采用 Win11 任务栏时钟同款字体（Segoe UI Variable） */
.form .fi input[type="date"] { font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: .3px; }
.form .hint { color: var(--text-sub); font-size: 12px; margin-left: 104px; }
.form.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form.inline .fi { margin: 0; }
.form.inline label { width: auto; margin-right: 6px; padding-top: 5px; }
/* 弹窗表单（v5.30）：标签在上、控件在下并占满整行，避免 104px 标签挤压输入区、长字段挤成一行 */
.form.form-stack .fi { flex-direction: column; align-items: stretch; }
.form.form-stack .fi > label { width: auto; padding-top: 0; margin-bottom: 5px; font-size: 13px; }
.form.form-stack .fi > input,
.form.form-stack .fi > select,
.form.form-stack .fi > textarea { width: 100%; box-sizing: border-box; }
.form.form-stack .fi > div { width: 100%; min-width: 0; }
.form.form-stack .fi > table { width: 100%; }
.form.form-stack .hint { margin-left: 0; }
/* 同一行内的并列控件（如营业时间 08:00 至 22:00）：均分整行，不被竖排拆散 */
.form.form-stack .fi-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.form.form-stack .fi-row input { flex: 1; min-width: 0; width: auto; }
.form.form-stack .fi-row span { flex: 0 0 auto; font-size: 13px; color: var(--text-sub); }

/* ---------- 筛选栏 ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filter input, .filter select { border: 1px solid #dcdfe6; border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; }
.filter label { color: var(--text-sub); }
/* 卡片标题右侧动作区：筛选控件右置，紧随其后的新增按钮与标题同行（如 门店人员 页） */
.card-title .filter { margin-left: auto; }
.card-title .filter + .link-btn { margin-left: 10px; flex: 0 0 auto; }
/* 销售/采购记录筛选：开始时间、结束时间、门店 三控件同一行，宽度自动适配 */
.rec-filters { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; }
.rec-filters input, .rec-filters select { flex: 1 1 0; min-width: 0; width: auto; }
.rec-sep { flex: 0 0 auto; color: var(--text-sub); font-size: 13px; line-height: 1; }
/* 记录页：标题行(左标题/右新增按钮) + 独立筛选行（自动适配移动端） */
.rec-filter-bar { margin-bottom: 12px; min-width: 0; }
.rec-filter-bar .filter { margin-bottom: 0; flex-wrap: wrap; }
/* 记录筛选：单号输入框 + 查询/导出 同行，单号框自动缩短 */
.rec-kw { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
.rec-kw input { flex: 1 1 auto; min-width: 0; width: auto; }
.rec-kw .btn { flex: 0 0 auto; }
/* 筛选栏按钮文字水平+垂直居中（报表/记录等所有筛选栏统一保障） */
.filter .btn { text-align: center; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--text-sub); font-size: 13px; justify-content: flex-end; }
.pager .cur { background: var(--brand); color: #fff; border-radius: 4px; padding: 2px 10px; }

/* ---------- 弹窗 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 99; }
.modal { background: #fff; border-radius: 8px; width: 640px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; }
.modal-h { padding: 14px 18px; border-bottom: 1px solid #e4e7ed; font-weight: 600; color: var(--brand); display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.modal-b { padding: 16px 18px; overflow-y: auto; min-height: 0; }
.modal-f { padding: 12px 18px; border-top: 1px solid #e4e7ed; text-align: right; display: flex; gap: 10px; justify-content: flex-end; }
.modal .close { border: none; background: none; font-size: 14px; }
/* 轻量弹层（点右上角「修改密码」）：不占满宽度，居中紧凑卡片 */
.modal-mask-compact .modal { width: 420px; max-width: 92vw; }

/* ---------- 图表 ---------- */
.chart { width: 100%; height: 320px; }
.chart.sm { height: 240px; }
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .chart-row { grid-template-columns: 1fr; } }

/* ---------- Tab（浅色/ios27：选中=品牌蓝底白字，未选中=浅灰底品牌蓝字；渐变活力风保持：选中=白底品牌字，未选中=品牌底白字） ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg-soft); border-radius: 8px; padding: 4px; width: fit-content; }
.tab { padding: 6px 18px; border-radius: 5px; cursor: pointer; color: var(--brand); font-size: 13px; border: none; background: transparent; transition: filter .15s, box-shadow .15s; }
.tab:hover { filter: brightness(1.1); }
.tab.active { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); filter: none; }
html[data-theme="gradient"] .tab { background: var(--brand); color: #fff; }
html[data-theme="gradient"] .tab.active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(108,92,231,.25); }

/* ---------- 提示 ---------- */
#toast-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.toast { background: #fff; border-left: 4px solid var(--brand); border-radius: 4px; padding: 10px 16px; box-shadow: 0 3px 12px rgba(0,0,0,.14); font-size: 13px; transition: opacity .3s, transform .3s; }
.toast.error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(-6px); }

/* ---------- 其他 ---------- */
.empty { text-align: center; color: var(--text-sub); padding: 40px; }
.diff-pos { color: var(--danger); } .diff-neg { color: #67c23a; }
.muted { color: var(--text-sub); font-size: 12px; }
.mt12 { margin-top: 12px; }
textarea.mono, code { font-family: Consolas, monospace; font-size: 12px; }

/* ---------- 移动端增强（PC 默认隐藏） ---------- */
.top-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icon-btn { display: none; border: none; background: none; font-size: 20px; color: var(--brand); cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.main { position: relative; }

/* 下拉刷新指示器 */
.ptr { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-sub); background: #f4f6f9; z-index: 5; pointer-events: none; transform: translateY(-44px); opacity: 0; transition: transform .15s ease-out, opacity .15s ease-out; }
.ptr.on { color: var(--brand); font-weight: 600; }

.tabbar { display: none; }
.drawer-mask { display: none; }

/* ============================================================
   移动端适配（手机 / 平板竖屏，≤768px）
   布局策略：侧边栏变为顶部可滑动导航、表格横向滚动、
   表单标签堆叠、弹窗全屏、触控按钮加大
   ============================================================ */
@media (max-width: 768px) {
  #app { height: 100vh; height: 100dvh; flex-direction: column; }

  /* 移动端隐藏深蓝色顶部导航栏（品牌 + 横向菜单），菜单改由 ☰ 抽屉与底部导航提供 */
  .sidebar { display: none; }

  .main { min-height: 0; }
  .topbar { height: 48px; padding: 0 12px; }
  .crumb { font-size: 16px; }
  .user-name { display: none; }
  .user-mobile { display: inline; }
  .user-btn { height: 28px; padding: 0 10px; }
  .greeting { font-size: 12px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .view { padding: 12px 10px; }

  .card { padding: 14px 12px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi .value { font-size: 20px; }

  /* 表格：内容不压缩，横向滑动查看 */
  .tbl-wrap .tbl { min-width: max-content; }
  .tbl th, .tbl td { padding: 8px 10px; }

  /* 表单：标签在上、输入在下（避免 104px 标签挤压输入区） */
  .form .fi { flex-direction: column; align-items: stretch; }
  .form .fi label { width: auto; padding-top: 0; margin-bottom: 4px; }
  .form .hint { margin-left: 0; }
  .form.inline .fi { flex-direction: row; align-items: center; }
  .form.inline label { width: auto; margin-bottom: 0; }
  /* 两列布局在移动端保持半行（一行两项） */

  /* 弹窗：全屏抽屉式 */
  .modal { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
  .modal-b { flex: 1; }
  /* 弹层标题：移动端加大 */
  .modal-h { font-size: 16px; padding: 16px 18px; }
  /* 弹层右上角关闭按钮：移动端加大（触控目标） */
  .modal .close { font-size: 15px; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(120,120,128,.16); color: #3c3c43; border: none; }
  /* 轻量弹层（修改密码等少量字段）：移动端保持居中卡片，不做全屏抽屉 */
  .modal-mask-compact { padding: 0 18px; }
  .modal-mask-compact .modal { width: 100%; max-width: min(340px, 92vw); height: auto; max-height: 82vh; border-radius: 14px; }
  .modal-mask-compact .modal-b { flex: 0 1 auto; padding: 14px 16px; }
  .modal-mask-compact .modal-f { position: static; box-shadow: none; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }

  /* Tab 横向滑动（主导航：8 项平分整行自动适配；数量过多时仍可滑动） */
  .tabs { width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 1 1 0; padding: 8px 4px; white-space: nowrap; min-width: 34px; }

  /* 筛选栏自动占行 */
  .filter input, .filter select { flex: 1 1 45%; max-width: 100%; min-width: 0; }

  /* 列表页标题栏（商品列表/门店列表/门店人员 等）：移动端自动换行，搜索框弹性占位，查询/新增按钮跟随不溢出 */
  .card-title { flex-wrap: wrap; row-gap: 8px; }
  /* filter 占整行：标题 + 新增按钮 留在第一行（标题左、按钮右上角），筛选控件换到第二行 */
  .card-title .filter { width: 100%; margin-bottom: 0; }
  /* 第二行：门店下拉缩短按内容宽、搜索框弹性占位、查询按钮固定，三者同一行 */
  .card-title .filter select { flex: 0 1 auto; width: auto !important; min-width: 0; max-width: 45%; }
  .card-title .filter input { flex: 1 1 auto; width: auto !important; min-width: 80px; max-width: 100%; }
  .card-title .filter .btn { flex: 0 0 auto; }
  /* 下拉/搜索框/查询按钮 等高 */
  .card-title .filter input, .card-title .filter select, .card-title .filter .btn { height: 34px; box-sizing: border-box; font-size: 13px; border-radius: 4px; }
  .card-title .filter input, .card-title .filter select { padding: 0 8px; }
  /* 门店人员页：移动端隐藏 搜索框 + 查询按钮（只保留门店下拉，桌面端仍可搜索） */
  #js-staff-kw { display: none; }
  .card-title .filter button[onclick^="jxcStaffSearch"] { display: none; }
  /* 移动端：门店人员下拉框 与 门店列表搜索框 等高同字号 */
  #js-staff-store, #js-kw { height: 34px !important; font-size: 13px !important; }
  /* 门店人员页：移动端 门店下拉 + 添加人员 整体右对齐（与标题同行，覆盖通用整行靠左规则） */
  #js-staff-filter { width: auto; flex: 0 1 auto; min-width: 0; margin-left: auto; justify-content: flex-end; }
  .card-title .filter .btn { padding: 0 12px; line-height: 32px; }
  /* 期初页标题区：长标题独占一行，+ 添加行 / 保存并应用 同行右对齐、不压缩 */
  .jxc-op-title h3 { min-width: 100%; }
  .jxc-op-title .op-acts { margin-left: auto; }
  /* 期初行：保持单行横排（覆盖 .form .fi 移动端纵向规则），+选择商品 / 选择仓库 外框贴合文字 */
  #op-rows .jxc-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  #op-rows .jpi { flex: 0 0 auto; min-width: 0; max-width: none; padding: 4px 8px; }
  #op-rows .jwh { flex: 0 0 auto; min-width: 0; width: auto; padding: 4px 6px; }
  /* 期初行两段各自占满一行：第一行 选品+仓库，第二行 数量/成本价/移除 */
  #op-rows .op-line { flex: 1 1 100%; }

  /* 触控目标加大，防止 iOS 聚焦缩放 */
  .btn { padding: 8px 14px; }
  .btn.mini { padding: 5px 10px; }
  input, select, textarea { font-size: 16px; }

  .chart { height: 260px; }
  .chart.sm { height: 200px; }

  /* 提示条适配窄屏：居中显示 */
  #toast-box { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
  .toast { padding: 10px 14px; }

  /* 顶部菜单按钮 */
  .icon-btn { display: inline-block; }
  .crumb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 底部导航栏（固定，含 iPhone 安全区）：贴底布局——导航条底边贴屏幕底（bottom:0），与 iPhone 原生 Tab Bar 一致；
     高度 calc(54px + safe-area)，图标行 flex-end 落在安全区上方 54px 区域内，大屏（13 Pro/Pro Max 等）与常规机型显示一致，不会出现离底缝隙 */
  #tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: calc(54px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e4e7ed; box-shadow: 0 -2px 10px rgba(0,0,0,.06); align-items: flex-end; }
  .tb-item { flex: 1; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; background: none; color: var(--text-sub); font-size: 11px; text-decoration: none; cursor: pointer; padding: 0; }
  .tb-item.active, .tb-item:active { color: var(--brand); }
  .tb-i { font-size: 20px; line-height: 1; }
  .tb-i svg { width: 20px; height: 20px; vertical-align: -2px; }
  .tb-t { line-height: 1.2; }
  .view { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* 销售开单/采购开单：提交条跟随表单末尾，底部预留避免被底部导航遮挡 */
  .view:has(.sale-form), .view:has(.purchase-form), .view:has(.oi-form) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* 销售记录：分页靠右；回弹后距底部导航 5px 安全间隙 */
  .view:has(.sale-records) { padding-bottom: calc(29px + env(safe-area-inset-bottom)); }
  .pager.right { justify-content: flex-end; }
  /* 记录列表：宽度自适应移动端（不横向滑动） */
  .sale-records .tbl-wrap .tbl { min-width: 0; }
  .sale-records .tbl th, .sale-records .tbl td { padding: 8px 6px; }
  /* 库存查询表：宽度自适应移动端 */
  .jk-wrap .tbl { min-width: 0; }
  .jk-wrap .tbl th, .jk-wrap .tbl td { padding: 8px 6px; }
  /* 销售明细表：数量列居中、销售金额列靠右 */
  .tbl th.c, .tbl td.c { text-align: center; }
  .tbl th.r, .tbl td.r { text-align: right; }

  /* 全菜单抽屉（右侧滑入） */
  .drawer-mask { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.45); display: flex; align-items: stretch; justify-content: flex-end; opacity: 0; visibility: hidden; transition: opacity .2s; }
  .drawer-mask.show { opacity: 1; visibility: visible; }
  .drawer { width: 78vw; max-width: 320px; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s; }
  .drawer-mask.show .drawer { transform: translateX(0); }
  .drawer-brand { padding: 20px 18px 14px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: 2px; }
  .drawer-brand span { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: .75; margin-top: 4px; }
  #drawer-menu { flex: 1; overflow-y: auto; padding: 6px 0 24px; }
  .dr-item { display: flex; align-items: center; gap: 10px; padding: 13px 18px; color: #303133; text-decoration: none; border-bottom: 1px solid #f0f2f5; font-size: 14px; }
  .dr-item:active { background: var(--bg-soft); }
  .dr-i { width: 20px; text-align: center; color: var(--brand); }
}

@media (max-width: 480px) {
  .login-logo { font-size: 26px; }
  .login-card { padding: 28px 22px 18px; max-height: calc(100vh - 140px); overflow-y: auto; }
  .top-right .btn { padding: 4px 8px; font-size: 12px; }
  .crumb { font-size: 16px; }
}

/* ================= 小额付款·扫码收款（v3.0） ================= */
.stat-box { flex: 1; min-width: 120px; background: var(--bg-soft); border-radius: 8px; padding: 12px 14px; text-align: center; }
.stat-box b { display: block; font-size: 20px; color: var(--brand); }
.stat-box.orange b { color: #e6a23c; }
.stat-box span { font-size: 12px; color: var(--text-sub); }

.petty-collect { max-width: 460px; margin: 0 auto; }
.pc-head { text-align: right; margin-bottom: 2px; }
.pc-rm { font-size: 12px; color: var(--brand); cursor: pointer; text-decoration: underline; }
.pc-amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; border-bottom: 2px solid var(--brand); padding: 10px 8px 8px; margin: 6px 0 14px; }
.pc-cny { font-size: 26px; color: var(--brand); font-weight: 700; }
.pc-amount input { flex: 1; max-width: 240px; border: none; outline: none; font-size: 42px; font-weight: 700; color: #1f2329; text-align: center; background: transparent; }
.pc-amount input::placeholder { color: #c0c4cc; font-weight: 400; }
.pc-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pc-chip { min-width: 62px; padding: 9px 0; border: 1px solid #d9dce0; border-radius: 8px; background: #fff; color: #303133; font-size: 15px; cursor: pointer; }
.pc-chip:active { background: #ecf5ff; border-color: var(--brand); }
.pc-chip.pc-clear { color: var(--text-sub); }
.pc-go { width: 220px; max-width: 78%; padding: 12px 0; font-size: 18px; letter-spacing: 6px; background: #00a34a; border: none; color: #fff; border-radius: 8px; font-weight: 700; }
.pc-go:hover { background: #008c40; }
.pc-tip { text-align: center; font-size: 12px; color: var(--text-sub); margin-top: 12px; }

.qr-box { text-align: center; }
.qr-status { margin-top: 12px; font-size: 15px; color: #303133; font-weight: 600; }
.qr-count { margin-top: 6px; font-size: 13px; color: #606266; }
.qr-count b { color: #e6a23c; font-size: 15px; }
.qr-tip { margin-top: 8px; font-size: 12px; color: var(--text-sub); }
.qr-ok { width: 84px; height: 84px; border-radius: 50%; background: #00a34a; color: #fff; font-size: 44px; line-height: 84px; margin: 24px auto; }
/* ================= 进销存 v3.0 ================= */
.sub-tabs { display: flex; gap: 4px; margin: 0 0 12px; flex-wrap: wrap; }
.st-groups { flex-direction: column; align-items: stretch; }
.st-group-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.st { padding: 4px 10px; border: 1px solid transparent; background: transparent; border-radius: 12px; font-size: 12px; color: var(--brand); cursor: pointer; transition: filter .15s, box-shadow .15s; }
.st:hover { filter: brightness(1.1); }
.st.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); filter: none; }
html[data-theme="gradient"] .st { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="gradient"] .st.active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(108,92,231,.25); }
.st-group { display: inline-flex; align-items: center; padding: 0 6px 0 0; font-size: 11px; color: var(--text-sub); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .st { padding: 3px 8px; font-size: 11px; } .st-group { font-size: 10px; } }
.jxc-row { flex-wrap: wrap; }
.jxc-row select { flex: 1; min-width: 150px; }
.jxc-row input { margin-left: 6px; }
.tbl-total { text-align: right; padding: 10px 12px; background: #f5f7fa; border-radius: 0 0 8px 8px; font-size: 13px; color: #303133; margin-top: -10px; }
.tbl-total b { color: var(--brand); }
.jk-scope { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 6px 12px; background: #f0f2f5; border-radius: 8px 8px 0 0; font-size: 12px; color: var(--text-sub); }
.jk-scope .jk-zero { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #606266; font-size: 12px; user-select: none; flex: 0 0 auto; }
.jk-scope .jk-zero input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); }
.jk-scope + table.tbl { border-top: none; }
.guide { font-size: 13px; color: #606266; line-height: 1.9; }
.guide p { margin: 4px 0; }
.filter select, .filter input { padding: 4px 8px; border: 1px solid #d9dce0; border-radius: 6px; font-size: 13px; margin-right: 4px; }
/* ===== 进销存开单行 / 商品选择弹层 / 合计 / 新增按钮 ===== */
.jxc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed #e8eaed; }
.jxc-row .jpi { cursor: pointer; color: var(--brand); background: #f0f7ff; border: 1px dashed #b8d9ff; padding: 6px 10px; border-radius: 6px; min-width: 150px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.jxc-row input.jbar, .jxc-row input.jq, .jxc-row input.qn, .jxc-row input.jd, .jxc-row input.js { padding: 6px 8px; border: 1px solid #dcdfe6; border-radius: 6px; background: #fff; }
.jxc-row .jstock, .jxc-row .jprice, .jxc-row .jqty-ghost { color: var(--text-sub); font-size: 12px; white-space: nowrap; }
.jxc-total { text-align: right; font-size: 15px; padding: 8px 0; color: #303133; }
.jxc-total b { color: var(--danger); }
/* 期初行两段布局：选品+仓库 一段，数量/成本/库存/移除 一段；桌面同排、移动端自动换行 */
.op-line { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.op-line.op-b { flex: 0 0 auto; }
.jxc-row-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.jxc-row-ops .jxc-total { margin-left: auto; }
.btn.primary.block { display: block; width: 100%; }
.jxc-pick .fi { width: 100%; }
.jp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.jp-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #606266; cursor: pointer; user-select: none; }
.jp-count { font-size: 13px; color: var(--text-sub); }
.jp-count b { color: var(--brand); font-size: 15px; }
.jxc-pick-row { cursor: pointer; padding: 8px 10px; border-bottom: 1px solid #f0f2f5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jxc-pick-row input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--brand); }
.jxc-pick-row:hover { background: #f5f9ff; }
.jxc-pick-row b { min-width: 150px; }
.jxc-pick-row span { color: var(--text-sub); font-size: 12px; }
.jxc-pick-row i { font-style: normal; color: var(--brand); font-size: 12px; margin-left: auto; }
#jp-list { max-height: 42vh; overflow: auto; margin-top: 8px; }

/* ================= 销售开单 v4：新版版面（按 1.jpg 设计稿） ================= */
.sale-form, .purchase-form { max-width: 720px; margin: 0 auto; }
.sale-form .card, .purchase-form .card { padding: 0; overflow: hidden; }
.sf-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; background: var(--bg-soft); border-bottom: 1px solid var(--line); position: relative; }
.sf-back { background: none; border: none; color: var(--brand); font-size: 15px; padding: 2px 6px 2px 0; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
/* 无背景文字按钮（返回键同款），用于记录页标题行新增按钮 */
.link-btn { background: none; border: none; color: var(--brand); font-size: 14px; padding: 2px 4px; cursor: pointer; display: inline-flex; align-items: center; white-space: nowrap; }
.view-tip { padding: 10px 14px; font-size: 12px; color: var(--text-sub); background: #f5f7fa; text-align: center; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sf-head h3 { margin: 0; font-size: 16px; color: var(--brand); font-weight: 700; letter-spacing: 1px; }
/* 单据编号：标题栏右下角与标题文字下对齐，右对齐距边缘20px、靠下方距边缘6px、10px浅灰 */
.sf-no-tag { position: absolute; right: 20px; bottom: 6px; font-size: 10px; color: var(--text-sub); line-height: 1; white-space: nowrap; }
.sf-back { border: 1px solid #d9dce0; background: #fff; color: var(--brand); border-radius: 6px; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.sf-back:hover { border-color: var(--brand); }
/* 销售开单：门店/业务日期/发货仓库文字与单据编号一致（浅灰），右对齐 */
.sale-form .fl-select, .sale-form .fl-input, .purchase-form .fl-select, .purchase-form .fl-input { color: var(--text-sub); }
.sale-form .fl-input[type="date"], .purchase-form .fl-input { -webkit-text-fill-color: var(--text-sub); }
/* 只读查看模式（销售单/采购单）：禁用态表单文字保持可读，业务日期等关键信息不再因 disabled 叠加而过浅 */
.sale-form input:disabled, .sale-form select:disabled,
.purchase-form input:disabled, .purchase-form select:disabled {
  color: #606266 !important; -webkit-text-fill-color: #606266 !important; opacity: 1;
}
/* 销售记录列表：门店下小字日期由极浅灰调整为正常浅灰（可读但弱于正文） */
.sale-records .st-sub { color: #7a8291; }
/* 列表式表单行：左标签 / 右值 / 右箭头 / 底部行线 */
.form-list { padding: 0 0 2px; }
.fl-row { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-bottom: 1px solid #f0f2f5; gap: 10px; }
.fl-row:last-child { border-bottom: none; }
.fl-label { width: 88px; flex-shrink: 0; font-size: 14px; color: #606266; }
.fl-label.req { position: relative; }
.fl-label.req::before { content: '*'; color: var(--danger); margin-right: 2px; }
.fl-value { flex: 1; min-width: 0; font-size: 14px; color: #303133; text-align: right; }
.fl-value.sub { color: var(--text-sub); font-size: 13px; }
.fl-value.link { color: var(--brand); cursor: pointer; }
/* 调拨表单：调出/调入同行，箭头分隔，移动端自适应 */
.tf-pair { flex-wrap: nowrap; }
.tf-pair .fl-label { width: auto; flex-shrink: 0; font-size: 13px; }
.tf-pair .fl-label.tf-lab2 { text-align: left; }
.tf-pair .fl-select { flex: 1 1 0; min-width: 0; }
/* 发起调拨：门店/仓库加选择框与下拉符号（仅调拨表单内选择器，不影响其他页面） */
.tf-pair .fl-select {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background-color: #f5f7fa;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238d96a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  padding: 5px 26px 5px 10px;
  box-sizing: border-box;
}
.tf-arrow { flex-shrink: 0; color: #c0c4cc; font-style: normal; font-size: 15px; }
.fl-value.link:active { opacity: .7; }
.fl-input, .fl-select { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: #303133; text-align: right; padding: 6px 0; -webkit-appearance: none; appearance: none; }
.fl-select { cursor: pointer; }
/* 业务日期：只读文本 + 自绘日历面板（点击弹出，右下方定位） */
.sale-form #sf-date, .purchase-form #pf-date { font-family: inherit; font-weight: inherit; letter-spacing: inherit; cursor: pointer; }
.jxc-dp { position: fixed; z-index: 1000; width: 264px; max-width: calc(100vw - 16px); box-sizing: border-box; background: #fff; border: 1px solid #dcdfe6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 12px; font-size: 13px; }
.jxc-dp .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #303133; font-weight: 600; }
.jxc-dp .dp-head button { border: none; background: none; cursor: pointer; color: #606266; font-size: 16px; line-height: 1; padding: 2px 10px; }
.jxc-dp .dp-head button:active { opacity: .6; }
.jxc-dp .dp-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; color: var(--text-sub); font-size: 12px; padding: 2px 0 6px; }
.jxc-dp .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.jxc-dp .dp-day { padding: 7px 0; cursor: pointer; border-radius: 6px; color: #303133; }
.jxc-dp .dp-day.dim { visibility: hidden; }
.jxc-dp .dp-day:hover { background: #f0f7ff; color: var(--brand); }
.jxc-dp .dp-day.today { box-shadow: inset 0 0 0 1px var(--brand); }
.jxc-dp .dp-day.sel { background: var(--brand); color: #fff; }
.jxc-dp .dp-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f2f5; text-align: center; }
.jxc-dp .dp-foot button { border: none; background: none; color: var(--brand); font-size: 13px; cursor: pointer; padding: 2px 10px; }
.fl-arrow { color: #c0c4cc; font-size: 14px; flex-shrink: 0; font-style: normal; }
.fl-scan { flex-shrink: 0; color: var(--brand); font-size: 12px; border: 1px solid #b8d9ff; background: #f0f7ff; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
/* 商品区：大块选择入口 */
.sf-prod-entry { margin: 10px 14px; padding: 12px 14px; border: 1px solid #dcdfe6; border-radius: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sf-prod-entry:active { background: var(--bg-soft); }
.sf-prod-pick { flex: 1; min-width: 0; }
.sf-prod-pick b { font-size: 14px; color: var(--brand); }
.sf-prod-pick span { display: block; font-size: 12px; color: var(--text-sub); margin-top: 2px; }
/* 已选商品表格（结合原表格样式） */
.sf-items { padding: 6px 0 0; }
.sf-items .tbl-wrap { margin: 0 10px; }
.sf-items .tbl { font-size: 13px; }
.sf-items .tbl th { padding: 8px 8px; }
.sf-items .tbl td { padding: 7px 8px; vertical-align: middle; }
.sf-items .tbl .pcell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.sf-items .pimg { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid #e4e7ed; background: #f7f9fd; flex-shrink: 0; }
.sf-items .pname { min-width: 0; }
.sf-items .pname b { display: block; font-size: 13px; color: #303133; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-items .pname span { font-size: 11px; color: var(--text-sub); }
.sf-items .pname span i.pr { display: inline-block; min-width: 64px; font-style: normal; }
/* 操作列：顶到最右、内容居中 */
.sf-items .tbl th:last-child, .sf-items .tbl td:last-child { text-align: center; }
.sf-items .tbl th:last-child { width: 60px; }
/* 销售表格：苹果系统风格移除按钮（胶囊圆角 + 酒红文字） */
.sf-items .rm-ios { border: 1px solid rgba(217, 54, 35, .35); background: #fff; color: var(--danger); border-radius: 14px; padding: 2px 12px; font-size: 12px; cursor: pointer; line-height: 1.4; white-space: nowrap; }
.sf-items .rm-ios:active { background: var(--danger); color: #fff; }
.sf-items .qty-cell { white-space: nowrap; }

/* 记录列表：门店下小字时间（10px 浅灰） */
.st-sub { display: block; font-size: 10px; color: var(--text-sub); line-height: 1.5; margin-top: 2px; font-style: normal; }
/* 记录列表操作列：编辑 + 作废（苹果传统胶囊按钮） */
.op-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.op-ios { border-radius: 14px; padding: 2px 12px; font-size: 12px; line-height: 1.4; background: #fff; cursor: pointer; white-space: nowrap; }
.op-ios.edit { border: 1px solid rgba(0, 122, 255, .35); color: #007aff; }
.op-ios.edit:active { background: #007aff; color: #fff; }
.op-ios.void { border: 1px solid rgba(217, 54, 35, .35); color: var(--danger); }
.op-ios.void:active { background: var(--danger); color: #fff; }
/* 无权限时按钮灰色不可操作：保留点击以弹出拦截提示 */
.op-ios.disabled { border: 1px solid #e0e0e0; color: #bfc4cc; background: #f5f6f7; cursor: not-allowed; }
/* 单据中心：作废单据整行灰色形态 */
.tag.gray { background: #f4f4f5; color: var(--text-sub); }
#dc-body .tbl tbody tr:has(.tag.gray) td { color: #c0c4cc; }
.sf-total-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #f5f7fa; border-top: 1px solid #e4e7ed; }
.sf-total-bar .sf-cart-info { font-size: 12px; color: var(--text-sub); }
.sf-total-bar .jxc-total { padding: 0; }
.sf-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; justify-content: flex-end; }
.sf-ops .jxc-total { margin-left: auto; padding: 0; }
.sf-remark { padding: 10px 14px; border-top: 1px solid #f0f2f5; display: flex; align-items: center; gap: 8px; }
.sf-remark input { flex: 1; min-width: 0; width: auto; height: 32px; padding: 0 10px; font-size: 13px; border: 1px solid #dcdfe6; border-radius: 6px; outline: none; box-sizing: border-box; }
.sf-remark .btn { flex-shrink: 0; white-space: nowrap; height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px; box-sizing: border-box; }
.sf-remark input:focus { border-color: var(--brand); }
.sf-submit { padding: 12px 14px 16px; }
.sf-submit .btn.block { padding: 12px; font-size: 16px; letter-spacing: 4px; border-radius: var(--radius-btn); }
.sf-foot { padding: 8px 14px 12px; text-align: right; font-size: 12px; color: var(--text-sub); }
.sf-foot b { color: var(--brand); }

/* ================= 选择商品弹层 v4（按 2.jpg 设计稿） ================= */
.jxc-pick2 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.jp2-search { padding: 10px 12px; }
.jp2-search input { width: 100%; border: 1px solid #dcdfe6; border-radius: 18px; padding: 9px 14px; font-size: 14px; outline: none; background: #f7f8fa; }
.jp2-search input:focus { border-color: var(--brand); background: #fff; }
.jp2-filter { display: flex; align-items: center; padding: 0 12px 8px; gap: 12px; font-size: 13px; color: #606266; flex-wrap: wrap; row-gap: 6px; }
.jp2-filter .jp2-tab { cursor: pointer; color: var(--brand); }
.jp2-filter .jp2-tab:active { opacity: .7; }
/* 调拨选品弹层：调出/调入仓库标签固定横排（不随 flex 压缩竖排），必要时整体换行 */
.jp2-filter .jp2-whlab { white-space: nowrap; flex-shrink: 0; }
.jp2-filter .tf-arrow { flex-shrink: 0; }
.jp2-filter select { border: 1px solid #dcdfe6; border-radius: 6px; padding: 4px 6px; font-size: 13px; outline: none; color: #303133; background: #fff; max-width: 42vw; }
.jp2-body { flex: 1; min-height: 0; display: flex; }
.jp2-cats { width: 84px; flex-shrink: 0; border-right: 1px solid #f0f2f5; overflow-y: auto; background: #fafbfc; }
.jp2-cat { padding: 12px 8px; font-size: 13px; color: #606266; text-align: center; cursor: pointer; border-left: 3px solid transparent; word-break: break-all; }
.jp2-cat.active { background: #fff; color: var(--brand); font-weight: 600; border-left-color: var(--gold); }
.jp2-list { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 8px 8px; }
.jp2-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid #f0f2f5; }
/* 选中行：浅灰底 + 左侧金色竖条（与弹层分类选中标记同色，全局所有选择商品弹层生效） */
.jp2-row .jp2-other-wh { color: var(--text-sub); font-style: normal; font-size: 11px; }
.jp2-row.sel { background: #f5f7fa; border-left: 3px solid var(--gold); padding-left: 3px; }
.jp2-row:last-child { border-bottom: none; }
.jp2-img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: #f7f9fd; border: 1px solid #eef1f6; flex-shrink: 0; }
.jp2-info { flex: 1; min-width: 0; }
.jp2-info b { display: block; font-size: 14px; color: #303133; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp2-info span { display: block; font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.jp2-info i { display: block; font-style: normal; font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp2-info i.stock-ok { color: #67c23a; }
.jp2-info i.stock-zero { color: var(--danger); }
.jp2-add { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brand); color: var(--brand); background: #f0f7ff; font-size: 18px; line-height: 28px; text-align: center; cursor: pointer; flex-shrink: 0; }
.jp2-add:active { background: var(--brand); color: #fff; }
.jp2-add.in-cart { background: #67c23a; border-color: #67c23a; color: #fff; }
/* 选品弹层行内盘点数量控件：± 框右对齐；库存小字与「调拨/采购 N 包」同一行、位于 ± 框左下方 */
.jp2-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.jp2-ctl i { display: block; font-style: normal; font-size: 11px; white-space: nowrap; max-width: 100%; line-height: 1.3; }
.jp2-meta { display: flex; align-items: baseline; gap: 8px; max-width: 100%; align-self: flex-start; }
.jp2-meta i { display: inline; font-style: normal; font-size: 11px; white-space: nowrap; line-height: 1.3; }
.jp2-meta i.stock-ok { color: #67c23a; }
.jp2-meta i.stock-zero { color: var(--danger); }
.jp2-qty { display: flex; align-items: center; gap: 4px; padding: 4px 6px; margin: -4px -6px; }
.jp2-qty button { width: 34px; height: 34px; border: 1px solid #dcdfe6; background: #fff; border-radius: 8px; font-size: 18px; cursor: pointer; color: #303133; line-height: 1; padding: 0; }
.jp2-qty button:active { border-color: var(--brand); color: var(--brand); }
.jp2-qty input { width: 52px; height: 34px; text-align: center; border: 1px solid #dcdfe6; border-radius: 8px; margin: 0; padding: 0; font-size: 15px; outline: none; color: var(--text-sub); box-sizing: border-box; }
.jp2-qty input.ed { color: #303133; }
.jp2-qty input.warn { border-color: var(--danger); color: var(--danger); background: #FEF0EE; }
.jp2-qty input:focus { border-color: var(--brand); }
.jp2-sale { color: var(--text-sub); font-size: 11px; font-style: normal; }
.jp2-sale.warn { color: var(--danger); font-weight: 600; }
/* iOS 传统开关（选品弹层：显示零库存） */
.ios-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.ios-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-switch-slider { position: absolute; inset: 0; background: #e4e7ed; border-radius: 24px; transition: .25s; cursor: pointer; }
.ios-switch-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ios-switch input:checked + .ios-switch-slider { background: #34c759; }
.ios-switch input:checked + .ios-switch-slider::before { transform: translateX(18px); }
.jp2-cart { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #e4e7ed; background: #fff; }
.jp2-cart-btns { display: flex; align-items: center; gap: 10px; }
.jp2-cart-info { font-size: 13px; color: #606266; }
.jp2-cart-info b { color: var(--danger); font-size: 15px; }
.jp2-done { background: var(--brand); border: none; color: #fff; border-radius: 18px; padding: 8px 26px; font-size: 14px; cursor: pointer; }
.jp2-done:active { background: var(--brand-deep); }
.jp2-done.cancel { background: #fff; border: 1px solid #dcdfe6; color: #606266; }

/* ================= 商品属性弹窗 v4（按 3.jpg 设计稿） ================= */
.jxc-attr { display: flex; flex-direction: column; }
.attr-head { display: flex; gap: 12px; align-items: flex-start; padding: 4px 2px 10px; border-bottom: 1px solid #f0f2f5; }
.attr-img { width: 84px; height: 84px; border-radius: 8px; object-fit: cover; background: #f7f9fd; border: 1px solid #eef1f6; flex-shrink: 0; }
.attr-name b { display: block; font-size: 15px; color: #303133; }
.attr-name span { display: block; font-size: 12px; color: var(--text-sub); margin-top: 3px; line-height: 1.7; }
.attr-grid { padding: 4px 0 0; }
.attr-row { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid #f5f7fa; font-size: 14px; }
.attr-row:last-child { border-bottom: none; }
.attr-row .a-l { width: 78px; flex-shrink: 0; color: #606266; font-size: 13px; }
.attr-row .a-v { flex: 1; min-width: 0; text-align: right; color: #303133; }
.attr-row .a-v.sub { color: var(--text-sub); font-size: 12px; }
.attr-units { display: flex; gap: 8px; justify-content: flex-end; }
.attr-unit { border: 1px solid #d9dce0; border-radius: 14px; padding: 3px 14px; font-size: 13px; color: #606266; cursor: pointer; }
.attr-unit.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.a-qty { display: flex; align-items: center; gap: 0; justify-content: flex-end; }
.a-qty button { width: 34px; height: 34px; border: 1px solid #dcdfe6; background: #fff; border-radius: 8px; font-size: 18px; cursor: pointer; color: #303133; line-height: 1; padding: 0; }
.a-qty button:active { border-color: var(--brand); color: var(--brand); }
.a-qty input { width: 68px; height: 34px; text-align: center; border: 1px solid #dcdfe6; border-radius: 8px; margin: 0 6px; padding: 0; font-size: 15px; outline: none; box-sizing: border-box; }
.a-qty input:focus { border-color: var(--brand); }
.a-qty .a-max { color: var(--text-sub); font-size: 11px; margin-left: 4px; }
.attr-note { margin-top: 8px; }
.attr-note input { width: 100%; border: 1px solid #dcdfe6; border-radius: 6px; padding: 7px 10px; font-size: 13px; outline: none; }
.attr-note input:focus { border-color: var(--brand); }
.attr-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 0; border-top: 1px solid #f0f2f5; margin-top: 10px; }
.attr-foot .af-info { font-size: 13px; color: #606266; }
.attr-foot .af-info b { color: var(--danger); font-size: 16px; }
.attr-btns { display: flex; gap: 8px; }
.attr-cancel { background: #fff; border: 1px solid #dcdfe6; color: #606266; border-radius: 18px; padding: 9px 24px; font-size: 14px; cursor: pointer; }
.attr-add { background: var(--brand); border: none; color: #fff; border-radius: 18px; padding: 9px 24px; font-size: 14px; cursor: pointer; }
.attr-add:active { background: var(--brand-deep); }

/* 移动端：弹层全屏（覆盖通用 modal 移动端规则，保持底部栏吸底） */
@media (max-width: 768px) {
  .jxc-pick2 { height: 100%; }
  .jp2-cats { width: 76px; }
  .attr-row .a-l { width: 72px; }
}

/* 选品弹层：竖窄屏（移动竖屏）隐藏“商品分类”入口与左侧分类列（“全部分类”列），横屏/宽屏自动恢复显示 */
@media (max-width: 768px) and (orientation: portrait) {
  .jp2-cat-tab { display: none; }
  .jp2-cats { display: none; }
}

/* ============================================================
   移动端深度适配 v4.2（全页面 / 全弹层 / 填数量等场景统一收口）
   ============================================================ */
@media (max-width: 768px) {
  /* 通用弹层：内容底部安全区（防止被底部操作栏/Home 指示条遮挡），操作栏吸底 */
  .modal-b {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
  }
  /* 开单表单提交条（销售/采购/调拨/盘点）：跟随表单末尾自然排布，不再悬浮吸底 */
  .sf-submit {
    position: static;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  /* 弹层内"撑满型"内容（销售选品/商品属性）在移动端全屏弹层里拉伸占满，修复高度链断裂 */
  .modal-b > .jxc-pick2, .modal-b > .jxc-attr { flex: 1; min-height: 0; }
  .modal-f {
    position: sticky; bottom: 0; z-index: 3;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  /* 弹层头部/底部按钮触控加大 */
  .modal-h { padding: 14px 14px; }
  .modal-h .btn.mini { padding: 7px 12px; }
  .modal-f .btn { padding: 9px 16px; font-size: 14px; }
  .modal-f .btn.primary { flex: 1; max-width: 200px; }

  /* 卡片标题区可换行（筛选下拉不被挤出） */
  .card-title { flex-wrap: wrap; gap: 8px; }
  .card-title h3 { min-width: 0; }

  /* 筛选/搜索栏：窄屏整行占满，不再挤成 45% */
  .filter { gap: 8px; }
  .filter input, .filter select { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
  /* 记录筛选的时间+门店三控件：移动端仍保持同一行，宽度均分自适应（覆盖上方 100% 堆叠规则） */
  .rec-filters { width: 100%; }
  .rec-filters input, .rec-filters select { flex: 1 1 0; width: auto; min-width: 0; }
  /* 单号+查询/导出 同行：单号框缩短，按钮紧随其后 */
  .rec-kw input { flex: 1 1 auto; width: auto; min-width: 0; }

  /* 内嵌两列表单：≤560px 转单列（移动端一行两项太挤） */
  @media (max-width: 560px) {
    .form-grid .fi { width: 100%; }
  }

  /* 指标卡数值自适应缩小，避免溢出 */
  .kpi .value { font-size: 18px; word-break: break-all; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); }

  /* 老版选品弹层（采购/出入库等 jxc-pick）行内元素换行不溢出 */
  .jxc-pick .jxc-row .jpi { max-width: 100%; }
  #jp-list { max-height: 52vh; }

  /* 大数字金额输入（小额付款）在窄屏下适配 */
  .pc-amount input { font-size: 34px; max-width: 200px; }
  .pc-cny { font-size: 22px; }

  /* 分页栏靠左换行，避免按钮被挤出 */
  .pager { flex-wrap: wrap; justify-content: flex-start; }
  .pager .btn.mini { padding: 6px 12px; }

  /* 表格内操作按钮组换行 */
  .tbl td .btn + .btn { margin-left: 4px; }
  .tbl td .btn { margin: 2px 0; }

  /* 数字输入框（数量/单价等）在移动端加大，防聚焦缩放（iOS 16px 规则已覆盖 input，这里补数字场景） */
  .jxc-row input, .a-qty input, .filter input, .form input[type="number"] { font-size: 16px; }
  /* iOS 聚焦防放大：其余被 13/14px 特异性覆盖的输入控件统一升 16px */
  .form .fi input, .form .fi select, .form .fi textarea, .filter select, .fl-input, .fl-select, .sf-remark input, .ie-pair-fld select, .ie-pair-fld input { font-size: 16px; }

  /* 销售开单：门店/日期/仓库文字顶到右对齐 */
  .fl-select, .fl-input, .fl-value { text-align: right; }
  .fl-select { text-align-last: right; }

  /* 销售开单：已选商品表格按视口自适应（不强制横向滚动），名称省略号 */
  .sf-items .tbl-wrap .tbl { min-width: 0; }
  .sf-items .pcell { min-width: 0; }
  .sf-items .pname b { max-width: 110px; }
  .sf-items .tbl th, .sf-items .tbl td { padding: 7px 6px; }
  .sf-items .qty-cell { white-space: nowrap; }

  /* 开单表单：门店/仓库名称字体大小与左侧标签一致（14px），业务日期数字与单据编号数字一致（13px） */
  .sale-form .fl-select, .purchase-form .fl-select { font-size: 14px; }
  .sale-form .fl-input, .purchase-form .fl-input { font-size: 13px; }

  /* 开单备注行：备注框与存草稿/载入草稿按钮等高（32px）同字号（13px），覆盖 iOS 16px 防缩放规则 */
  .sf-remark input { font-size: 13px; }
  .sf-remark .btn { font-size: 13px; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 8px; }
  .crumb { font-size: 16px; }
  .greeting { display: none; }
  /* 底部导航文字更紧凑 */
  #tabbar { height: 50px; }
  .tb-t { font-size: 10px; }
  /* 指标卡两列 */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 12px 10px; }
  .kpi .label { font-size: 11px; }
  .kpi .value { font-size: 16px; }
  /* 卡片内边距收紧 */
  .card { padding: 12px 10px; }
  /* 页面内边距收紧（注意：必须保留底部留白，否则列表翻页/底部按钮会被固定底部导航栏盖住） */
  .view { padding: 10px 8px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* 全局筛选：门店选择框与起止时间框同尺寸（12px 小号，覆盖移动端 16px 防缩放规则） */
.rec-filters select, .rec-filter-bar .filter select, .card-title .filter select {
  font-size: 12px !important;
  padding: 3px 6px !important;
  height: 24px;
  line-height: 20px;
}
/* 每日对账筛选：日期框=门店框=状态框 等高 34px（覆盖上方 24px 小号规则；仅限对账页，不影响进销存筛选栏） */
#rc-body .card-title .filter input, #rc-body .card-title .filter select {
  height: 34px !important;
  box-sizing: border-box;
  padding: 0 8px !important;
  line-height: 32px;
  font-size: 13px !important;
  border-radius: 4px;
}
/* 必填红星（入库来源/出库去向等） */
.req { font-style: normal; color: var(--danger); font-weight: bold; margin-right: 3px; }
/* 单号复制图标：与单号同字号，浅灰，点击复制；文本可省略号截断（复制仍为完整单号） */
.no-w { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; max-width: 100%; }
.no-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.cp-no { display: inline-block; width: 0.9em; height: 0.9em; cursor: pointer; position: relative; vertical-align: -0.08em; flex: 0 0 auto; }
.cp-no::before, .cp-no::after { content: ''; position: absolute; border: 1.3px solid var(--text-sub); border-radius: 2px; background: #fff; box-sizing: border-box; }
.cp-no::before { left: 1px; top: 0; width: 56%; height: 56%; }
.cp-no::after { right: 0; bottom: 0; width: 56%; height: 56%; border-color: #a8abb2; }
.cp-no:active { opacity: .5; }
/* 其他出入库：表单右侧值（日期/门店/仓库/来源）与左侧标签同字号（覆盖移动端 16px 防缩放） */
.oi-form .fl-select, .oi-form .fl-input { font-size: 14px; }
/* 其他出入库记录列表：文字缩小，单号小字显示 12 位省略（复制仍复制完整单号） */
.oi-records .tbl th, .oi-records .tbl td { font-size: 12px; }
.oi-records .tbl td { padding-top: 6px; padding-bottom: 6px; }
.oi-records .st-sub .no-w { max-width: 13.5ch; }
/* 进销存筛选栏：日期/门店/编号/查询/导出等高 24px、字号 12px 协调（覆盖移动端 16px 防缩放） */
.rec-filter-bar .filter input, .rec-filter-bar .filter select,
.rec-filters input, .rec-filters select, .rec-kw input { height: 24px !important; box-sizing: border-box; font-size: 12px !important; line-height: 22px; padding: 0 6px; }
.rec-filters .rec-date { text-align: center; }
.rec-kw .btn { height: 24px !important; font-size: 12px !important; padding: 0 10px; line-height: 22px; box-sizing: border-box; }
/* 调拨详情：状态/在途/申请人/备注 放列表底部 */
.tf-foot { margin-top: 8px; padding: 8px 10px; background: #f8f9fb; border-radius: 4px; font-size: 12px; color: #606266; }
.tf-foot p { margin: 0; line-height: 1.7; }
/* 调拨列表：状态小字放操作按钮下方，颜色沿用状态色 */
.tf-ops { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tf-ops .st-sub { display: block; font-size: 11px; }
.tf-ops .st-green { color: #67c23a; }
.tf-ops .st-orange { color: #e6a23c; }
.tf-ops .st-gray { color: var(--text-sub); }

/* ============ 移动端列表行 iOS 滑动删除 ============
   机制：内容层（行内除删除按钮外的子元素）白底 z-index 盖住右侧删除按钮，行左滑 80px 露出按钮。
   桌面端（>768px）：.swipe-del-btn 保持普通按钮原样在行内正常显示，完全不受影响。
   绑定：WB.swipeRows（app.js）全局委托，懒初始化，按钮只需追加 class="swipe-del-btn"（onclick/confirm/lock 不动）。 */
.swipe-row { position: relative; }
@media (max-width: 768px) {
  .swipe-row > *:not(.swipe-del-btn) { position: relative; z-index: 1; background: #fff; transform: translateX(calc(-1 * var(--sx, 0px))); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
  .swipe-row.swipe-dragging > *:not(.swipe-del-btn) { transition: none; }
  /* 能左滑的表格行：移动端取消操作列（表头与单元格均不显示），仅保留左滑/右滑超 1/3 直接删除；
     行内删除按钮隐藏但保留 DOM（供滑动删除触发原删除逻辑） */
  .sf-items .rm-ios, .pf-items .rm-ios, .tf-items .rm-ios, .oi-items .rm-ios { display: none; }
  .sf-items .tbl th:last-child, .pf-items .tbl th:last-child, .tf-items .tbl th:last-child, .oi-items .tbl th:last-child { display: none; }
  /* 滑动删除按钮：朱红渐变圆角矩形，高度与行首商品图（.pimg 34px）一致，宽度按 34:72 比例，行内垂直居中 */
  .swipe-row .swipe-del-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 34px; width: 72px; z-index: 0; margin: 0; border: 0; border-radius: 8px; padding: 0; background: linear-gradient(180deg, #F0604F 0%, var(--danger) 48%, var(--danger-deep) 100%); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 3px rgba(0,0,0,.15), 0 2px 6px rgba(168,31,16,.30); text-shadow: 0 1px 1px rgba(0,0,0,.18); }
  .swipe-row .swipe-del-btn:active { background: linear-gradient(180deg, #C43A27 0%, var(--danger-deep) 48%, #7D1609 100%); box-shadow: inset 0 2px 4px rgba(0,0,0,.22); }
  /* 开单表单行（销售/采购/库存/调拨/期初）：常驻「移除」按钮取消（隐藏但保留 DOM 供滑动删除触发原删除逻辑），
     移除入口统一为左移/右移滑动删除；滑动时行内容透明位移（按钮已隐藏无需白底遮盖，保持表单玻璃背景） */
  .jxc-row > .swipe-del-btn { display: none; }
  .jxc-row.swipe-row > *:not(.swipe-del-btn) { background: transparent; }
}

/* ============ 移动端商品列表长按拖动排序 ============
   按住行 2.5 秒进入排序模式：行高亮 + 顶部提示条，上下拖动换位，松手自动保存排序。 */
tr.drag-active { background: #fdf6ec !important; box-shadow: inset 0 0 0 2px #e6a23c; }
/* ===== PWA 安装引导（苹果风格中间浮层） ===== */
.pwa-mask { position: fixed; inset: 0; background: rgba(16,18,24,.45); z-index: 9990; display: flex; align-items: center; justify-content: center; animation: pwa-fade .2s ease; }
.pwa-card { width: 300px; max-width: calc(100vw - 40px); background: #fff; border-radius: 16px; padding: 28px 20px 16px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.18); animation: pwa-pop .28s cubic-bezier(.2,.9,.3,1.15); position: relative; }
.pwa-ic { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 4px 14px rgba(0,47,167,.25); margin-bottom: 10px; }
.pwa-t { font-size: 17px; font-weight: 600; color: #1a1d24; margin: 8px 0 6px; }
.pwa-d { font-size: 13px; color: #7a8091; line-height: 1.7; margin: 0 0 14px; }
.pwa-steps { text-align: left; margin: 12px 4px 16px; }
.pwa-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #3a3f4a; line-height: 1.6; margin-bottom: 10px; }
.pwa-step i { font-style: normal; color: #002FA7; font-weight: 600; min-width: 14px; }
.pwa-step b { color: #002FA7; font-weight: 600; }
.pwa-foot { margin-top: 6px; }
.pwa-foot .btn { height: 40px; }
.pwa-later { display: block; width: 100%; border: 0; background: none; color: #9aa0ad; font-size: 13px; padding: 12px 0 6px; cursor: pointer; }
.pwa-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: #b6bac4; font-size: 14px; padding: 6px; cursor: pointer; }
.pwa-entry { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; margin-left: 10px; border: 0; border-radius: 8px; background: rgba(0,47,167,.08); color: #002FA7; font-size: 12px; cursor: pointer; }
.pwa-entry:hover { background: rgba(0,47,167,.14); }
@keyframes pwa-fade { from { opacity: 0; } }
@keyframes pwa-pop { from { opacity: 0; transform: scale(.85) translateY(10px); } }

/* ============ 皮肤系统：渐变活力 / iOS27 液态玻璃 / 可爱色系三套 ============
 * 默认（html 无 data-theme）= 渐变活力（:root 即 gradient 值）；主题仅在被切换时命中。
 * 切换入口：首页/数据看板导航条右侧「换肤」按钮（wb-theme 持久化），全站生效。
 * 毛玻璃 = 半透明背景 + backdrop-filter: blur；不支持时由 @supports 降级为实色。 */
html[data-theme="gradient"] {
  --brand: #6c5ce7; --brand-deep: #5a48d6; --brand-hover: #7d6ff0; --brand-mid: #00cec9;
  --gold: #d4af37; --danger: #e74c6f; --danger-deep: #c63a57; --danger-light: #fdeef1; --danger-border: #f4c0cb; --success: #18a058;
  --ink-sidebar: #241f4e; --ink-text: #eef0ff; --ink-sub: #b9b4e0;
  --bg: #f4f1ff; --bg-soft: #ece7fb; --line: #e3def6; --text: #23203a; --text-sub: #8b86a8;
  --card: #ffffff; --input-bg: #f8f7ff; --tbl-hover: #f6f4ff;
  --card-glass: rgba(255,255,255,.82); --card-glass2: rgba(255,255,255,.66); --line-soft: rgba(108,92,231,.12);
  --shadow-card: 0 2px 6px rgba(108,92,231,.14), 0 12px 30px rgba(108,92,231,.16);
  --shadow-btn: 0 3px 8px rgba(108,92,231,.3), inset 0 1px 0 rgba(255,255,255,.45);
  --radius-card: 14px; --radius-btn: 8px;
}
html[data-theme="ios27"] {
  --brand: #2f7cf6; --brand-deep: #1d5fd4; --brand-hover: #6aa6ff; --brand-mid: #6fc2ff;
  --gold: #d4af37; --danger: #e5484d; --danger-deep: #c0323a; --danger-light: #ffecec; --danger-border: #f6c2c5; --success: #18a058;
  --ink-sidebar: #0d2b56; --ink-text: #eaf3ff; --ink-sub: #b7cdec;
  --bg: #eaf4ff; --bg-soft: #dcecff; --line: #d5e6ff; --text: #12263f; --text-sub: #6b87a6;
  --card: #ffffff; --input-bg: rgba(255,255,255,.66); --tbl-hover: rgba(120,160,220,.12);
  --card-glass: rgba(255,255,255,.56); --card-glass2: rgba(255,255,255,.4); --line-soft: rgba(255,255,255,.7);
  --shadow-card: 0 8px 24px rgba(96,150,220,.18), inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-btn: 0 6px 14px rgba(47,124,246,.3), inset 0 1px 0 rgba(255,255,255,.5);
  --radius-card: 18px; --radius-btn: 12px;
}
/* ---- 可爱色系（v5.13）：糖果粉 candy / 奶油黄 milk / 薄荷绿 mint ---- */
html[data-theme="candy"] {
  --brand: #ff6fa5; --brand-deep: #e0508b; --brand-hover: #ff85b5; --brand-mid: #ffb3d1;
  --gold: #e8a87c; --danger: #e5484d; --danger-deep: #c0323a; --danger-light: #ffecec; --danger-border: #f6c2c5; --success: #16a06a;
  --ink-sidebar: #4a1f35; --ink-text: #ffeef6; --ink-sub: #f0b8d0;
  --bg: #fff0f6; --bg-soft: #ffe4ef; --line: #f5d8e4; --text: #4a2b3d; --text-sub: #8a5a70;
  --card: #ffffff; --input-bg: #fff7fb; --tbl-hover: #fff0f6;
  --card-glass: rgba(255,255,255,.82); --card-glass2: rgba(255,255,255,.66); --line-soft: rgba(255,111,165,.12);
  --shadow-card: 0 2px 6px rgba(224,80,139,.12), 0 12px 30px rgba(224,80,139,.14);
  --shadow-btn: 0 3px 8px rgba(255,111,165,.3), inset 0 1px 0 rgba(255,255,255,.5);
  --radius-card: 16px; --radius-btn: 10px;
}
html[data-theme="milk"] {
  --brand: #f2a93b; --brand-deep: #d98924; --brand-hover: #ffc25c; --brand-mid: #ffe0a3;
  --gold: #c9a86a; --danger: #e5484d; --danger-deep: #c0323a; --danger-light: #fff0e8; --danger-border: #f6cdb0; --success: #3f8f4f;
  --ink-sidebar: #4a3210; --ink-text: #fff8ec; --ink-sub: #e6cda0;
  --bg: #fffaf0; --bg-soft: #fff2dc; --line: #f0e2c8; --text: #4a3a24; --text-sub: #7d6a4a;
  --card: #ffffff; --input-bg: #fffcf6; --tbl-hover: #fff7ea;
  --card-glass: rgba(255,255,255,.84); --card-glass2: rgba(255,255,255,.68); --line-soft: rgba(242,169,59,.12);
  --shadow-card: 0 2px 6px rgba(180,120,30,.12), 0 12px 30px rgba(180,120,30,.14);
  --shadow-btn: 0 3px 8px rgba(242,169,59,.3), inset 0 1px 0 rgba(255,255,255,.5);
  --radius-card: 16px; --radius-btn: 10px;
}
html[data-theme="mint"] {
  --brand: #2ebd8f; --brand-deep: #1f9c74; --brand-hover: #54d2a8; --brand-mid: #9fe8cd;
  --gold: #c9a86a; --danger: #e5484d; --danger-deep: #c0323a; --danger-light: #eafaf4; --danger-border: #bfe9da; --success: #1f9c74;
  --ink-sidebar: #103c30; --ink-text: #e9faf3; --ink-sub: #a8d6c6;
  --bg: #effbf6; --bg-soft: #e2f6ec; --line: #d3eee0; --text: #23443a; --text-sub: #4d7a6a;
  --card: #ffffff; --input-bg: #f6fcf9; --tbl-hover: #eefaf4;
  --card-glass: rgba(255,255,255,.84); --card-glass2: rgba(255,255,255,.68); --line-soft: rgba(46,189,143,.12);
  --shadow-card: 0 2px 6px rgba(31,156,116,.12), 0 12px 30px rgba(31,156,116,.14);
  --shadow-btn: 0 3px 8px rgba(46,189,143,.3), inset 0 1px 0 rgba(255,255,255,.5);
  --radius-card: 16px; --radius-btn: 10px;
}
/* 可爱三套共享专属规则：背景渐变 / 玻璃 / 主按钮 / 卡片圆角 / 半透明容器 */
html[data-theme="candy"] body { background: linear-gradient(160deg, #fff0f6 0%, #ffe3ee 50%, #ffd3e3 100%); background-attachment: fixed; color: var(--text); }
html[data-theme="milk"] body { background: linear-gradient(160deg, #fffaf0 0%, #fff2da 50%, #ffe9c2 100%); background-attachment: fixed; color: var(--text); }
html[data-theme="mint"] body { background: linear-gradient(160deg, #effbf6 0%, #e3f7ed 50%, #d6f2e4 100%); background-attachment: fixed; color: var(--text); }
/* 顶栏 / 表格容器：半透明白底（不使用 backdrop-filter，见文末 v5.16 说明） */
html[data-theme="candy"] .topbar, html[data-theme="candy"] .tbl,
html[data-theme="milk"] .topbar, html[data-theme="milk"] .tbl,
html[data-theme="mint"] .topbar, html[data-theme="mint"] .tbl { background: rgba(255,255,255,.92); }
html[data-theme="candy"] .card, html[data-theme="candy"] .kpi, html[data-theme="candy"] .modal,
html[data-theme="milk"] .card, html[data-theme="milk"] .kpi, html[data-theme="milk"] .modal,
html[data-theme="mint"] .card, html[data-theme="mint"] .kpi, html[data-theme="mint"] .modal { border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
html[data-theme="candy"] .topbar, html[data-theme="milk"] .topbar, html[data-theme="mint"] .topbar { border-bottom: 1px solid var(--line); }
html[data-theme="candy"] .tbl, html[data-theme="milk"] .tbl, html[data-theme="mint"] .tbl { background: transparent; }
html[data-theme="candy"] .tbl th, html[data-theme="candy"] .tbl td,
html[data-theme="milk"] .tbl th, html[data-theme="milk"] .tbl td,
html[data-theme="mint"] .tbl th, html[data-theme="mint"] .tbl td { border-bottom-color: var(--line); }
html[data-theme="candy"] .tbl tr:hover td, html[data-theme="milk"] .tbl tr:hover td, html[data-theme="mint"] .tbl tr:hover td { background: var(--tbl-hover); }
html[data-theme="candy"] .tabs, html[data-theme="milk"] .tabs, html[data-theme="mint"] .tabs { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); }
html[data-theme="candy"] .btn, html[data-theme="milk"] .btn, html[data-theme="mint"] .btn { background: var(--card); border-color: var(--line); color: var(--text); }
html[data-theme="candy"] .btn.primary { background: linear-gradient(90deg, #ff8ab5, #ff6fa5); border: 1px solid rgba(255,255,255,.55); color: #fff; box-shadow: var(--shadow-btn); }
html[data-theme="milk"] .btn.primary { background: linear-gradient(90deg, #ffc25c, #f2a93b); border: 1px solid rgba(255,255,255,.55); color: #fff; box-shadow: var(--shadow-btn); }
html[data-theme="mint"] .btn.primary { background: linear-gradient(90deg, #54d2a8, #2ebd8f); border: 1px solid rgba(255,255,255,.55); color: #fff; box-shadow: var(--shadow-btn); }
html[data-theme="candy"] .btn.primary:hover, html[data-theme="milk"] .btn.primary:hover, html[data-theme="mint"] .btn.primary:hover { filter: brightness(1.06); }
html[data-theme="candy"] .form .fi input, html[data-theme="candy"] .form .fi select, html[data-theme="candy"] .form .fi textarea,
html[data-theme="candy"] .filter input, html[data-theme="candy"] .filter select,
html[data-theme="milk"] .form .fi input, html[data-theme="milk"] .form .fi select, html[data-theme="milk"] .form .fi textarea,
html[data-theme="milk"] .filter input, html[data-theme="milk"] .filter select,
html[data-theme="mint"] .form .fi input, html[data-theme="mint"] .form .fi select, html[data-theme="mint"] .form .fi textarea,
html[data-theme="mint"] .filter input, html[data-theme="mint"] .filter select { background: var(--input-bg); border-color: var(--line); color: var(--text); }
html[data-theme="candy"] .sf-head, html[data-theme="milk"] .sf-head, html[data-theme="mint"] .sf-head { background: var(--bg-soft); border-bottom-color: var(--line); }
html[data-theme="candy"] .sf-prod-entry, html[data-theme="milk"] .sf-prod-entry, html[data-theme="mint"] .sf-prod-entry { background: var(--card-glass); border-color: var(--line); }
html[data-theme="candy"] .sf-total-bar, html[data-theme="milk"] .sf-total-bar, html[data-theme="mint"] .sf-total-bar { border: 1px solid var(--line); }
html[data-theme="candy"] .op-ios, html[data-theme="candy"] .rm-ios, html[data-theme="milk"] .op-ios, html[data-theme="milk"] .rm-ios, html[data-theme="mint"] .op-ios, html[data-theme="mint"] .rm-ios { background: var(--card-glass); }
html[data-theme="candy"] .modal-mask, html[data-theme="milk"] .modal-mask, html[data-theme="mint"] .modal-mask { background: rgba(120,60,90,.25); }
html[data-theme="candy"] .kpi { border-radius: 16px; box-shadow: 0 6px 20px rgba(224,80,139,.12); }
html[data-theme="milk"] .kpi { border-radius: 16px; box-shadow: 0 6px 20px rgba(180,120,30,.12); }
html[data-theme="mint"] .kpi { border-radius: 16px; box-shadow: 0 6px 20px rgba(31,156,116,.12); }
/* 玻璃通用：半透明 + 模糊 + 高光描边（@supports 降级：无 backdrop-filter 时给较高不透明度实色） */
/* 玻璃通用：半透明底 + 高光描边（不使用 backdrop-filter，见文末 v5.16 说明） */
html[data-theme="gradient"] .topbar, html[data-theme="gradient"] .tbl { background: rgba(255,255,255,.86); }
html[data-theme="ios27"] .topbar, html[data-theme="ios27"] .tbl { background: rgba(255,255,255,.78); }
/* 主题背景 */
html[data-theme="gradient"] body { background: linear-gradient(160deg, #6c5ce7 0%, #8e9ff1 42%, #00cec9 100%); background-attachment: fixed; color: var(--text); }
html[data-theme="ios27"] body { background:
  radial-gradient(900px 600px at 15% -10%, rgba(140,210,255,.65), transparent 60%),
  radial-gradient(700px 500px at 100% 8%, rgba(190,175,255,.5), transparent 55%),
  linear-gradient(168deg, #e8f5ff 0%, #d6ecff 36%, #e7e3ff 72%, #f2f8ff 100%); background-attachment: fixed; color: var(--text); }
/* 卡片 / KPI：外框线 + 立体阴影 */
html[data-theme="gradient"] .card, html[data-theme="gradient"] .kpi, html[data-theme="gradient"] .modal,
html[data-theme="ios27"] .card, html[data-theme="ios27"] .kpi, html[data-theme="ios27"] .modal { border-radius: var(--radius-card); }
html[data-theme="gradient"] .card, html[data-theme="gradient"] .kpi, html[data-theme="gradient"] .modal { border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow-card); }
html[data-theme="ios27"] .card, html[data-theme="ios27"] .kpi, html[data-theme="ios27"] .modal { border: 1px solid rgba(255,255,255,.65); box-shadow: var(--shadow-card); }
/* 顶部导航条：玻璃 + 细分隔线 */
html[data-theme="gradient"] .topbar, html[data-theme="ios27"] .topbar { border-bottom: 1px solid var(--line); }
html[data-theme="ios27"] .topbar { border-bottom-color: rgba(255,255,255,.6); }
/* 弹层头尾分隔线 + 弹层玻璃 */
html[data-theme="gradient"] .modal-h, html[data-theme="ios27"] .modal-h { border-bottom-color: var(--line); }
html[data-theme="gradient"] .modal-f, html[data-theme="ios27"] .modal-f { border-top-color: var(--line); }
html[data-theme="ios27"] .modal-h, html[data-theme="ios27"] .modal-f { border-color: rgba(255,255,255,.55); }
/* 表格：玻璃底 + 柔和行线 */
html[data-theme="gradient"] .tbl, html[data-theme="ios27"] .tbl { background: transparent; }
html[data-theme="ios27"] .tbl th, html[data-theme="ios27"] .tbl td { border-bottom-color: rgba(120,150,200,.16); }
html[data-theme="gradient"] .tbl th { border-bottom-color: var(--line); }
html[data-theme="gradient"] .tbl td { border-bottom-color: var(--line); }
html[data-theme="gradient"] .tbl tr:hover td { background: var(--tbl-hover); }
html[data-theme="ios27"] .tbl tr:hover td { background: var(--tbl-hover); }
/* 表单输入 / 筛选器：玻璃输入框 */
html[data-theme="gradient"] .form .fi input, html[data-theme="gradient"] .form .fi select, html[data-theme="gradient"] .form .fi textarea,
html[data-theme="ios27"] .form .fi input, html[data-theme="ios27"] .form .fi select, html[data-theme="ios27"] .form .fi textarea { background: var(--input-bg); border-color: var(--line); color: var(--text); }
html[data-theme="gradient"] .filter input, html[data-theme="gradient"] .filter select,
html[data-theme="ios27"] .filter input, html[data-theme="ios27"] .filter select { background: var(--input-bg); border-color: var(--line); color: var(--text); }
html[data-theme="ios27"] .form .fi input, html[data-theme="ios27"] .form .fi select, html[data-theme="ios27"] .form .fi textarea, html[data-theme="ios27"] .filter input, html[data-theme="ios27"] .filter select { border-radius: 12px; border-color: rgba(88,128,188,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.65); }
html[data-theme="gradient"] .sf-remark input, html[data-theme="ios27"] .sf-remark input { background: var(--input-bg); border-color: var(--line); color: var(--text); }
/* TAB 组：玻璃胶囊，选中带高光 */
html[data-theme="gradient"] .tabs { background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.5); }
html[data-theme="ios27"] .tabs { background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.7); }
/* 按钮：立体感（外框线 + 高光 + 投影）；gradient 渐变白字，ios27 玻璃蓝 */
html[data-theme="gradient"] .btn, html[data-theme="ios27"] .btn { background: var(--card); border-color: var(--line); color: var(--text); }
html[data-theme="ios27"] .btn:not(.primary):not(.danger) { border-color: rgba(88,128,188,.34); } /* 冰蓝描边：ios27 玻璃底上可见 */
html[data-theme="gradient"] .btn:hover, html[data-theme="ios27"] .btn:hover { border-color: var(--brand); color: var(--brand); }
html[data-theme="gradient"] .btn.primary { background: linear-gradient(90deg, #6c5ce7, #00cec9); border: 1px solid rgba(255,255,255,.4); color: #fff; box-shadow: var(--shadow-btn); }
html[data-theme="gradient"] .btn.primary:hover { filter: brightness(1.06); }
html[data-theme="ios27"] .btn.primary { background: linear-gradient(180deg, #7cc0ff 0%, #4a94f8 100%); border: 1px solid rgba(255,255,255,.65); color: #fff; box-shadow: var(--shadow-btn); }
html[data-theme="ios27"] .btn.primary:hover { filter: brightness(1.05); }
html[data-theme="gradient"] .btn.danger, html[data-theme="ios27"] .btn.danger { color: var(--danger); border-color: var(--danger-border); }
/* 标签 */
html[data-theme="gradient"] .tag.green { background: #e6f7f0; color: #17a06e; }
html[data-theme="ios27"] .tag.green { background: rgba(62,180,135,.14); color: #17a06e; }
html[data-theme="ios27"] .tag.orange { background: rgba(240,160,60,.16); color: #d97a0a; }
html[data-theme="ios27"] .tag.gray { background: rgba(120,130,150,.14); color: #6b87a6; }
/* 页码 / 次要文字 */
html[data-theme="ios27"] .pager { color: #6b87a6; }
html[data-theme="gradient"] .muted, html[data-theme="ios27"] .muted { color: var(--text-sub); }
html[data-theme="ios27"] .ct-sub { color: #6b87a6; }
html[data-theme="ios27"] .kpi .label { color: #6b87a6; }
html[data-theme="gradient"] .kpi { border-radius: 14px; box-shadow: 0 6px 20px rgba(108, 92, 231, .14); }
html[data-theme="gradient"] .card { border-radius: 14px; }
html[data-theme="gradient"] .card { box-shadow: 0 6px 20px rgba(108, 92, 231, .14); }
/* 换肤按钮（首页/看板导航条右侧）：紧凑玻璃胶囊 */
.theme-sw { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--card-glass); color: var(--text); font-size: 12px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.08); }
.theme-sw:hover { border-color: var(--brand); color: var(--brand); }
.theme-dots { display: inline-flex; gap: 3px; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); display: inline-block; }
.theme-dot.gradient { background: linear-gradient(135deg, #6c5ce7 0%, #00cec9 100%); }
.theme-dot.ios27 { background: linear-gradient(135deg, #eaf6ff 0%, #8ecbff 50%, #b79bff 100%); }
.theme-dot.candy { background: linear-gradient(135deg, #ffd3e3 0%, #ff6fa5 60%, #e0508b 100%); }
.theme-dot.milk { background: linear-gradient(135deg, #ffe9c2 0%, #f2a93b 60%, #d98924 100%); }
.theme-dot.mint { background: linear-gradient(135deg, #d6f2e4 0%, #2ebd8f 60%, #1f9c74 100%); }
/* 皮肤选择弹层：选项卡片 */
.theme-pick { display: flex; flex-direction: column; gap: 10px; }
.theme-pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--card-glass); color: var(--text); font-size: 14px; cursor: pointer; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.theme-pick button:hover { border-color: var(--brand); }
.theme-pick button.on { border-color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand), var(--shadow-btn); }
.theme-pick button .tp-name { font-weight: 600; }
.theme-pick button .tp-desc { color: var(--text-sub); font-size: 12px; margin-top: 2px; }
/* 对账记录行操作按钮 */
.row-act { display: inline-flex; gap: 6px; white-space: nowrap; }
.row-act .btn { padding: 2px 10px; font-size: 12px; }
/* ---------- 渐变/iOS27 下业务组件适配（销售开单表单、选品弹层、行操作胶囊） ---------- */
html[data-theme="gradient"] .sf-head, html[data-theme="ios27"] .sf-head { background: var(--bg-soft); border-bottom-color: var(--line); }
html[data-theme="ios27"] .sf-head { background: rgba(255,255,255,.4); border-bottom-color: rgba(255,255,255,.55); }
html[data-theme="gradient"] .sf-prod-entry { background: var(--card-glass); border-color: var(--line); }
html[data-theme="ios27"] .sf-prod-entry { background: rgba(255,255,255,.5); border-color: rgba(88,128,188,.34); border-radius: 14px; }
html[data-theme="gradient"] .sf-total-bar { border: 1px solid var(--line); }
html[data-theme="ios27"] .sf-total-bar { background: rgba(255,255,255,.45); border: 1px solid rgba(88,128,188,.3); }
/* 提交条（确认开单/确认入库等按钮外区域）：背景与页面/表单统一（透明无框），移动端吸底布局不变 */
.sf-submit { background: transparent; border: 0; box-shadow: none; margin: 0; border-radius: 0; }
/* 合计栏：玻璃背景 + 圆角与列表行一致（sf-prod-entry 8px；ios27 14px），保留细边框 */
.sf-total-bar { background: var(--card-glass); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: var(--shadow-card); margin: 0 10px 10px; }
html[data-theme="ios27"] .sf-total-bar { border-radius: 14px; }
html[data-theme="gradient"] .sf-remark, html[data-theme="ios27"] .sf-remark { border-top-color: var(--line-soft); }
html[data-theme="gradient"] .sf-items .pname b, html[data-theme="ios27"] .sf-items .pname b { color: var(--text); }
html[data-theme="gradient"] .sf-items .pimg { border-color: var(--line); background: var(--input-bg); }
html[data-theme="ios27"] .sf-items .pimg { border-color: rgba(88,128,188,.3); background: rgba(255,255,255,.4); }
html[data-theme="gradient"] .jxc-total, html[data-theme="ios27"] .jxc-total { color: var(--text); }
html[data-theme="gradient"] .jp2-search input { background: var(--input-bg); border-color: var(--line); color: var(--text); }
html[data-theme="ios27"] .jp2-search input { background: rgba(255,255,255,.55); border-color: rgba(88,128,188,.34); color: var(--text); }
html[data-theme="gradient"] .op-ios, html[data-theme="ios27"] .op-ios { background: var(--card-glass); }
html[data-theme="gradient"] .rm-ios, html[data-theme="ios27"] .rm-ios { background: var(--card-glass); }
html[data-theme="gradient"] .op-ios.disabled, html[data-theme="ios27"] .op-ios.disabled { background: rgba(120,130,150,.14); color: var(--text-sub); border-color: var(--line); }
html[data-theme="gradient"] .pwa-entry { background: rgba(255,255,255,.2); color: #fff; }
html[data-theme="ios27"] .pwa-entry { background: rgba(47,124,246,.14); color: #2f7cf6; }
html[data-theme="gradient"] .pwa-entry:hover, html[data-theme="ios27"] .pwa-entry:hover { background: rgba(255,255,255,.3); }
html[data-theme="ios27"] .modal-mask { background: rgba(30,60,100,.28); }
/* ============ v5.16 渲染稳定性修复 ============
 * 现象：数据看板的 4 个图表（近14日销售趋势 / 收款渠道占比 / 门店销售排行 / 商品分类占比）在部分浏览器
 *       （移动端 WebView / 嵌入浏览器 / 部分 Chromium 合成路径）整块不显示，仅剩卡片标题。
 * 原因：卡片使用 backdrop-filter 毛玻璃时，浏览器为卡片建立合成层，其内部 canvas（ECharts 图）在合成阶段
 *       被丢弃，DOM 与 canvas 像素都正常但屏幕上不可见（关闭 backdrop-filter 后立即恢复）。
 * 处理：卡片 / KPI / 表格 / 弹层不再使用 backdrop-filter，卡片改实色背景（--card，各主题均为白色）；
 *       顶栏、换肤胶囊、合计栏、弹层遮罩的玻璃保持不变（不含 canvas，无此风险）。
 *       同时给图表 canvas 提升独立合成层，双保险。
 * ============================================ */
.card, .kpi, .modal, .tbl {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme] .card, html[data-theme] .kpi, html[data-theme] .modal, html[data-theme] .tbl { background: var(--card) !important; }
.chart canvas { transform: translateZ(0); }

/* ============================================
 * v5.20 门店固定收款码（收款管理 → 门店收款码）
 * ============================================ */
.code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 14px;
  padding: 6px 2px 12px;
}
.code-item {
  border: 1px solid #e7e6f2;
  border-radius: 14px;
  background: #fff;
  padding: 14px 12px 12px;
  text-align: center;
}
.code-box {
  width: 150px;
  height: 150px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-box canvas, .code-box img { width: 150px; height: 150px; }
.code-item h4 { margin: 2px 0 2px; font-size: 15px; color: #22252b; }
.code-item p { margin: 0 0 10px; font-size: 12px; color: #8b90a0; }
.code-acts { display: flex; gap: 8px; justify-content: center; }
.code-acts .btn { min-width: 84px; }
.code-note { padding: 4px 2px 2px; font-size: 12px; line-height: 1.7; color: #8b90a0; }
.code-note code { background: #f4f2ff; color: #5a48d6; padding: 1px 6px; border-radius: 6px; font-size: 12px; }
@media (max-width: 640px) {
  .code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .code-box, .code-box canvas, .code-box img { width: 128px; height: 128px; }
  .code-item { padding: 12px 8px 10px; }
}

/* ============================================
 * v5.29 开奖记录：官网采编工具条 + 红球/蓝球号码
 * ============================================ */
.lp-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 8px; }
.lp-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.lp-field label { font-size: 12.5px; color: var(--text-sub); }
.lp-field select {
  height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--input-bg); color: var(--text); font-size: 14px;
}
/* 采编/生成/保存等主操作按钮：放大到 46px 并带文字，避免小图标按钮看不出用途 */
.lp-go-btn {
  height: 46px; min-width: 132px; padding: 0 26px; font-size: 15px; font-weight: 600;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; text-decoration: none; box-sizing: border-box;
}
/* 海报生成后的操作组：默认居中同一排，「保存图片」与「重新生成」之间留 16px */
.lp-acts { display: flex; gap: 16px; justify-content: center; margin-top: 14px; }
.dr-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 560px; }
.dr-lab { font-size: 11px; padding: 1px 6px; border-radius: 6px; line-height: 16px; white-space: nowrap; }
.dr-lab.red { color: #c8241f; background: #fdecea; }
.dr-lab.blue { color: #1b58c4; background: #e9f1ff; }
.dr-ball {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; color: #fff; line-height: 1;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .18);
}
.dr-ball.red { background: radial-gradient(circle at 32% 28%, #ff7b70, #d8182a); }
.dr-ball.blue { background: radial-gradient(circle at 32% 28%, #6fb4ff, #1c6ae0); }
@media (max-width: 640px) {
  .lp-field { min-width: 0; flex: 1 1 140px; }
  .lp-go-btn { flex: 1 1 100%; height: 44px; }
  /* 海报生成后的「保存图片 / 重新生成」：窄屏也放同一排，两枚等宽、中间留空 */
  .lp-acts { display: flex; gap: 16px; justify-content: center; margin-top: 14px; }
  .lp-acts .lp-go-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; height: 46px; }
  .dr-nums { max-width: 100%; }
  .dr-ball { width: 24px; height: 24px; font-size: 12px; }
}