*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0a0f1a; color: #f8fafc; min-height: 100dvh; }
button, input { font: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login-card { width: min(24rem, 100%); background: #111827; border: 1px solid #334155; border-radius: 1rem; padding: 1.5rem; }
.login-card h1 { color: #fbbf24; }
.login-card p { color: #94a3b8; font-size: .875rem; margin: .35rem 0 1rem; }
.login-card label { display: block; font-size: .75rem; font-weight: 600; margin-top: .75rem; }
.login-card input { width: 100%; margin-top: .25rem; padding: .65rem; border-radius: .5rem; border: 1px solid #475569; background: #020617; color: #fff; }
.btn { width: 100%; margin-top: 1rem; padding: .75rem; border-radius: .5rem; background: #d97706; color: #fff; font-weight: 700; }
.back { display: block; text-align: center; margin-top: .75rem; color: #64748b; font-size: .75rem; text-decoration: none; }
.error { color: #fca5a5; font-size: .8125rem; margin-top: .5rem; }

.kds-header { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #1e293b; background: #0f172a; }
.kds-header h1 { flex: 1; font-size: 1.125rem; }
.btn-sm { padding: .4rem .75rem; border-radius: .45rem; background: #1e293b; border: 1px solid #334155; font-size: .8125rem; }
.stations { display: flex; flex-wrap: wrap; gap: .35rem; padding: .75rem 1rem; }
.station-pill { font-size: .68rem; padding: .2rem .55rem; border-radius: 999px; background: #422006; color: #fcd34d; border: 1px solid #78350f; }
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; padding: 1rem; }
.ticket-card { background: #111827; border: 1px solid #334155; border-radius: .75rem; padding: 1rem; border-left: 4px solid #f59e0b; }
.ticket-head { margin-bottom: .65rem; }
.ticket-num { font-family: monospace; font-size: .75rem; color: #94a3b8; }
.ticket-order { display: block; font-weight: 700; font-size: 1.05rem; margin-top: .15rem; }
.ticket-station { font-size: .75rem; color: #fbbf24; }
.ticket-card ul { list-style: none; font-size: .9375rem; line-height: 1.5; }
.ticket-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.status { font-size: .72rem; color: #94a3b8; text-transform: uppercase; }
.btn-ready { padding: .45rem .85rem; border-radius: .45rem; background: #059669; color: #fff; font-weight: 600; font-size: .8125rem; }
.empty { grid-column: 1 / -1; text-align: center; color: #64748b; padding: 3rem; }
.toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); padding: .65rem 1rem; border-radius: .5rem; background: #1e293b; border: 1px solid #475569; z-index: 50; }
.toast.ok { border-color: #10b981; }
.toast.error { border-color: #ef4444; }