:root {
  --bg: #1d1612; --panel: #fffaf3; --ink: #2b211b; --muted: #8a7b70; --line: #e5dbd0;
  --brand: #3b2a20; --accent: #b86b2b; --ok: #2f9e5f; --warn: #e67e22; --late: #d63031;
  --cold: #1e6fd9; --hot: #d63031;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: #f6efe6; font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, input { font: inherit; }
.dim { opacity: .6; }
.error { color: #ff8a80; min-height: 1.2em; }

.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login form { background: var(--panel); color: var(--ink); padding: 32px; border-radius: 16px; width: min(360px, 100%); text-align: center; }
.login h1 { margin: 0; }
.login input { width: 100%; font-size: 1.5rem; text-align: center; padding: 12px; margin: 16px 0 12px; border: 1px solid var(--line); border-radius: 10px; }
.login button { width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 1.1rem; font-weight: 700; }

.bar-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #120d0a; border-bottom: 1px solid #3a2d24; }
.bar-top h1 { margin: 0; font-size: 1.2rem; }
.bar-top .spacer { flex: 1; }
.pill { padding: 4px 12px; border-radius: 20px; background: var(--accent); color: #fff; font-weight: 700; }
.pill.dim { background: #3a2d24; color: #d8c8b8; opacity: 1; font-weight: 400; }
.pill.warn { background: var(--late); }
.start { border: 0; border-radius: 10px; padding: 10px 16px; background: var(--ok); color: #fff; font-weight: 700; cursor: pointer; }
.clock { font-variant-numeric: tabular-nums; font-size: 1.2rem; opacity: .8; }

.summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: #2a201a; border-bottom: 1px solid #3a2d24; }
.summary b { background: #3a2d24; padding: 6px 12px; border-radius: 8px; font-weight: 400; }
.summary b i { font-style: normal; font-weight: 800; color: #ffcf8a; margin-left: 6px; }

.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 12px 12px 90px; align-items: start; }
.empty { text-align: center; font-size: 1.4rem; opacity: .6; padding: 60px 16px; }

.tk { background: var(--panel); color: var(--ink); border-radius: 14px; overflow: hidden; border-top: 10px solid var(--ok); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.tk.warn { border-top-color: var(--warn); }
.tk.late { border-top-color: var(--late); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(214,48,49,.45); } }
.tk-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tk-head .no { font-size: 1.9rem; font-weight: 800; color: var(--brand); }
.tag { font-size: .8rem; padding: 2px 8px; border-radius: 6px; background: #efe5da; }
.tag.online { background: #e3f2fd; color: #1565c0; }
.tag.where { background: var(--brand); color: #fff; }
.tk-head .timer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem; }
.tk.warn .timer { color: var(--warn); }
.tk.late .timer { color: var(--late); }

.tk ul { list-style: none; margin: 0; padding: 4px 0; }
.tk li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px dashed var(--line); cursor: pointer; user-select: none; }
.tk li:last-child { border-bottom: 0; }
.tk li .qty { min-width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: #efe5da; }
.tk li .qty.many { background: var(--accent); color: #fff; }
.tk li .nm { font-size: 1.25rem; line-height: 1.45; font-weight: 600; }
.chip { display: inline-block; font-size: .95rem; padding: 1px 8px; margin-left: 4px; border-radius: 6px; font-weight: 800; vertical-align: 2px; }
.chip.size { background: var(--brand); color: #fff; }
.chip.cold { background: var(--cold); color: #fff; }
.chip.hot { background: var(--hot); color: #fff; }
.chip.opt { background: #ffe0b2; color: #8a4b00; }
.tk li.ok { opacity: .4; }
.tk li.ok .nm { text-decoration: line-through; }
.tk li.ok .qty { background: var(--ok); color: #fff; }
.tk li.ok .qty::before { content: '✓'; }
.tk li.ok .qty span { display: none; }
.note { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: #fff3e0; color: #a3470a; font-weight: 700; font-size: 1.05rem; }
.bump { display: block; width: calc(100% - 24px); margin: 4px 12px 12px; min-height: 56px; border: 0; border-radius: 12px; background: var(--ok); color: #fff; font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.bump:disabled { opacity: .5; }

.recent { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #120d0a; border-top: 1px solid #3a2d24; overflow-x: auto; }
.recent-list { display: flex; gap: 8px; }
.recent-list button { flex: 0 0 auto; border: 1px solid #4a3a2e; background: #2a201a; color: #f6efe6; border-radius: 10px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }

.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--ok); color: #fff; padding: 12px 22px; border-radius: 12px; z-index: 20; font-weight: 700; }
.summary .chip.size { background: #f6efe6; color: #1d1612; }