/* 代买代拍：两端共用样式。用户定：固定白色底，不跟随深色模式。 */
:root{
  --bg:#ffffff; --surface:#ffffff; --sunk:#f2f4f8; --ink:#16213a; --muted:#646f8a; --line:#dbe1ec;
  --brand:#1f3fa8; --brand-ink:#ffffff; --brand-soft:#e3e9fb;
  --tag:#ffd43b; --tag-ink:#3a2e00;
  --ok:#17794b; --ok-soft:#dcf3e6; --warn:#a85a06; --warn-soft:#fdeed6; --bad:#b93426; --bad-soft:#fbe2de;
  --num:"Space Grotesk","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --text:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
img{max-width:100%}

.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h2{font-size:16px;margin:0;text-wrap:balance}
.sub{color:var(--muted);font-size:13px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.any{overflow-wrap:anywhere}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;background:var(--sunk);padding:9px 10px;font-size:15px;color:var(--ink);width:100%}
.field textarea{min-height:76px;resize:vertical}
.btn{border:0;border-radius:8px;padding:11px 14px;background:var(--brand);color:var(--brand-ink);font-weight:600;font-size:15px}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.block{width:100%}
.linkbtn{border:0;background:none;color:var(--brand);padding:0;font-size:13px;text-decoration:underline}
.linkbtn.bad{color:var(--bad)}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--sunk);border-radius:8px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;color:var(--muted);padding:7px 0;border-radius:6px;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);font-weight:600}

.fees{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fees div{background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.fees span{font-size:12px;color:var(--muted)}
.fees b{font-family:var(--num);font-size:16px;font-variant-numeric:tabular-nums}

.thumb{width:64px;height:64px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;text-align:center;line-height:1.2;padding:2px;overflow:hidden}
.ttl{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.yen{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700}
.price{display:inline-block;background:var(--tag);color:var(--tag-ink);padding:1px 8px;border-radius:3px;font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}
.bill{display:flex;flex-direction:column;gap:6px;font-size:13px;border-top:1px dashed var(--line);padding-top:10px}
.bill .row{justify-content:space-between}
.bill .sum{font-size:15px;font-weight:700;border-top:1px solid var(--line);padding-top:8px}

.pill{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap;font-weight:600}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.brand{background:var(--brand-soft);color:var(--brand)}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;align-items:center}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:13px;white-space:nowrap;color:var(--muted)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.check{width:20px;height:20px;accent-color:var(--brand);flex:none}
.empty{text-align:center;color:var(--muted);padding:28px 0;font-size:14px}
.note{font-size:12px;color:var(--muted);background:var(--sunk);border-radius:8px;padding:8px 10px}
.pics{display:flex;gap:6px;flex-wrap:wrap}
.pics img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;font-size:14px;max-width:86vw;text-align:center;z-index:20}