:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f172a;
  color: #e5e7eb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #312e81, transparent 35%), #0f172a; }
a { color: #67e8f9; text-decoration: none; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 108px; }
.card { background: rgba(15, 23, 42, 0.82); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 24px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 20px; }
.hero-actions { display: grid; gap: 10px; justify-items: end; }
h1 { font-size: clamp(2.3rem, 6vw, 5rem); line-height: .9; margin: 6px 0 12px; letter-spacing: -0.08em; }
h2 { margin-top: 0; }
.eyebrow { color: #22d3ee; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 800; }
.table-badge { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 22px; border-radius: 18px; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.35); }
.table-badge span { color: #aab8ca; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.table-badge strong { font-size: 1.3rem; }
.grid { display: grid; gap: 20px; margin-bottom: 20px; }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #cbd5e1; }
input { width: 100%; border: 1px solid #334155; background: #020617; color: #fff; border-radius: 14px; padding: 12px 14px; }
button, .button-like { border: 0; border-radius: 999px; padding: 12px 18px; background: #334155; color: #fff; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
button:hover, .button-like:hover { filter: brightness(1.15); }
.primary { background: linear-gradient(135deg, #22d3ee, #8b5cf6); color: #020617; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.buzz-status { border: 1px solid rgba(248, 250, 252, .25); background: rgba(2, 6, 23, .45); border-radius: 16px; padding: 12px 14px; font-weight: 800; }
.buzz-status.on { border-color: #22c55e; background: rgba(22, 101, 52, .32); color: #dcfce7; }
.ready-banner { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); z-index: 10; display: grid; gap: 5px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(135deg, #22c55e, #06b6d4); color: #02111f; box-shadow: 0 24px 80px rgba(0,0,0,.42); animation: pulse-ready 1s ease-in-out infinite alternate; }
.ready-banner strong { font-size: 1.15rem; }
@keyframes pulse-ready { from { scale: 1; } to { scale: 1.025; } }
.accent { background: linear-gradient(135deg, rgba(14,116,144,.55), rgba(88,28,135,.55)); }
.tiny, small { color: #aab8ca; }
.menu-list { display: grid; gap: 12px; }
.touch-menu-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; border: 1px solid #334155; padding: 12px; border-radius: 20px; background: rgba(2,6,23,.55); transition: border-color .15s, transform .15s, background .15s; }
.touch-menu-item.selected { border-color: #22d3ee; background: rgba(8, 145, 178, .22); }
.add-tap { border-radius: 16px; justify-content: flex-start; text-align: left; background: transparent; padding: 0; min-height: 82px; }
.item-copy { display: grid; gap: 5px; }
.item-copy strong { font-size: 1.05rem; }
.item-copy b { color: #a5f3fc; }
.qty-controls { display: grid; grid-template-columns: 54px 44px 54px; align-items: center; gap: 6px; }
.qty-controls button { min-height: 54px; min-width: 54px; padding: 0; font-size: 1.7rem; border-radius: 18px; }
.qty-controls .add { background: #0891b2; }
.qty-controls .remove { background: #7f1d1d; }
.qty-controls button:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.qty-controls strong { text-align: center; font-size: 1.35rem; color: #fff; }
.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity, .staff-list { display: grid; gap: 12px; }
.line, .ticket { border: 1px solid #334155; background: rgba(2,6,23,.72); padding: 14px; border-radius: 18px; display: grid; gap: 8px; }
.line.ready, .ticket.ready { border-color: #22c55e; box-shadow: 0 0 0 1px rgba(34,197,94,.25); }
.ticket.pending { border-color: #f59e0b; }
.ticket.alert { border-color: #38bdf8; }
.line.closed { opacity: .55; }
.pill { background: rgba(34,211,238,.16); border: 1px solid rgba(34,211,238,.35); color: #a5f3fc; border-radius: 999px; padding: 4px 10px; font-size: .82rem; text-transform: uppercase; }
ul { padding-left: 20px; margin: 0; }
li { margin: 7px 0; }
.empty { color: #aab8ca; border: 1px dashed #475569; border-radius: 18px; padding: 16px; }
.buzz-badge { display: inline-flex; width: fit-content; border-radius: 999px; padding: 6px 11px; font-weight: 900; font-size: .86rem; }
.buzz-badge.idle { background: rgba(100,116,139,.22); color: #cbd5e1; border: 1px solid #475569; }
.buzz-badge.pending { background: rgba(245,158,11,.18); color: #fde68a; border: 1px solid #f59e0b; animation: pulse-opacity .8s ease-in-out infinite alternate; }
.buzz-badge.sent { background: rgba(34,197,94,.18); color: #bbf7d0; border: 1px solid #22c55e; }
@keyframes pulse-opacity { from { opacity: .72; } to { opacity: 1; } }
.done { color: #86efac; font-weight: 800; }
.pitch li { color: #cbd5e1; }

.connection-pill { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30; background: #7c2d12; color: #fed7aa; border: 1px solid #f97316; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: .85rem; box-shadow: 0 12px 30px rgba(0,0,0,.35); }

.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px min(24px, 5vw); background: rgba(15, 23, 42, 0.95); border-top: 1px solid rgba(148, 163, 184, 0.24); backdrop-filter: blur(12px); }
.cart-bar #cartSummary { font-weight: 800; }

.toast-root { position: fixed; top: 16px; right: 16px; z-index: 40; display: grid; gap: 10px; max-width: min(360px, calc(100% - 32px)); }
.toast { padding: 12px 16px; border-radius: 14px; background: rgba(15, 23, 42, .95); border: 1px solid rgba(148,163,184,.3); font-weight: 700; box-shadow: 0 16px 40px rgba(0,0,0,.35); animation: toast-in .18s ease-out; }
.toast-success { border-color: #22c55e; color: #dcfce7; }
.toast-error { border-color: #ef4444; color: #fecaca; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.banner-dismiss { position: absolute; top: 10px; right: 12px; background: rgba(2,6,23,.25); width: 28px; height: 28px; border-radius: 999px; padding: 0; font-weight: 900; color: inherit; }
.confirm-banner { background: linear-gradient(135deg, #22d3ee, #22c55e); }

.login-panel { max-width: 420px; margin: 15vh auto 0; text-align: left; }
.error-text { color: #fca5a5; font-weight: 700; }

#soundToggle[data-on="1"] { background: #0891b2; }

.ticket.stale { border-color: #f97316; box-shadow: 0 0 0 1px rgba(249,115,22,.3); }
.ticket.completed { opacity: .6; }
.completed-group { margin-top: 10px; }
.completed-group summary { cursor: pointer; color: #aab8ca; font-weight: 800; padding: 6px 0; }

@media (max-width: 760px) {
  .hero, .two { grid-template-columns: 1fr; display: grid; }
  .qr-card { width: 100%; height: 120px; }
  .touch-menu-item { grid-template-columns: 1fr; }
  .qty-controls { grid-template-columns: 64px 1fr 64px; }
  .qty-controls button { min-height: 60px; min-width: 60px; }
}