*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#EEF2F6;
  --panel:#FFFFFF;
  --panel-2:#F7F9FB;
  --text:#152029;
  --muted:#66788A;
  --faint:#93A3B3;
  --line:#E1E8EF;
  --primary:#F26B0F;
  --primary-d:#C85708;
  --accent:#D9480F;
  --ok:#2E7D32;
  --warn:#EF6C00;
  --danger:#C62828;
  --r:14px;
  --sh:0 1px 2px rgba(16,32,48,.05),0 6px 18px rgba(16,32,48,.06);
  --stored-bg:#FFF3E0;--stored-fg:#B45309;--stored-line:#F2C893;
  --times-bg:#E9F2FB;--times-fg:#125A93;--times-line:#BBD8EE;
  --annual-bg:#E8F6EC;--annual-fg:#1B7A3E;--annual-line:#BCE0C6;
}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;
  padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.wrap{padding:0 14px}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;background:var(--primary);color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 14px 14px}
.topbar.slim{padding-bottom:10px}
.tb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tb-title{font-size:17px;font-weight:600;letter-spacing:.2px}
.tb-sub{font-size:12px;opacity:.82;margin-top:2px}
.tb-back{background:rgba(255,255,255,.16);border:0;color:#fff;width:32px;height:32px;
  border-radius:10px;font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto}
.tb-act{background:rgba(255,255,255,.16);border:0;color:#fff;padding:7px 12px;
  border-radius:10px;font-size:13px;cursor:pointer;font-family:inherit}
/* 首页顶栏齿轮：手机上底部导航被浏览器工具栏挡住时的备用入口 */
.tb-gear{background:rgba(255,255,255,.18);border:0;color:#fff;width:36px;height:36px;
  border-radius:12px;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.tb-gear:active{background:rgba(255,255,255,.32)}

/* 通用 */
.card{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:12px}
.sec-title{font-size:13px;color:var(--muted);font-weight:600;margin:18px 4px 8px;letter-spacing:.3px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:12.5px}
.mono{font-variant-numeric:tabular-nums}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 首页数据 */
.hero{background:var(--primary);color:#fff;padding:calc(12px + env(safe-area-inset-top)) 14px 18px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.hero-cell{background:rgba(255,255,255,.13);border-radius:12px;padding:10px 12px}
.hero-cell .k{font-size:11.5px;opacity:.8}
.hero-cell .v{font-size:20px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}

/* 快捷操作 */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qbtn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 6px;
  text-align:center;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:var(--sh)}
.qbtn:active{transform:scale(.98)}
.qico{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px}

/* 会员卡 */
.carditem{border-radius:14px;padding:13px 14px;margin-bottom:12px;border:1px solid transparent;position:relative}
.ci-stored{background:var(--stored-bg);border-color:var(--stored-line)}
.ci-times{background:var(--times-bg);border-color:var(--times-line)}
.ci-annual{background:var(--annual-bg);border-color:var(--annual-line)}
.ci-dead{opacity:.55}
.ci-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ci-type{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.7)}
.ci-stored .ci-type{color:var(--stored-fg)}
.ci-times .ci-type{color:var(--times-fg)}
.ci-annual .ci-type{color:var(--annual-fg)}
.ci-big{font-size:27px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.ci-stored .ci-big{color:var(--stored-fg)}
.ci-times .ci-big{color:var(--times-fg)}
.ci-annual .ci-big{color:var(--annual-fg)}
.ci-name{font-size:13px;font-weight:600;margin-bottom:2px}
.ci-meta{font-size:12.5px;opacity:.85;margin-top:4px}
.ci-foot{display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(0,0,0,.07)}

/* 按钮 */
.btn{border:0;border-radius:11px;padding:12px 16px;font-size:15px;font-family:inherit;
  cursor:pointer;background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.btn:active{opacity:.85}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-danger{background:#fff;color:var(--danger);border-color:#F0C4C4}
.btn-sm{padding:8px 13px;font-size:13.5px;border-radius:10px}
.btn-block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.45;pointer-events:none}

/* 列表 */
.list{background:var(--panel);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.li{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.li:last-child{border-bottom:0}
.li:active{background:var(--panel-2)}
.avatar{width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex:0 0 auto}
.li-t{font-size:15px;font-weight:600}
.li-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.chev{color:var(--faint);font-size:16px;flex:0 0 auto}
.empty{text-align:center;color:var(--faint);padding:44px 20px;font-size:14px}

/* 表单 */
.field{margin-bottom:13px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;font-size:16px;
  font-family:inherit;background:var(--panel);color:var(--text);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(27,94,140,.1)}
.field .hint{font-size:12px;color:var(--faint);margin-top:5px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.searchbox{padding:10px 14px 12px;background:var(--primary)}
.searchbox input{width:100%;padding:11px 14px;border-radius:11px;border:0;font-size:16px;
  font-family:inherit;outline:none}

/* 分段 */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--panel-2);
  padding:5px;border-radius:12px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:10px 4px;border-radius:9px;font-size:14px;
  font-family:inherit;color:var(--muted);cursor:pointer;font-weight:500}
.seg button.on{background:var(--primary);color:#fff}

/* 模板选择 */
.tpl{border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel)}
.tpl.on{border-color:var(--primary);background:#F2F8FC}
.tpl-t{font-size:14.5px;font-weight:600}
.tpl-s{font-size:12.5px;color:var(--muted);margin-top:2px}

/* 备用信息（老板自己记的小纸条）：卡种、开卡页、会员卡详情共用 */
.tpl-memo{font-size:12px;color:#8A6D3B;background:#FFF7E0;border:1px solid #F3E1AE;
  border-radius:7px;padding:4px 8px;margin-top:6px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.mc-memo{margin-top:9px;font-size:12px;color:#8A6D3B;background:#FFF7E0;border:1px dashed #F3E1AE;
  border-radius:8px;padding:6px 9px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.tpl-p{font-size:17px;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums;flex:0 0 auto}
.radio{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--faint);flex:0 0 auto}
.tpl.on .radio{border-color:var(--primary);border-width:5.5px}

/* 时间线 */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.tl-item{position:relative;padding-bottom:15px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--primary)}
.tl-item.consume::before{border-color:var(--accent)}
.tl-item.recharge::before{border-color:var(--ok)}
.tl-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tl-t{font-size:14px;font-weight:500}
.tl-d{font-size:11.5px;color:var(--faint);flex:0 0 auto;display:flex;align-items:center;gap:8px}
/* 补录记录右侧的「删」：小一点、淡一点，避免误点，但一眼能看到 */
.tl-del{font-size:11px;line-height:1;padding:4px 7px;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--danger);font-family:inherit;cursor:pointer}
.tl-del:active{background:#FDECEC}
/* 工单列表里补录单的「删」 */
.li-del{flex:0 0 auto;font-size:11.5px;line-height:1;padding:6px 8px;margin-right:2px;border-radius:7px;
  border:1px solid var(--line);background:#fff;color:var(--danger);font-family:inherit;cursor:pointer}
.li-del:active{background:#FDECEC}
/* 补录记录右侧的「计入累计 / 不计入」小开关：点了就切，不用进详情 */
.tl-sp{font-size:11px;line-height:1;padding:4px 7px;border-radius:6px;border:1px solid #C6E5D1;
  background:#F1FAF4;color:#1B7A3E;font-family:inherit;cursor:pointer}
.tl-sp.off{border-color:var(--line);background:#fff;color:var(--muted)}
.tl-sp:active{background:#E4F5EA}
.tl-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.amt-out{color:var(--accent);font-weight:600}
.amt-in{color:var(--ok);font-weight:600}

/* 底部导航 */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:560px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(6,1fr);z-index:30;
  padding-bottom:calc(4px + env(safe-area-inset-bottom))}
.tab{border:0;background:transparent;padding:9px 0 10px;font-size:11px;color:var(--faint);
  font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.tab .ic{font-size:19px;line-height:1}
.tab.on{color:var(--primary);font-weight:600}
.tab-fab{position:relative}
.tab-fab .ic{width:44px;height:44px;border-radius:15px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-top:-17px;
  box-shadow:0 6px 16px rgba(27,94,140,.35)}
.tab-fab .lbl{margin-top:1px}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(12,22,32,.5);z-index:60;display:flex;
  align-items:flex-end;justify-content:center;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--panel);width:100%;max-width:560px;border-radius:20px 20px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto;
  animation:up .22s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(30px)}to{transform:translateY(0)}}
.sheet-t{font-size:17px;font-weight:600;margin-bottom:14px;text-align:center}
.sheet-x{position:absolute;right:14px;top:14px;border:0;background:var(--panel-2);width:30px;height:30px;
  border-radius:50%;font-size:16px;color:var(--muted);cursor:pointer}
.sheet-acts{display:flex;gap:10px;margin-top:18px}
.sheet-acts .btn{flex:1}
.summary{background:var(--panel-2);border-radius:12px;padding:12px;margin-bottom:14px;font-size:14px}
.summary .r{display:flex;justify-content:space-between;padding:4px 0}
.summary .r b{font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(12,22,32,.88);
  color:#fff;padding:13px 20px;border-radius:12px;font-size:14.5px;z-index:90;max-width:78%;text-align:center}

/* 统计 */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--panel);border-radius:var(--r);padding:13px;box-shadow:var(--sh)}
.stat .k{font-size:12.5px;color:var(--muted)}
.stat .v{font-size:23px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.bar{height:9px;border-radius:5px;background:var(--panel-2);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;border-radius:5px}
.note{background:#FFF8E7;border:1px solid #F0DFB0;color:#8A6414;border-radius:12px;
  padding:11px 13px;font-size:13px;line-height:1.6}
.note b{font-weight:600}

/* ===== 会员卡（实体卡风格） ===== */
.mcard{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh);margin-bottom:14px}
.mc-dead{opacity:.55}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;color:#fff}
.mc-head.stored{background:#3D4BA9}
.mc-head.times{background:#2E9E5B}
.mc-head.annual{background:#7B4DBF}
.mc-id{display:flex;align-items:center;gap:8px;min-width:0}
.mc-badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.28);flex:0 0 auto}
.mc-name{font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-val{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;flex:0 0 auto}
.mc-body{padding:12px 14px 2px;cursor:pointer}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.mc-item .k{font-size:11.5px;color:var(--faint)}
.mc-item .v{font-size:13.5px;font-weight:500;margin-top:1px;word-break:break-all}
.mc-note{font-size:12.5px;color:var(--muted);background:var(--panel-2);border-radius:8px;padding:7px 10px;margin-top:10px}
.mc-foot{display:flex;gap:10px;padding:12px 14px}
.mc-foot .btn{flex:1}

/* 筛选 tab */
.ftabs{display:flex;align-items:center;gap:16px;padding:11px 16px 9px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:15}
.ftabs button{border:0;background:none;padding:6px 1px;font-size:14.5px;color:var(--muted);font-family:inherit;cursor:pointer;position:relative}
.ftabs button.on{color:var(--primary);font-weight:600}
.ftabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:2px;background:var(--primary)}
.usable-toggle{margin-left:auto;border:0;background:var(--panel-2);border-radius:16px;padding:5px 11px;font-size:12.5px;color:var(--muted);font-family:inherit;cursor:pointer}
.usable-toggle.on{color:var(--primary);background:#FDEFE2}

/* 开单页的「常用项目」：项目一多就横向撑出屏幕，改成两列自动换行，不用左右滑。
 * 不吸顶、不占满宽，按钮做成小卡片，长名字自己折行。 */
.tpl-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 2px;background:transparent;
  border-bottom:0;position:static;align-items:stretch}
.tpl-tabs button{flex:0 1 calc(50% - 4px);min-width:0;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:58px;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:9px 8px;font-size:14px;color:var(--text);line-height:1.3;text-align:center;
  font-weight:400;box-shadow:0 1px 2px rgba(16,40,28,.05);position:static}
.tpl-tabs button:active{background:var(--panel-2)}
.tpl-tabs button .cat-tag{font-size:11.5px;margin:0}

/* 底部固定操作条 */
.fixedbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:560px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;z-index:30}
.fixedbar .btn{flex:1}
.fixedbar.above-tabs{bottom:calc(62px + env(safe-area-inset-bottom))}

/* 开卡页顶部 */
.oc-top{background:var(--primary);color:#fff;padding:2px 14px 16px}
.oc-top .field label{color:rgba(255,255,255,.85)}
.oc-top .field input{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35);color:#fff}
.oc-top .field input::placeholder{color:rgba(255,255,255,.5)}
/* 开卡页 VIN 扫码行：输入框和「扫」按钮并排，沿用开单页 .in-scan 的布局 */
.field-scan{display:flex;flex-direction:row;align-items:center;gap:8px;margin-bottom:14px}
.field-scan input{flex:1;min-width:0;width:auto;margin-bottom:0}
.field-scan .scan-btn{flex-direction:row;display:inline-flex;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;padding:11px 12px}
.field-scan .scan-btn svg{display:block}
.field-scan .scan-btn:active{background:rgba(255,255,255,.28)}
.oc-big input{font-size:21px;font-weight:600;padding:13px}
.oc-sec{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}

/* ===== 消费短信 ===== */
.sms-rows .sms-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.sms-row input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-size:14.5px;font-family:inherit;background:#fff;color:var(--text)}
.sms-row .si-name{flex:1.5}
.sms-row .si-price{flex:1}
.sms-row .si-del{flex:0 0 32px;height:38px;border:0;background:var(--panel-2);border-radius:9px;color:var(--muted);font-size:16px;cursor:pointer;font-family:inherit}
.sms-total{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#FDEFE2;border-radius:10px;font-size:14px;font-weight:600;color:var(--primary-d);margin:4px 0 14px}
.sms-lbl{font-size:13px;color:var(--muted);margin:2px 2px 7px}
.sms-msg textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-size:14px;font-family:inherit;line-height:1.6;min-height:118px;resize:vertical;background:#fff;color:var(--text)}
.sms-tools{display:flex;gap:8px;margin:9px 0 0}
.sms-tools .btn{flex:0 0 auto;padding:7px 13px;font-size:13px}
.sms-count{font-size:12px;color:var(--faint);text-align:right;margin-top:5px}
.sms-hint{font-size:12.5px;color:var(--muted);background:var(--panel-2);border-radius:8px;padding:8px 10px;line-height:1.6;margin-bottom:10px}

/* ===== 登录锁 ===== */
.lock{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,#F26B0F,#B94E06);display:flex;flex-direction:column;justify-content:center;padding:0 24px;color:#fff}
.lock-inner{max-width:420px;width:100%;margin:0 auto}
.lock-logo{font-size:24px;font-weight:700;text-align:center;letter-spacing:1px}
.lock-sub{font-size:13px;text-align:center;opacity:.85;margin:6px 0 26px;line-height:1.6}
.lock-card{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);border-radius:16px;padding:16px}
.lock-card input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);border-radius:12px;padding:13px 14px;font-size:19px;letter-spacing:7px;text-align:center;color:#fff;font-family:inherit;outline:none;margin-bottom:10px}
.lock-card input:last-of-type{margin-bottom:0}
.lock-card input::placeholder{letter-spacing:normal;font-size:13.5px;color:rgba(255,255,255,.6)}
.lock-btn{width:100%;margin-top:14px;border:0;border-radius:12px;padding:14px;background:#fff;color:#C85708;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer}
.lock-btn:disabled{opacity:.6}
.lock-err{font-size:13px;color:#FFE2C6;text-align:center;margin-top:10px;min-height:19px;line-height:1.5}
.lock-remember{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px;opacity:.92}
.lock-remember input{width:17px;height:17px;accent-color:#fff}
/* 验证码那一行：输入框 + 「获取验证码」按钮并排 */
.code-line{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}
.code-line input{margin-bottom:0;flex:1;min-width:0;letter-spacing:4px}
.code-btn{flex:0 0 auto;white-space:nowrap;border:1px solid rgba(255,255,255,.5);border-radius:12px;
  padding:0 12px;background:rgba(255,255,255,.2);color:#fff;font-size:13.5px;font-family:inherit;
  cursor:pointer;line-height:1.2}
.code-btn:disabled{opacity:.55;cursor:default}
.code-tip{font-size:12px;opacity:.8;text-align:center;margin-top:10px;line-height:1.6}
.code-tip b{opacity:1}
.lock-foot{text-align:center;font-size:12.5px;opacity:.72;margin-top:20px;line-height:1.8}
.lock-foot a{color:#fff;text-decoration:underline;cursor:pointer}

/* 顾客查询链接 / 二维码 */
.qr-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;
  margin-top:11px;word-break:break-all;line-height:1.6;text-align:center}
#cust-qr{background:#fff;display:block;margin:0 auto}

/* ==================== 接车工单 ==================== */
.ost{display:inline-block;font-size:11px;padding:2px 7px;border-radius:6px;font-weight:500;vertical-align:2px}
/* 补录标记：跟正常工单区分开，一眼看得出是后来补的历史账 */
.ost.imp{background:#F1F0F5;color:#615B70;box-shadow:0 0 0 1px #DCD9E4 inset}
/* 补录单里被设成「不计入累计消费」的，再挂一个小标记 */
.ost.nosp{background:#fff;color:#9A93A8;box-shadow:0 0 0 1px #E6E3EC inset}
.ost-unpaid{background:#FFF1E0;color:#C2620A}
.ost-charged{background:#EAF2FB;color:#125A93}
.ost-paid{background:#E8F6EC;color:#1B7A3E}

/* ==================== 工单施工图片 ==================== */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo-item{position:relative;padding-top:100%;border-radius:10px;overflow:hidden;background:#F1F3F6}
.photo-item img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.photo-del{position:absolute;top:3px;right:3px;width:21px;height:21px;line-height:19px;text-align:center;
  border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;padding:0;cursor:pointer}
.photo-add{position:relative;padding-top:100%;border:1px dashed #C9D2DE;border-radius:10px;
  background:#FAFBFD;color:#7B8794;cursor:pointer;font-family:inherit}
.photo-add b{position:absolute;left:0;right:0;top:50%;transform:translateY(-64%);font-size:22px;font-weight:400;line-height:1}
.photo-add em{position:absolute;left:0;right:0;top:50%;transform:translateY(16px);font-size:11px;font-style:normal}
.photoview{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(12,16,22,.94);z-index:210;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 14px 16px}
.photoview img{max-width:100%;max-height:74vh;border-radius:8px;object-fit:contain;background:#000}
.pv-bar{display:flex;gap:10px;margin-top:14px}
.pv-tip{color:#C7CFDA;font-size:12px;margin-top:9px;text-align:center}

/* ==================== 收款方式标签 ==================== */
.pay-tag{display:inline-block;font-size:10.5px;line-height:1.5;padding:1px 5px;border-radius:5px;
  margin-left:5px;font-weight:500;vertical-align:1px;white-space:nowrap}
.pay-wechat{background:#E7F8EE;color:#0E8A4B}
.pay-alipay{background:#E8F1FF;color:#1668D6}
.pay-cash{background:#FDF2E3;color:#A4630C}
.pay-credit{background:#F3E8FF;color:#7C3AED}

/* ==================== 汽车美容金 ==================== */
:root{--gold-bg:#FFF9E8;--gold-fg:#8A6100;--gold-line:#F3DE9B;--gold-deep:#B8860B}
/* 卡面上的美容金条 */
.mc-beauty{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  background:linear-gradient(180deg,#FFFCF0,#FFF7DE);border:1px solid var(--gold-line);
  border-radius:10px;padding:9px 11px}
.mc-beauty .bt{font-size:11.5px;font-weight:600;color:#fff;background:var(--gold-deep);
  padding:2px 7px;border-radius:6px;flex:0 0 auto}
.mc-beauty .bv{font-size:16px;font-weight:700;color:var(--gold-fg);font-variant-numeric:tabular-nums}
.mc-beauty .bn{flex:1 1 100%;font-size:11.5px;color:#96803D;line-height:1.5;margin-top:-2px}
/* 统计 / 摘要里的小徽标 */
.gold-pill{display:inline-block;font-size:12px;font-weight:600;color:var(--gold-fg);
  background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:20px;padding:2px 9px;
  font-variant-numeric:tabular-nums}
.gold-box{background:var(--gold-bg);border:1px solid var(--gold-line);border-radius:12px;
  padding:11px 13px;margin-bottom:14px}
.gold-box .gt{font-size:12.5px;color:#96803D;line-height:1.6}
.gold-box .gv{font-size:19px;font-weight:700;color:var(--gold-fg);font-variant-numeric:tabular-nums;margin-top:1px}
/* 勾选是否用美容金抵扣 */
.gold-use{display:flex;align-items:center;gap:10px;background:var(--gold-bg);border:1px solid var(--gold-line);
  border-radius:12px;padding:11px 13px;margin:2px 0 13px;cursor:pointer}
.gold-use.dis{background:#F6F7F9;border-color:var(--line);cursor:not-allowed}
.gold-use input{width:19px;height:19px;accent-color:var(--gold-deep);flex:0 0 auto;margin:0}
.gold-use .gt{font-size:13.5px;font-weight:600;color:var(--gold-fg)}
.gold-use.dis .gt{color:var(--faint)}
.gold-use .gs{font-size:11.5px;color:#96803D;margin-top:2px;line-height:1.5}
.gold-use.dis .gs{color:var(--faint)}
/* 核销/充值时给个「本次抵多少」的小结 */
.gold-calc{font-size:12.5px;color:var(--gold-fg);background:var(--gold-bg);border:1px dashed var(--gold-line);
  border-radius:9px;padding:8px 11px;margin:-6px 0 13px;line-height:1.6;display:none}
.gold-calc.on{display:block}
/* 时间线上的美容金条目 */
.tl-item.gold::before{border-color:var(--gold-deep)}
.amt-gold{color:var(--gold-fg);font-weight:600}

/* 项目分类标签 */
.cat-tag{display:inline-block;font-size:10.5px;line-height:1.5;padding:1px 5px;border-radius:5px;
  margin-left:5px;font-weight:500;vertical-align:1px;white-space:nowrap}
.cat-beauty{background:var(--gold-bg);color:var(--gold-fg);border:1px solid var(--gold-line)}
.cat-other{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
/* 分类下拉里「＋ 新建分类…」：原地换成输入框手写 */
.cat-new{display:flex;gap:6px;align-items:center;margin-top:8px}
.cat-new-in{flex:1;min-width:0;border:1px solid var(--primary);border-radius:10px;padding:9px 11px;
  font-size:14px;font-family:inherit;color:var(--text);background:#fff}
.cat-new-ok,.cat-new-no{flex:0 0 auto;white-space:nowrap}

/* ==================== 扫一扫（车牌 / VIN） ==================== */.in-scan{position:relative;display:flex;align-items:center;gap:8px}
.in-scan input{flex:1;min-width:0}
.scan-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;border:1px solid #F2C893;
  background:#FFF6EC;color:#B45309;font-family:inherit;font-size:13px;font-weight:600;
  padding:9px 11px;border-radius:10px;cursor:pointer;white-space:nowrap}
.scan-btn:active{background:#FDEBD8}
/* 列表页搜索框右侧的「扫车牌」（深色顶栏里，按钮用白底更跳） */
.scan-search{display:flex;align-items:center;gap:8px}
.scan-search input{flex:1;min-width:0;width:auto}
.scan-inline{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;border:0;
  background:#fff;color:#B45309;font-family:inherit;font-size:13px;font-weight:600;
  padding:11px 12px;border-radius:11px;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.scan-inline svg{flex:0 0 auto}
.scan-inline:active{background:#FDEBD8}
.scan{position:fixed;inset:0;z-index:230;background:#0B0F14;display:flex;flex-direction:column}
.scan-top{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.scan-title{color:#fff;font-size:16px;font-weight:600}
.scan-x{position:absolute;left:14px;top:calc(10px + env(safe-area-inset-top));width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.scan-stage{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scan-stage video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.scan-frame{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.42)}
.scan-frame.for-plate{height:34%}
.scan-frame.for-vin{height:22%}
.scan-frame::before,.scan-frame::after{content:'';position:absolute;width:26px;height:26px;border:3px solid #FFB25C}
.scan-frame::before{left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.scan-frame::after{right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.scan-tip{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#E7EDF4;font-size:13px;
  padding:0 24px;line-height:1.5;transition:color .2s}
.scan-tip.bad{color:#FFC46B}
.scan-bottom{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px calc(20px + env(safe-area-inset-bottom));background:#0B0F14}
.scan-album,.scan-lamp{border:0;background:rgba(255,255,255,.12);color:#fff;font-family:inherit;font-size:13px;
  padding:10px 14px;border-radius:10px;cursor:pointer;min-width:80px}
.scan-lamp.on{background:#FFB25C;color:#3A2200}
.scan-shoot{width:70px;height:70px;border-radius:50%;border:0;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.scan-shoot span{width:56px;height:56px;border-radius:50%;background:#fff;display:block}
.scan-shoot:active span{background:#E9EDF2}
.scan-mask{position:absolute;inset:0;z-index:5;background:rgba(6,10,14,.62);
  display:flex;align-items:center;justify-content:center}
.scan-loading{color:#fff;font-size:15px;background:rgba(255,255,255,.14);padding:12px 22px;border-radius:12px}
.scan-prev{margin:14px 0 4px;text-align:center}
.scan-prev img{max-width:100%;max-height:46vh;border-radius:12px;display:block;margin:0 auto;background:#000}
.scan-prev-cancel{background:rgba(255,255,255,.16);color:#fff;margin-top:10px}

/* ==================== 会员商城（设置页 + 首页提示条） ==================== */
.mall-sw{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.mall-sw input{width:18px;height:18px;accent-color:var(--primary);flex:0 0 auto}

.tile-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.tile{position:relative;width:92px;height:92px;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile-del{position:absolute;right:3px;top:3px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0}
.tile-add{display:flex;align-items:center;justify-content:center;border-style:dashed;
  color:var(--muted);font-size:12.5px;cursor:pointer;background:#fff}
.tile-add:active{background:var(--panel-2)}

.mall-how{margin-top:2px}
.mall-how .step{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line)}
.mall-how .step:last-child{border-bottom:0;padding-bottom:0}
.mall-how .step i{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#FDEFE2;
  color:var(--primary-d);font-style:normal;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.mall-how .step b{font-size:14px;font-weight:600}
.mall-how .step .small{margin-top:2px;line-height:1.5}

.mall-strip{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;
  padding:13px 15px;margin-top:13px;box-shadow:var(--sh);cursor:pointer}
.mall-strip .mi{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#FFA45B,#F26B0F);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.mall-strip .mt{font-size:14.5px;font-weight:600}
.mall-strip .ms{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.mall-strip .go{font-size:12.5px;color:var(--primary-d);flex:0 0 auto}

/* ==================== 车辆信息（VIN 解码 + 下拉选车型/配置） ==================== */
/* 品牌 + 车型 一行两栏；配置单独一整行（配置名最长，占满宽度不截断） */
.veh-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:end}
.veh-row .field{margin-bottom:0;min-width:0}
.veh-row .field label{white-space:nowrap;font-size:12px;margin-bottom:4px}
.veh-cfg-row{margin:8px 0 0}
.veh-cfg-row label{font-size:12px}
.veh-model-line{display:flex;gap:6px;align-items:stretch}
.veh-sel{width:100%;min-width:0;font-size:13px;padding:9px 8px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
/* 配置那一行占满，字号可以稍大一点、留白宽一点 */
.veh-sel-wide{font-size:13.5px;padding:10px 9px}
.veh-model-line .veh-sel{flex:1;min-width:0;width:auto}
/* 车型/品牌/配置是「能直接打字的输入框」，不再是下拉 */
.veh-inp{-webkit-appearance:none;appearance:none;box-sizing:border-box}
.veh-inp::placeholder{color:var(--faint);font-size:12.5px}
.veh-pick{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:0 10px;border:1px solid #F2C893;background:#FFF6EC;border-radius:9px;
  color:var(--primary-d);font-size:12.5px;font-family:inherit;font-weight:600;cursor:pointer}
.veh-pick:active{background:#FDEBD8}
.veh-tip{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--faint)}
/* 「选」弹层里的候选按钮 */
.veh-pick-list{display:flex;flex-wrap:wrap;gap:8px;max-height:52vh;overflow:auto;padding:2px 1px 4px}
.veh-pick-item{padding:9px 12px;border:1px solid var(--line);background:#fff;border-radius:10px;
  font-size:13.5px;font-family:inherit;color:var(--text);cursor:pointer;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh-pick-item:active{background:#FDEBD8}
.veh-pick-item.on{border-color:var(--primary);background:#FDF3E9;color:var(--primary-d);font-weight:600}
/* 有扫码按钮时，按钮单独占一小格，跟下拉一样高 */
.veh-scan{flex:0 0 auto;padding:10px 8px}
.veh-scan svg{display:block}

.veh-hint{margin-top:8px;font-size:12px;line-height:1.6;color:var(--primary-d);
  background:#FDF3E9;border:1px solid #F6DFC9;border-radius:9px;padding:7px 10px}
.veh-hint b{color:var(--primary-d);font-weight:600}
/* 橙色顶栏里的那版要反色，否则白底白字看不清 */
.oc-top .veh-hint{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.oc-top .veh-hint b{color:#fff}
.oc-top .veh-box .field label{color:rgba(255,255,255,.85)}
.oc-top .veh-box .field select,.oc-top .veh-box .field input{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.35);color:#fff;
  font-size:13px;padding:9px 6px}
.oc-top .veh-box .field option{color:#111;background:#fff}
.oc-top .veh-inp::placeholder{color:rgba(255,255,255,.55)}
.oc-top .veh-pick{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.oc-top .veh-tip{color:rgba(255,255,255,.72)}
.oc-top .veh-scan{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
/* 特别窄的小屏（<360）就把扫码按钮去掉，两栏收紧一点 */
@media (max-width:359px){
  .veh-row{gap:5px}
  .veh-scan{display:none}
}
.cfg-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:3px 6px 3px 8px;margin:0 5px 5px 0;font-size:12px}
.cfg-chip i{font-style:normal;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.cfg-chip i:active{color:var(--danger)}

/* ==================== 会员等级 ==================== */
/* 五级配色：青铜→白银→黄金→铂金→钻石，越往后越亮 */
.lv-bronze{--lv-fg:#8C5A2B;--lv-bg:#FBF1E6;--lv-line:#E5C9A8;--lv-deep:#A66A33}
.lv-silver{--lv-fg:#5B6B7A;--lv-bg:#F2F5F8;--lv-line:#CBD6E0;--lv-deep:#7C8C9B}
.lv-gold{--lv-fg:#8A6100;--lv-bg:#FFF9E8;--lv-line:#F3DE9B;--lv-deep:#B8860B}
.lv-platinum{--lv-fg:#3E5C6B;--lv-bg:#EDF6F8;--lv-line:#B8DCE4;--lv-deep:#4E7C8C}
.lv-diamond{--lv-fg:#4A3C7A;--lv-bg:#F3F0FC;--lv-line:#CFC4ED;--lv-deep:#6B55B8}
.lv-none{--lv-fg:#7A8794;--lv-bg:#F4F6F8;--lv-line:#DDE4EA;--lv-deep:#9AA7B4}

.lv-badge{display:inline-block;font-size:11.5px;font-weight:700;color:var(--lv-fg);
  background:var(--lv-bg);border:1px solid var(--lv-line);border-radius:20px;
  padding:1px 8px;line-height:1.6;white-space:nowrap;vertical-align:middle}
.lv-badge.lg{font-size:13px;padding:3px 12px;border-radius:20px}

/* 卡面上的徽章：跟卡名并排，稍微往左收一点 */
.mc-id .lv-badge{margin-left:6px;flex:0 0 auto}

/* 会员详情顶部等级卡 */
.lv-card{border-left:4px solid var(--lv-deep)}
.lv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.lv-r{text-align:right}
.lv-spent{font-size:19px;font-weight:700;color:var(--lv-fg);font-variant-numeric:tabular-nums;line-height:1.2}
.lv-spent-l{font-size:11.5px;color:var(--faint);margin-top:1px}
/* 累计消费的来源拆分（充值 / 工单 / 历史消费） */
.lv-split{font-size:11.5px;color:var(--muted);margin:-4px 0 9px;line-height:1.6;
  font-variant-numeric:tabular-nums}
.lv-prog{margin:2px 0 10px}
.lv-bar{height:7px;border-radius:4px;background:var(--lv-bg);border:1px solid var(--lv-line);overflow:hidden}
.lv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lv-deep),var(--lv-fg));
  border-radius:3px;transition:width .35s ease}
.lv-prog-t{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.55}
.lv-prog-t b{color:var(--lv-fg)}

/* 权益清单 */
.lv-bens{display:flex;flex-direction:column;gap:6px}
.lv-ben{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--lv-bg);border:1px solid var(--lv-line);border-radius:10px;padding:8px 10px}
.lv-ben-n{font-size:13px;color:var(--text);font-weight:600;line-height:1.45;flex:1;min-width:0}
.lv-ben-p{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv-old{color:var(--faint);text-decoration:line-through}
.lv-ar{color:var(--faint);margin:0 4px;font-size:11px}
.lv-new{color:var(--lv-fg);font-weight:700;font-size:15px}
.lv-ben-note{color:var(--lv-fg);font-weight:600;font-size:12.5px}
.lv-pending{font-size:12.5px;color:var(--muted);background:var(--lv-bg);
  border:1px dashed var(--lv-line);border-radius:10px;padding:9px 11px;line-height:1.6}

/* 设置页：等级一览表 */
.lv-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lv-tr{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);
  background:var(--lv-bg)}
.lv-tr:last-child{border-bottom:0}
.lv-td-l{flex:1;min-width:0}
.lv-td-m{font-size:12.5px;color:var(--muted);white-space:nowrap}
.lv-td-m b{color:var(--lv-fg);font-variant-numeric:tabular-nums}
.lv-td-r{font-size:12px;color:var(--faint);white-space:nowrap;min-width:38px;text-align:right}
.lv-sec{margin-top:10px;padding:10px 11px;background:var(--lv-bg);
  border:1px solid var(--lv-line);border-radius:12px}
.lv-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

/* 等级选择：开卡页 / 修改等级弹层共用 */
.lv-pick{margin-top:14px;padding:11px 12px;background:#fff;border:1px solid var(--line);border-radius:13px}
.lv-pick-h{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.lv-pick-h b{font-size:14px}
.lv-pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lv-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:9px 4px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-family:inherit;cursor:pointer;transition:.15s;min-width:0;--lv-fg:#7A8794;--lv-bg:#F4F6F8;--lv-line:#DDE4EA}
.lv-opt .lv-opt-n{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.lv-opt .lv-opt-s{font-size:10.5px;color:var(--faint);line-height:1.3;text-align:center}
.lv-opt.on{background:var(--lv-bg);border-color:var(--lv-deep);box-shadow:0 0 0 1px var(--lv-deep) inset}
.lv-opt.on .lv-opt-n{color:var(--lv-fg);font-weight:700}
.lv-opt.on .lv-opt-s{color:var(--lv-fg);opacity:.85}
.lv-opt:active{transform:scale(.97)}
.lv-opt-list{display:flex;flex-direction:column;gap:7px}
.lv-opt-full{flex-direction:row;justify-content:space-between;align-items:center;padding:11px 12px}
.lv-opt-full .lv-opt-n{font-size:14px}
.lv-opt-full .lv-opt-s{font-size:11.5px;text-align:right}
@media (max-width:360px){.lv-pick-row{grid-template-columns:repeat(2,1fr)}}

/* ==================== 追加项目确认单（店主端） ==================== */

/* 列表上的小标 */
.ost.xst{font-weight:600}
.ost.xst-wait{background:#FFF4E5;color:#B45309;box-shadow:0 0 0 1px #FAD9AD inset}
.ost.xst-ok{background:#ECFDF5;color:#065F46;box-shadow:0 0 0 1px #A7F3D0 inset}

/* 详情页区块 */
.xo-head{display:flex;align-items:center;gap:8px;border-radius:11px;padding:9px 12px}
.xo-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.xo-t{font-size:13.5px;font-weight:700;letter-spacing:.3px}
.xo-at{margin-left:auto;font-size:11.5px;opacity:.9;font-variant-numeric:tabular-nums}

.xo-items{margin-top:10px}
.xo-li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.xo-li:last-child{border-bottom:0}
.xo-li .n{flex:1;min-width:0;font-size:14px}
.xo-li .n i{font-style:normal;font-size:11.5px;color:var(--faint)}
.xo-li .p{flex:0 0 auto;font-weight:600}
.xo-sum{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line)}
.xo-sum span:first-child{font-size:12.5px;color:var(--muted)}
.xo-sum span:last-child{font-size:19px;font-weight:700;color:var(--primary)}
.xo-reason{margin-top:9px;font-size:12.5px;line-height:1.65;color:var(--muted);
  background:var(--panel-2);border-radius:10px;padding:9px 11px;white-space:pre-wrap}

/* 确认凭据：已确认 / 待确认 / 暂不做 */
.xo-proof{display:flex;gap:10px;align-items:flex-start;margin-top:11px;border-radius:11px;padding:11px 12px}
.xo-proof .ic{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:#fff;flex:0 0 auto}
.xo-proof .n{font-size:13.5px;font-weight:600}
.xo-proof .s{font-size:11.5px;margin-top:2px;opacity:.9;line-height:1.55}
.xo-proof.ok{background:#ECFDF5;box-shadow:0 0 0 1px #A7F3D0 inset}
.xo-proof.ok .ic{background:#059669}
.xo-proof.ok .n,.xo-proof.ok .s{color:#065F46}
.xo-proof.wait{background:#FFF4E5;box-shadow:0 0 0 1px #FAD9AD inset}
.xo-proof.wait .ic{background:#F59E0B}
.xo-proof.wait .n,.xo-proof.wait .s{color:#92400E}
.xo-proof.no{background:#F3F4F6;box-shadow:0 0 0 1px #E5E7EB inset}
.xo-proof.no .ic{background:#9CA3AF}
.xo-proof.no .n,.xo-proof.no .s{color:#4B5563}

/* 开追加单时：项目行编辑 */
.xo-edit-box{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.xo-edit{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line)}
.xo-edit:last-child{border-bottom:0}
.xo-edit .grow{min-width:0}
.xo-edit .n{font-size:13.5px}
.xo-edit .n i{font-style:normal;font-size:11px;color:var(--faint)}
.xo-edit .p{font-size:12.5px;color:var(--muted);margin-top:1px}
.xo-del{width:26px;height:26px;border:0;border-radius:8px;background:#FDECEC;color:var(--danger);
  font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto}
.xo-add-row{display:flex;gap:6px;margin-top:8px}
.xo-add-row input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:14px;outline:none;background:#fff;color:var(--text)}
.xo-add-row input#xo-price{flex:0 0 84px;text-align:right}
.xo-add-row .btn{flex:0 0 auto}
.xo-sum-big{font-size:22px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}

/* 发给顾客那张弹层里的链接框 */
.xo-url{background:#F4F6F8;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:11.5px;line-height:1.55;word-break:break-all;color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-height:78px;overflow:auto}

/* ---------- 追加单的现场照片（店主端） ----------
 * 两处用到：① 开单弹层里加/删照片；② 工单详情里回看。
 * 尺寸统一走 .xph-grid / .xo-ph-grid，行高用 aspect-ratio，
 * 不写死 px，安卓小屏也不会挤成一团。 */
.xph-grid,.xo-ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.xph-item,.xo-ph{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:#EDEFF2;cursor:pointer}
.xph-item img,.xo-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* 删除按钮：左上角，够大好点，又不挡画面中心 */
.xph-del{position:absolute;top:3px;left:3px;width:23px;height:23px;border:0;border-radius:50%;
  background:rgba(0,0,0,.58);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}

/* 「拍下问题部位」引导块：没照片时占满一行，明确招呼店主去拍 */
.xph-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:16px 10px;border:1.5px dashed var(--line);border-radius:11px;background:#FAFBFC;
  cursor:pointer;text-align:center;font-size:13.5px;color:var(--text)}
.xph-empty .ic{font-size:22px;line-height:1;color:var(--primary)}
.xph-empty .hint{font-size:11.5px;color:var(--muted);margin-top:2px}

/* 已有照片时的「再加一张」格子 */
.xph-add{aspect-ratio:1/1;border:1.5px dashed var(--line);border-radius:10px;background:#FAFBFC;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;font-size:12px;color:var(--muted)}
.xph-add .ic{font-size:20px;line-height:1;color:var(--primary)}

/* 工单详情里的照片区 */
.xo-photos{margin-top:11px}
.xo-ph-h{font-size:12.5px;color:var(--muted);margin-bottom:6px}