:root {
  --brand: #4FC3DC;
  --brand-dark: #2BA6C2;
  --ink: #20303a;
  --muted: #8a9aa6;
  --line: #e6edf1;
  --bg: #f4f7f9;
  --ok: #34c759;
  --warn: #ff9500;
  --danger: #ff3b30;
  --radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink); background: var(--bg);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* 品牌 header */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo-emoji { font-size: 30px; line-height: 1; }
.brand-logo-img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background: #fff; }
.brand-text { line-height: 1.1; }
.brand-name { font-size: 22px; font-weight: 800; }
.brand-sub { font-size: 11px; opacity: .8; font-weight: 500; margin-top: 2px; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(30px);
  background: #222d34; color: #fff; padding: 12px 22px; border-radius: 30px; font-size: 15px;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 9999; max-width: 80vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.error { background: #c0392b; }
#toast.ok { background: #2e9e57; }

/* 通用按鈕 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; background: #eef2f4; color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* modal 通用 */
.modal-mask { position: fixed; inset: 0; background: rgba(20,30,40,.45); display: flex;
  align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 460px; max-height: 92vh;
  overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }

.spinner { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill.pending { background: #fff3e0; color: #e07b00; }
.pill.received { background: #e3f2fd; color: #1565c0; }
.pill.completed { background: #e8f5e9; color: #2e7d32; }
.pill.printed { background: #fdecea; color: #c62828; }
.pill.unpaid { background: #fdecea; color: #c62828; }
.pill.paid { background: #fdecea; color: #c62828; }

/* ---- 統一訂單明細列 (購物車 / 確認訂單 / POS明細) ---- */
.oline { line-height: 1.55; }
.oline + .oline { margin-top: 10px; }
.oline-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.oline-head { font-size: 17px; }
.oline-q { font-weight: 800; }
.oline-name { font-weight: 800; }
.oline-meta { font-weight: 600; opacity: .75; font-size: 15px; }
.oline-tag { font-weight: 600; opacity: .85; font-size: 15px; margin-left: 6px; }
.oline-amt { font-weight: 800; white-space: nowrap; font-size: 17px; }
.oline-extra { font-size: 14px; opacity: .8; padding-left: 2px; }
.oline-combo { font-size: 14px; opacity: .9; margin-top: 3px; }
.oline-sel { font-size: 14px; opacity: .8; padding-left: 22px; }
.oline-note { opacity: .9; padding-left: 2px; margin-top: 2px; }