/* ============================================================
   Z&W Foodservice v1.0 — 共享设计系统（浅色主题）
   商城 / 手机端 / 运营后台 共用
   ============================================================ */
:root{
  --brand:#0B6F4F; --brand-dark:#084F3B; --brand-mid:#0E8A62; --brand-light:#E8F4EF; --brand-tint:#F1F9F5;
  --acc:#D93A24; --acc-light:#FDEEEA; --amber:#B7791F; --amber-light:#FFF6E8;
  --ink:#16211D; --ink-2:#46564F; --muted:#87938C; --line:#E4EBE7; --line-2:#F0F4F2;
  --bg:#F6F9F7; --card:#fff; --warn-bg:#FFF6E8; --warn-bd:#F0C36D;
  --ok-bg:#EAF7EF; --ok-bd:#7CC49A; --bad-bg:#FDEEEA; --bad-bd:#E8967F;
  --radius:12px; --radius-sm:9px; --shadow:0 1px 2px rgba(16,40,32,.05),0 6px 18px -8px rgba(16,40,32,.10);
  --shadow-lg:0 8px 30px -12px rgba(16,40,32,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.wrap-sm{max-width:900px;margin:0 auto;padding:0 20px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CFDAD4;border-radius:6px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- 顶栏 / 页头 ---------------- */
.topbar{background:linear-gradient(90deg,var(--brand-dark),#0A5E44);color:#CFE8DD;font-size:13.5px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.topbar b{color:#fff}
.topbar .tb-r{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.topbar .tb-r span{white-space:nowrap}
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.header-in{display:flex;align-items:center;gap:22px;padding:15px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink);flex-shrink:0}
.logo .mark{width:46px;height:46px;border-radius:12px;background:linear-gradient(140deg,var(--brand-mid),var(--brand-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:0;line-height:1;box-shadow:0 4px 12px -4px rgba(11,111,79,.5)}
.logo b{font-size:19px;display:block;line-height:1.15;letter-spacing:-.2px}
.logo small{color:var(--muted);font-size:12.5px;letter-spacing:.2px}
.search{flex:1;min-width:240px;position:relative}
.search input{width:100%;padding:12px 15px 12px 42px;border:1.5px solid var(--line);border-radius:11px;background:#FAFCFB;font-size:14.5px}
.search input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-light)}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px}
.search .sg{position:absolute;right:9px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.hdr-act{display:flex;align-items:center;gap:9px;flex-shrink:0}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.icon-btn:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-tint)}
.nav{background:#fff;border-bottom:2px solid var(--brand-light);position:sticky;top:68px;z-index:55;box-shadow:0 2px 8px rgba(11,111,79,.06)}
.nav .wrap{display:flex;gap:0;overflow-x:visible;align-items:stretch;justify-content:flex-start}
.nav a{padding:16px 22px;color:var(--ink-2);font-weight:700;font-size:15.5px;white-space:nowrap;border-bottom:3px solid transparent;display:inline-flex;align-items:center;transition:all .15s;letter-spacing:.2px}
.nav a.on,.nav a:hover{color:var(--brand-dark);border-bottom-color:var(--brand);background:var(--brand-tint)}
.nav a.hot::after{content:'新';font-size:10px;background:var(--acc);color:#fff;border-radius:3px;padding:1px 4px;margin-left:5px;vertical-align:2px}
.nav .spacer{flex:1}
.nav-drop{position:relative;display:flex}
.nav-drop-btn{font-weight:700;padding-left:20px}
.nav-drop-panel{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:var(--shadow-lg);min-width:260px;max-height:420px;overflow-y:auto;padding:10px 0;z-index:60}
.nav-drop:hover .nav-drop-panel{display:block}
.nav-drop-panel a{display:flex;align-items:center;padding:13px 18px;font-size:15px;border-bottom:none;border-radius:0;color:var(--ink);transition:background .12s}
.nav-drop-panel a:hover{background:var(--brand-tint);color:var(--brand-dark)}
.nav-drop-panel a span:last-child{margin-left:auto;color:var(--muted);font-size:13px}
.spacer{flex:1}

/* ---------------- 按钮 ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:12px 20px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--brand);color:#fff;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:#fff;color:var(--brand);border-color:#BCD9CD}
.btn.ghost:hover{background:var(--brand-tint);border-color:var(--brand)}
.btn.gray{background:#EEF3F1;color:var(--ink-2)}
.btn.gray:hover{background:#E2EAE7}
.btn.danger{background:var(--acc)}
.btn.danger:hover{background:#B72E1B}
.btn.dark{background:var(--ink)}
.btn.lg{padding:14px 28px;font-size:16px;border-radius:12px}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:8px}
.btn.xs{padding:4px 10px;font-size:12px;border-radius:7px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.badge{background:var(--acc);color:#fff;border-radius:9px;font-size:11px;padding:1px 7px;font-weight:700}
.badge.dot{position:absolute;top:-5px;right:-5px;padding:1px 6px}
.lang-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--ink-2);font-weight:600}
.lang-btn:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------- 卡片 / 网格 ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.card-h{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-h b{font-size:15.5px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.g5{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.sec-t{font-size:21px;font-weight:800;letter-spacing:-.3px;margin:0}
.sub-t{font-size:14.5px;font-weight:700;color:var(--ink-2);margin:18px 0 9px}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ---------------- 首页 Hero ---------------- */
.hero{background:linear-gradient(135deg,#0A5B42 0%,#0B6F4F 45%,#137A57 100%);color:#fff;padding:38px 0 34px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 65%)}
.hero::before{content:'';position:absolute;left:-90px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(217,58,36,.20),transparent 65%)}
.hero-in{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:36px;line-height:1.25;letter-spacing:-.8px;font-weight:800;margin-bottom:14px}
.hero p{color:#C6E4D8;font-size:15.5px;line-height:1.8;max-width:580px;margin-bottom:22px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.16);border-radius:14px;overflow:hidden;backdrop-filter:blur(2px)}
.hero-stat{background:rgba(4,50,36,.36);padding:18px 17px}
.hero-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:3px}
.hero-stat span{font-size:12.5px;color:#A8D2C2;letter-spacing:.2px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);border-radius:20px;padding:6px 13px;font-size:13px;color:#DCEEE6}

/* ---------------- 信赖 / 卖点条 ---------------- */
.trust{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.usp{display:flex;gap:11px;align-items:center;padding:6px 10px}
.usp i{font-size:23px;line-height:1;flex-shrink:0;font-style:normal}
.usp b{display:block;font-size:14px;margin-bottom:2px}
.usp span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------------- 分类磁贴 ---------------- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 15px;text-align:center;transition:.16s;box-shadow:var(--shadow);display:block;color:var(--ink)}
.cat-tile:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cat-tile i{font-size:30px;display:block;margin-bottom:8px;font-style:normal}
.cat-tile b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-tile small{color:var(--muted);font-size:12px;display:block}
.cat-tile .subs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:9px}
.cat-tile .subs span{font-size:11.5px;background:var(--brand-tint);color:var(--brand-dark);border-radius:11px;padding:3px 8px}

/* ---------------- 商品卡 ---------------- */
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.16s;box-shadow:var(--shadow);position:relative}
.pc:hover{border-color:#BCD9CD;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pc-img{position:relative;aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line-2)}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.pc-img .ph{font-size:48px;color:#D6E2DC}
.pc-flags{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.flag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;color:#fff;letter-spacing:.2px}
.flag.sale{background:var(--acc)}
.flag.deal{background:#C2410C}
.flag.new{background:#2563A8}
.flag.hot{background:#B7791F}
.flag.weighed{background:var(--brand)}
.pc-fav{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--muted)}
.pc-fav:hover,.pc-fav.on{color:var(--acc);border-color:var(--acc)}
.pc-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-name{font-weight:600;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pc-spec{color:var(--muted);font-size:12px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pc-price{display:flex;align-items:baseline;gap:7px;margin-top:auto}
.pc-price b{font-size:18px;font-weight:800;color:var(--brand-dark);letter-spacing:-.4px}
.pc-price s{font-size:12.5px;color:var(--muted)}
.pc-price em{font-style:normal;font-size:12px;color:var(--muted)}
.pc-tier{font-size:12px;color:var(--muted);display:flex;gap:9px;flex-wrap:wrap}
.pc-tier span{background:var(--line-2);border-radius:6px;padding:2px 7px}
.pc-actions{display:flex;gap:7px;align-items:center;margin-top:10px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:1}
.stepper button{width:32px;height:34px;border:none;background:#F7FAF9;color:var(--ink-2);cursor:pointer;font-size:16px;font-weight:700}
.stepper button:hover{background:var(--brand-light);color:var(--brand-dark)}
.stepper input{width:100%;min-width:0;height:34px;border:none;text-align:center;font-size:14px;font-weight:600;background:#fff}
.stepper input:focus{outline:none}
.qty{width:60px;padding:7px;border:1px solid var(--line);border-radius:8px;text-align:center}
.pc-lock{position:absolute;inset:0;background:rgba(255,255,255,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:13px;color:var(--ink-2);text-align:center;padding:16px;backdrop-filter:blur(1px)}
.pc-lock b{font-size:14px;color:var(--brand-dark)}

/* ---------------- 分区头 ---------------- */
.sec{margin:32px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sec-h .tt{display:flex;align-items:center;gap:10px}
.sec-h .tt i{font-size:22px;font-style:normal}
.sec-h small{color:var(--muted);font-size:13px;display:block;margin-top:2px}
.sec-h a.more{font-size:13px;font-weight:600;color:var(--brand)}
.sec-h a.more:hover{text-decoration:underline}

/* ---------------- 横向滚动条（热门/特价） ---------------- */
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:224px;gap:13px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x proximity}
.hscroll>*{scroll-snap-align:start}
.hscroll::-webkit-scrollbar{height:8px}

/* ---------------- 支付方式条 ---------------- */
.pay-strip{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.pay-methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:11px;margin-top:12px}
.pay-m{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#FCFEFD}
.pay-m .lg{width:40px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-.3px}
.pay-m b{display:block;font-size:13.5px}
.pay-m span{font-size:12px;color:var(--muted)}
.lg.card{background:#1A1F71}.lg.apple{background:#111}.lg.google{background:#4285F4}.lg.paypal{background:#003087}
.lg.ach{background:#1F6B45}.lg.net{background:#7C4DBE}.lg.venmo{background:#008CFF}

/* ---------------- 数据条 ---------------- */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow)}
.kpi i{font-size:19px;font-style:normal}
.kpi b{display:block;font-size:25px;font-weight:800;letter-spacing:-.6px;margin:6px 0 3px;color:var(--ink)}
.kpi span{font-size:12.5px;color:var(--muted);display:block}
.kpi small{font-size:12.5px;color:var(--brand);font-weight:600}
.kpi.hl{background:linear-gradient(140deg,var(--brand),var(--brand-dark));border-color:var(--brand-dark)}
.kpi.hl b,.kpi.hl span,.kpi.hl small{color:#fff}
.kpi.hl span{color:#A8D2C2}

/* ---------------- 动态流 ---------------- */
.ticker{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border-radius:10px;overflow:hidden}
.tk{background:#fff;padding:12px 15px;display:flex;gap:12px;align-items:flex-start}
.tk i{font-size:17px;font-style:normal;flex-shrink:0;margin-top:1px}
.tk .b{flex:1;min-width:0}
.tk b{font-size:13.5px;display:block}
.tk span{font-size:12.5px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk .t{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---------------- 反馈栏 ---------------- */
.fb-panel{background:linear-gradient(135deg,#F1F9F5,#EAF4F0);border:1px solid #CFE5DA;border-radius:var(--radius);padding:22px}
.fb-cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.fb-cats span{padding:6px 14px;border-radius:17px;background:#fff;border:1px solid var(--line);font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.fb-cats span.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-points{display:inline-flex;align-items:center;gap:6px;background:var(--amber-light);color:var(--amber);border:1px solid var(--warn-bd);border-radius:9px;padding:6px 13px;font-size:13px;font-weight:700}

/* ---------------- 表单 ---------------- */
label.f{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin:13px 0 6px}
label.f .req{color:var(--acc)}
input.t,select.t,textarea.t{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:14.5px;background:#fff;color:var(--ink)}
input.t:focus,select.t:focus,textarea.t:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}
textarea.t{resize:vertical;min-height:80px;line-height:1.65}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.55}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;cursor:pointer;background:#fff;transition:.14s}
.opt:hover{border-color:#BCD9CD;background:var(--brand-tint)}
.opt.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 2px var(--brand-light)}
.opt .radio{width:18px;height:18px;border-radius:50%;border:2px solid #C3D1CB;flex-shrink:0;margin-top:2px;position:relative}
.opt.on .radio{border-color:var(--brand)}
.opt.on .radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.opt .tx{flex:1;min-width:0}
.opt b{font-size:14px;display:block}
.opt small{font-size:12.5px;color:var(--muted);display:block;line-height:1.55}

/* ---------------- 提示条 ---------------- */
.notice{border-radius:10px;padding:13px 16px;font-size:14px;margin:13px 0;border:1px solid;line-height:1.7}
.notice.ok{background:var(--ok-bg);border-color:var(--ok-bd);color:#1F6B45}
.notice.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:#8A5F10}
.notice.bad{background:var(--bad-bg);border-color:var(--bad-bd);color:#A33A22}
.notice.info{background:#EAF2FB;border-color:#B9D3F0;color:#1D4E89}
.notice b{font-weight:700}
.notice .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------------- 表格 ---------------- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;padding:11px 10px;background:#F4F8F6;color:var(--muted);font-weight:600;font-size:12.5px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#FBFDFC}
.tbl.fixed{table-layout:fixed}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.pos{color:var(--brand-dark);font-weight:700}
.neg{color:var(--acc);font-weight:700}
.thumb{width:40px;height:40px;border-radius:7px;object-fit:contain;background:#fff;border:1px solid var(--line-2);flex-shrink:0}

/* ---------------- 状态胶囊 ---------------- */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:13px;white-space:nowrap}
.st.gray{background:#EEF2F0;color:var(--ink-2)}
.st.blue{background:#E7F0FA;color:#2563A8}
.st.green{background:var(--ok-bg);color:#1F6B45}
.st.amber{background:var(--warn-bg);color:#9A6B13}
.st.red{background:var(--bad-bg);color:var(--acc)}
.st.purple{background:#F1EAF8;color:#7C4DBE}
.tag{font-size:11.5px;padding:3px 9px;border-radius:11px;background:var(--brand-light);color:var(--brand-dark);display:inline-block;font-weight:600}
.tag.warn{background:var(--warn-bg);color:#9A6B13}
.tag.bad{background:var(--bad-bg);color:var(--acc)}
.tag.gray{background:#EEF2F0;color:var(--ink-2)}
.tag.blue{background:#E7F0FA;color:#2563A8}

/* ---------------- 布局工具 ---------------- */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row.tight{gap:8px}
.row.mid{align-items:center}
.col{flex:1;min-width:250px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.kv b{font-variant-numeric:tabular-nums}
.kv.sub{color:var(--muted);font-size:13px}
.total-line{border-top:2px solid var(--ink);margin-top:9px;padding-top:11px;font-size:16px;font-weight:800;display:flex;justify-content:space-between}
.crumb{color:var(--muted);font-size:12.5px;margin:14px 0}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--brand)}
.empty{padding:56px 20px;text-align:center;color:var(--muted)}
.empty i{font-size:36px;display:block;margin-bottom:10px;font-style:normal;opacity:.6}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.pill-tabs a{padding:8px 16px;border-radius:19px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:13.5px;cursor:pointer;font-weight:600}
.pill-tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .spacer{flex:1}
.pager{display:flex;gap:6px;justify-content:center;margin:22px 0;flex-wrap:wrap}
.pager a{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-2);font-size:13px;cursor:pointer;font-weight:600;padding:0 10px}
.pager a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager a.dis{opacity:.4;pointer-events:none}
.bar{height:7px;border-radius:5px;background:var(--line-2);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand-mid),var(--brand));border-radius:5px}
.bar.warn>i{background:linear-gradient(90deg,#E4A93C,var(--amber))}
.divider{height:1px;background:var(--line);margin:16px 0}

/* ---------------- 时间轴 ---------------- */
.timeline{list-style:none}
.timeline li{position:relative;padding:0 0 16px 24px;border-left:2px solid var(--line);margin-left:8px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.timeline li.warn::before{background:var(--warn-bd)}
.timeline li.bad::before{background:var(--bad-bd)}
.timeline li.gray::before{background:#C9D5CF}
.timeline .t{color:var(--muted);font-size:11.5px}
.timeline .d{font-size:13px;line-height:1.6}

/* ---------------- 订单跟踪 ---------------- */
.track{display:flex;gap:0;margin:16px 0 6px;overflow-x:auto;padding-bottom:4px}
.track .node{flex:1;min-width:96px;text-align:center;position:relative;padding-top:26px}
.track .node::before{content:'';position:absolute;top:8px;left:0;right:0;height:3px;background:var(--line)}
.track .node:first-child::before{left:50%}
.track .node:last-child::before{right:50%}
.track .node .dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid var(--line);z-index:2}
.track .node.done .dot{border-color:var(--brand);background:var(--brand)}
.track .node.done::before{background:var(--brand)}
.track .node.cur .dot{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px var(--brand-light)}
.track .node span{font-size:11.5px;color:var(--muted);display:block;line-height:1.35}
.track .node.cur span,.track .node.done span{color:var(--brand-dark);font-weight:700}
.compare{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.compare th{font-size:11.5px;color:var(--muted);text-align:right;padding:7px 9px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.compare th:first-child{text-align:left}
.compare td{padding:8px 9px;border-bottom:1px solid var(--line-2);text-align:right;font-variant-numeric:tabular-nums}
.compare td:first-child{text-align:left}
.compare tr.hi td{background:var(--warn-bg);font-weight:700}
.amt{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:13px;margin:15px 0}
.amt .box{border:1px solid var(--line);border-radius:11px;padding:13px 15px;background:#FCFEFD}
.amt .box.hl{border-color:var(--brand);background:var(--brand-tint)}
.amt .box.warn{border-color:var(--warn-bd);background:var(--warn-bg)}
.amt .box.bad{border-color:var(--bad-bd);background:var(--bad-bg)}
.amt .box span{font-size:12.5px;color:var(--muted);display:block}
.amt .box b{font-size:20px;font-weight:800;display:block;margin-top:4px;letter-spacing:-.4px}
.link-line{display:inline-flex;align-items:center;gap:7px;background:var(--brand-light);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--brand-dark);font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------------- 购物车 / 结账 ---------------- */
.co-grid{display:grid;grid-template-columns:1fr 356px;gap:20px;align-items:start}
.summary{position:sticky;top:96px}
.cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2);align-items:center}
.cart-line:last-child{border-bottom:none}
.cart-line .img{width:56px;height:56px;border-radius:9px;border:1px solid var(--line-2);object-fit:contain;background:#fff}
.cart-line .nm b{font-size:13.5px;display:block;line-height:1.4}
.cart-line .nm span{font-size:11.5px;color:var(--muted)}
.cart-line .pr{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-opt{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;background:#fff;margin-bottom:9px}
.pay-opt:hover{border-color:#BCD9CD;background:var(--brand-tint)}
.pay-opt.on{border-color:var(--brand);background:var(--brand-tint);box-shadow:0 0 0 2px var(--brand-light)}
.pay-opt.dis{opacity:.5;cursor:not-allowed}
.pay-opt .lg{width:46px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:#fff;flex-shrink:0}
.pay-opt .tx{flex:1;min-width:0}
.pay-opt b{font-size:14px;display:block}
.pay-opt small{font-size:12.5px;color:var(--muted);display:block;line-height:1.55}
.pay-opt .fee{font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap;text-align:right}
.pay-opt .fee.save{color:var(--brand-dark)}
.slot{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;cursor:pointer;text-align:center}
.slot.on{border-color:var(--brand);background:var(--brand-tint);font-weight:700;color:var(--brand-dark)}
.slot.dis{opacity:.42;cursor:not-allowed;text-decoration:line-through}

/* ---------------- 页脚 ---------------- */
.footer{background:#0E1F1A;color:#7FA79A;padding:42px 0 28px;font-size:13.5px;margin-top:50px}
.footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:30px}
.footer h4{color:#DFEFE9;font-size:14px;margin-bottom:11px;letter-spacing:.2px}
.footer a{color:#9FC4B6;display:block;padding:4px 0}
.footer a:hover{color:#fff}
.footer .brandline{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.footer .brandline .mark{width:38px;height:38px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;line-height:1}
.footer .brandline b{color:#fff;font-size:16px}
.footer .legal{border-top:1px solid #1D3A31;margin-top:28px;padding-top:17px;font-size:12.5px;color:#5E8076;line-height:1.85}
.footer .lics{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.footer .lics span{background:#16302A;border-radius:6px;padding:4px 10px;font-size:12px;color:#8FB8AA}

/* ============================================================
   运营后台
   ============================================================ */
.admin{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:#0E1F1A;color:#8FB8AA;padding:16px 0;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:9px;padding:0 16px 16px;border-bottom:1px solid #1D3A31;margin-bottom:10px}
.side .brand .mark{width:32px;height:32px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;line-height:1}
.side .brand b{color:#fff;font-size:13.5px;display:block;line-height:1.2}
.side .brand small{font-size:10.5px;color:#5E8076}
.side a{display:flex;align-items:center;gap:9px;padding:9px 16px;color:#9FC4B6;font-size:13px;font-weight:500;border-left:3px solid transparent;cursor:pointer}
.side a:hover{background:#142C25;color:#fff}
.side a.on{background:#142C25;color:#fff;border-left-color:var(--brand-mid);font-weight:700}
.side a i{font-style:normal;font-size:14px;width:17px;text-align:center}
.side a .n{margin-left:auto;background:var(--acc);color:#fff;font-size:10.5px;border-radius:8px;padding:0 6px;font-weight:700}
.side .grp{padding:14px 16px 6px;font-size:10.5px;color:#4F6F65;letter-spacing:.6px;text-transform:uppercase}
.main{padding:20px 24px 40px;min-width:0}
.main-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.main-h h2{font-size:20px;font-weight:800;letter-spacing:-.3px}
.main-h small{color:var(--muted);font-size:12.5px;display:block;font-weight:400;margin-top:2px}
.chart{display:flex;align-items:flex-end;gap:5px;height:132px;padding-top:8px}
.chart .b{flex:1;background:linear-gradient(180deg,var(--brand-mid),var(--brand));border-radius:4px 4px 0 0;min-height:3px;position:relative;transition:.2s}
.chart .b:hover{background:var(--brand-dark)}
.chart .b span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--muted);white-space:nowrap}
.chart .b em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--ink-2);font-style:normal;font-weight:700;opacity:0}
.chart .b:hover em{opacity:1}
.mini-chart{display:flex;align-items:flex-end;gap:3px;height:34px}
.mini-chart .b{flex:1;background:var(--brand-light);border-radius:2px;min-height:2px}
.mini-chart .b.hi{background:var(--brand)}
.side-list{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border-radius:9px;overflow:hidden}
.sl{display:flex;align-items:center;gap:10px;background:#fff;padding:10px 12px}
.sl .idx{width:19px;height:19px;border-radius:5px;background:var(--line-2);color:var(--ink-2);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sl .b{flex:1;min-width:0}
.sl b{font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl span{font-size:11px;color:var(--muted)}
.sl .v{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.modal-bg{position:fixed;inset:0;background:rgba(10,30,24,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;z-index:200;overflow-y:auto}
.modal{background:#fff;border-radius:14px;width:100%;max-width:820px;box-shadow:0 24px 60px -20px rgba(0,0,0,.4)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;border-radius:14px 14px 0 0;z-index:2}
.modal-h b{font-size:16px}
.modal-b{padding:18px 20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;position:sticky;bottom:0;background:#fff;border-radius:0 0 14px 14px}
.toast{position:fixed;right:22px;bottom:22px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-lg);z-index:400;max-width:340px;animation:tin .25s ease}
.toast.ok{background:#10603F}.toast.bad{background:#A72D19}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
.wf-input{width:82px;padding:6px;border:1px solid var(--line);border-radius:6px;text-align:center;font-size:13px;font-weight:600}
.wf-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-light)}
.fb-item{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:#fff}
.fb-item.new{border-left:3px solid var(--acc)}
.fb-item.replied{border-left:3px solid #2563A8}
.fb-item.adopted{border-left:3px solid var(--brand)}
.fb-item .tx{font-size:13.5px;line-height:1.65;margin:7px 0}
.fb-item .rp{background:var(--brand-tint);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.6}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.zone-row{display:grid;grid-template-columns:118px 1fr 92px 92px 34px;gap:8px;align-items:center;margin-bottom:7px;font-size:12.5px}
.zone-row input{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;width:100%}
.zone-row input:focus{outline:none;border-color:var(--brand)}

/* ============================================================
   手机端 App（手机壳内演示）
   ============================================================ */
.app-stage{background:linear-gradient(160deg,#E8F0EC,#DCE8E2);min-height:100vh;padding:32px 18px 48px}
.app-top{max-width:1240px;margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.app-top h1{font-size:22px;font-weight:800;letter-spacing:-.4px}
.app-top p{color:var(--ink-2);font-size:13px;margin-top:3px}
.phones{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;align-items:flex-start;max-width:1240px;margin:0 auto}
.phone{width:392px;flex-shrink:0}
.phone .shell{background:#0E1F1A;border-radius:38px;padding:11px;box-shadow:0 30px 60px -24px rgba(10,40,30,.55),0 0 0 2px #223A33 inset}
.phone .screen{background:#F6F9F7;border-radius:29px;overflow:hidden;height:760px;display:flex;flex-direction:column;position:relative}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:#0E1F1A;border-radius:0 0 14px 14px;z-index:20}
.phone .label{text-align:center;font-size:12px;color:var(--ink-2);margin-top:12px;font-weight:600}
.app-hdr{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:calc(20px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 18px calc(16px + env(safe-area-inset-left,0px))}
.app-hdr .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.app-hdr .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;cursor:pointer;user-select:none}
.app-hdr .hdr-ic{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:8px;padding:5px 9px;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1;white-space:nowrap}
/* header 右上角按钮（语言/深浅色/积分/消息）：统一无边框无底色，纯图标商务风 */
.hdr-ic{background:none;border:none;color:#fff;font-size:13px;font-weight:700;padding:2px 3px;cursor:pointer;opacity:.85;line-height:1;font-family:inherit}
.hdr-ic:hover{opacity:1}
.hdr-ic:active{opacity:.6}
.dark .app-hdr{background:linear-gradient(135deg,#0E3A2A,#0A241B)}
/* ---------------- 我的页面（商务名片） ---------------- */
.me-card{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-radius:16px;padding:17px 15px;color:#fff;box-shadow:0 8px 22px -8px rgba(11,111,79,.45);margin-bottom:11px}
.me-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:2.5px solid rgba(255,255,255,.55);box-shadow:0 4px 12px -3px rgba(0,0,0,.3)}
.me-tier{display:inline-block;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:2px 8px;border-radius:20px;margin-right:5px}
.me-edit{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px;padding:5px 10px;border-radius:8px;cursor:pointer;flex-shrink:0;font-family:inherit}
.me-edit:active{background:rgba(255,255,255,.28)}
/* 会员商务名片 */
.me-card{background:linear-gradient(135deg,#0E5C43,#0B6F4F 55%,#0E3D2E);color:#fff;border-radius:16px;padding:18px 16px;position:relative;overflow:hidden;box-shadow:0 10px 24px -10px rgba(11,111,79,.5)}
.me-card::after{content:"";position:absolute;right:-40px;top:-44px;width:136px;height:136px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.me-card::before{content:"";position:absolute;right:26px;bottom:-50px;width:116px;height:116px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.me-tier{display:inline-block;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff;padding:3px 10px;border-radius:20px;margin:0 6px 4px 0;white-space:nowrap}
/* 常用功能横排三按钮 */
.me-quick3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.me-quick3 a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 6px 11px;text-align:center;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s}
.me-quick3 a:active{border-color:var(--brand)}
.me-quick3 a i{display:block;font-size:21px;font-style:normal;line-height:1}
.me-quick3 a b{display:block;font-size:12px;font-weight:700;margin-top:6px}
.me-quick3 a span{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.dark .me-quick3 a{background:#16261F;border-color:#23382F}
/* 通知偏好开关（真实接口） */
.np-toggle{width:36px;height:20px;border-radius:11px;background:#CBD8D2;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.np-toggle.on{background:var(--brand)}
.np-toggle .np-dot{position:absolute;top:2.5px;left:2.5px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.np-toggle.on .np-dot{left:18.5px}
.dark .np-toggle{background:#2C443A}
/* 商务线性图标（全站统一，替换 emoji） */
.ic{width:18px;height:18px;display:inline-block;vertical-align:-3px;flex-shrink:0}
.app-banner .i,.app-li>i{display:inline-flex;align-items:center;justify-content:center}
.app-banner .i .ic{color:#fff}
.dark .app-banner .i .ic{color:#fff}
/* 空页面撑满（采购单/订单缺省态） */
.app-scroll{display:flex;flex-direction:column}
.app-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* 订单页 banner */
.orders-banner{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:13px;padding:16px 18px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.orders-banner b{font-size:16px;font-weight:800;letter-spacing:.2px}
.orders-banner span{font-size:12px;color:#B7D8CC;white-space:nowrap}
/* 推广海报卡（商务底纹） */
.ref-poster{background:linear-gradient(135deg,#0E5C43,#0B6F4F 55%,#0E3D2E);border-radius:16px;padding:16px;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 24px -10px rgba(11,111,79,.5);user-select:none;-webkit-user-select:none}
.ref-poster::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 14px);pointer-events:none}
.ref-poster::after{content:"";position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.ref-brand{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.ref-mark{width:44px;height:44px;border-radius:12px;background:#fff;color:#0B6F4F;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.ref-bname{min-width:0}
.ref-bname b{font-size:14.5px;display:block;letter-spacing:.2px}
.ref-bname span{font-size:10px;color:#B7D8CC;letter-spacing:.8px}
.ref-main{display:flex;gap:13px;align-items:center;margin-top:15px;position:relative;z-index:1}
.ref-qrbox{width:132px;height:132px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;padding:9px;box-sizing:border-box}
.ref-qrbox img{width:100%;height:100%;display:block}
.ref-info{min-width:0;flex:1}
.ref-cap{font-size:10.5px;color:#B7D8CC;letter-spacing:.6px;display:block}
.ref-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:26px;font-weight:800;letter-spacing:3px;display:block;margin:7px 0;color:#fff;overflow-wrap:break-word}
.ref-hint{font-size:11.5px;color:#D9EBE2;display:block;line-height:1.55}
.ref-foot{margin-top:14px;padding-top:11px;border-top:1px solid rgba(255,255,255,.18);font-size:10.5px;color:rgba(255,255,255,.65);text-align:center;position:relative;z-index:1}
/* 常用功能横排三按钮 */
.me-quick3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.me-quick3 a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 6px;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(16,40,32,.04);transition:all .15s;display:block}
.me-quick3 a i{display:block;font-size:21px;margin-bottom:5px;font-style:normal}
.me-quick3 a b{display:block;font-size:12px;color:var(--ink-2);font-weight:700}
.me-quick3 a span{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.me-quick3 a:active{background:var(--brand-tint);border-color:var(--brand)}
.dark .me-quick3 a{background:#16261F;border-color:#23382F}
.dark .me-quick3 a b{color:#E4EFEA}
/* 通知偏好开关（真实落库） */
.np-toggle{display:block;width:36px;height:21px;border-radius:11px;background:#CBD8D2;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.np-toggle .np-dot{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.np-toggle.on{background:var(--brand)}
.np-toggle.on .np-dot{left:17.5px}
/* 空页面缺省态：撑满版心居中 */
.app-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;text-align:center;color:var(--muted)}
/* 订单页 banner：商务风渐变标题条 */
.orders-banner{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-radius:14px;padding:16px 16px;box-shadow:0 6px 18px -8px rgba(11,111,79,.4)}
.orders-banner b{display:block;font-size:16.5px;font-weight:800;letter-spacing:.3px}
.orders-banner span{display:block;font-size:11.5px;color:#B7D8CC;margin-top:4px}
.variant-pill{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.variant-pill.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark)}
.dark .variant-pill{background:#16261F;border-color:#23382F;color:#B7D8CC}
.dark .variant-pill.on{background:#23382F;border-color:var(--brand);color:#7CC49A}
.prod-detail img{max-width:100%;border-radius:8px}
.prod-detail p{margin:0 0 8px}
.prod-detail ul{padding-left:18px;margin:0 0 8px}
.app-hdr .brand .mark{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;letter-spacing:0}
.app-hdr .search{position:relative}
.app-hdr .search input{width:100%;padding:14px 15px 14px 40px;border-radius:12px;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:15px}
.app-hdr .search input::placeholder{color:#B7D8CC}
.app-hdr .search input:focus{outline:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.22)}
.app-hdr .search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.8}
.app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:16px}
.app-body{padding:16px calc(16px + env(safe-area-inset-right,0px)) 16px calc(16px + env(safe-area-inset-left,0px));min-width:0;max-width:560px;margin:0 auto;width:100%;box-sizing:border-box}
.app-sec{margin:18px 0}
.app-sec-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.app-sec-t b{font-size:15px;font-weight:700}
.app-sec-t a{font-size:12.5px;color:var(--brand);font-weight:600}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.4}
.quick a i{display:block;font-size:22px;margin-bottom:6px;font-style:normal}
.quick a:active{background:var(--brand-tint)}
.reorder{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.reorder .h{background:linear-gradient(135deg,var(--brand),var(--brand-mid));color:#fff;padding:13px 15px;display:flex;align-items:center;justify-content:space-between}
.reorder .h b{font-size:14px}
.reorder .h span{font-size:11.5px;background:rgba(255,255,255,.2);border-radius:9px;padding:3px 9px}
.reorder .bd{padding:13px 15px}
.reorder .rowline{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px}
.reorder .rowline .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reorder .rowline img{width:36px;height:36px;border-radius:7px;object-fit:contain;background:#fff;border:1px solid var(--line-2)}
.app-pc{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;align-items:center}
.app-pc img{width:72px;height:72px;border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--line-2);flex-shrink:0}
.app-pc .b{flex:1;min-width:0}
.app-pc b{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.app-pc .pr{font-size:15.5px;font-weight:800;color:var(--brand-dark);margin-top:4px;display:block}
.app-list{display:flex;flex-direction:column;gap:2px;background:var(--line-2);border-radius:12px;overflow:hidden}
.app-li{background:#fff;padding:14px 15px;display:flex;align-items:center;gap:12px}
.app-li i{font-style:normal;font-size:18px;width:22px;text-align:center}
.app-li .b{flex:1;min-width:0}
.app-li b{font-size:14px;display:block}
.app-li span{font-size:12px;color:var(--muted);display:block}
.app-li .r{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.app-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;box-shadow:var(--shadow);min-width:0}
/* 中英文宽度适配：长英文允许断行，防止撑破卡片/页面产生横向滚动 */
.app-card b,.app-card div,.app-li b,.app-kv b,.app-kv span{overflow-wrap:break-word;word-break:break-word;min-width:0}
.app-kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.app-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.app-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.app-stat b{font-size:21px;font-weight:800;display:block;letter-spacing:-.4px}
.app-stat span{font-size:11.5px;color:var(--muted)}
.app-stat.hl{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-color:var(--brand-dark)}
.app-stat.hl b,.app-stat.hl span{color:#fff}
.app-stat.hl span{color:#A8D2C2}
.tabbar{background:#fff;border-top:1px solid var(--line);padding:7px 0 10px;min-height:58px;flex-shrink:0;z-index:50;display:flex;position:relative;box-sizing:border-box}
/* 底部菜单：始终从「屏幕底部」向上排版 —— 先垫满 iPhone 小黑条安全区，再多留空隙，
   保证安卓手势条 / iOS Home Indicator 都不会压住菜单文字。constant() 供 iOS 11–11.2。 */
@supports (padding-bottom: constant(safe-area-inset-bottom)){
  .tabbar{padding-bottom:calc(12px + constant(safe-area-inset-bottom));min-height:calc(60px + constant(safe-area-inset-bottom))}
  .app-cta{padding-bottom:calc(14px + constant(safe-area-inset-bottom))}
}
@supports (padding-bottom: env(safe-area-inset-bottom)){
  .tabbar{padding-bottom:calc(12px + env(safe-area-inset-bottom));min-height:calc(60px + env(safe-area-inset-bottom))}
  .app-cta{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
.tabbar a{flex:1 1 0;text-align:center;color:var(--muted);font-size:11px;font-weight:600;padding:2px 1px;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;min-width:0;overflow:hidden;text-decoration:none;line-height:1.25}
/* 标签文字：中英文都可能超长（订单/Orders），一律省略号，绝不撑破布局 */
.tabbar a > span:not(.badge){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar a i{display:flex;align-items:center;justify-content:center;font-style:normal;line-height:0;flex-shrink:0}
.tabbar a.on{color:var(--brand)}
.tabbar a .badge{position:absolute;top:0;right:22%;font-size:10px;padding:0 5px}
.app-banner{background:linear-gradient(135deg,var(--acc),#B72E1B);color:#fff;border-radius:12px;padding:15px 17px;display:flex;gap:12px;align-items:center}
.app-banner .i{font-size:24px}
.app-banner b{font-size:14px;display:block}
.app-banner span{font-size:12px;color:#FBD9D2;display:block;margin-top:2px}
.app-banner.green{background:linear-gradient(135deg,var(--brand),var(--brand-dark))}
.app-banner.green span{color:#B7D8CC}
.app-banner.amber{background:linear-gradient(135deg,#D9A03A,#B7791F)}
.app-banner.amber span{color:#FBEBCF}
.app-cta{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px calc(15px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(15px + env(safe-area-inset-left,0px));display:flex;gap:10px;align-items:center}
.app-seg{display:flex;background:#EAEFEC;border-radius:10px;padding:4px;margin-bottom:14px}
.app-seg a{flex:1;text-align:center;padding:8px 4px;font-size:13px;font-weight:600;color:var(--ink-2);border-radius:8px;white-space:nowrap}
.app-seg a.on{background:#fff;color:var(--brand-dark);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 40px -12px rgba(0,0,0,.3);padding:18px 16px 22px;z-index:30;animation:up .22s ease}
@keyframes up{from{transform:translateY(100%)}}
.sheet .bar{width:36px;height:4px;background:var(--line);border-radius:3px;margin:0 auto 12px}
.barcode{height:52px;background:repeating-linear-gradient(90deg,#16211D 0 2px,#fff 2px 5px,#16211D 5px 6px,#fff 6px 9px);border-radius:4px}
.qr{width:132px;height:132px;margin:0 auto;background:
  repeating-conic-gradient(#16211D 0 25%,#fff 0 50%) 0 0/13px 13px;border:7px solid #fff;box-shadow:0 0 0 1px var(--line)}
.map-mock{height:118px;border-radius:10px;background:
  linear-gradient(#DCE8E2 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,#DCE8E2 1px,transparent 1px) 0 0/24px 24px,#F2F7F4;position:relative;overflow:hidden}
.map-mock .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:20px}
.map-mock .route{position:absolute;left:12%;right:14%;top:52%;height:3px;background:var(--brand);border-radius:2px;opacity:.65}
.dark .screen{background:#0F1A17}
.dark .app-hdr{background:linear-gradient(135deg,#0B4A37,#0E1F1A)}
.dark .app-body,.dark .app-section{color:#E4EFEA}
.dark .reorder,.dark .app-li,.dark .app-card,.dark .quick a,.dark .app-stat,.dark .sheet,.dark .tabbar,.dark .app-cta{background:#16261F;border-color:#23382F;color:#E4EFEA}
.dark .app-li b,.dark .app-card b,.dark .reorder b{color:#E4EFEA}
.dark .quick a{color:#B7D8CC}
.dark .app-pc{background:#16261F;border-color:#23382F}
.dark .app-pc b{color:#E4EFEA}
.dark .app-pc .pr{color:#7CC49A}
.dark .app-seg{background:#16261F}
.dark .app-seg a.on{background:#23382F;color:#7CC49A}
.dark .app-banner.green{background:linear-gradient(135deg,#0E7A57,#0B4A37)}
.dark .app-kv{color:#B7D8CC}
.dark .amt .box{background:#16261F;border-color:#23382F}
.dark .notice.ok{background:#123024;border-color:#1F6B45;color:#9FE0BC}
.dark .notice.warn{background:#33260F;border-color:#7A5A18;color:#F0C36D}
.dark .input,.dark input.t,.dark textarea.t,.dark select.t{background:#16261F;border-color:#23382F;color:#E4EFEA}

/* ---------------- 手机端分类正方形按钮 ---------------- */
.quick a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.4}
.quick a i{display:block;font-size:22px;margin-bottom:6px;font-style:normal}
.quick a:active{background:var(--brand-tint)}
/* 手机端分类格子——正方形 */
.app-sec .quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.app-sec .quick a{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:14px;padding:8px 6px;background:#fff;transition:all .15s;box-shadow:0 1px 4px rgba(16,40,32,.04);min-width:0}
.app-sec .quick a i{font-size:24px;margin-bottom:4px}
.app-sec .quick a b{font-size:12px;line-height:1.3;text-align:center;display:block;margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-sec .quick a span{font-size:10px;color:var(--muted);display:block;margin-top:2px}
.app-sec .quick a:active{background:linear-gradient(135deg,var(--brand-tint),#E8F4EF);border-color:var(--brand);transform:scale(.96)}
/* 全部商品分类页——Banner + 渐变按钮 */
.cat-banner{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-radius:14px;padding:24px 22px;color:#fff;margin-bottom:18px;position:relative;overflow:hidden}
.cat-banner::after{content:'';position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%)}
.cat-banner h2{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.cat-banner p{font-size:13.5px;color:#B7D8CC}
/* 一排三个：英文类名（如 "Disposables, Packaging & Paper"）比中文长得多，
   四列会把卡片挤到换行/横向溢出，三列在中英文下都稳定。 */
.cat-banner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.cat-banner-grid a{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:14px 10px;text-align:center;color:#fff;transition:all .15s;display:block}
.cat-banner-grid a i{font-size:28px;display:block;margin-bottom:6px}
.cat-banner-grid a b{font-size:12.5px;display:block;line-height:1.25;overflow-wrap:break-word}
.cat-banner-grid a small{font-size:10.5px;color:#B7D8CC;display:block;margin-top:2px;overflow-wrap:break-word}
.cat-banner-grid a:active{background:rgba(255,255,255,.22);transform:scale(.97)}

/* ---------------- 页面 banner（采购单 / 订单缺省页） ----------------
   源图 900×300（3:1），宽度自适应页面，高度按比例，不裁不变形。 */
.page-banner{display:block;width:100%;max-width:900px;aspect-ratio:3/1;height:auto;
  object-fit:cover;border-radius:14px;margin:0 auto 14px;box-shadow:0 6px 18px rgba(11,63,46,.13)}
@supports not (aspect-ratio:3/1){ .page-banner{height:110px} }

/* 顶部通栏 banner：突破 app-body 的 560px 上限与内边距，顶到屏幕边，
   采购单/订单页常态与空态都用它，让内容区视觉上占满手机全宽 */
.page-banner-top{display:block;width:calc(100% + 32px);max-width:none;aspect-ratio:3/1;height:auto;
  object-fit:cover;margin:-16px -16px 13px;border-radius:0}
@supports not (aspect-ratio:3/1){ .page-banner-top{height:120px} }

/* ---------------- 采购单 / 订单：窄屏防溢出 ----------------
   真机 360–400px 时，数量控件换行到下一行，卡片内边距收紧，
   保证任何宽度下都不会出现横向滚动条。 */
.cart-line{flex-wrap:nowrap;min-width:0}
.cart-line > .cart-img{flex-shrink:0}
.cart-line > .cart-txt{min-width:0;flex:1}
.cart-line > .cart-qty{flex-shrink:0}
@media (max-width:400px){
  .app-body{padding:12px calc(12px + env(safe-area-inset-right,0px)) 12px calc(12px + env(safe-area-inset-left,0px))}
  .app-card{padding:11px 12px}
  .app-stats{gap:8px}
  .app-stat{padding:11px 12px}
  .cart-line{flex-wrap:wrap}
  .cart-line > .cart-qty{order:3;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:8px;text-align:right}
  .stepper{max-width:96px}
  .page-banner-top{width:calc(100% + 24px);margin:-12px -12px 11px}
}
@media (max-width:360px){
  .app-body{padding:10px calc(10px + env(safe-area-inset-right,0px)) 10px calc(10px + env(safe-area-inset-left,0px))}
  .app-card{padding:10px}
  .stepper{max-width:84px}
  .tabbar a{font-size:10.5px}
  .orders-banner{padding:13px 14px}
  .orders-banner b{font-size:15px}
  .page-banner-top{width:calc(100% + 20px);margin:-10px -10px 10px}
}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:22px}
  .footer .cols{grid-template-columns:1fr 1fr}
  .co-grid{grid-template-columns:1fr}
  .summary{position:static}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;gap:0;overflow-x:auto;padding:8px}
  .side .brand,.side .grp{display:none}
  .side a{border-left:none;border-bottom:2.5px solid transparent;white-space:nowrap;padding:8px 12px}
  .side a.on{border-left:none;border-bottom-color:var(--brand-mid)}
}
@media (max-width:760px){
  .wrap{padding:0 14px}
  .hero h1{font-size:25px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .frow,.frow-3{grid-template-columns:1fr}
  .nav{top:auto;position:static}
  .header{position:static}
  .search{order:3;min-width:100%}
  .footer .cols{grid-template-columns:1fr}
  .zone-row{grid-template-columns:1fr 1fr;gap:6px}
  .phone{width:100%;max-width:392px}
  .phone .screen{height:680px}
  .catgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .pc-name{font-size:12.5px}
  .hscroll{grid-auto-columns:172px}
  .compare{font-size:12px}
}
@media print{.no-print{display:none}}

/* ---------- 真机 / PWA 模式 ----------
   手机访问或从桌面图标启动（standalone）时隐藏演示外壳，
   只保留真正的 App 界面（占满全屏），语言/后台按钮保留。

   高度链条用「100vh/100dvh 定根 + 100% 逐级继承」的方式锁死，
   让 .app-scroll 在中间滚动、tabbar 恒定贴底。
   关键：每一级 flex 子项都要 min-height:0，否则内容会撑破高度。 */
body.native{height:100%;height:100dvh;overflow:hidden;position:fixed;inset:0;width:100%;top:0;left:0}
body.native .app-stage{padding:0;height:100%;height:100dvh;background:#0B6F4F;overflow:hidden;display:flex;flex-direction:column}
/* 演示用的顶部跳转条在真机/PWA 下彻底不占位 */
body.native .app-top{display:none}
body.native .phones{flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start;flex:1;min-height:0;display:flex}
body.native .phone{width:100%;max-width:none;flex:1;min-height:0;display:flex;flex-direction:column}
body.native .phone .shell{border-radius:0;padding:0;box-shadow:none;background:transparent;min-height:0;flex:1;display:flex;flex-direction:column}
/* 关键修复：把 .screen 锁死为「占满剩余空间」，让内部的 .app-scroll 自己滚动，
   tabbar 始终贴在屏幕底部。之前的 min-height 方案在内容超一屏时会把 tabbar
   推到页面最底下（iOS Safari standalone 下尤其明显）。 */
body.native .phone .screen{border-radius:0;height:auto;min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
body.native .phone .notch{display:none}
body.native .phone .label{display:none}
body.native #side{display:none}
body.native .app-hdr{flex-shrink:0}
body.native .app-scroll{height:auto;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ---------- 底部菜单：改成「固定贴视口底部」 ----------
   之前的 flex 方案（把 tabbar 当作 .screen 的最后一个 flex 子项）在
   iOS Safari（地址栏伸缩、standalone）和部分安卓机型上，.screen 的计算高度
   会把 tabbar 下半截挤出可视区 → 表现就是「显示不全 / 被遮盖」。
   现在直接 fixed 到视口：无论浏览器工具栏怎么变，菜单都完整可见；
   图标文字靠 padding-bottom 从屏幕底部整体上抬（含安全区 + 额外空隙）。 */
body.native .tabbar{
  position:fixed;left:0;right:0;top:auto;bottom:0;
  padding:8px calc(4px + env(safe-area-inset-right, 0px)) 22px calc(4px + env(safe-area-inset-left, 0px));
  padding-bottom:calc(20px + constant(safe-area-inset-bottom, 0px));
  padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  min-height:0;box-sizing:border-box;flex-shrink:0;
  background:#fff;box-shadow:0 -6px 18px -8px rgba(0,0,0,.18);z-index:999;
}
body.native .dark .tabbar{background:#16261F}
/* 顶部 header 在刘海屏上避开状态栏区域（20px 基础 + safe-area） */
body.native .app-hdr{padding-top:calc(20px + env(safe-area-inset-top, 0px))}
/* 滚动区底部留出菜单高度，内容不会被压在菜单下面 */
body.native .app-scroll{padding-bottom:calc(78px + constant(safe-area-inset-bottom, 0px));padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px));overscroll-behavior:contain}
/* 吸底按钮（提交订单等）浮在菜单上方，不再被菜单盖住 */
body.native .app-cta{bottom:calc(66px + constant(safe-area-inset-bottom, 0px));bottom:calc(66px + env(safe-area-inset-bottom, 0px))}