/* ============================================================
 * app.css —— 版式照着一张外卖点单页做的（左分类栏 / 右商品卡 / 底部凑单）
 * ============================================================ */
:root{
  --orange:#ff5b1a;
  --orange-2:#ff8a3d;
  --orange-soft:#fff1ea;
  --gold:#f7b23b;
  --txt:#1c1c1e;
  --txt-2:#8a8a8f;
  --txt-3:#b4b4b9;
  --line:#efeff2;
  --bg:#f4f4f6;
  --card:#ffffff;
  --radius:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:#e9e9ee;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.35;
  display:flex;justify-content:center;align-items:stretch;
}
button{font-family:inherit;font-size:inherit;border:0;background:none;color:inherit;cursor:pointer}
input{font-family:inherit;font-size:inherit;border:0;outline:0;background:none;color:inherit;min-width:0}
.phone{
  position:relative;width:100%;max-width:430px;
  height:100vh;max-height:100vh;            /* iOS 15 及更早不认 dvh 的兜底 */
  height:100dvh;max-height:100dvh;
  background:var(--bg);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}

/* ---------------- 顶部 ---------------- */
.topbar{display:flex;align-items:center;gap:8px;padding:10px 12px 6px;background:var(--bg)}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#3a3a3c}
.icon-btn.gift{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.search{
  flex:1;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;
  background:#fff;border-radius:999px;border:1px solid #eee;
}
.search .mag{font-size:13px;opacity:.55}
.search input{flex:1;font-size:13px}
.search input::placeholder{color:var(--txt-3)}

/* ---------------- tabs ---------------- */
.tabs{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 4px;background:var(--bg)}
.tabs-left{display:flex;align-items:baseline;gap:16px}
.tab{position:relative;font-size:16px;color:#6b6b70;font-weight:500;white-space:nowrap}
.tab.active{font-size:19px;font-weight:800;color:#111}
.tab.active .caret{font-size:11px;color:#9a9a9f;margin-left:2px;font-weight:400}
.tab .num{font-size:11px;color:var(--txt-2);margin-left:2px}
.tab .sub{font-size:11px;color:var(--orange);margin-left:3px}
.groupbuy{
  position:relative;flex:0 0 auto;height:30px;padding:0 12px;border-radius:8px;
  border:1px solid #ffd2bd;color:var(--orange);font-size:12.5px;font-weight:600;background:#fff8f4;
}
.groupbuy .bubble{
  position:absolute;right:-6px;top:-12px;background:var(--orange);color:#fff;
  font-size:9px;padding:1px 5px;border-radius:8px 8px 8px 2px;white-space:nowrap;
}

/* ---------------- 提示 / banner ---------------- */
.notice{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 12px 11px;color:#b0b0b6;font-size:11px}
.notice>i{flex:0 0 26px;height:1px;background:#e0e0e5}
.banner{
  margin:0 12px 6px;height:86px;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(100deg,#c4160f,#e8321c 45%,#ff5a25);
  display:flex;align-items:center;padding:0 14px;color:#fff;
  box-shadow:0 4px 12px rgba(200,40,20,.18);
}
.banner .b-new{position:absolute;right:14px;top:8px;font-size:11px;letter-spacing:2px;color:#ffe08a;font-weight:800;transform:rotate(-6deg)}
.banner .b-title{font-size:18px;font-weight:900;line-height:1.15;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.banner .b-sub{margin-top:6px;font-size:11px;background:#ffe08a;color:#a01d10;display:inline-block;padding:2px 8px;border-radius:999px;font-weight:700}
.banner .emoji{position:absolute;right:16px;bottom:6px;font-size:46px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}

/* ---------------- 左分类 + 右商品 ---------------- */
.body{flex:1;display:flex;min-height:0;background:var(--bg)}
.rail{
  width:86px;flex:0 0 86px;overflow-y:auto;background:var(--bg);
  padding-bottom:120px;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:56px;padding:8px 4px;font-size:12.5px;color:#5c5c62;text-align:center;line-height:1.25;
}
.rail-item.on{background:#fff;color:#111;font-weight:800;border-radius:0 10px 10px 0}
.rail-item.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--orange);border-radius:0 3px 3px 0}
.rail-item .rain{font-size:11px;color:#bcbcc2;margin-top:2px}
.rail-item{padding-right:16px}
.rail-item .rdot{position:absolute;right:3px;top:5px;background:var(--orange);color:#fff;font-size:9px;line-height:1;min-width:13px;height:13px;padding:0 2px;border-radius:999px;display:grid;place-items:center}

.list{flex:1;overflow-y:auto;padding:0 10px 130px;scrollbar-width:none;position:relative}
.list::-webkit-scrollbar{display:none}
.sec-title{position:sticky;top:0;z-index:5;padding:8px 2px 6px;background:linear-gradient(#f4f4f6 70%,rgba(244,244,246,0));font-size:15px;font-weight:800}
.sec-title .cnt{font-size:11px;color:var(--txt-3);font-weight:400;margin-left:6px}

.card{
  display:flex;gap:10px;padding:10px 10px 12px;margin-bottom:8px;background:var(--card);
  border-radius:var(--radius);
}
.card .thumb{
  position:relative;flex:0 0 88px;width:88px;height:88px;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;font-size:38px;
}
.card .thumb .badge-tl{
  position:absolute;left:0;top:0;background:linear-gradient(90deg,#ff8a1f,#ff5b1a);color:#fff;
  font-size:9.5px;padding:2px 6px;border-radius:0 0 8px 0;font-weight:700;
}
.card .thumb .like-tl{
  position:absolute;left:4px;bottom:4px;background:rgba(198,32,32,.92);color:#fff;
  font-size:9px;padding:2px 5px;border-radius:6px;font-weight:700;
}
.card .info{flex:1;min-width:0;display:flex;flex-direction:column}
.card .name{
  font-size:15px;font-weight:800;line-height:1.35;color:#141416;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .meta{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;color:var(--txt-2)}
.card .meta .recent{color:var(--orange);background:var(--orange-soft);padding:1px 5px;border-radius:4px;font-size:10.5px}
.card .tags{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10.5px;padding:1.5px 5px;border-radius:4px;border:1px solid #ffd8c6;color:var(--orange);background:#fff8f5}
.tag.plain{border-color:#eee;color:#8a8a8f;background:#fafafa}
.card .foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between}
.price-line{display:flex;align-items:baseline;gap:5px}
.price-line .cur{font-size:12px;color:var(--orange);font-weight:800}
.price-line b{font-size:19px;color:var(--orange);font-weight:900;letter-spacing:-.4px}
.price-line .origin{font-size:11.5px;color:#b8b8bd;text-decoration:line-through}

.stepper{display:flex;align-items:center;gap:8px}
.stepper button{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;
  border:1px solid #ffcfbb;color:var(--orange);background:#fff;font-weight:600;
}
.stepper button.plus{background:var(--orange);border-color:var(--orange);color:#fff}
.stepper b{min-width:14px;text-align:center;font-size:14px}
.stepper .minus.dis{opacity:.35;pointer-events:none}

.btn-spec{
  height:26px;padding:0 12px;border-radius:999px;background:var(--orange);color:#fff;
  font-size:12.5px;font-weight:700;
}

/* ---------------- 底部 ---------------- */
.cartbar{position:absolute;left:0;right:0;bottom:0;z-index:30;padding-bottom:var(--safe-b);background:transparent}
.ladder{
  display:flex;align-items:center;gap:6px;padding:7px 10px 8px;
  background:#fffdf9;border-top:1px solid #ffe6cf;overflow-x:auto;scrollbar-width:none;
}
.ladder::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:11.5px;padding:3px 9px;border-radius:999px;background:#fff;border:1px solid #ffd9c2;color:var(--orange);white-space:nowrap}
.chip.solid{background:linear-gradient(90deg,#ff7a1f,#ff5b1a);color:#fff;border-color:transparent;font-weight:700}
.chip.muted{color:#8a8a8f;border-color:#eee}
.ladder .join{margin-left:auto;font-size:12px;color:#333;white-space:nowrap}
.bar{
  display:flex;align-items:center;gap:10px;padding:8px 12px 10px;
  background:linear-gradient(180deg,#fffaf3,#fff3e2);border-top:1px solid #ffe2c8;
}
.bag{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:#fff;border:1px solid #ffe0cb;font-size:22px}
.bag .badge{
  position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:11px;font-style:normal;font-weight:700;display:grid;place-items:center;
}
.money{flex:1;min-width:0}
.money-main{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.money-main b{font-size:21px;font-weight:900;color:#222;letter-spacing:-.5px}
.money-main .coupon{font-size:11px;color:var(--orange);font-weight:700}
.money-sub{font-size:11px;color:#a08b76;margin-top:1px}
.checkout{
  flex:0 0 auto;min-width:104px;height:42px;padding:0 20px;border-radius:999px;
  background:linear-gradient(90deg,#ff7a1f,#ff5b1a);color:#fff;font-size:16px;font-weight:800;
  box-shadow:0 6px 14px rgba(255,91,26,.32);
}
.checkout:disabled{background:#dcdce1;color:#fff;box-shadow:none}

/* 空菜单 / 没上货 */
.rail-item.dim{color:#b9b9bf}
.empty-state{padding:34px 14px 20px;text-align:center;color:#8a8a8f;font-size:12.5px;line-height:1.7}
.empty-state .es-emoji{font-size:44px;margin-bottom:6px}
.empty-state h3{margin:0 0 8px;font-size:16px;color:#1c1c1e}
.empty-state p{margin:0 0 12px}
.empty-state code{background:#fff;border:1px solid #ececf1;border-radius:4px;padding:1px 4px;color:#ff5b1a;font-size:11.5px}
.empty-state pre{
  text-align:left;background:#fff;border:1px solid #ececf1;border-radius:10px;padding:10px 12px;
  font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.6;color:#3a3a3c;
  overflow-x:auto;margin:0 0 10px;
}
.empty-state .es-hint{color:#b4b4b9;font-size:11px;margin:0}
/* ---------------- 余额 ---------------- */
.wallet-chip{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  height:34px;padding:0 9px;border-radius:10px;border:1px solid #ffe0cb;
  background:linear-gradient(180deg,#fff8f2,#ffefdf);
}
.wallet-chip .wl{font-size:9px;color:#b08968;line-height:1;margin-bottom:2px}
.wallet-chip b{font-size:12.5px;color:#e8590c;font-weight:800;line-height:1;letter-spacing:-.2px}

.pay-modes{display:flex;gap:10px;margin:14px 0 2px}
.paymode{
  flex:1;display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:10px;
  border:1px solid #e8e8ee;background:#fafafb;text-align:left;
}
.paymode .pm-name{font-size:13px;color:#3a3a3c;font-weight:700}
.paymode .pm-sub{font-size:11px;color:#9a9aa0}
.paymode.on{border-color:var(--orange);background:#fff5ef}
.paymode.on .pm-name{color:var(--orange)}
.paymode.off{opacity:.45}
.paymode.off .pm-name{color:#8a8a8f}

.wallet-big{
  display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;margin:6px 0 12px;
  background:linear-gradient(135deg,#ff8a3d,#ff5b1a);color:#fff;
  box-shadow:0 8px 18px rgba(255,91,26,.24);
}
.wallet-big .wl-lbl{font-size:11.5px;opacity:.9}
.wallet-big b{font-size:32px;font-weight:900;letter-spacing:-1px;line-height:1.1}
.wallet-big .wl-sub{font-size:11.5px;opacity:.92}
.wallet-tip{font-size:11.5px;color:#a08b76;background:#fffaf3;border:1px dashed #ffe0c2;border-radius:10px;padding:9px 11px;line-height:1.6}
.ledger-title{margin:16px 0 6px;font-size:13px;font-weight:800}
.ledger{font-size:12.5px}
.lg-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.lg-row .lg-t{flex:0 0 40px;color:#b4b4b9;font-size:11px}
.lg-row .lg-n{flex:1;color:#3a3a3c;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-row b{font-weight:800}
.lg-row b.plus{color:#16a34a}
.lg-row b.minus{color:#e8590c}
.ok-bal{margin:2px 0 0;font-size:12.5px;color:#8a8a8f}
.ok-dorm{margin:8px 0 0;font-size:13.5px;color:#1c1c1e;font-weight:800}
.ok-dorm span{color:#8a8a8f;font-weight:400;font-size:12px}
/* ================= 视图切换（首页 / 点单 / 服务） ================= */
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.phone[data-view="shop"] .toast{top:86px;bottom:auto}
.phone[data-view="home"] .chk-pill,
.phone[data-view="service"] .chk-pill{bottom:calc(58px + var(--safe-b))}
/* 自检飘条在"全绿"时不该吃点击 —— 手机上它正好压在商品卡的 + 号上，
   真人点 + 会变成点自检（这是"点不动/加不进购物车"的一大来源）。
   只在有异常（.bad）时才可点、才明显。 */
.chk-pill:not(.bad){pointer-events:none;opacity:0;transition:opacity .25s}
body.xmb-home .chk-pill:not(.bad){opacity:0}
.chk-pill.bad{pointer-events:auto;opacity:1;transform:none}

/* ---------------- 首页 ---------------- */
.home-head{padding:18px 16px 4px}
.hh-row{display:flex;align-items:center;gap:10px}
.hh-title{flex:1;min-width:0}
.hh-title h1{margin:0;font-size:22px;font-weight:900;letter-spacing:-.6px}
.hh-title p{margin:3px 0 0;font-size:11.5px;color:#8a8a8f}
.hh-notice{margin-top:12px;font-size:11.5px;color:#a08b76;background:#fff8f0;border:1px dashed #ffe0c2;border-radius:10px;padding:8px 11px}
.modules{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 96px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.modules::-webkit-scrollbar{display:none}
.mod{
  position:relative;display:flex;flex-direction:column;gap:7px;padding:14px 13px 15px;
  border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);
  text-align:left;min-height:126px;
}
.mod-soon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:126px;
  border-radius:16px;border:1px dashed #e2e2ea;background:rgba(255,255,255,.6);color:#b4b4b9;font-size:12px;
}
.mod:first-child{grid-column:span 2;min-height:0;flex-direction:row;align-items:center;gap:12px}
.mod:active{transform:scale(.99)}
.mod .m-ico{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:23px}
.mod .m-txt{min-width:0;display:flex;flex-direction:column;gap:4px}
.mod .m-name{font-size:15.5px;font-weight:800;color:#141416}
.mod .m-desc{font-size:11.5px;color:#8a8a8f;line-height:1.4}
.mod .m-badge{position:absolute;right:10px;top:10px;font-size:9.5px;padding:1px 6px;border-radius:8px;background:#fff1ea;color:#ff5b1a;font-weight:700}
.mod .m-tag{margin-top:auto;align-self:flex-start;font-size:10.5px;padding:1.5px 6px;border-radius:6px;background:#f5f5f8;color:#8a8a8f}
.mod .m-arrow{position:absolute;right:12px;bottom:14px;color:#c9c9cf;font-size:15px}
.home-foot{padding:0 16px calc(16px + var(--safe-b));text-align:center;font-size:11px;color:#b4b4b9}

/* ---------------- 服务页（网课 / 快递 / 食堂） ---------------- */
.svc-head{display:flex;align-items:center;gap:10px;padding:10px 12px 8px}
.svc-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.svc-title b{font-size:16.5px;font-weight:800}
.svc-title span{font-size:11px;color:#8a8a8f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-body{flex:1;min-height:0;overflow-y:auto;padding:6px 16px 110px}
.svc-body::-webkit-scrollbar{display:none}
.svc-hero{display:flex;align-items:center;gap:11px;padding:14px;border-radius:14px;color:#fff;margin-bottom:6px}
.svc-hero .h-ico{font-size:26px}
.svc-hero .h-name{font-size:15.5px;font-weight:800}
.svc-hero .h-desc{font-size:11.5px;opacity:.92;margin-top:2px}
.svc-field{padding:12px 0;border-bottom:1px solid var(--line)}
.svc-field label{display:block;font-size:12.5px;color:#6b6b70;margin-bottom:6px}
.svc-field label em{font-style:normal;color:#ff5b1a;margin-left:2px}
.svc-field input{width:100%;font-size:14.5px;padding:1px 0}
.svc-field input::placeholder{color:#c2c2c8}
.svc-note{margin-top:16px;font-size:11.5px;color:#a08b76;background:#fffaf3;border:1px dashed #ffe0c2;border-radius:10px;padding:10px 12px;line-height:1.65}
.svc-foot{display:flex;align-items:center;gap:12px;padding:10px 16px calc(12px + var(--safe-b));border-top:1px solid var(--line);background:#fff}
.svc-fee{display:flex;flex-direction:column;min-width:78px}
.svc-fee span{font-size:11px;color:#8a8a8f}
.svc-fee b{font-size:19px;color:var(--orange);font-weight:900;letter-spacing:-.4px}
.oc-mod{font-size:10px;padding:1px 6px;border-radius:6px;background:#f2f6ff;color:#3b6fd4;margin-left:6px;vertical-align:1px}
/* ---------------- 遮罩 & 弹层 ---------------- */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:40;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-radius:18px 18px 0 0;max-height:86%;display:flex;flex-direction:column;
  animation:up .22s cubic-bezier(.2,.9,.3,1);padding-bottom:var(--safe-b);
}
@keyframes up{from{transform:translateY(60px)}to{transform:none}}
.sheet.tall{max-height:90%}
.sheet.center{align-items:center;text-align:center;padding:26px 22px calc(22px + var(--safe-b));gap:6px}
.sheet-head{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 10px}
.sheet-head.plain{align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px}
.sheet-head h3{margin:0;font-size:17px;font-weight:800}
.sheet-head small{font-size:11px;color:var(--txt-3);font-weight:400;margin-left:6px}
.sheet-x{font-size:24px;line-height:1;color:#b9b9bf;padding:0 4px}
.sheet-head .thumb{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:26px;flex:0 0 56px}
.sheet-head-txt h3{font-size:16px;margin:0 0 4px}
.sheet-head-txt p{margin:0;font-size:11.5px;color:var(--txt-2)}
.sheet-body{padding:4px 16px 12px;overflow-y:auto;flex:1}
.sheet-body::-webkit-scrollbar{width:0}
.sheet-foot{
  display:flex;align-items:center;gap:12px;padding:10px 16px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);background:#fff;
}
.sheet-price{display:flex;flex-direction:column;min-width:76px}
.sheet-price .lbl{font-size:11px;color:var(--txt-2)}
.sheet-price b{font-size:22px;color:var(--orange);font-weight:900;letter-spacing:-.5px}
.sheet-price .origin{font-size:11px;color:#b8b8bd;text-decoration:line-through}
.btn-primary{
  flex:1;height:44px;border-radius:999px;background:linear-gradient(90deg,#ff7a1f,#ff5b1a);
  color:#fff;font-size:16px;font-weight:800;box-shadow:0 6px 14px rgba(255,91,26,.28);
}
.btn-ghost{height:44px;padding:0 22px;border-radius:999px;background:#f4f4f7;color:#3a3a3c;font-weight:700}

.grp{padding:14px 0 2px;border-top:1px solid var(--line)}
.grp:first-child{border-top:0;padding-top:6px}
.grp h4{margin:0 0 8px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px}
.grp h4 em{font-style:normal;font-size:10px;color:#fff;background:var(--orange);border-radius:4px;padding:1px 4px;font-weight:600}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{
  padding:7px 12px;border-radius:999px;border:1px solid #e8e8ee;background:#fafafb;
  font-size:12.5px;color:#3a3a3c;
}
.opt.on{border-color:var(--orange);background:#fff5ef;color:var(--orange);font-weight:800}
.opt .d{font-size:10.5px;margin-left:3px;opacity:.9}

/* 结算 */
.mode-row{display:flex;gap:10px;margin:10px 0 4px}
.mode{flex:1;height:40px;border-radius:10px;border:1px solid #e8e8ee;background:#fafafb;font-size:13.5px;color:#4a4a4f}
.mode.active{border-color:var(--orange);background:#fff5ef;color:var(--orange);font-weight:800}
.field{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.field label{flex:0 0 74px;font-size:13px;color:#6b6b70}
.field label em{font-style:normal;color:#ff5b1a;margin-left:2px}
.field input{flex:1;font-size:13.5px;text-align:right}
.field input::placeholder{color:var(--txt-3)}
.bill{margin-top:12px;padding:10px 12px;background:#fafafb;border-radius:12px;font-size:12.5px}
.bill .row{display:flex;justify-content:space-between;padding:4px 0;color:#5c5c62}
.bill .row b{font-weight:700;color:#222}
.bill .row.mini{font-size:11.5px;color:var(--txt-2)}
.bill .row.mini b{color:var(--orange)}
.bill .row.total{border-top:1px dashed #e4e4ea;margin-top:6px;padding-top:8px;font-size:14px}
.bill .row.total b{color:var(--orange);font-size:18px;font-weight:900}

/* 订单 */
.order-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.order-card .oc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.order-card .oc-id{font-size:11.5px;color:var(--txt-2)}
.st{font-size:11px;padding:2px 8px;border-radius:999px;background:#fff3e6;color:#c2410c;font-weight:700}
.st.done{background:#e9f8ee;color:#12804a}
.order-card .oc-item{font-size:12.5px;color:#3a3a3c;display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.order-card .oc-sum{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px dashed #eee;font-size:13px}
.order-card .oc-sum b{color:var(--orange);font-size:16px;font-weight:900}
.empty{padding:40px 0;text-align:center;color:var(--txt-3);font-size:13px}

/* 成功 */
.ok-ico{width:60px;height:60px;border-radius:50%;background:#eafaf0;color:#16a34a;display:grid;place-items:center;font-size:30px;font-weight:800}
.ok-id{margin:0;font-size:12.5px;color:var(--txt-2);letter-spacing:1px}
.ok-eta{margin:0;font-size:14px;color:var(--orange);font-weight:800}
.ok-btns{display:flex;gap:12px;margin-top:16px;width:100%}

/* 自检面板 & 飘条 */
.chk-pill{
  position:absolute;right:10px;bottom:calc(116px + var(--safe-b));z-index:36;
  display:flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:999px;
  background:#fff;border:1px solid #ececf1;box-shadow:0 1px 4px rgba(0,0,0,.05);
  font-size:10px;color:#8a8a8f;white-space:nowrap;
}
.chk-pill .dot{flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.16)}
.chk-pill.bad .dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.chk-list{list-style:none;margin:0;padding:0}
.chk-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.chk-list li .mk{flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:#22c55e}
.chk-list li.bad .mk{background:#ef4444}
.chk-list li .nm{font-weight:700}
.chk-list li .dt{color:var(--txt-2);font-size:11.5px;margin-top:1px}
.chk-log{margin-top:12px;font-size:11.5px;color:var(--txt-2);line-height:1.6;max-height:150px;overflow:auto}
.chk-log div{font-family:ui-monospace,Consolas,monospace}

.toast{
  position:absolute;left:50%;bottom:calc(126px + var(--safe-b));transform:translateX(-50%);
  background:rgba(20,20,22,.9);color:#fff;font-size:12.5px;padding:8px 14px;border-radius:10px;z-index:80;
  animation:fade .16s ease;max-width:80%;text-align:center;
}

/* ---------------- 小屏（320~360 CSS px，老手机 / 小模拟器） ---------------- */
@media (max-width:360px){
  .rail{width:72px;flex:0 0 72px}
  .rail-item{font-size:11.5px;min-height:50px;padding:6px 2px}
  .card{padding:9px 8px 10px;gap:8px}
  .card .thumb{flex:0 0 72px;width:72px;height:72px;font-size:30px}
  .card .name{font-size:13.5px}
  .card .meta{font-size:10.5px}
  .tag{font-size:9.5px;padding:1px 4px}
  .card .foot{padding-top:4px}
  .price-line b{font-size:16.5px}
  .price-line .cur{font-size:11px}
  .price-line .origin{font-size:10.5px}
  .btn-spec{height:22px;padding:0 8px;font-size:11.5px;flex:0 0 auto}
  .price-line .origin{display:none}
  .card .foot{gap:4px}
  .stepper{gap:6px}
  .stepper button{width:22px;height:22px;font-size:15px}
  .stepper b{font-size:13px}
  .bar{gap:8px;padding:8px 10px 9px}
  .bag{width:40px;height:40px;font-size:20px}
  .money-main b{font-size:19px}
  .money-sub{font-size:10px}
  .checkout{min-width:88px;height:40px;padding:0 14px;font-size:15px}
  .ladder{padding:6px 8px 7px}
  .chip{font-size:10.5px;padding:2px 7px}
  .hh-title h1{font-size:20px}
  .mod{min-height:118px;padding:12px 11px 13px}
  .mod .m-ico{width:38px;height:38px;font-size:20px}
  .mod .m-name{font-size:14.5px}
}
/* ---------------- 登录 / 注册 ---------------- */
.view-auth{justify-content:center;padding:0 22px calc(20px + var(--safe-b));background:var(--bg)}
.auth-wrap{width:100%;max-width:420px;margin:0 auto}
.auth-logo{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,#ff8a3d,#ff5b1a);box-shadow:0 8px 20px rgba(255,91,26,.28);margin-bottom:14px;
}
.view-auth h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-.6px}
.auth-sub{margin:6px 0 20px;font-size:12.5px;color:#8a8a8f;line-height:1.6}
.auth-tabs{display:flex;gap:8px;margin-bottom:16px;background:#fff;padding:4px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.at{flex:1;height:36px;border-radius:9px;font-size:14px;color:#6b6b70;font-weight:600}
.at.on{background:linear-gradient(90deg,#ff7a1f,#ff5b1a);color:#fff;box-shadow:0 4px 10px rgba(255,91,26,.25)}
.auth-form{display:flex;flex-direction:column}
.auth-form label{font-size:12px;color:#8a8a8f;margin:10px 0 6px}
.auth-form input{
  height:44px;padding:0 12px;border-radius:11px;background:#fff;border:1px solid #ececf1;font-size:15px;
}
.auth-form input:focus{border-color:#ffb08a;box-shadow:0 0 0 3px rgba(255,122,31,.12)}
.auth-err{margin-top:10px;font-size:12.5px;color:#e03131;background:#fff5f5;border:1px solid #ffe0e0;border-radius:9px;padding:8px 10px;line-height:1.5}
.auth-submit{margin-top:16px;height:46px;flex:none}
.auth-note{margin:12px 0 0;font-size:11px;color:#b4b4b9;line-height:1.6;text-align:center}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 4px;padding:10px 12px;background:#f7f7fa;border-radius:10px}
.user-row span{font-size:12.5px;color:#3a3a3c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-btn{flex:0 0 auto;font-size:12px;color:#8a8a8f;border:1px solid #e4e4ea;border-radius:999px;padding:4px 10px;background:#fff}
.auth-code{margin-top:10px}
.auth-code label{display:block;font-size:12px;color:#8a8a8f;margin-bottom:6px}
.code-line{display:flex;gap:8px}
.code-line input{flex:1;height:44px;padding:0 12px;border-radius:11px;background:#fff;border:1px solid #ececf1;font-size:16px;letter-spacing:3px}
.code-line input:focus{border-color:#ffb08a;box-shadow:0 0 0 3px rgba(255,122,31,.12)}
.code-btn{flex:0 0 auto;padding:0 14px;height:44px;border-radius:11px;background:#fff2ea;color:#e8590c;font-size:13px;font-weight:700;border:1px solid #ffd9c2}
.code-btn:disabled{color:#b4b4b9;background:#f5f5f8;border-color:#ececf1}

/* ---------------- 店长模式 ---------------- */
.admin-tip{font-size:12px;color:#8a8a8f;line-height:1.6;margin:6px 0 12px}
.admin-stats{display:flex;gap:8px;margin:6px 0 12px}
.admin-stat{flex:1;background:#fff7f0;border:1px solid #ffe0c8;border-radius:12px;padding:10px 8px;text-align:center}
.admin-stat b{display:block;font-size:19px;color:#e8590c;font-weight:900;letter-spacing:-.4px}
.admin-stat span{font-size:10.5px;color:#a08b76}
.admin-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.admin-bar .btn-ghost{height:32px;padding:0 12px;font-size:12.5px;border-radius:9px}
.admin-auto{margin-left:auto;font-size:10.5px;color:#b4b4b9}
.admin-order{border:1px solid #ededf2;border-radius:12px;padding:11px 12px;margin-bottom:9px;background:#fff}
.admin-order.new{border-color:#ffb08a;box-shadow:0 0 0 3px rgba(255,122,31,.08)}
.ao-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ao-id{font-size:11px;color:#9a9aa0}
.ao-mod{font-size:10px;padding:1px 6px;border-radius:6px;background:#f2f6ff;color:#3b6fd4}
.ao-time{margin-left:auto;font-size:10.5px;color:#b4b4b9}
.ao-dorm{font-size:15px;font-weight:800;color:#1c1c1e;margin:2px 0 4px}
.ao-items{font-size:12px;color:#5c5c62;line-height:1.5}
.ao-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.ao-price{font-size:16px;font-weight:900;color:#e8590c}
.ao-actions{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.ao-btn{height:30px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #ececf1;background:#fff;color:#5c5c62}
.ao-btn.primary{background:linear-gradient(90deg,#ff7a1f,#ff5b1a);border-color:transparent;color:#fff}
.ao-btn.done{background:#eafaf0;border-color:#c9f0d8;color:#12804a}
.ao-empty{padding:34px 0;text-align:center;color:#b4b4b9;font-size:13px}

.bar .checkout{position:relative;z-index:2}
.bag{position:relative;z-index:2}

.auth-status{margin:0 0 12px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.5;
  background:#f5f5f8;color:#6b6b70;word-break:break-all}
.auth-status.ok{background:#eafaf0;color:#12804a}
.auth-status.warn{background:#fff4e6;color:#b45309}
.auth-status.bad{background:#fff5f5;color:#c92a2a}
#authApiRow{margin-bottom:4px}

/* ============================================================
 * iOS / PWA 适配（iPhone、iPad 上一堆"打不开、变形、点输入框放大"的根因）
 * ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none}

/* 1) iOS 会因 input 字号 < 16px 在聚焦时自动放大整页 —— 这是"点一下就乱"的主因
   手机宽度下统一 16px（不靠 UA 嗅探，所有移动浏览器都干净） */
@media (max-width:560px){
  input,textarea,select{font-size:16px !important;line-height:1.25}
  .search input{font-size:16px !important}
  .code-btn{font-size:12px}
}
@supports (-webkit-touch-callout:none){
  input,textarea,select{font-size:16px !important;line-height:1.25}
  .search input{font-size:16px !important}
  /* 刘海/灵动岛：给容器留出顶部安全区，否则标题被岛挡住 */
  .phone{padding-top:env(safe-area-inset-top,0px)}
  .topbar{padding-top:8px}
  /* iOS 上 -webkit-overflow-scrolling 恢复惯性滚动 */
  .list,.modules,.svc-body,.sheet-body,.lg-list{-webkit-overflow-scrolling:touch}
}

/* 2) 横屏时 iPhone 侧边安全区（否则左右被切） */
@media (orientation:landscape){
  @supports (-webkit-touch-callout:none){
    .phone{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  }
}

/* 3) 加到主屏 / 安装引导条
   关键：容器 pointer-events:none，只有两个按钮收点击 —— 否则这条会挡住"登录/去结算"点不到 */
.pwa-hint{
  position:fixed;left:50%;bottom:calc(12px + var(--safe-b));
  transform:translate(-50%,220%);width:calc(100% - 24px);max-width:406px;
  display:none;                     /* 只在首页出现，点单页/服务页一律不挡 */
  align-items:center;gap:10px;padding:10px 10px 10px 14px;
  background:rgba(28,28,30,.94);color:#fff;border-radius:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  font-size:12.5px;line-height:1.4;z-index:9998;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.9,.25,1);backdrop-filter:blur(8px);
}
.pwa-hint.on{transform:translate(-50%,0)}
.pwa-hint-btn,.pwa-hint-x{pointer-events:auto}
/* 只在首页露头：点单页/服务页底部全是可点区域，引导条一律不出现 */
body.xmb-home .pwa-hint{display:flex}
.pwa-hint-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pwa-hint-txt b{font-size:13px;font-weight:700}
.pwa-hint-txt span{color:#c7c7cf;font-size:11.5px}
.pwa-hint-btn{
  flex:0 0 auto;height:32px;padding:0 14px;border-radius:999px;
  background:linear-gradient(90deg,#ff7a1f,#ff5b1a);color:#fff;font-size:12.5px;font-weight:700;
}
.pwa-hint-x{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:1;
}
/* 店长面板：手机响铃状态 */
.admin-alert{
  margin:0 0 10px;padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.5;
  background:#eafaf0;color:#12804a;border:1px solid #c9f0d8;
}
/* ============ 客户 ↔ 店长 聊天 ============ */
.icon-btn.chat{position:relative}
.chat-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px #fff}
.inbox-dot{display:inline-block;min-width:16px;height:16px;line-height:16px;border-radius:999px;background:#ff3b30;color:#fff;
  font-size:10px;font-style:normal;text-align:center;padding:0 4px;margin-left:6px;vertical-align:1px}

.chat-list{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 8px;display:flex;flex-direction:column;gap:9px;background:#f6f6f8}
.chat-row{display:flex}
.chat-row.me{justify-content:flex-end}
.chat-bubble{max-width:76%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.chat-row.them .chat-bubble{background:#fff;color:#1c1c1e;border-bottom-left-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.chat-row.me .chat-bubble{background:linear-gradient(135deg,#ff8a3d,#ff5b1a);color:#fff;border-bottom-right-radius:5px}
.chat-time{font-size:10.5px;color:#b4b4b9;text-align:center;margin:2px 0 4px}
.chat-empty{padding:40px 20px;text-align:center;color:#b4b4b9;font-size:13px;line-height:1.8}
.chat-input{display:flex;gap:8px;padding:10px 12px calc(10px + var(--safe-b));background:#fff;border-top:1px solid var(--line)}
.chat-input input{flex:1;height:40px;padding:0 12px;border-radius:12px;background:#f4f4f6;font-size:16px}
.chat-send{flex:0 0 auto;height:40px;padding:0 18px;border-radius:12px;font-size:14px}

/* 店长收件箱：会话条目 */
.thread{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#fff;margin:0 0 8px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);cursor:pointer}
.thread .th-main{flex:1;min-width:0}
.thread .th-mail{font-size:12.5px;font-weight:700;color:#1c1c1e;word-break:break-all}
.thread .th-last{font-size:12px;color:#8a8a8f;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .th-meta{flex:0 0 auto;text-align:right;font-size:10.5px;color:#b4b4b9}
.thread .th-unread{display:inline-block;min-width:16px;height:16px;line-height:16px;border-radius:999px;background:#ff3b30;
  color:#fff;font-size:10px;text-align:center;padding:0 4px;margin-top:4px}
/* 聊天/收件箱要盖在接单台上面（否则会被 adminSheet 的底栏挡住点不到） */
#chatSheet, #inboxSheet{z-index:220}

/* ============ 店长版：全屏店长台（不再和客户登录页重叠） ============ */
.view-boss{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.boss-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px calc(10px + var(--safe-t));background:#fff;border-bottom:1px solid var(--line);
}
.boss-head h1{margin:0;font-size:18px;font-weight:900}
.boss-slot{flex:1;min-height:0;overflow-y:auto;padding:12px 14px calc(20px + var(--safe-b))}
/* 搬进来的两块：当普通内容排版，不再是底部弹层 */
.boss-slot .sheet-body{padding:0;overflow:visible;flex:none}
.boss-slot #adminLogin{padding-top:14px}
.boss-slot #adminLogin .auth-form{padding:0}
.boss-slot .admin-stats{margin-top:2px}

/* 店长台里已经有右上角"退出"，工具条那个就别重复了 */
body.boss-mode .admin-bar #btnAdminLogout{display:none}
body.boss-mode .admin-bar{justify-content:flex-start}