.mock-banner { background: #ffd54f; color: #3a2e00; text-align: center; font-weight: 700; padding: 6px 16px; position: sticky; top: 0; z-index: 90; }
.mock-banner[hidden] { display: none; }
.page { padding-bottom: 96px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topbar .btn, .topbar button { width: auto; }
.nav { display: flex; gap: 8px; }
.nav .btn { width: auto; }

.floor { display: flex; flex-direction: column; gap: 8px; }
.floor-title { margin: 0; font-size: 1rem; color: var(--muted); }
.floor-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 84px; padding: 8px 4px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--card); color: var(--fg); text-decoration: none; text-align: center; font-size: 0.8125rem; line-height: 1.25;
}
.tile strong { font-size: 1.125rem; }
.tile-busy { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.tile-empty { color: var(--muted); }
@media (min-width: 720px) {
  .page { max-width: 960px; }
  .floor { flex-direction: row; align-items: stretch; }
  .floor-title { width: 64px; align-self: center; flex: none; }
  .floor-tiles { flex: 1; }
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row > .grow { flex: 1; min-width: 0; }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 48px; min-width: 48px; padding: 0; font-size: 1.25rem; }
.qty span { min-width: 2ch; text-align: center; font-weight: 700; }
.items-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.items-grid button { flex-direction: column; gap: 0; min-height: 64px; }
.total { font-size: 1.25rem; font-weight: 700; }

.radio-row { display: flex; gap: 8px; }
.radio-row label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer;
}
.radio-row input { width: auto; min-height: 0; }
.pay-row { display: flex; gap: 8px; }
.pay-row button { flex: 1; }
.pay-row .selected { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.field { display: flex; flex-direction: column; gap: 4px; }

table.rev { width: 100%; border-collapse: collapse; }
table.rev th, table.rev td { padding: 8px 4px; border-bottom: 1px solid var(--border); text-align: right; }
table.rev th:first-child, table.rev td:first-child { text-align: left; }
table.rev tfoot td { font-weight: 700; }

.dialog-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 110; }
.dialog { max-width: 420px; width: 100%; }
.dialog .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dialog .actions button { flex: 1; }