* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; }
.wrap {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.top { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; }
.top img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; }
.cafe { font-weight: 700; font-size: 16px; }
.sheet { background: var(--card); color: var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 50px -24px var(--shadow); }
.pager { --hero: var(--accent); --hero-ink: var(--accent-ink); background: var(--hero); color: var(--hero-ink); padding: 20px 20px 34px; text-align: center; position: relative; transition: background .3s; }
.pager::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 12px;
  background: radial-gradient(circle at 8px 12px, var(--card) 7px, transparent 7.5px) 0 0 / 16px 12px repeat-x; }
.hero-label { margin: 18px 0 0; font-size: 16px; opacity: .8; font-weight: 600; }
.tk { margin-top: 4px; }
.tk .num { display: block; font-size: clamp(88px, 30vw, 128px); font-weight: 800; line-height: 1.1; direction: ltr; font-variant-numeric: tabular-nums; }
.pager.done { filter: grayscale(.85); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---- ready: full green screen, number in a white disc ---- */
.sheet:has(.pager.ringing) { background: var(--ready); color: var(--night); }
.pager.ringing { background: transparent !important; color: var(--night) !important; padding-bottom: 8px; }
.pager.ringing::after, .pager.ringing .hero-label { display: none; }
.pager.ringing .tk { width: min(62vw, 230px); aspect-ratio: 1; margin: 26px auto 10px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--night); animation: ringpulse 1.1s ease-out infinite; }
.pager.ringing .tk .num { font-size: clamp(72px, 24vw, 104px); }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); } 100% { box-shadow: 0 0 0 28px rgba(255,255,255,0); } }
.sheet:has(.pager.ringing) .panel { color: var(--night); }
.sheet:has(.pager.ringing) .sub { color: var(--night); opacity: .8; }
.sheet:has(.pager.ringing) .title { font-size: 34px; font-weight: 800; }
.sheet:has(.pager.ringing) .btn { background: var(--night); color: #fff; }
.btn.link { background: transparent; color: inherit; text-decoration: underline; font-weight: 600; font-size: 15px; padding: 8px; }
@media (prefers-reduced-motion: reduce) { .pager.ringing .tk { animation: none; } }


/* ---- panel ---- */
.panel { padding: 22px 20px 24px; text-align: center; }
.title { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.sub:empty { display: none; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.actions:empty { display: none; }
.btn {
  appearance: none; border: 0; border-radius: 14px; padding: 15px 18px;
  font-size: 17px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .12s ease, opacity .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.btn.ok { background: var(--ready); color: var(--ready-ink); }
.btn svg { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); margin: 14px auto 0; }
.chip.warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }

.steps { text-align: right; margin: 14px 0 0; padding: 0 22px 0 0; line-height: 2; font-size: 15px; }
.ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--link); }
.note { margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--bg); font-size: 14px; color: var(--muted); line-height: 1.7; text-align: right; }
.note b { color: var(--ink); }

.sheet { display: flex; flex-direction: column; min-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.panel { flex: 1; display: flex; flex-direction: column; }
.foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; }
.foot img { width: 22px; height: 22px; border-radius: 6px; }

/* ---- entry: "what is your bill number?" ---- */
.hero-entry { display: none; }
.pager.entry { text-align: start; padding: 18px 26px 44px; }
.pager.entry .top { justify-content: flex-start; }
.pager.entry .tk, .pager.entry .hero-label { display: none; }
.pager.entry .hero-entry { display: block; margin-top: 26px; }
.hero-entry h1 { margin: 0 0 8px; font-size: clamp(34px, 11vw, 46px); font-weight: 800; line-height: 1.2; }
.hero-entry p { margin: 0; font-size: 18px; opacity: .75; }
.sheet:has(.pager.entry) .panel > .title, .sheet:has(.pager.entry) .panel > .sub { display: none; }
.sheet:has(.pager.entry) .panel { padding: 22px 28px 20px; }
.sheet:has(.pager.entry) .btn { background: var(--night); color: #fff; width: 100%; padding: 20px; font-size: 20px; border-radius: 20px; }
.inv-input { display: block; width: 100%; border: 0; border-bottom: 5px solid var(--night); border-radius: 0; background: transparent; color: var(--night); text-align: center; direction: ltr; font: inherit; font-size: clamp(84px, 28vw, 118px); font-weight: 800; line-height: 1.2; padding: 10px 0 4px; outline: 0; font-variant-numeric: tabular-nums; }
.inv-input::placeholder { color: color-mix(in srgb, var(--night) 16%, transparent); }
.inv-hint { margin: 12px 0 0; color: var(--called); font-weight: 600; text-align: center; min-height: 1.6em; }
.entry-note { margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 16px; }
@media (prefers-color-scheme: dark) { .inv-input { color: var(--ink); border-bottom-color: var(--ink); } .inv-input::placeholder { color: color-mix(in srgb, var(--ink) 18%, transparent); } .sheet:has(.pager.entry) .btn { background: var(--accent); color: var(--accent-ink); } }

/* ---- app: other active orders ---- */
.others { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.others:empty { display: none; }
.mini {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; color: var(--ink);
}
.mini.sel { border-color: var(--ink); }
.mini .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.mini.ready .dot { box-shadow: 0 0 0 3px var(--accent); }
.mini b { font-variant-numeric: tabular-nums; }
.mini small { color: var(--muted); }

/* ---- app: code entry ---- */
.code-row { display: flex; gap: 8px; margin-top: 4px; }
.code-row input {
  flex: 1; min-width: 0; text-align: center; font-size: 24px; letter-spacing: 6px; direction: ltr;
  padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.code-row .btn { padding: 10px 16px; font-size: 15px; }
.err { color: var(--red); font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.err:empty { display: none; }

/* ---- app: scanner ---- */
.scanner { position: fixed; inset: 0; background: #000; z-index: 50; display: flex; flex-direction: column; }
.scanner video { flex: 1; width: 100%; object-fit: cover; min-height: 0; }
.scanner .frame {
  position: absolute; left: 50%; top: 45%; width: min(70vw, 280px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 24px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); outline: 3px solid rgba(255,255,255,.9);
}
.scanner .bar {
  position: absolute; inset: auto 0 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; align-items: center; color: #fff; text-align: center;
}
.scanner .bar p { margin: 0; font-size: 15px; }
.scanner .btn.ghost { color: #fff; border-color: rgba(255,255,255,.4); width: 100%; max-width: 360px; }

/* ---- end-of-order button (café's own link) ---- */
.btn.cta { text-decoration: none; width: 100%; }
.cta-icon { display: inline-flex; }
.cta-icon svg { width: 22px; height: 22px; }

/* ---- queue progress (waiting screen) ---- */
.queue-box { margin-bottom: 18px; padding: 16px; border-radius: 18px; background: var(--bg); text-align: center; }
.queue-ahead { font-size: 28px; font-weight: 800; line-height: 1.3; }
.queue-ahead.next { color: var(--ok); }
.queue-last { margin-top: 6px; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }