body.pager-body {
  --pager-teal: #015559;
  --pager-aqua: #84d1cc;
  --pager-aqua-soft: #4faaa7;
  --pager-ink: #071218;
  --pager-panel: #0d1a1d;
  --pager-panel-raised: #112326;
  --pager-paper: #eeeae0;
  --pager-muted: #9aaead;
  --pager-line: rgba(132, 209, 204, .22);
  color: var(--pager-paper);
  background: var(--pager-ink);
}

.pager-main { min-height: calc(100svh - 80px); padding: 0 78px 42px 28px; }
.pager-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); gap: clamp(26px, 6vw, 88px); align-items: center; min-height: min(700px, calc(100svh - 80px)); padding: clamp(36px, 7vw, 90px) clamp(12px, 4vw, 52px) 64px; border-bottom: 1px solid var(--pager-line); }
.pager-hero-copy { max-width: 690px; }
.pager-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--pager-aqua); font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.pager-live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pager-aqua); box-shadow: 0 0 0 4px rgba(132, 209, 204, .12), 0 0 18px rgba(132, 209, 204, .65); animation: pager-dot-pulse 2.6s ease-in-out infinite; }
.pager-title { margin: 0; color: var(--pager-paper); font: 800 clamp(58px, 10vw, 142px)/.82 'Syne', var(--sans); letter-spacing: -.075em; }
.pager-title em { color: var(--pager-aqua); font-style: normal; }
.pager-lead { max-width: 490px; margin: 28px 0 0; color: #c2cecc; font: 400 16px/1.75 var(--sans); }
.pager-lead-ar { margin-top: 8px; color: var(--pager-muted); font: 500 16px/1.9 'IBM Plex Sans Arabic', sans-serif; }
.pager-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pager-button-primary { background: var(--pager-teal) !important; color: #fff !important; border-color: var(--pager-teal) !important; }
.pager-button-primary:hover { background: #0a7175 !important; border-color: #0a7175 !important; color: #fff !important; }
.pager-signal-card { position: relative; display: grid; min-height: 390px; place-items: center; overflow: hidden; border: 1px solid var(--pager-line); background: radial-gradient(circle at 50% 49%, rgba(1, 85, 89, .38), transparent 47%), linear-gradient(145deg, rgba(16, 43, 46, .8), rgba(7, 18, 24, .45)); isolation: isolate; }
.pager-signal-card::before, .pager-signal-card::after { position: absolute; inset: 0; z-index: -1; content: ''; pointer-events: none; }
.pager-signal-card::before { opacity: .26; background-image: linear-gradient(rgba(132,209,204,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(132,209,204,.12) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at center, #000, transparent 75%); }
.pager-signal-card::after { background: linear-gradient(135deg, transparent 45%, rgba(132,209,204,.11) 50%, transparent 55%); transform: translateX(-100%); animation: pager-sweep 7s ease-in-out infinite; }
.pager-signal-ring { position: absolute; left: 50%; top: 44%; width: min(72%, 270px); aspect-ratio: 1; border: 1px solid rgba(132,209,204,.25); border-radius: 50%; transform: translate(-50%,-50%); }
.pager-signal-ring--two { width: min(49%, 184px); border-color: rgba(132,209,204,.42); }
.pager-signal-center { position: absolute; left: 50%; top: 44%; display: flex; width: 102px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(132,209,204,.55); border-radius: 50%; background: var(--pager-teal); box-shadow: 0 0 48px rgba(1,85,89,.65); transform: translate(-50%,-50%); }
.pager-signal-mark { color: #fff; font: 800 36px/1 'Syne', sans-serif; }
.pager-signal-caption { color: #d9f0ee; font: 500 7px var(--mono); letter-spacing: .1em; }
.pager-signal-meta { position: absolute; right: 16px; bottom: 15px; left: 16px; display: flex; justify-content: space-between; gap: 8px; color: var(--pager-muted); font: 500 8px var(--mono); letter-spacing: .08em; }
.pager-signal-ar { position: absolute; top: calc(44% + 82px); margin: 0; color: var(--pager-aqua); font: 500 13px 'IBM Plex Sans Arabic', sans-serif; }
.pager-how { padding: clamp(48px, 8vw, 96px) clamp(12px, 4vw, 52px) 26px; }
.pager-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.pager-section-head .pager-eyebrow { align-self: flex-start; }
.pager-section-head h2 { max-width: 670px; margin: 0; color: var(--pager-paper); font: 700 clamp(28px, 4.5vw, 58px)/1.08 'Syne', var(--sans); letter-spacing: -.05em; }
.pager-section-head h2 em { color: var(--pager-aqua); font-style: normal; }
.pager-section-number { display: inline-grid; width: 27px; height: 23px; place-items: center; border: 1px solid var(--pager-line); color: var(--pager-aqua); font: 500 8px var(--mono); }
.pager-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pager-line); border-bottom: 1px solid var(--pager-line); }
.pager-step { min-height: 230px; padding: 24px 28px 24px 0; }
.pager-step + .pager-step { padding-left: 26px; border-left: 1px solid var(--pager-line); }
.pager-step-index { color: var(--pager-aqua-soft); font: 500 10px var(--mono); }
.pager-step h3 { margin: 18px 0 12px; color: var(--pager-paper); font: 700 17px 'Syne', var(--sans); letter-spacing: .08em; }
.pager-step p { max-width: 330px; margin: 0 0 8px; color: #bac8c6; font: 400 12px/1.75 var(--sans); }
.pager-step p[lang="ar"] { color: var(--pager-muted); font: 400 13px/1.85 'IBM Plex Sans Arabic', sans-serif; }
.pager-footnote { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 22px; margin-top: 24px; padding: 20px 0; }
.pager-footnote-mark { color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .1em; }
.pager-footnote p { margin: 0; color: var(--pager-muted); font: 400 11px/1.7 var(--sans); }
.pager-footnote a, .pager-footer a, .pager-back-link { color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .08em; text-decoration: none; }
.pager-footnote a:hover, .pager-footer a:hover, .pager-back-link:hover { color: #fff; }
.pager-footer { border-top: 1px solid var(--pager-line); }

.pager-staff-main { padding-top: 42px; padding-bottom: 60px; }
.pager-panel { border: 1px solid var(--pager-line); background: linear-gradient(145deg, rgba(17,35,38,.88), rgba(10,25,28,.94)); }
.staff-login { max-width: 670px; margin: 26px auto 72px; padding: clamp(24px, 5vw, 54px); }
.pager-staff-title { font-size: clamp(48px, 8vw, 92px); }
.pager-staff-title em { color: var(--pager-aqua); }
.pager-form { display: grid; gap: 11px; margin-top: 25px; }
.pager-form label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .1em; }
.pager-form label span { color: var(--pager-muted); font: 400 11px 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
.pager-form input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(132,209,204,.3); border-radius: 0; outline: 0; background: rgba(4,14,17,.55); color: var(--pager-paper); font: 500 15px var(--sans); }
.pager-form input:focus { border-color: var(--pager-aqua); box-shadow: 0 0 0 3px rgba(132,209,204,.11); }
.pager-action-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid var(--pager-line); border-radius: 0; background: transparent; color: var(--pager-paper); font: 600 9px var(--mono); letter-spacing: .1em; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.pager-action-button:hover { border-color: var(--pager-aqua); transform: translateY(-1px); }
.pager-action-button:disabled { opacity: .55; cursor: wait; transform: none; }
.pager-button-quiet { color: var(--pager-muted); }
.pager-message { min-height: 20px; margin: 4px 0 0; color: var(--pager-aqua); font: 500 12px/1.6 var(--sans); }
.pager-muted { color: var(--pager-muted); font: 400 11px/1.7 var(--sans); }
.pager-muted[lang="ar"] { font: 400 12px/1.8 'IBM Plex Sans Arabic', sans-serif; }
.pager-ar-copy { display: block; margin-top: 6px; color: var(--pager-muted); font: 400 12px/1.8 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; text-align: right; text-transform: none; }
.pager-ar-inline { color: var(--pager-aqua); font: 500 11px/1.6 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; text-transform: none; }
.pager-bilingual-button { position: relative; flex-direction: column; gap: 2px; padding-top: 6px; padding-bottom: 6px; }
.pager-bilingual-button > [aria-hidden="true"] { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.pager-board-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.pager-board-header .pager-eyebrow { margin-bottom: 12px; }
.pager-board-title { margin: 0; color: var(--pager-paper); font: 700 clamp(30px, 5vw, 56px)/1 'Syne', var(--sans); letter-spacing: -.05em; }
.pager-board-title span { color: var(--pager-aqua); }
.pager-staff-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(280px, 1.2fr); gap: 16px; margin: 22px 0 26px; align-items: stretch; }
.pager-create-panel, .pager-qr-panel, .pager-queue-panel { padding: clamp(18px, 2.5vw, 28px); }
.pager-create-panel h2, .pager-qr-panel h2, .pager-queue-panel h2 { margin: 0 0 17px; color: var(--pager-paper); font: 650 21px 'Syne', var(--sans); }
.pager-create-panel .pager-muted { margin: 18px 0 0; }
.pager-qr-panel[hidden], .pager-dashboard[hidden] { display: none !important; }
.pager-qr-panel { display: flex; flex-direction: column; align-items: flex-start; }
.pager-qr-number { margin: -7px 0 12px; color: var(--pager-aqua); font: 700 22px 'Syne', var(--sans); }
.pager-qr-image { display: block; width: min(230px, 100%); aspect-ratio: 1; padding: 10px; background: #fff; object-fit: contain; }
.pager-customer-link { display: block; max-width: 100%; overflow-wrap: anywhere; margin: 12px 0 6px; color: var(--pager-aqua); font: 400 10px/1.5 var(--mono); }
.pager-qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pager-queue-panel { margin-top: 10px; }
.pager-queue-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pager-queue-heading .pager-eyebrow { margin-bottom: 10px; }
.pager-queue-heading h2 { margin-bottom: 0; }
.pager-queue-count { padding: 7px 10px; border: 1px solid var(--pager-line); color: var(--pager-aqua); font: 500 9px var(--mono); white-space: nowrap; }
.pager-order-list { display: grid; gap: 9px; margin-top: 18px; }
.pager-order-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px 18px; padding: 14px; border: 1px solid rgba(132,209,204,.16); background: rgba(3,14,17,.36); }
.pager-order-card[data-status="ready"] { border-color: rgba(132,209,204,.45); }
.pager-order-number { margin: 0; color: var(--pager-paper); font: 700 18px 'Syne', var(--sans); }
.pager-order-meta { margin: 5px 0 0; color: var(--pager-muted); font: 400 10px var(--mono); }
.pager-order-state { justify-self: end; padding: 6px 8px; border: 1px solid var(--pager-line); color: var(--pager-aqua); font: 500 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.pager-order-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 7px; }
.pager-order-actions .pager-action-button { min-height: 34px; padding: 0 10px; font-size: 8px; }
.pager-empty { margin: 0; padding: 18px; border: 1px dashed var(--pager-line); color: var(--pager-muted); font: 400 12px/1.6 var(--sans); text-align: center; }

.pager-ticket-header { display: flex; min-height: 52px; align-items: center; gap: 16px; border-bottom: 1px solid var(--pager-line); }
.pager-ticket-header .brand { width: 55px; min-width: 55px; height: 52px; }
.pager-ticket-header-name { flex: 1; color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .1em; }
.pager-back-link { padding-right: 16px; }
.pager-ticket-main { display: grid; min-height: calc(100svh - 102px); place-items: center; padding: 35px 24px; }
.pager-ticket-card { position: relative; width: min(100%, 560px); padding: clamp(24px, 6vw, 56px); border: 1px solid var(--pager-line); background: radial-gradient(ellipse at 50% 0, rgba(1,85,89,.28), transparent 48%), var(--pager-panel); text-align: center; }
.pager-ticket-card .pager-eyebrow { justify-content: center; }
.pager-ticket-label { margin: 30px 0 4px; color: var(--pager-muted); font: 500 9px var(--mono); letter-spacing: .18em; }
.pager-ticket-number { margin: 0 0 26px; color: var(--pager-paper); font: 800 clamp(52px, 12vw, 82px)/1 'Syne', var(--sans); letter-spacing: -.06em; }
.pager-status-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--pager-line); background: rgba(1,85,89,.12); text-align: left; }
.pager-status-card[data-status="ready"] { border-color: var(--pager-aqua); background: rgba(1,85,89,.45); }
.pager-status-card[data-status="collected"] { border-color: rgba(132,209,204,.4); }
.pager-status-beacon { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--pager-aqua); box-shadow: 0 0 0 6px rgba(132,209,204,.13); }
.pager-status-card[data-status="ready"] .pager-status-beacon { animation: pager-dot-pulse .9s ease-in-out infinite; }
.pager-status-title { margin: 0; color: var(--pager-paper); font: 650 17px 'Syne', var(--sans); }
.pager-status-ar { margin: 5px 0 0; color: var(--pager-aqua); font: 500 15px 'IBM Plex Sans Arabic', sans-serif; }
.pager-ticket-help { margin: 19px 0; color: var(--pager-muted); font: 400 12px/1.7 var(--sans); }
.pager-ticket-card .pager-action-button { width: 100%; }
.pager-last-updated { min-height: 18px; margin: 12px 0 0; color: var(--pager-muted); font: 400 9px var(--mono); }
.pager-ticket-home { display: inline-block; margin-top: 24px; color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .09em; text-decoration: none; }
.pager-ticket-footer { display: flex; justify-content: space-between; gap: 14px; padding: 16px 24px; border-top: 1px solid var(--pager-line); color: var(--pager-muted); font: 500 8px var(--mono); letter-spacing: .08em; }
.pager-ticket-footer [lang="ar"] { font: 400 11px 'IBM Plex Sans Arabic', sans-serif; }

body.light-theme.pager-body { --pager-ink: #edf2ef; --pager-panel: #f8faf8; --pager-panel-raised: #fff; --pager-paper: #10292a; --pager-muted: #4e6968; --pager-line: rgba(1,85,89,.24); color: var(--pager-paper); background: var(--pager-ink); }
body.light-theme .pager-signal-card { background: radial-gradient(circle at 50% 49%, rgba(1,85,89,.12), transparent 47%), linear-gradient(145deg, #e7f1ee, #f4f7f4); }
body.light-theme .pager-signal-card::before { opacity: .2; }
body.light-theme .pager-signal-caption { color: #e2f4f2; }
body.light-theme .pager-lead, body.light-theme .pager-step p { color: #3c5958; }
body.light-theme .pager-panel, body.light-theme .pager-ticket-card { background-color: var(--pager-panel); }
body.light-theme .pager-form input { background: #fff; color: #10292a; }
body.light-theme .pager-order-card { background: rgba(1,85,89,.035); }

@keyframes pager-dot-pulse { 50% { opacity: .55; box-shadow: 0 0 0 8px rgba(132,209,204,.06), 0 0 22px rgba(132,209,204,.75); } }
@keyframes pager-sweep { 0%, 24% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }

@media (max-width: 850px) {
  .pager-main { padding-right: 48px; }
  .pager-hero { grid-template-columns: minmax(0,1fr) minmax(220px,.8fr); gap: 22px; padding-right: 16px; padding-left: 16px; }
  .pager-signal-card { min-height: 330px; }
  .pager-section-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .pager-step { padding-right: 16px; }
  .pager-step + .pager-step { padding-left: 16px; }
  .pager-staff-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .pager-main { padding: 0 12px 34px; }
  .pager-hero { grid-template-columns: 1fr; min-height: auto; gap: 32px; padding: 58px 8px 36px; }
  .pager-title { font-size: clamp(44px, 13.2vw, 62px); }
  .pager-lead { font-size: 14px; }
  .pager-signal-card { min-height: 290px; }
  .pager-how { padding: 48px 8px 15px; }
  .pager-section-head h2 { font-size: clamp(27px, 8vw, 40px); }
  .pager-steps { grid-template-columns: 1fr; }
  .pager-step { min-height: auto; padding: 19px 0; }
  .pager-step + .pager-step { padding-left: 0; border-top: 1px solid var(--pager-line); border-left: 0; }
  .pager-footnote { grid-template-columns: 1fr; gap: 10px; }
  .pager-staff-main { padding-top: 24px; }
  .staff-login { margin: 18px 0 44px; padding: 22px; }
  .pager-staff-title { font-size: clamp(42px, 11vw, 50px); }
  .pager-board-header { align-items: flex-start; flex-direction: column; }
  .pager-staff-grid { grid-template-columns: 1fr; }
  .pager-create-panel, .pager-qr-panel, .pager-queue-panel { padding: 18px; }
  .pager-queue-heading { align-items: flex-start; flex-direction: column; }
  .pager-order-card { grid-template-columns: minmax(0,1fr); }
  .pager-order-state { justify-self: start; }
  .pager-ticket-header { min-height: 48px; }
  .pager-ticket-header .brand { height: 48px; }
  .pager-ticket-header-name { font-size: 7px; letter-spacing: .04em; }
  .pager-back-link { padding-right: 8px; font-size: 7px; }
  .pager-ticket-main { min-height: calc(100svh - 92px); padding: 25px 18px; }
  .pager-ticket-card { padding: 25px 18px; }
  .pager-status-card { padding: 14px; }
  .pager-ticket-footer { padding: 13px 18px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .pager-live-dot, .pager-signal-card::after, .pager-status-card[data-status="ready"] .pager-status-beacon { animation: none !important; }
}
@media print {
  @page { margin: 16mm; }
  body.pager-staff-body * { visibility: hidden !important; }
  body.pager-staff-body #qrPrintCard,
  body.pager-staff-body #qrPrintCard * { visibility: visible !important; }
  body.pager-staff-body #qrPrintCard { position: fixed; inset: 0; display: flex !important; width: 100%; min-height: 100vh; align-items: center; justify-content: center; border: 0; background: #fff; color: #071218; box-shadow: none; }
  body.pager-staff-body #qrPrintCard .pager-eyebrow,
  body.pager-staff-body #qrPrintCard .pager-qr-number,
  body.pager-staff-body #qrPrintCard .pager-customer-link { color: #071218; }
  body.pager-staff-body #qrPrintCard .pager-qr-actions { display: none; }
}

body.pager-body [hidden] { display: none !important; }
.pager-scan-section { display: grid; grid-template-columns: minmax(220px,.68fr) minmax(0,1.32fr); gap: clamp(24px,5vw,68px); align-items: start; padding: clamp(40px,7vw,76px) clamp(12px,4vw,52px); border-bottom: 1px solid var(--pager-line); }
.pager-scan-heading .pager-eyebrow { margin-bottom: 14px; }
.pager-scan-heading h2 { margin: 0; color: var(--pager-paper); font: 700 clamp(27px,4vw,47px)/1.08 'Syne',var(--sans); letter-spacing: -.05em; }
.pager-scan-heading h2 em { color: var(--pager-aqua); font-style: normal; }
.pager-scan-heading > p:last-child { color: var(--pager-muted); font: 400 14px/1.9 'IBM Plex Sans Arabic',sans-serif; }
.pager-scan-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.78fr); gap: 14px; }
.pager-scan-camera, .pager-scan-manual { min-width: 0; padding: 17px; border: 1px solid var(--pager-line); background: linear-gradient(145deg,rgba(17,35,38,.82),rgba(10,25,28,.94)); }
.pager-scan-video-wrap { position: relative; display: grid; min-height: 190px; place-items: center; overflow: hidden; border: 1px solid rgba(132,209,204,.15); background: #02090b; }
.pager-scan-video-wrap video { display: block; width: 100%; max-height: 330px; aspect-ratio: 4 / 3; object-fit: cover; }
.pager-scan-placeholder { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--pager-muted); font: 400 11px var(--mono); }
.pager-scan-placeholder span:first-child { color: var(--pager-aqua); font-size: 42px; line-height: 1; }
.pager-scan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pager-scan-actions .pager-action-button { flex: 1 1 auto; }
.pager-scan-camera .pager-message { min-height: 38px; margin-top: 9px; }
.pager-scan-manual h3 { margin: 0; color: var(--pager-paper); font: 650 18px 'Syne',var(--sans); }
.pager-scan-manual > p { color: var(--pager-muted); font: 400 11px/1.7 var(--sans); }
.pager-scan-manual .pager-form { margin-top: 15px; }
.pager-upload-label { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; color: var(--pager-aqua); font: 500 9px var(--mono); letter-spacing: .08em; }
.pager-upload-label span { color: var(--pager-muted); font: 400 11px 'IBM Plex Sans Arabic',sans-serif; letter-spacing: 0; }
.pager-file-input { width: 100%; margin-top: 9px; color: var(--pager-muted); font: 400 10px var(--sans); }
.pager-file-input::file-selector-button { min-height: 34px; margin-right: 8px; padding: 0 10px; border: 1px solid var(--pager-line); background: transparent; color: var(--pager-paper); font: 500 9px var(--mono); }
.pager-scan-manual .pager-muted { margin-top: 11px; }
.pager-message.is-error { color: #ffb7a9; }
.pager-ticket-confirm { margin: -15px 0 24px; color: var(--pager-aqua); font: 500 13px/1.7 'IBM Plex Sans Arabic',sans-serif; }
.pager-confirm-ticket-button { width: 100%; margin: 0 0 20px; }
.pager-ticket-controls { display: grid; gap: 8px; }
.pager-ticket-controls button { width: 100%; }
.pager-push-note { margin: 15px 0 0; color: var(--pager-muted); font: 400 10px/1.75 var(--sans); text-align: left; }
.pager-push-note span { display: block; }
.pager-push-note [lang="ar"] { margin-top: 7px; color: var(--pager-aqua); font: 400 11px/1.85 'IBM Plex Sans Arabic',sans-serif; text-align: right; }

@media (max-width: 850px) {
  .pager-scan-section { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .pager-scan-section { padding: 40px 8px 34px; }
  .pager-scan-tools { grid-template-columns: 1fr; }
  .pager-scan-video-wrap, .pager-scan-placeholder { min-height: 170px; }
  .pager-scan-camera, .pager-scan-manual { padding: 14px; }
  .pager-ticket-controls { gap: 7px; }
  .pager-ticket-controls .pager-action-button { min-height: 46px; padding: 7px 10px; font-size: 8px; line-height: 1.5; }
  .pager-push-note { font-size: 9px; }
}


/* Café readability refinement for customer and staff Pager controls. */
.pager-panel, .pager-ticket-card, .pager-order-card, .pager-scan-camera, .pager-scan-manual { border-radius: 6px; }
.pager-action-button {
  min-height: 44px;
  border-radius: 4px;
  font: 600 10.5px/1.35 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: .04em;
}
.pager-action-button:hover { border-color: #bd8b5d; }
.pager-form label { font-size: 10px; letter-spacing: .07em; }
.pager-form label span, .pager-upload-label span { font-size: 12px; }
.pager-file-input { font-size: 11px; }
.pager-file-input::file-selector-button { border-radius: 4px; font-size: 10px; }
.pager-queue-count { font-size: 10px; }
.pager-order-state { font-size: 9px; }
.pager-order-meta { font-size: 11px; }
.pager-order-actions .pager-action-button { min-height: 40px; padding: 4px 11px; font-size: 10px; }
.pager-step p { font-size: 13px; }
.pager-step p[lang="ar"] { font-size: 14px; }
.pager-muted { font-size: 12px; }
.pager-muted[lang="ar"] { font-size: 13px; }
.pager-scan-manual > p { font-size: 12px; }
.pager-back-link, .pager-ticket-home { font-size: 10px; }
.pager-push-note { font-size: 11px; }
.pager-push-note [lang="ar"] { font-size: 12px; }
.pager-footer a, .pager-footnote a { font-size: 10px; }
body.light-theme.pager-body {
  --pager-ink: #f2ece1;
  --pager-panel: #faf6ee;
  --pager-panel-raised: #fffaf2;
  --pager-paper: #29251f;
  --pager-muted: #695f52;
  --pager-line: rgba(1, 85, 89, .24);
}
body.light-theme .pager-panel, body.light-theme .pager-ticket-card, body.light-theme .pager-scan-camera, body.light-theme .pager-scan-manual { background-color: #faf6ee; }
@media (max-width: 620px) {
  .pager-action-button { min-height: 44px; font-size: 10px; }
  .pager-order-actions .pager-action-button { font-size: 9.5px; }
  .pager-ticket-controls .pager-action-button { min-height: 48px; font-size: 9.5px; }
  .pager-back-link { font-size: 9px; }
}


/* Quiet content hierarchy for the FIUM PAGER customer and staff screens. */
.pager-panel, .pager-ticket-card, .pager-order-card, .pager-scan-camera, .pager-scan-manual { border-radius: 8px; }
.pager-action-button { min-height: 44px; border-radius: 6px; font: 600 11px/1.45 'Manrope', 'IBM Plex Sans Arabic', sans-serif; letter-spacing: .03em; }
.pager-action-button:hover { border-color: #2b989a; background-color: rgba(1, 85, 89, .14); }
.pager-action-button:focus-visible, .pager-back-link:focus-visible, .pager-ticket-home:focus-visible { outline: 2px solid #2b989a; outline-offset: 3px; }
.pager-hero { min-height: min(580px, calc(100svh - 80px)); padding-top: clamp(34px, 5vw, 64px); padding-bottom: clamp(34px, 5vw, 64px); }
.pager-scan-section { grid-template-columns: minmax(190px, .56fr) minmax(0, 1.44fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.pager-scan-heading h2 { max-width: 12ch; }
.pager-scan-tools { grid-template-columns: minmax(0, 1fr) 34px minmax(220px, .82fr); gap: 12px; align-items: stretch; }
.pager-scan-camera, .pager-scan-manual { display: flex; min-height: 100%; flex-direction: column; padding: 18px; border-radius: 8px; border-color: var(--pager-line); }
.pager-scan-option-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; color: var(--pager-aqua); font: 600 9px/1.5 var(--mono); letter-spacing: .07em; }
.pager-scan-option-label > span:first-child { display: inline-grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--pager-line); border-radius: 50%; color: var(--pager-paper); font-size: 9px; }
.pager-scan-option-label [lang="ar"] { color: var(--pager-muted); font: 500 11px/1.5 var(--arabic); letter-spacing: 0; }
.pager-scan-video-wrap { min-height: 190px; border-radius: 6px; }
.pager-scan-placeholder { min-height: 190px; gap: 12px; padding: 12px; text-align: center; }
.pager-scan-placeholder > .pager-scan-placeholder-mark { color: var(--pager-aqua); font-size: 38px; line-height: 1; }
.pager-scan-placeholder-copy { display: grid; gap: 4px; color: var(--pager-muted); font: 500 12px/1.6 var(--sans); }
.pager-scan-placeholder-copy > span:first-child { color: var(--pager-muted); font-size: 12px; line-height: 1.6; }
.pager-scan-placeholder-copy [lang="ar"] { color: var(--pager-paper); font: 400 13px/1.7 var(--arabic); }
.pager-scan-or { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--pager-muted); font: 600 9px/1.4 var(--mono); letter-spacing: .08em; }
.pager-scan-or::before, .pager-scan-or::after { width: 1px; height: 30px; background: var(--pager-line); content: ""; }
.pager-scan-or [lang="ar"] { color: var(--pager-paper); font: 500 11px/1.5 var(--arabic); letter-spacing: 0; }
.pager-scan-manual h3 { margin-top: 0; font-size: 19px; line-height: 1.4; }
.pager-scan-manual h3 .pager-ar-inline { display: block; margin-top: 3px; color: var(--pager-muted); font: 500 14px/1.6 var(--arabic); }
.pager-scan-manual > p:not(.pager-scan-option-label) { font-size: 13px; line-height: 1.75; }
.pager-scan-manual > p .pager-ar-copy { display: block; margin-top: 4px; font: 400 13px/1.8 var(--arabic); text-align: right; }
.pager-scan-actions .pager-action-button { min-height: 44px; }
.pager-scan-camera .pager-message { font-size: 11px; line-height: 1.65; }
.pager-steps { gap: 12px; border: 0; }
.pager-step, .pager-step + .pager-step { min-height: 180px; padding: 19px; border: 1px solid var(--pager-line); border-radius: 8px; background: color-mix(in srgb, var(--pager-panel) 68%, transparent); }
.pager-step + .pager-step { padding-left: 19px; }
.pager-step p { font-size: 13px; line-height: 1.8; }
.pager-step p[lang="ar"] { font-size: 14px; }
.pager-staff-title { font-size: clamp(48px, 6.5vw, 76px); }
.pager-board-title { font-size: clamp(34px, 5vw, 56px); }
.pager-queue-panel { margin: 18px 0 16px; padding: clamp(18px, 2.5vw, 26px); border-color: var(--pager-line); background: color-mix(in srgb, var(--pager-panel) 82%, transparent); }
.pager-queue-heading { align-items: center; gap: 14px; }
.pager-queue-heading h2 { font-size: 22px; line-height: 1.5; }
.pager-queue-count { padding: 7px 10px; border: 1px solid var(--pager-line); border-radius: 999px; font-size: 10px; }
.pager-order-card { padding: 15px; border-color: var(--pager-line); background: color-mix(in srgb, var(--pager-panel) 75%, transparent); }
.pager-order-meta { line-height: 1.75; }
.pager-order-state { padding: 6px 9px; border-radius: 999px; font-size: 9.5px; letter-spacing: .02em; }
.pager-order-actions { gap: 8px; }
.pager-order-actions .pager-action-button { min-height: 42px; font-size: 10px; }
.pager-empty { padding: 17px 13px; border: 1px dashed var(--pager-line); border-radius: 6px; line-height: 1.8; }
.pager-ticket-card { max-width: 680px; padding: clamp(22px, 4vw, 34px); border-color: var(--pager-line); }
.pager-ticket-label { margin-bottom: 9px; font-size: 10px; line-height: 1.8; }
.pager-ticket-number { margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.pager-status-card { margin-top: 22px; padding: 16px; border-radius: 8px; }
.pager-push-summary { display: grid; gap: 3px; margin: 14px 0 10px; padding: 10px 12px; border-inline-start: 2px solid var(--pager-aqua); border-radius: 4px; background: color-mix(in srgb, var(--pager-panel) 75%, transparent); color: var(--pager-paper); font: 500 12px/1.65 var(--sans); }
.pager-push-summary [lang="ar"] { color: var(--pager-paper); font: 500 13px/1.75 var(--arabic); text-align: right; }
.pager-push-note { display: block; margin: 13px 0 0; padding: 14px; border: 1px solid var(--pager-line); border-radius: 7px; background: color-mix(in srgb, var(--pager-panel) 70%, transparent); color: var(--pager-muted); text-align: left; }
.pager-push-note h2 { margin: 0 0 10px; color: var(--pager-aqua); font: 600 9px/1.6 var(--mono); letter-spacing: .08em; }
.pager-push-note h2 [lang="ar"] { margin-inline-start: 7px; color: var(--pager-paper); font: 500 12px/1.6 var(--arabic); letter-spacing: 0; }
.pager-push-note ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager-push-note li { display: grid; gap: 4px; padding: 9px 10px; border-inline-start: 2px solid color-mix(in srgb, var(--pager-aqua) 60%, var(--pager-line)); background: color-mix(in srgb, var(--pager-panel-raised) 70%, transparent); font: 400 11px/1.7 var(--sans); }
.pager-push-note li [lang="ar"] { color: var(--pager-paper); font: 400 12px/1.8 var(--arabic); text-align: right; }
.pager-last-updated { margin-top: 12px; font-size: 10px; line-height: 1.6; }
body.light-theme .pager-scan-camera, body.light-theme .pager-scan-manual { background: linear-gradient(145deg, #fffaf2, #f3ecdf); }
body.light-theme .pager-scan-video-wrap { background: #e8dfd2; }

@media (max-width: 850px) {
  .pager-scan-section { grid-template-columns: minmax(0, 1fr); }
  .pager-scan-tools { grid-template-columns: minmax(0, 1fr); }
  .pager-scan-or { flex-direction: row; gap: 9px; }
  .pager-scan-or::before, .pager-scan-or::after { width: auto; height: 1px; flex: 1; }
}
@media (max-width: 620px) {
  .pager-hero { min-height: auto; gap: 24px; padding-top: 42px; padding-bottom: 28px; }
  .pager-scan-section { padding: 35px 8px 30px; }
  .pager-scan-heading h2 { max-width: none; }
  .pager-scan-camera, .pager-scan-manual { padding: 14px; }
  .pager-scan-video-wrap, .pager-scan-placeholder { min-height: 170px; }
  .pager-scan-option-label { font-size: 8.5px; }
  .pager-scan-option-label [lang="ar"] { font-size: 10.5px; }
  .pager-steps { grid-template-columns: 1fr; }
  .pager-step, .pager-step + .pager-step { min-height: auto; padding: 17px; }
  .pager-step + .pager-step { padding-left: 17px; }
  .pager-queue-panel { margin-top: 14px; padding: 16px; }
  .pager-queue-heading { align-items: flex-start; flex-direction: column; }
  .pager-order-actions .pager-action-button { min-height: 42px; font-size: 10px; }
  .pager-push-note { padding: 11px; }
  .pager-push-note li { padding: 8px; font-size: 10px; }
  .pager-push-note li [lang="ar"] { font-size: 11.5px; }
  .pager-ticket-card { padding: 22px 16px; }
  .pager-ticket-footer { line-height: 1.7; }
}