/* 掃碼點餐:共用樣式。色票沿用 /beauty/ 的紙色 DEMO 系列。 */
:root{
  --paper:#f6f4ee;--paper-2:#ecebe3;--card:#fffdf8;--ink:#14110d;--ink-soft:#3d3a33;--muted:#7a766b;--rule:#d6d2c4;
  --accent:#1a3d2e;--accent-soft:#d8e2db;--copper:#b8895a;--warn:#a8452f;--warn-soft:#f3dcd4;--hl:#fbf0c9;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --z-bar:20;--z-sheet:40;--z-toast:60;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:6px;z-index:var(--z-toast)}
.skip:focus{left:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .1s,border-color .2s}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2);border-color:var(--ink)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;border-radius:8px}
.btn.danger{background:transparent;color:var(--warn);border-color:var(--warn)}
.btn.danger:hover{background:var(--warn-soft)}
.link{background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px;padding:6px 2px}
.link.warn{color:var(--warn)}

.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field small{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.inp{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--rule);border-radius:8px;background:#fff;font-size:16px;transition:border-color .2s}
.inp:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{min-height:200px;line-height:1.6;resize:vertical}
.err{color:var(--warn);font-size:14px;margin:8px 0;min-height:1.4em}
.hint{color:var(--muted);font-size:14px}
.note{background:var(--hl);border-radius:8px;padding:10px 14px;font-size:14px;margin:12px 0}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:var(--z-toast);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── 店家端外框 ── */
.top{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:12px clamp(14px,3vw,32px);border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:var(--z-bar)}
.top .shop{font-weight:700;font-size:17px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.tabs{display:flex;gap:4px;order:3;width:100%;overflow-x:auto}
.tabs a{padding:8px 14px;border-radius:8px;text-decoration:none;font-size:15px;color:var(--ink-soft);white-space:nowrap;transition:background .2s}
.tabs a:hover{background:var(--paper-2)}
.tabs a.on{background:var(--ink);color:var(--paper);font-weight:600}
@media(min-width:760px){.tabs{order:0;width:auto}.top .shop{margin-right:12px;max-width:20em}.top .sp{margin-left:auto}}
.wrap{max-width:1240px;margin:0 auto;padding:20px clamp(14px,3vw,32px) 80px}
.wrap.narrow{max-width:560px}
.wrap.mid{max-width:860px}
h1.pg{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
p.pg{color:var(--ink-soft);font-size:15px;margin-bottom:20px;max-width:40em}

/* ── 菜單編輯器 ── */
.ed-cat{border:1px solid var(--rule);border-radius:14px;background:var(--card);margin-bottom:18px;overflow:hidden}
.ed-cat-h{display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--paper-2)}
.ed-cat-h .inp{font-weight:700;max-width:14em;min-height:40px}
.ed-cat-h .sp{margin-left:auto}
.ed-item{border-top:1px solid var(--rule);padding:10px 12px}
.ed-row{display:grid;grid-template-columns:minmax(0,1fr) 92px auto;gap:8px;align-items:center}
.ed-row .inp{min-height:40px}
.ed-row .price.miss{background:var(--hl);border-color:var(--copper)}
.ed-tools{display:flex;gap:2px 10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.ed-tools label{font-size:14px;display:inline-flex;gap:6px;align-items:center;min-height:36px;cursor:pointer}
.ed-tools .sp{margin-left:auto}
.ed-more{margin-top:8px;padding:12px;background:var(--paper);border-radius:10px}
.ed-grp{display:grid;grid-template-columns:7em 9.5em minmax(0,1fr) auto;gap:8px;margin-bottom:8px;align-items:center}
.ed-grp .inp{min-height:40px;font-size:15px}
@media(max-width:640px){.ed-grp{grid-template-columns:1fr 1fr}.ed-grp .ch{grid-column:1/-1}.ed-row{grid-template-columns:minmax(0,1fr) 84px}.ed-row .x{grid-column:1/-1;justify-self:end}}
.ed-add{padding:10px 12px;border-top:1px solid var(--rule)}
.savebar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--rule);padding:12px 0;display:flex;gap:14px;align-items:center;z-index:var(--z-bar)}
.savebar .hint{margin-right:auto}