@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --paper: #e9e5db;
  --paper-raised: #f4f1ea;
  --ink: #20231f;
  --muted: #6f6a60;
  --line: #c8c1b5;
  --accent: #355444;
  --accent-strong: #294234;
  --accent-ink: #f7f4ed;
  --warm: #8e3f2f;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 10px 24px rgba(28, 31, 27, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

button { font: inherit; }

header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(233, 229, 219, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.title-row { display: flex; align-items: center; gap: 10px; }
.title { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.req-counter {
  min-width: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff6f2;
  background: var(--warm);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}
.req-counter.zero { display: none; }

.list { width: min(100%, 680px); margin: 0 auto; padding: 22px 24px 40px; }

.alert-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  color: #fff8f3;
  touch-action: pan-y;
  box-shadow: var(--shadow-soft);
}
.alert-card.type-bill { background: var(--warm); }
.alert-card.type-waiter { background: var(--accent); }
.alert-card.urgent-glow { animation: alertPulse 1.6s ease-in-out infinite; }

@keyframes alertPulse {
  0% { box-shadow: 0 0 0 0 rgba(142, 63, 47, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(142, 63, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(142, 63, 47, 0); }
}

.alert-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 18px;
  background: inherit;
  transition: transform 0.05s linear;
}
.alert-left { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.alert-icon { display: grid; place-items: center; flex: 0 0 auto; opacity: 0.9; }
.alert-type {
  margin-bottom: 3px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
}
.alert-table { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.alert-time { margin-top: 3px; font-size: 11px; line-height: 1.4; opacity: 0.78; }

.ack-btn,
.serve-btn {
  min-height: 42px;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ack-btn {
  color: #fff8f3;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.45);
}
.ack-btn:active { background: rgba(255,255,255,0.22); }

.swipe-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.card-left { flex: 1; min-width: 0; }
.card-order { margin: 7px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.card-items { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff2ec;
  background: var(--warm);
  font-size: 9px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.serve-btn { border: 0; color: var(--accent-ink); background: var(--accent); }
.serve-btn:active { background: var(--accent-strong); }

.empty {
  padding: 32px 20px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.history-row,
.served-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.history-row .h-type { display: flex; align-items: center; gap: 8px; color: var(--ink); }