*, *::before, *::after { box-sizing: border-box; margin: 0; }
body { background: var(--ink); color: var(--text); font: 400 16px/1.4 var(--body); min-height: 100vh; }
h1, h2 { font-family: var(--head); font-weight: 600; }
button, input { font: inherit; }
.hdr { background: var(--oxford); border-bottom: 1px solid var(--blue); padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.logo { background: #fff; border-radius: 999px; padding: 2px 14px; display: inline-flex; }
.logo img { height: 46px; width: 46px; object-fit: contain; }
.hdr h1 { font-size: 24px; flex: 1; color: #fff; }
.btn { background: var(--btn); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; cursor: pointer; min-height: 44px; }
.btn.ghost { background: var(--oxford); }
.btn.gold { background: var(--gold); color: #1A1204; }
.btn:disabled { opacity: .5; cursor: default; }
.field { display: block; width: 100%; background: var(--panel2); border: 1.5px solid #2A5A56; border-radius: 12px; padding: 12px; color: var(--text); margin: 8px 0; }
a:focus-visible, button:focus-visible, .field:focus-visible, .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bar { padding: 8px 16px; font-size: 14px; font-weight: 600; text-align: center; }
.bar.warn { background: #ffdede; color: #8a1c1c; }
.bar.info { background: var(--panel2); color: var(--text); }
.bar button { background: none; border: 0; color: var(--teal); font-weight: 700; text-decoration: underline; cursor: pointer; }
[hidden] { display: none !important; }
.ph { background: #fff3b0; color: #5a4a00; padding: 0 6px; border-radius: 4px; font-size: .8em; font-weight: 700; }   /* "stand-in": a value the hotel has not confirmed */

/* Staff screens (kitchen, waiter, manager, owner): same header, bigger touch targets, clearer tabs, no motion */
.hdr { border-bottom: 2px solid var(--gold); }
.tabs button { min-height: 48px; font-size: 15px; }
.tabs button[aria-selected="true"] { background: var(--panel2); }
.btn.small { min-height: 44px; }
.empty { border: 1px dashed var(--line); border-radius: 14px; margin: 14px 12px; }
#charges:empty::before, #accounts:empty::before, #log:empty::before, #guests:empty::before { content: 'Loading…'; display: block; text-align: center; color: var(--muted); padding: 40px 16px; }
#items > .btn { margin: 4px 3px; }
.card { border-color: #2A5A56; }

/* The one motion on staff screens: a new order card slides up softly and its gold outline fades. Plain CSS, no animation library. */
.fresh { animation: slidein .35s ease-out, glow 3s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(12px); } }
@keyframes glow { from { outline: 2px solid var(--gold, #E3B23C); } to { outline: 2px solid transparent; } }
@media (prefers-reduced-motion: reduce) { .fresh { animation: glow 3s ease-out; } }