:root{
  /* Primitives: named by hue and step. Never used directly by a component. */
  --white:#ffffff;
  --purple-25:#faf8fc;--purple-50:#f2eff7;--purple-100:#F0EAF9;
  --purple-500:#5E36A0;--purple-600:#522D8F;--purple-700:#45237A;--purple-800:#3A1D63;--purple-900:#2E1752;--purple-950:#2b1a45;
  --mauve-25:#FCFBFE;--mauve-100:#eee9f3;--mauve-150:#E6E0EF;--mauve-200:#e4dfec;--mauve-300:#DCD2EC;--mauve-600:#6b6376;
  --yellow-100:#FFF3C2;--yellow-300:#F5DB78;--yellow-400:#FFCC00;--yellow-800:#8A6B00;
  --green-50:#E8F7EE;--green-700:#198045;
  --red-50:#FCE9EC;--red-600:#BC3F5A;

  /* Roles: what components use. */
  --color-bg-page:var(--purple-25);
  --color-bg-surface:var(--white);
  --color-bg-subtle:var(--purple-50);
  --color-bg-accent-subtle:var(--purple-100);
  --color-bg-inverse:var(--purple-950);
  --color-fill-muted:var(--mauve-200);
  --color-border:var(--mauve-200);
  --color-border-subtle:var(--mauve-100);
  --color-border-dashed:var(--mauve-300);
  --color-field-bg:var(--mauve-25);
  --color-field-border:var(--mauve-150);
  --color-perforation:var(--mauve-150);
  --color-text:var(--purple-950);
  --color-text-secondary:var(--mauve-600);
  --color-text-on-accent:var(--white);
  --color-text-on-highlight:var(--purple-950);
  --color-accent:var(--purple-600);
  --color-accent-strong:var(--purple-800);
  --color-hero-from:var(--purple-500);--color-hero-via:var(--purple-700);--color-hero-to:var(--purple-900);
  --color-highlight:var(--yellow-400);
  --color-attention-bg:var(--yellow-100);
  --color-attention-border:var(--yellow-300);
  --color-attention-text:var(--yellow-800);
  --color-success:var(--green-700);
  --color-success-bg:var(--green-50);
  --color-danger:var(--red-600);
  --color-danger-bg:var(--red-50);
  /* Type scale (UI text on the guest and staff pages; the TV and poster use display sizes). */
  --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:16px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:32px;
  --radius:16px;--font:Tajawal,system-ui,sans-serif;--display:'Baloo Bhaijaan 2',Tajawal,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--color-bg-page);color:var(--color-text);font-family:var(--font);font-size:var(--text-md);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--color-accent);text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--text-md);color:var(--color-text)}
.wrap{max-width:520px;margin:0 auto;padding:16px}
.card{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:20px;padding:20px}
.h1{font:800 var(--text-2xl)/1.3 var(--display);margin:0;text-wrap:balance}
.h2{font:700 var(--text-lg)/1.3 var(--display);margin:0;text-wrap:balance}
.muted{color:var(--color-text-secondary);font-size:var(--text-base);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:14px 18px;font-weight:800;font-size:var(--text-md);transition:transform .05s}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--color-highlight);color:var(--color-text-on-highlight)}
.btn-purple{background:var(--color-accent);color:var(--color-text-on-accent)}
.btn-outline{border:1.5px solid var(--color-accent);color:var(--color-accent);background:var(--color-bg-surface)}
.btn-ghost{color:var(--color-text-secondary);background:var(--color-bg-subtle)}
.btn-danger{background:var(--color-danger-bg);color:var(--color-danger)}
.btn-success-outline{border:1.5px solid var(--color-success);color:var(--color-success);background:var(--color-bg-surface)}
.btn-green{background:var(--color-success);color:var(--color-text-on-accent)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;font-size:var(--text-base);border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.label{font-weight:700;font-size:var(--text-sm);color:var(--color-text)}
.input{border:1.5px solid var(--color-border);border-radius:14px;padding:13px 16px;background:var(--color-bg-surface);width:100%;outline:none}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.input-row{display:flex;align-items:center;gap:10px;border:1.5px solid var(--color-border);border-radius:14px;padding:0 16px;background:var(--color-bg-surface)}
.input-row:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.input-row .input{border:0;padding:13px 0;border-radius:0}
.input-row .prefix{color:var(--color-text-secondary);font-weight:500;border-inline-end:1px solid var(--color-border);padding-inline-end:10px}
.stepper{display:flex;align-items:center;border:1.5px solid var(--color-border);border-radius:14px;overflow:hidden;background:var(--color-bg-surface)}
.stepper button{width:52px;height:50px;font-size:var(--text-2xl);color:var(--color-accent);font-weight:800}
.stepper span{flex:1;text-align:center;font:800 var(--text-xl) var(--display)}
.seg{display:flex;background:var(--color-bg-subtle);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;padding:10px;border-radius:11px;font-weight:700;color:var(--color-text-secondary)}
.seg button.on{background:var(--color-bg-surface);color:var(--color-accent);box-shadow:0 1px 3px rgba(43,26,69,.12)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-base);color:var(--color-text-secondary);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--color-accent);margin:0;flex:none}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.pill-waiting{background:var(--color-bg-accent-subtle);color:var(--color-accent)}
.pill-called{background:var(--color-attention-bg);color:var(--color-attention-text)}
.pill-in_session{background:var(--color-success-bg);color:var(--color-success)}
.pill-done{background:var(--color-fill-muted);color:var(--color-text-secondary)}
.pill-no_show,.pill-cancelled{background:var(--color-danger-bg);color:var(--color-danger)}
.err{background:var(--color-danger-bg);color:var(--color-danger);border-radius:12px;padding:10px 14px;font-size:var(--text-base);font-weight:700}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 16px}
.logo{height:34px}
.lang-toggle{display:flex;gap:2px;background:var(--color-bg-subtle);border-radius:999px;padding:3px}
.lang-toggle button{padding:4px 12px;border-radius:999px;font-weight:700;font-size:var(--text-sm);color:var(--color-text-secondary)}
.lang-toggle button.on{background:var(--color-accent);color:var(--color-text-on-accent)}
.stat{background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:16px;padding:12px 14px}
.stat b{display:block;font:800 var(--text-2xl)/1.1 var(--display);color:var(--color-accent);font-variant-numeric:tabular-nums}
.stat span{font-size:var(--text-xs);color:var(--color-text-secondary)}
.grid{display:grid;gap:10px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){.grid-4{grid-template-columns:1fr 1fr}}
.hidden{display:none!important}
.big-number{font:800 72px/1 var(--display);color:var(--color-accent);letter-spacing:1px}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--color-bg-inverse);color:var(--color-text-on-accent);padding:10px 18px;border-radius:999px;font-size:var(--text-base);font-weight:700;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1}

/* Accessibility helpers */
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.input:focus-visible,.input-row .input:focus-visible{outline:none} /* the field's own 2.5px border ring shows focus */
@media (forced-colors:active){ .input:focus,.input-row:focus-within{outline:2px solid CanvasText;outline-offset:2px} }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}