:root { color-scheme: light dark; --edge: #8884; --accent: #b4561d; }
body { font: 17px/1.6 system-ui, sans-serif; margin: 0; }
main { max-width: 38rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.lede, .hint { opacity: 0.7; }
.menu { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.menu li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--edge); padding: 0.4rem 0; }
.menu input { width: 4.5rem; }
form { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.25rem; font-weight: 600; }
input, textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--edge); border-radius: 6px; }
button { font: inherit; padding: 0.6rem 1.1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; justify-self: start; }
.total { font-size: 1.15rem; margin: 0; }
code { word-break: break-all; }
#state { min-height: 1.5rem; margin: 0; }

body.kitchen { background: #14110f; color: #f4efe9; }
.tickets { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.tickets > li { background: #241d19; border: 1px solid #4a3d33; border-radius: 10px; padding: 1rem; }
.tickets h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.tickets ul { padding-left: 1.2rem; margin: 0 0 0.75rem; }