/* Primitives. Only token variables, never raw hex. RTL-first: logical properties everywhere. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-base);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a:not(.btn){color:var(--c-accent-strong)}
:focus-visible{outline:2px solid var(--c-accent-strong);outline-offset:2px;border-radius:var(--r-sm)}
.stage :focus-visible{outline-color:var(--c-accent)}
.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}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--s-4)}
@media (min-width:768px){.wrap{padding-inline:var(--s-6)}}

/* type */
.t-xs{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:var(--fw-xs)}
.t-sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.t-lg{font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:var(--fw-lg)}
.t-xl{font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:var(--fw-xl);letter-spacing:-.01em}
.t-display{font-size:clamp(2.5rem,7vw,var(--fs-display));line-height:1.05;font-weight:var(--fw-display);letter-spacing:-.02em}
.muted{color:var(--c-text-muted)}
.stage .muted{color:var(--c-stage-muted)}
h1,h2,h3{margin:0}
p{margin:0}

/* Button */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--h);padding-inline:var(--s-5);border-radius:var(--r-pill);border:1px solid transparent;font-weight:600;font-size:var(--fs-base);cursor:pointer;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--m-fast) var(--m-ease),background var(--m-fast),box-shadow var(--m-base),opacity var(--m-fast);position:relative;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;flex:none}
.btn-sm{--h:36px;padding-inline:var(--s-4);font-size:var(--fs-sm)}
.btn-lg{--h:60px;padding-inline:var(--s-6);font-size:var(--fs-lg)}
.btn-xl{--h:var(--tap-staff);padding-inline:var(--s-6);font-size:var(--fs-lg);border-radius:var(--r-md)}
.btn-block{width:100%}
.btn-primary{background:var(--c-text);color:var(--c-bg)}
.btn-primary:hover{box-shadow:var(--sh-pop)}
.btn-accent{background:var(--c-accent);color:var(--c-on-accent)}
.btn-accent:hover{box-shadow:var(--sh-glow)}
.btn-secondary{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
.btn-secondary:hover{border-color:var(--c-border-input)}
.btn-ghost{background:transparent;color:inherit}
.btn-ghost:hover{background:var(--c-surface-2)}
.stage .btn-ghost:hover{background:var(--c-stage-2)}
.stage .btn-secondary{background:var(--c-stage-2);color:var(--c-on-stage);border-color:transparent}
.btn-danger{background:var(--c-danger);color:var(--c-on-danger)}
.btn-success{background:var(--c-success);color:var(--c-on-success)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;border-color:var(--spin,var(--c-bg)) transparent var(--spin,var(--c-bg)) transparent;animation:spin .7s linear infinite}
.btn-accent.is-loading,.btn-secondary.is-loading{--spin:var(--c-text)}
.icon-btn{width:44px;height:44px;padding:0;border-radius:50%}

/* Field */
.field{display:grid;gap:var(--s-2)}
.field label{font-size:var(--fs-sm);font-weight:600}
.input{width:100%;min-height:52px;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--c-border-input);background:var(--c-surface);color:var(--c-text);font-size:var(--fs-base);transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.input:focus{outline:none;border-color:var(--c-text);box-shadow:0 0 0 3px var(--c-accent)}
.input[aria-invalid=true]{border-color:var(--c-danger)}
.field .err{color:var(--c-danger);font-size:var(--fs-sm)}
.input-xl{min-height:80px;font-size:2.5rem;font-weight:700;text-align:center;letter-spacing:.06em;border-radius:var(--r-lg)}
.stage .input{background:var(--c-stage-2);border-color:var(--c-stage-muted);color:var(--c-on-stage)}
.stage .input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(198,244,50,.35)}
.color-input{width:52px;height:52px;padding:4px;border-radius:var(--r-md);border:1px solid var(--c-border-input);background:var(--c-surface)}

/* Card */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-card)}
.card-flat{box-shadow:none}

/* Segmented / tabs */
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--c-surface-2);gap:2px}
.seg button{border:0;background:transparent;min-height:40px;padding-inline:var(--s-4);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);cursor:pointer;color:var(--c-text-muted);display:inline-flex;align-items:center;gap:var(--s-2)}
.seg button[aria-selected=true],.seg button[aria-pressed=true]{background:var(--c-surface);color:var(--c-text);box-shadow:var(--sh-card)}
.seg .count{min-width:22px;height:22px;padding-inline:6px;border-radius:var(--r-pill);background:var(--c-text);color:var(--c-bg);font-size:var(--fs-xs);display:inline-grid;place-items:center}
.stage .seg{background:var(--c-stage-2)}
.stage .seg button{color:var(--c-stage-muted)}
.stage .seg button[aria-pressed=true]{background:var(--c-stage);color:var(--c-on-stage)}

/* Badge / status chip */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding-inline:var(--s-3);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--c-surface-2);color:var(--c-text)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.9}
.chip-waiting{color:var(--c-warning)}
.chip-ready{background:var(--c-accent);color:var(--c-on-accent)}
.chip-done{color:var(--c-success)}
.chip-cancelled,.chip-no_show{color:var(--c-danger)}
.chip-plain::before{display:none}

/* Ticket card (staff) */
.tcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-card);transition:transform var(--m-base) var(--m-spring),border-color var(--m-base),opacity var(--m-base)}
.tcard .tnum{font-size:2.5rem;line-height:1;font-weight:700;min-width:3.5ch;text-align:center}
.tcard .meta{display:grid;gap:4px;min-width:0}
.tcard .meta .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .linked{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--c-text-muted)}
.tcard .linked svg{width:14px;height:14px}
.tcard .linked.on{color:var(--c-success)}
.tcard .linked.warn{color:var(--c-danger);font-weight:700}
.tcard .acts{display:flex;gap:var(--s-2)}
.tcard[data-status=ready]{border-color:var(--c-text);background:linear-gradient(0deg,var(--c-surface),var(--c-surface)) padding-box}
.tcard[data-status=ready] .tnum{color:var(--c-text);background:var(--c-accent);border-radius:var(--r-md);padding:4px 10px}
.tcard.enter{animation:pop var(--m-slow) var(--m-spring)}

/* Big number */
.bignum{font-size:clamp(5rem,30vw,var(--fs-ticket));line-height:var(--lh-ticket);font-weight:700;letter-spacing:-.04em}

/* Stage (dark customer surfaces) */
.stage{background:var(--c-stage);color:var(--c-on-stage);min-height:100svh}
.stage a:not(.btn){color:var(--c-accent)}

/* Pulse ring (waiting) */
.pulse{position:relative;width:min(64vw,280px);aspect-ratio:1;display:grid;place-items:center;margin-inline:auto}
.pulse::before,.pulse::after,.pulse i{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--c-accent);opacity:0;animation:ring 3.2s var(--m-ease) infinite}
.pulse::after{animation-delay:1.06s}
.pulse i{animation-delay:2.13s}
.pulse .core{position:relative;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--c-stage-2),var(--c-stage) 70%);border:1px solid rgba(198,244,50,.25);display:grid;place-items:center;box-shadow:inset 0 0 40px rgba(198,244,50,.08)}
.is-ready .pulse::before,.is-ready .pulse::after,.is-ready .pulse i{animation-duration:1.1s}
.is-ready .pulse .core{background:var(--c-accent);color:var(--c-on-accent);box-shadow:var(--sh-glow)}

/* Flash overlay (ready) */
.flash{position:fixed;inset:0;background:var(--c-accent);pointer-events:none;opacity:0;z-index:50}
.flash.on{animation:flash 1s steps(2,jump-none) infinite}
@media (prefers-reduced-motion:reduce){.flash.on{animation:none;opacity:.25}.pulse::before,.pulse::after,.pulse i{animation:none}}

/* Sheet / modal */
.sheet-bg{position:fixed;inset:0;background:rgba(13,14,18,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade var(--m-base) var(--m-ease)}
.sheet{width:100%;max-width:520px;background:var(--c-surface);color:var(--c-text);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s-6) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));box-shadow:var(--sh-pop);animation:up var(--m-slow) var(--m-spring);max-height:92svh;overflow:auto}
.stage .sheet{background:var(--c-stage-2);color:var(--c-on-stage)}
@media (min-width:768px){.sheet-bg{align-items:center}.sheet{border-radius:var(--r-lg)}}
.sheet .grab{width:40px;height:5px;border-radius:9px;background:var(--c-border);margin:-8px auto var(--s-4)}

/* Toast */
.toasts{position:fixed;inset-inline:0;bottom:calc(var(--s-5) + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:var(--s-2);z-index:60;pointer-events:none;padding-inline:var(--s-4)}
.toast{background:var(--c-text);color:var(--c-bg);padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);box-shadow:var(--sh-pop);animation:up var(--m-base) var(--m-spring);display:flex;gap:var(--s-2);align-items:center}
.toast.err{background:var(--c-danger);color:var(--c-on-danger)}

/* KPI tile */
.kpi{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5);display:grid;gap:var(--s-1)}
.kpi .v{font-size:2.25rem;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.kpi .v small{font-size:var(--fs-base);font-weight:500;color:var(--c-text-muted);margin-inline-start:4px}
.kpi .k{font-size:var(--fs-sm);color:var(--c-text-muted)}
.kpi.hero{background:var(--c-text);color:var(--c-bg);border-color:transparent}
.kpi.hero .k,.kpi.hero .v small{color:var(--c-stage-muted)}

/* Rating tiles */
.rate{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.rate button{aspect-ratio:1;border-radius:var(--r-lg);border:1.5px solid var(--c-stage-2);background:var(--c-stage-2);color:var(--c-on-stage);display:grid;place-items:center;gap:var(--s-2);cursor:pointer;font-weight:600;transition:transform var(--m-base) var(--m-spring),border-color var(--m-fast),background var(--m-fast)}
.rate button svg{width:44px;height:44px}
.rate button:active{transform:scale(.95)}
.rate button[aria-pressed=true]{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-on-accent)}

/* QR frame */
.qr{background:#fff;padding:var(--s-4);border-radius:var(--r-lg);display:inline-grid;place-items:center;box-shadow:var(--sh-pop)}
.qr svg,.qr canvas{width:100%;height:auto}

/* Top bar */
.topbar{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
a.brand,.brand{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;font-size:var(--fs-lg);color:inherit;text-decoration:none;letter-spacing:-.01em}
.mark{width:32px;height:32px;flex:none}

/* Empty state */
.empty{display:grid;justify-items:center;text-align:center;gap:var(--s-3);padding:var(--s-8) var(--s-4);color:var(--c-text-muted)}
.empty svg{width:48px;height:48px;opacity:.6}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--c-surface-2),var(--c-border),var(--c-surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:var(--r-md);min-height:20px}

/* Steps (install guide) */
.steps{display:grid;gap:var(--s-3);counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:var(--s-3);align-items:center;counter-increment:s}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--c-accent);color:var(--c-on-accent);font-weight:700}
.kbd-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--c-stage);vertical-align:middle;margin-inline:2px}
.kbd-ico svg{width:18px;height:18px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{transform:scale(.55);opacity:0}15%{opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes flash{0%{opacity:0}50%{opacity:.85}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}
@keyframes pop{0%{transform:scale(.92);opacity:0}100%{transform:none;opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}