* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: -apple-system, system-ui, sans-serif; }
body { display: flex; flex-direction: column; background: #f3f4f6; }

#topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #111827; color: #fff; flex-wrap: wrap;
}
#event-name { font-weight: 700; font-size: 18px; }
#type-banner { padding: 4px 10px; border-radius: 999px; background: #374151; font-size: 14px; }
#type-banner.alert { background: #b91c1c; font-weight: 700; }
#counter-label { font-size: 14px; opacity: .85; }
.nav-btn { margin-left: auto; background: #374151; color: #fff; border: 0; padding: 10px 14px; border-radius: 10px; font-size: 15px; }
.nav-btn + .nav-btn { margin-left: 8px; }

#type-selector { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; }
#type-selector button {
  flex: 0 0 auto; padding: 12px 18px; font-size: 17px; border: 2px solid #d1d5db;
  background: #fff; border-radius: 12px;
}
#type-selector button.active { border-color: #111827; background: #111827; color: #fff; font-weight: 700; }

#product-grid {
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; padding: 16px; overflow-y: auto; align-content: start;
}
.product-btn {
  min-height: 110px; border: 0; border-radius: 18px; color: #fff;
  font-size: 22px; font-weight: 700; padding: 12px; cursor: pointer;
}
.product-btn:active { filter: brightness(.85); }
.category-title { grid-column: 1 / -1; margin: 8px 0 0; font-size: 14px; color: #6b7280; text-transform: uppercase; }

#bottom-bar { padding: 12px 16px; background: #fff; border-top: 1px solid #e5e7eb; }
#btn-reprint { width: 100%; padding: 16px; font-size: 18px; border-radius: 14px; border: 2px solid #374151; background: #fff; }
#btn-reprint:disabled { opacity: .4; }

#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  padding: 14px 22px; border-radius: 12px; color: #fff; font-size: 17px; font-weight: 700; z-index: 50;
}
#toast.ok { background: #16a34a; }
#toast.err { background: #b91c1c; }
.hidden { display: none !important; }

.screen {
  position: fixed; inset: 0; background: #fff; z-index: 100; padding: 16px; overflow-y: auto;
}
.screen header { display: flex; justify-content: space-between; align-items: center; }
.screen label { display: block; margin: 14px 0; font-size: 16px; }
.screen input, .screen select { width: 100%; padding: 12px; font-size: 17px; margin-top: 6px; }
.screen button { padding: 14px 18px; font-size: 16px; border-radius: 12px; border: 0; background: #111827; color: #fff; }
.screen button.danger { background: #b91c1c; display: block; width: 100%; margin-top: 10px; }

#confirm-dialog { border: 0; border-radius: 16px; padding: 22px; max-width: 90vw; }
#confirm-dialog::backdrop { background: rgba(0,0,0,.5); }
#confirm-dialog p { font-size: 17px; margin: 0 0 18px; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-actions button { flex: 1; padding: 14px; font-size: 16px; border-radius: 12px; border: 0; background: #374151; color: #fff; }
.confirm-actions button.danger { background: #b91c1c; }