/* Czech it Out 捷嗑一下 - shared styles */
:root {
  --black: #0b0b0b;
  --ink: #1f2a17;
  --ink-2: #4b5443;
  --muted: #7b8271;
  --cream: #f7f1e3;
  --paper: #fffdf7;
  --line: #e4dccb;
  --green: #3e5a2b;
  --green-2: #4f7a2e;
  --gold: #d9ac4f;
  --gold-2: #a87a22;
  --gold-grad: linear-gradient(135deg, #f3d27a 0%, #d9ac4f 45%, #a87a22 100%);
  --red: #b5302a;
  --ok: #2f7d32;
  --warn: #b26a00;
  --bad: #b5302a;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(31, 42, 23, .06), 0 4px 14px rgba(31, 42, 23, .07);
  --font: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--cream); color: var(--ink); -webkit-tap-highlight-color: transparent; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.price { color: var(--red); font-weight: 700; white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.num { font-variant-numeric: tabular-nums; }

/* buttons */
.btn { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 10px 18px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.gold { background: var(--gold-grad); border-color: transparent; color: var(--black); }
.btn.danger { background: var(--paper); color: var(--bad); border-color: #e7b9b5; }
.btn.line { background: #06c755; border-color: #06c755; color: #fff; }
.btn.block { width: 100%; }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: .9rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 1.2rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* chips / badges */
.badge { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #ece5d3; color: var(--ink-2); white-space: nowrap; }
.badge.soldout { background: #f3dcd9; color: var(--bad); }
.badge.ok { background: #dcefdc; color: var(--ok); }
.badge.warn { background: #f8e9cf; color: var(--warn); }
.badge.bad { background: #f3dcd9; color: var(--bad); }
.badge.gold { background: var(--gold-grad); color: var(--black); }

/* forms */
label.f { display: block; margin: 10px 0; font-size: .9rem; color: var(--ink-2); }
label.f > span { display: block; margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=url], select, textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 12px; min-height: 44px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 1px; }

/* header */
.topbar { background: var(--black); color: #f3e3bc; display: flex; align-items: center; gap: 12px; padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
.topbar .logo { width: 46px; height: 46px; border-radius: 10px; }
.topbar .brand { line-height: 1.1; }
.topbar .brand b { display: block; font-size: 1.05rem; letter-spacing: .5px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .brand small { color: #c9b98f; font-size: .78rem; }
.topbar .btn, .topbar .iconbtn { background: transparent; color: #f3e3bc; border-color: #4a412c; }

.langtoggle { display: inline-flex; border: 1px solid #4a412c; border-radius: 999px; overflow: hidden; }
.langtoggle button { background: transparent; border: 0; color: #c9b98f; padding: 6px 12px; min-height: 36px; font-weight: 700; }
.langtoggle button.on { background: var(--gold-grad); color: var(--black); }

/* cards */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 16px; }

/* bottom sheet / modal */
.overlay { position: fixed; inset: 0; background: rgba(11, 11, 11, .45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--paper); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: up .18s ease-out; }
@media (min-width: 700px) { .overlay { align-items: center; } .sheet { border-radius: 20px; } }
@keyframes up { from { transform: translateY(30px); } to { transform: none; } }
.sheet h2 { margin: 0 0 4px; font-size: 1.3rem; }
.sheet .close { float: right; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--black); color: #f3e3bc; padding: 12px 18px; border-radius: 12px; z-index: 80; max-width: 90vw; box-shadow: var(--shadow); }
.toast.bad { background: var(--bad); color: #fff; }

/* option groups */
.ogroup { margin: 16px 0; }
.ogroup h4 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; text-align: left; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
.opt small { color: var(--muted); }
.opt.on { border-color: var(--green); background: #eef4e7; box-shadow: inset 0 0 0 1px var(--green); }
.opt:disabled { opacity: .45; text-decoration: line-through; }
.qty { display: inline-flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; }

/* tables */
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.t th, table.t td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.t th { color: var(--ink-2); font-weight: 600; background: #f3ecdb; position: sticky; top: 0; }
table.t td.r, table.t th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }
a.btn { text-decoration: none; color: inherit; }
a.btn.line, a.btn.primary { color: #fff; }
.topbar .brand small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }