/* Wizard chrome only - everything else (colors, fonts, cards, buttons, inputs) comes
           from theme.css so this page stays visually identical to the rest of the panel. */
        .steps-bar { display: flex; align-items: center; gap: 8px; margin: 18px 0 24px; }
        .step-pill {
            flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--card2); color: var(--muted);
            font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
        }
        .step-pill .num {
            display: inline-flex; align-items: center; justify-content: center;
            width: 20px; height: 20px; border-radius: 50%; margin-right: 6px;
            background: var(--border); color: var(--text); font-size: 0.75rem;
        }
        .step-pill.active { border-color: var(--accent); color: var(--accent); background: rgb(var(--pa-rgb) / 0.08); }
        .step-pill.active .num { background: var(--accent); color: #001018; }
        .step-pill.done { border-color: var(--success); color: var(--success); }
        .step-pill.done .num { background: var(--success); color: #001018; }
        .wizard-step { display: none; }
        .wizard-step.active { display: block; }
        .wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
        .wizard-nav .spacer { flex: 1; }
        .review-grid { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 0.92rem; }
        .review-grid dt { color: var(--muted); }
        .review-grid dd { margin: 0; }
        .info-note {
            border: 1px solid var(--info); color: var(--info); background: rgba(56, 189, 248, 0.08);
            border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 16px;
        }
        .photo-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
        .photo-thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
        .photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .photo-thumb .remove {
            position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%;
            background: rgba(0,0,0,0.65); color: #fff; border: none; cursor: pointer; font-size: 0.85rem;
            line-height: 1; display: flex; align-items: center; justify-content: center;
        }
        .photo-hint { font-size: 0.78rem; color: var(--muted); margin: 2px 0 10px; }
        .ai-hint-box {
            border: 1px solid var(--info); color: var(--info); background: rgba(56, 189, 248, 0.08);
            border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; margin: 6px 0 12px;
        }
        .ai-unavailable-note { font-size: 0.78rem; color: var(--muted); margin: 6px 0; }
        .svc-suggest-note {
            border: 1px solid var(--accent); color: var(--accent); background: rgb(var(--pa-rgb) / 0.08);
            border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; margin: 6px 0 12px;
            display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
        }
        .svc-suggest-note button { flex: none; }
        .svc-suggest-note .dismiss {
            background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 4px;
        }
        .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
        .chip {
            border: 1px solid var(--border); background: var(--card2); color: var(--text);
            border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; cursor: pointer;
            line-height: 1.2;
        }
        .chip.selected { border-color: var(--accent); color: var(--accent); background: rgb(var(--pa-rgb) / 0.08); }

        /* ================= Customer-facing polish (public booking page) ================= */
        .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; }

        /* Brand + trust header */
        .kiosk-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
        .kiosk-logo {
            flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
            font-family: 'Rajdhani', 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: 1.6rem; color: #001018;
            background: linear-gradient(135deg, rgb(var(--pa-rgb)), rgb(var(--pa2-rgb, 124 58 237)));
            box-shadow: 0 8px 28px -10px rgb(var(--pa-rgb) / 0.8);
        }
        .kiosk-logo.kiosk-me { position: relative; overflow: hidden; }
        .kiosk-logo.kiosk-me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .kiosk-brand h1 { margin: 0; font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1.15; }
        .kiosk-brand .shop { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
        .kiosk-lede { color: var(--muted); font-size: 0.95rem; margin: 8px 0 12px; line-height: 1.5; }
        .trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
        .trust-row li {
            display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text);
            border: 1px solid var(--border); background: var(--card2); border-radius: 999px; padding: 5px 11px;
        }
        .trust-row svg { width: 14px; height: 14px; color: var(--success); flex: none; }

        /* Progress: fill track + pills with check marks on finished steps */
        .steps-wrap { margin: 18px 0 22px; }
        .steps-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
        .steps-meta strong { color: var(--text); font-weight: 600; }
        .steps-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 10px; }
        .steps-fill {
            display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0.3333);
            background: linear-gradient(90deg, rgb(var(--pa-rgb)), var(--success));
            box-shadow: 0 0 12px rgb(var(--pa-rgb) / 0.7); transition: transform .6s var(--ease);
        }
        .steps-wrap .steps-bar { margin: 0; }
        .step-pill { display: flex; align-items: center; justify-content: center; min-height: 44px; }
        .step-pill .num { flex: none; position: relative; }
        .step-pill.done .num { font-size: 0; }
        .step-pill.done .num::after {
            content: ""; width: 9px; height: 5px; border: solid #001018; border-width: 0 0 2px 2px;
            transform: translateY(-1px) rotate(-45deg);
        }
        .step-pill .short { display: none; }

        /* Capture zone: the input stays a real, focusable file input (visually hidden) */
        .capture-zone {
            position: relative; display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; cursor: pointer;
            padding: 16px; min-height: 76px; border-radius: 14px; border: 1.5px dashed rgb(var(--pa-rgb) / 0.55);
            background: linear-gradient(135deg, rgb(var(--pa-rgb) / 0.10), rgb(var(--pa-rgb) / 0.02));
            color: var(--text); font-size: 0.95rem; transition: border-color .25s, background .25s, transform .2s var(--ease-spring);
        }
        .capture-zone:hover { border-color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / 0.14); }
        .capture-zone:active { transform: scale(0.985); }
        .capture-zone:focus-within { outline: 3px solid rgb(var(--pa-rgb)); outline-offset: 3px; }
        .capture-zone input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
        .capture-icon {
            flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
            background: rgb(var(--pa-rgb)); color: #001018; box-shadow: 0 0 0 6px rgb(var(--pa-rgb) / 0.15);
        }
        .capture-icon svg { width: 24px; height: 24px; }
        .capture-zone strong { display: block; font-size: 1rem; }
        .capture-zone small { color: var(--muted); font-size: 0.8rem; }
        .capture-count { margin-left: auto; font-family: ui-monospace, 'Courier New', 'Noto Sans Devanagari', monospace; font-size: 0.8rem; color: var(--muted); }
        .ai-badge {
            display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
            padding: 2px 7px; border-radius: 999px; color: #001018; background: linear-gradient(90deg, #a78bfa, rgb(var(--pa-rgb)));
            vertical-align: middle; margin-left: 6px;
        }

        .photo-thumb { width: 92px; height: 92px; border-radius: 12px; animation: thumb-in .45s var(--ease-spring) both; }
        .photo-thumb .remove { top: 4px; right: 4px; width: 32px; height: 32px; font-size: 1.1rem; }
        .photo-thumb .scan {
            position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
            background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65)); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em;
        }
        .photo-thumb .scan::before {
            content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
            background: rgb(var(--pa-rgb)); box-shadow: 0 0 10px 2px rgb(var(--pa-rgb) / 0.9);
            animation: scanline 1.3s ease-in-out infinite alternate;
        }
        .photo-thumb .ok {
            position: absolute; left: 5px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--success);
            display: grid; place-items: center; animation: thumb-in .4s var(--ease-spring) both;
        }
        .photo-thumb .ok::after { content: ""; width: 8px; height: 4px; border: solid #001018; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
        @keyframes thumb-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
        @keyframes scanline { from { transform: translateY(0); } to { transform: translateY(90px); } }

        .ai-status {
            display: none; align-items: center; gap: 10px; font-size: 0.85rem; margin: 6px 0 10px; padding: 9px 12px;
            border-radius: 10px; border: 1px solid rgba(167, 139, 250, .4); background: rgba(167, 139, 250, .08); color: #d8ccff;
        }
        .ai-status.on { display: flex; }
        .ai-dots { display: inline-flex; gap: 4px; }
        .ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: dot 1s ease-in-out infinite; }
        .ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
        @keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

        /* AI just filled this field: soft violet glow that settles */
        .ai-filled { animation: ai-fill 1.8s var(--ease) both; }
        @keyframes ai-fill {
            0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); border-color: var(--border); }
            20% { box-shadow: 0 0 0 4px rgba(167, 139, 250, .35), 0 0 24px rgba(167, 139, 250, .5); border-color: #a78bfa; }
            100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); border-color: rgba(167, 139, 250, .55); }
        }
        .ai-fill-tag { font-size: 0.75rem; color: #c4b5fd; margin-left: 6px; font-weight: 600; }

        /* Duplicate guard: informative, not alarming */
        .dup-card {
            display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px;
            border: 1px solid rgba(56, 189, 248, .4); background: rgba(56, 189, 248, .07); color: var(--text);
        }
        .dup-card svg { flex: none; width: 26px; height: 26px; color: var(--info); margin-top: 1px; }
        .dup-card h2 { font-size: 1rem; margin: 0 0 4px; color: var(--text); }
        .dup-card p { margin: 0 0 4px; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
        .dup-card .dup-detail { color: var(--text); }
        .override-row {
            margin-top: 16px !important; padding: 12px 14px; border-radius: 12px;
            border: 1px solid rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .07);
        }
        .override-row input { width: 22px !important; height: 22px; flex: none; }

        .secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.76rem; color: var(--muted); margin-top: 14px; text-align: center; }
        .secure-note svg { width: 13px; height: 13px; color: var(--success); flex: none; }

        /* Success: the token is the prize */
        .success-box.booked { text-align: center; }
        .booked h2 { margin: 4px 0 4px; font-size: clamp(1.3rem, 5vw, 1.7rem); }
        .booked .lede { color: var(--muted); margin: 0 0 16px; font-size: 0.92rem; }
        .token-card {
            position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%;
            padding: 16px 22px 18px; border-radius: 18px; border: 1px solid rgb(var(--pa-rgb) / 0.6);
            background: radial-gradient(120% 140% at 50% 0%, rgb(var(--pa-rgb) / 0.22), rgb(var(--pa-rgb) / 0.04) 70%);
            box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.15) inset, 0 18px 50px -18px rgb(var(--pa-rgb) / 0.9);
            animation: token-in .8s .35s var(--ease-spring) both, token-glow 3s 1.2s ease-in-out infinite;
        }
        .token-card .token-label { font-size: 0.75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
        .booked .token { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; letter-spacing: .08em; word-break: break-all; user-select: all; margin: 0 !important; }
        .copy-btn { margin-top: 6px; min-height: 44px; min-width: 150px; }
        .copy-btn.copied { background: var(--success) !important; border-color: var(--success) !important; color: #001018 !important; }
        @keyframes token-in { from { opacity: 0; transform: scale(.7) translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
        @keyframes token-glow { 0%, 100% { box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.15) inset, 0 18px 50px -18px rgb(var(--pa-rgb) / 0.9); } 50% { box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.3) inset, 0 18px 70px -14px rgb(var(--pa-rgb) / 1); } }
        .next-steps { text-align: left; max-width: 420px; margin: 20px auto 0; padding: 0; list-style: none; counter-reset: ns; }
        .next-steps li { counter-increment: ns; position: relative; padding: 8px 0 8px 36px; font-size: 0.9rem; color: var(--text); line-height: 1.45; }
        .next-steps li::before {
            content: counter(ns); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%;
            display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #001018; background: rgb(var(--pa-rgb));
        }
        .booked .hint { font-size: 0.78rem; color: var(--muted); margin-top: 10px; }

        /* Touch-friendly controls everywhere on this page */
        .btn { min-height: 48px; }
        .chip { min-height: 40px; padding: 8px 16px; font-size: 0.88rem; }
        .checkboxrow { min-height: 44px; }
        .checkboxrow input[type=checkbox] { width: 22px; height: 22px; }
        .step-heading:focus { outline: none; }

        /* ---- Phones ---- */
        @media (max-width: 560px) {
            .standalone-wrap { padding-left: 16px !important; padding-right: 16px !important; }
            input, select, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
            .step-pill { font-size: 0.78rem; padding: 8px 4px; }
            .step-pill .long { display: none; }
            .step-pill .short { display: inline; }
            .wizard-nav { flex-direction: column-reverse; }
            .wizard-nav .spacer { display: none; }
            .wizard-nav .btn { width: 100%; }
            .review-grid { grid-template-columns: 1fr; gap: 0; }
            .review-grid dt { margin-top: 10px; font-size: 0.78rem; }
            .review-grid dd { font-size: 1rem; word-break: break-word; }
            /* lighter step transition on phones: no blur (expensive on mid-range GPUs) */
            .wizard-step.active { animation-name: step-lite-fwd !important; animation-duration: .35s !important; }
            html[data-step-dir="back"] .wizard-step.active { animation-name: step-lite-back !important; }
            .token-card { padding: 14px 16px 16px; }
        }
        @keyframes step-lite-fwd { from { opacity: 0; transform: translate3d(18px, 0, 0); } to { opacity: 1; transform: none; } }
        @keyframes step-lite-back { from { opacity: 0; transform: translate3d(-18px, 0, 0); } to { opacity: 1; transform: none; } }

        @media (prefers-reduced-motion: reduce) {
            .photo-thumb, .photo-thumb .ok, .token-card, .ai-filled, .ai-dots i, .photo-thumb .scan::before { animation: none !important; }
            .steps-fill { transition: none; }
            .ai-filled { border-color: rgba(167, 139, 250, .7); }
        }

        /* ================= Extra effects pass (transform/opacity only for anything looping) ================= */
        .standalone-wrap { position: relative; z-index: 1; }

        /* --- Ambient kiosk layer: drifting light orbs, a slow light sweep, rising motes --- */
        .kiosk-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
        .kiosk-ambient .orb {
            position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .55; will-change: transform;
            background: radial-gradient(closest-side, rgb(var(--pa-rgb) / 0.20), transparent);
        }
        .kiosk-ambient .o1 { left: -25vmax; top: -20vmax; animation: orb-a 26s ease-in-out 1 forwards; }
        .kiosk-ambient .o2 { right: -28vmax; top: 10vh; background: radial-gradient(closest-side, rgb(var(--pa2-rgb) / 0.22), transparent); animation: orb-b 32s ease-in-out 1 forwards; }
        .kiosk-ambient .o3 { left: 10vw; bottom: -35vmax; background: radial-gradient(closest-side, rgb(var(--pa3-rgb) / 0.16), transparent); animation: orb-c 38s ease-in-out 1 forwards; }
        @keyframes orb-a { to { transform: translate3d(18vw, 14vh, 0) scale(1.15); } }
        @keyframes orb-b { to { transform: translate3d(-16vw, 20vh, 0) scale(.9); } }
        @keyframes orb-c { to { transform: translate3d(22vw, -12vh, 0) scale(1.1); } }
        .kiosk-ambient .sweep {
            position: absolute; top: -20%; bottom: -20%; left: 0; width: 38vw; opacity: .5;
            background: linear-gradient(100deg, transparent, rgb(var(--pa-rgb) / 0.07) 45%, rgba(255,255,255,.06) 50%, rgb(var(--pa-rgb) / 0.07) 55%, transparent);
            transform: translate3d(-60vw, 0, 0) skewX(-12deg); animation: sweep 14s 3s ease-in-out 1 forwards;
        }
        @keyframes sweep { 0% { transform: translate3d(-60vw, 0, 0) skewX(-12deg); } 45%, 100% { transform: translate3d(160vw, 0, 0) skewX(-12deg); } }
        .kiosk-ambient .mote {
            position: absolute; left: var(--x); bottom: -10px; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
            background: rgb(var(--pa-rgb)); box-shadow: 0 0 8px 1px rgb(var(--pa-rgb) / 0.8);
            animation: mote var(--t) var(--d) linear 1 forwards; will-change: transform, opacity;
        }
        .kiosk-ambient .mote:nth-child(3n) { background: rgb(var(--pa3-rgb)); width: 3px; height: 3px; }
        @keyframes mote {
            0% { transform: translate3d(0, 0, 0); opacity: 0; }
            10% { opacity: .7; } 80% { opacity: .5; }
            100% { transform: translate3d(30px, -105vh, 0); opacity: 0; }
        }

        /* Step-change light flash: a single soft band sweeping across the screen */
        .step-flash { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; overflow: hidden; }
        .step-flash::before {
            content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45vw;
            background: linear-gradient(90deg, transparent, rgb(var(--pa-rgb) / 0.16), rgba(255,255,255,.10), rgb(var(--pa-rgb) / 0.16), transparent);
            transform: translate3d(-50vw, 0, 0);
        }
        .step-flash.go { animation: flash-fade .7s var(--ease) both; }
        .step-flash.go::before { animation: flash-band .7s var(--ease) both; }
        html[data-step-dir="back"] .step-flash.go::before { animation-direction: reverse; }
        @keyframes flash-fade { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
        @keyframes flash-band { to { transform: translate3d(110vw, 0, 0); } }

        /* Richer step entrance: a touch of depth on top of the existing slide */
        .wizard-step.active { transform-origin: 50% 0; }
        .wizard-step.active .wizard-nav { animation: rise .5s .28s var(--ease) both; }

        /* --- Progress: glint running along the fill, glowing head, celebratory pulse --- */
        .steps-track-wrap { position: relative; margin-bottom: 10px; }
        .steps-track-wrap .steps-track { position: relative; margin-bottom: 0; }
        .steps-fill { transition: transform .9s cubic-bezier(.65, 0, .2, 1.15); }
        .steps-glint {
            position: absolute; top: 0; bottom: 0; left: 0; width: 60px; pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
            animation: glint 3.2s 1s ease-in-out infinite; opacity: 0;
        }
        @keyframes glint { 0% { transform: translate3d(-60px, 0, 0); opacity: 0; } 10% { opacity: .9; } 55% { opacity: .9; } 70%, 100% { transform: translate3d(min(560px, 80vw), 0, 0); opacity: 0; } }
        .steps-rail { position: absolute; inset: 0; pointer-events: none; transform: translate3d(-66.667%, 0, 0); transition: transform .9s cubic-bezier(.65, 0, .2, 1.15); }
        .steps-head {
            position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
            background: #fff; box-shadow: 0 0 0 3px rgb(var(--pa-rgb) / 0.35), 0 0 14px 4px rgb(var(--pa-rgb) / 0.8);
            animation: head-breathe 2.2s ease-in-out infinite;
        }
        @keyframes head-breathe { 50% { transform: scale(.72); } }
        .steps-head::after {
            content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(var(--pa-rgb)); opacity: 0;
        }
        .steps-track-wrap.pulse .steps-head::after { animation: head-ring .8s var(--ease) both; }
        .steps-track-wrap.pulse .steps-track { animation: track-pop .6s var(--ease-spring); }
        @keyframes head-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.8); } }
        @keyframes track-pop { 40% { transform: scaleY(1.9); } }
        .step-pill { position: relative; }
        .step-pill.just-done::after {
            content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--success); pointer-events: none;
            animation: pill-ring .8s var(--ease) both;
        }
        @keyframes pill-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.12, 1.4); } }
        .step-pill.active .num { animation: num-glow 2.4s ease-in-out infinite; }
        @keyframes num-glow { 50% { transform: scale(1.12); } }
        .fx-spark {
            position: fixed; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
            pointer-events: none; z-index: 9997; will-change: transform, opacity;
        }

        /* --- Step 1: staggered fields, reactive icons, validity ticks, completion glow --- */
        .wizard-step.active .fld { animation: fld-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 140ms); }
        @keyframes fld-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); } to { opacity: 1; transform: none; } }
        .fld-row { position: relative; display: flex; align-items: flex-start; gap: 10px; }
        .fld-row > input, .fld-row > textarea { flex: 1; min-width: 0; padding-right: 38px; }
        .fld-ico {
            flex: none; width: 40px; height: 40px; margin-top: 5px; border-radius: 12px; display: grid; place-items: center;
            color: var(--muted); border: 1px solid var(--border); background: var(--card2);
            transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .35s var(--ease-spring);
        }
        .fld-ico svg { width: 20px; height: 20px; transition: transform .35s var(--ease-spring); }
        .fld.is-focus .fld-ico { color: rgb(var(--pa-rgb)); border-color: rgb(var(--pa-rgb) / 0.6); background: rgb(var(--pa-rgb) / 0.10); transform: translateY(-2px) scale(1.06); }
        .fld.is-typing .fld-ico svg { animation: ico-nudge .32s var(--ease-spring); }
        @keyframes ico-nudge { 40% { transform: rotate(-9deg) scale(1.12); } }
        .fld.is-valid .fld-ico { color: var(--success); border-color: rgb(16 185 129 / 0.45); background: rgb(16 185 129 / 0.08); }
        .fld-ok {
            position: absolute; right: 10px; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--success);
            display: grid; place-items: center; opacity: 0; transform: scale(.3) rotate(-30deg); pointer-events: none;
            transition: opacity .25s var(--ease), transform .45s var(--ease-spring);
        }
        .fld-ok::after { content: ""; width: 8px; height: 4px; border: solid #001018; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
        .fld.is-valid .fld-ok { opacity: 1; transform: none; }
        .fill-glow::after {
            content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
            box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.55), 0 0 42px -6px rgb(var(--pa-rgb) / 0.55), inset 0 0 30px -12px rgb(var(--pa-rgb) / 0.4);
            opacity: var(--fill, 0); transition: opacity .6s var(--ease);
        }
        .fill-glow.complete::after { box-shadow: 0 0 0 1px rgb(16 185 129 / 0.6), 0 0 46px -6px rgb(16 185 129 / 0.5), inset 0 0 30px -12px rgb(16 185 129 / 0.35); }

        /* --- Step 2: service tiles --- */
        .svc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
        .svc-tiles[hidden] { display: none; }
        .svc-tile {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 74px; padding: 10px 4px;
            border-radius: 14px; border: 1px solid var(--border); background: var(--card2); color: var(--text);
            font-size: 0.76rem; font-weight: 600; line-height: 1.15; text-align: center; box-shadow: none;
            opacity: 0; animation: tile-in .45s var(--ease-spring) forwards; animation-delay: calc(var(--i) * 40ms + 100ms);
        }
        .svc-tile::after { display: none; }
        .svc-tile svg { width: 26px; height: 26px; color: var(--muted); transition: transform .35s var(--ease-spring), color .25s; }
        .svc-tile:hover { background: rgb(var(--pa-rgb) / 0.08); border-color: rgb(var(--pa-rgb) / 0.4); transform: translateY(-2px); }
        .svc-tile:hover svg { transform: translateY(-2px) scale(1.08); }
        .svc-tile[aria-pressed="true"] {
            border-color: rgb(var(--pa-rgb)); color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / 0.14);
            box-shadow: 0 0 0 1px rgb(var(--pa-rgb) / 0.4) inset, 0 10px 26px -12px rgb(var(--pa-rgb) / 0.9);
        }
        .svc-tile[aria-pressed="true"] svg { color: rgb(var(--pa-rgb)); }
        .svc-tile.pop svg { animation: tile-pop .5s var(--ease-spring); }
        @keyframes tile-in { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.92); } to { opacity: 1; transform: none; } }
        @keyframes tile-pop { 35% { transform: scale(1.35) rotate(-8deg); } 70% { transform: scale(.95); } }
        .svc-tiles:not([hidden]) + select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }

        /* --- Step 2: accessory chips that pop --- */
        .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; transition: transform .3s var(--ease-spring), background .25s, border-color .25s, color .25s; animation: chip-in .4s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
        .chip::after { display: none; }
        .chip::before {
            content: ""; width: 0; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; opacity: 0;
            transform: translateY(-2px) rotate(-45deg) scale(.4); transition: width .25s var(--ease), opacity .2s, transform .35s var(--ease-spring); margin-right: -6px;
        }
        .chip.selected::before { width: 12px; height: 6px; opacity: 1; transform: translateY(-2px) rotate(-45deg); margin-right: 0; }
        .chip.no-in { animation: none; }
        .chip.pop { animation: chip-pop .45s var(--ease-spring); }
        .chip.unpop { animation: chip-unpop .3s var(--ease); }
        @keyframes chip-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
        @keyframes chip-pop { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } 100% { transform: none; } }
        @keyframes chip-unpop { 40% { transform: scale(.9); } }

        /* --- Step 2: photo thumbs: stagger + hover zoom --- */
        .photo-thumb { animation-delay: calc(var(--i, 0) * 70ms); }
        .photo-thumb.no-in { animation: none; }
        .photo-thumb img { transition: transform .45s var(--ease); }
        .photo-thumb:hover img { transform: scale(1.12); }
        .photo-thumb.out { animation: thumb-out .25s var(--ease) forwards; }
        @keyframes thumb-out { to { opacity: 0; transform: scale(.6) rotate(-6deg); } }

        /* --- Step 2: honest "AI not available" card --- */
        .ai-unavailable-note {
            align-items: flex-start; gap: 12px; padding: 11px 14px; margin: 6px 0 12px; border-radius: 12px; line-height: 1.45;
            border: 1px solid var(--border-strong); background: var(--card2); color: var(--muted); font-size: 0.82rem;
            animation: rise .45s var(--ease) both;
        }
        .ai-unavailable-note strong { display: block; color: var(--text); font-size: 0.88rem; margin-bottom: 1px; }
        .ai-off-ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: rgb(var(--pa-rgb)); background: rgb(var(--pa-rgb) / 0.10); }
        .ai-off-ico svg { width: 20px; height: 20px; }
        .ai-off-tick { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--success); display: grid; place-items: center; animation: thumb-in .45s .25s var(--ease-spring) both; }
        .ai-off-tick::after { content: ""; width: 6px; height: 3px; border: solid #001018; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }

        /* --- Step 3: review cascade --- */
        .review-grid dt, .review-grid dd { animation: rev-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
        .review-grid dd.empty { color: var(--muted); }
        .review-grid dd { position: relative; }
        @keyframes rev-in { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }

        /* --- Step 3: what happens next --- */
        .after-submit {
            position: relative; margin: 4px 0 6px; padding: 16px 16px 8px; border-radius: 16px; overflow: hidden;
            border: 1px solid rgb(var(--pa-rgb) / 0.35);
            background: linear-gradient(150deg, rgb(var(--pa-rgb) / 0.12), rgb(var(--pa2-rgb) / 0.06) 60%, transparent);
        }
        .after-submit h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
        .after-submit h3 svg { width: 18px; height: 18px; color: rgb(var(--pa-rgb)); flex: none; }
        .after-steps { list-style: none; margin: 0; padding: 0; position: relative; }
        .after-steps::before {
            content: ""; position: absolute; left: 17px; top: 18px; bottom: 26px; width: 2px; transform-origin: top;
            background: linear-gradient(rgb(var(--pa-rgb)), rgb(var(--pa2-rgb)));
        }
        .wizard-step.active .after-steps::before { animation: line-draw .9s .35s var(--ease) both; }
        @keyframes line-draw { from { transform: scaleY(0); } to { transform: none; } }
        .after-steps li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 0 0 12px; }
        .wizard-step.active .after-steps li { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 160ms + 380ms); }
        .as-ico { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #001018; background: rgb(var(--pa-rgb)); box-shadow: 0 0 0 4px rgb(var(--pa-rgb) / 0.15); }
        .as-ico svg { width: 18px; height: 18px; }
        .after-steps strong { display: block; font-size: 0.9rem; }
        .after-steps small { color: var(--muted); font-size: 0.8rem; }

        /* --- Step 3: submit "ready" halo (pseudo-element; transform/opacity only) --- */
        .submit-wrap { position: relative; display: inline-flex; border-radius: 12px; }
        .submit-wrap::before {
            content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
            box-shadow: 0 0 0 2px rgb(var(--pa-rgb) / 0.7), 0 0 28px 4px rgb(var(--pa-rgb) / 0.55);
        }
        .submit-wrap.ready::before { animation: ready-halo 1.8s ease-out infinite; }
        .submit-wrap.ready .btn { box-shadow: 0 12px 34px -12px rgb(var(--pa-rgb) / 1); }
        @keyframes ready-halo { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }

        @media (max-width: 560px) {
            .kiosk-ambient .mote:nth-child(n+10) { display: none; } /* 5 motes on phones instead of 10 */
            .kiosk-ambient .orb { opacity: .45; }
            .submit-wrap { width: 100%; }
            .fld-ico { width: 36px; height: 36px; }
            .svc-tile { min-height: 66px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .kiosk-ambient, .step-flash, .steps-glint, .fx-spark { display: none !important; }
            .steps-head, .steps-head::after, .step-pill.active .num, .step-pill.just-done::after,
            .submit-wrap::before, .fld-ico svg, .chip, .svc-tile, .svc-tile svg, .review-grid dt, .review-grid dd,
            .after-steps::before, .after-steps li, .fld, .ai-off-tick, .ai-unavailable-note { animation: none !important; opacity: 1; }
            .submit-wrap::before { opacity: 0; }
            .submit-wrap.ready::before { opacity: .6; }
            .steps-fill, .steps-rail, .fld-ok, .fld-ico, .fill-glow::after { transition: none !important; }
        }

        /* ================= Pass 4: more depth, still transform/opacity-only for loops ================= */
        /* Ambient: slow rotating aurora, perspective grid floor, twinkling stars */
        .kiosk-ambient .aurora {
            position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; opacity: .16;
            background: conic-gradient(from 0deg, transparent 0 20%, rgb(var(--pa-rgb) / .5) 28%, transparent 38% 55%, rgb(var(--pa2-rgb) / .45) 64%, transparent 74% 100%);
            border-radius: 50%; animation: aurora-spin 90s linear 1 forwards; will-change: transform;
        }
        @keyframes aurora-spin { to { transform: rotate(360deg); } }
        .kiosk-ambient .grid-floor {
            position: absolute; left: -25%; right: -25%; bottom: -8vh; height: 42vh; opacity: .22;
            background-image: linear-gradient(rgb(var(--pa-rgb) / .35) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--pa-rgb) / .35) 1px, transparent 1px);
            background-size: 48px 48px; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
            -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%);
        }
        .kiosk-ambient .grid-floor::after {
            content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
            background: linear-gradient(transparent, rgb(var(--pa-rgb) / .55), transparent);
            animation: grid-scan 7s ease-in-out 2 forwards; opacity: 0;
        }
        @keyframes grid-scan { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate3d(0, 330%, 0); opacity: 0; } }
        .kiosk-ambient .star {
            position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%; background: #fff;
            box-shadow: 0 0 6px 1px rgb(var(--pa-rgb) / .9); opacity: .15; animation: twinkle var(--t, 4s) var(--d, 0s) ease-in-out 3;
        }
        @keyframes twinkle { 50% { opacity: .9; transform: scale(1.8); } }
        /* Phones / weak devices (fx2-lite) and reduced-motion: the ambient layer is static, nothing loops. */
        html.fx2-lite .kiosk-ambient .orb, html.fx2-lite .kiosk-ambient .aurora, html.fx2-lite .kiosk-ambient .star { animation: none; will-change: auto; }
        html.fx2-lite .kiosk-ambient .sweep, html.fx2-lite .kiosk-ambient .mote, html.fx2-lite .kiosk-ambient .grid-floor::after { display: none; }

        /* Pointer spotlight inside each card (desktop pointers only, rAF-throttled) */
        .wizard-step fieldset { position: relative; isolation: isolate; }
        .spot-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
        .spot {
            position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; opacity: 0;
            background: radial-gradient(closest-side, rgb(var(--pa-rgb) / .13), transparent); transition: opacity .35s var(--ease); will-change: transform;
        }
        fieldset.spot-on .spot { opacity: 1; }

        /* Progress milestone nodes that light up as they're passed */
        .steps-nodes { position: absolute; inset: 0; pointer-events: none; }
        .steps-nodes i {
            position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
            background: var(--card2); border: 1.5px solid var(--border-strong, var(--border)); transition: background .4s, border-color .4s, transform .5s var(--ease-spring);
        }
        .steps-nodes i.lit { background: #fff; border-color: rgb(var(--pa-rgb)); transform: scale(1.25); box-shadow: 0 0 10px rgb(var(--pa-rgb) / .9); }

        /* Next-button ripple from the tap point */
        .btn-ripple {
            position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
            background: rgba(255,255,255,.55); animation: btn-ripple .6s var(--ease) forwards;
        }
        @keyframes btn-ripple { from { opacity: .7; transform: scale(0); } to { opacity: 0; transform: scale(18); } }
        [data-next], #confirmBtn { position: relative; overflow: hidden; }

        /* Step 1: one-shot completion sweep across the card. (The old focus "underline sweep"
           under the typed text is gone - owner: no line under the letters while typing.) */
        .card-sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
        .card-sweep::before {
            content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
            background: linear-gradient(100deg, transparent, rgb(16 185 129 / .22), rgba(255,255,255,.18), transparent);
            animation: card-sweep .9s var(--ease) forwards; transform: translate3d(-100%, 0, 0);
        }
        @keyframes card-sweep { to { transform: translate3d(260%, 0, 0); } }

        /* Step 2: capture-zone invitation (until the first photo is added) */
        .capture-icon { position: relative; }
        .capture-zone.invite .capture-icon::after {
            content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(var(--pa-rgb)); pointer-events: none;
            animation: invite-ring 2.4s ease-out infinite;
        }
        .capture-zone.invite .capture-icon svg { animation: invite-bob 2.4s ease-in-out infinite; }
        @keyframes invite-ring { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
        @keyframes invite-bob { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-2px) rotate(-6deg); } }
        /* photo lands: camera-flash on the new thumb */
        .photo-thumb .flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: thumb-flash .5s var(--ease) forwards; }
        @keyframes thumb-flash { from { opacity: .85; } to { opacity: 0; } }
        .photo-thumb:not(.no-in) { box-shadow: 0 0 0 0 rgb(var(--pa-rgb) / .8); }

        /* Step 2: problem "detail meter" (purely visual encouragement, not validation) */
        .detail-meter { display: flex; align-items: center; gap: 10px; margin: -6px 0 12px; font-size: 0.75rem; color: var(--muted); }
        .detail-meter .bar { flex: 1; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
        .detail-meter .bar i {
            display: block; height: 100%; transform-origin: left; transform: scaleX(0); transition: transform .4s var(--ease);
            background: linear-gradient(90deg, rgb(var(--pa-rgb)), var(--success));
        }
        .detail-meter.good { color: var(--success); }

        /* AI unavailable card: icon gets a one-time gentle wiggle when it appears */
        .ai-unavailable-note .ai-off-ico svg { animation: ai-off-wiggle .9s .15s var(--ease-spring) both; }
        @keyframes ai-off-wiggle { 0% { transform: scale(.6) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; } }

        /* Step 3: per-row status badges + staggered icon glows in the "what happens next" list */
        .review-grid dd .rv-b {
            display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 7px; border-radius: 50%; vertical-align: -2px;
            background: var(--success); animation: thumb-in .4s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 55ms + 300ms);
        }
        .review-grid dd .rv-b::after { content: ""; width: 6px; height: 3px; border: solid #001018; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
        .review-grid dd.empty .rv-b { background: var(--border); }
        .review-grid dd.empty .rv-b::after { width: 6px; height: 0; border-width: 0 0 2px 0; transform: none; border-color: var(--muted); }
        .wizard-step.active .as-ico { animation: as-glow .9s var(--ease) both; animation-delay: calc(var(--i) * 160ms + 520ms); }
        @keyframes as-glow { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }

        /* Submit: "sending" shimmer sweeps through the button until the page navigates */
        #confirmBtn.sending::after {
            content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; opacity: 1;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); inset: auto; height: 100%;
            animation: sending 1.1s ease-in-out infinite;
        }
        @keyframes sending { from { transform: translate3d(-110%, 0, 0); } to { transform: translate3d(260%, 0, 0); } }

        @media (max-width: 560px) {
            .kiosk-ambient .star:nth-child(n+5) { display: none; }
            .kiosk-ambient .grid-floor { opacity: .16; }
        }
        @media (prefers-reduced-motion: reduce) {
            .kiosk-ambient .aurora, .kiosk-ambient .grid-floor::after, .kiosk-ambient .star, .spot-clip, .btn-ripple, .card-sweep,
            .photo-thumb .flash, #confirmBtn.sending::after { display: none !important; }
            .capture-zone.invite .capture-icon::after, .capture-zone.invite .capture-icon svg, .ai-unavailable-note .ai-off-ico svg,
            .review-grid dd .rv-b, .wizard-step.active .as-ico { animation: none !important; }
            .steps-nodes i, .detail-meter .bar i { transition: none !important; }
        }

        /* ================= Pass 5 ================= */
        /* WhatsApp glyph replaces the generic green tick on the mobile fields (same slot/trigger) */
        .fld-ok.wa-ok { background: none; width: 22px; height: 22px; top: 15px; }
        .fld-ok.wa-ok::after { display: none; }
        .fld-ok.wa-ok svg { width: 22px; height: 22px; display: block; }

        /* Compact Service Type tiles: smaller icon, tighter padding, still >= 48px tap height */
        .svc-tiles { gap: 6px; }
        .svc-tile { min-height: 50px; padding: 6px 4px; gap: 3px; border-radius: 12px; font-size: 0.75rem; }
        .svc-tile svg { width: 18px; height: 18px; }

        /* Print / send options on one row */
        .print-opts { display: flex; flex-wrap: nowrap; gap: 10px; }
        .print-opts .checkboxrow { flex: 1 1 0; min-width: 0; margin: 0; gap: 8px; }
        .print-opts .checkboxrow label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        @media (max-width: 420px) { .print-opts { flex-wrap: wrap; } .print-opts .checkboxrow { flex: 1 1 45%; } }

        /* Success: big theme-colored steel stamp strike, whole-screen shake on impact */
        .stamp-overlay {
            position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
            pointer-events: none; background: transparent;
            animation: stamp-overlay-fade 0.5s 1.35s ease both;
        }
        .stamp-stage { position: relative; display: grid; place-items: center; }
        .stamp {
            width: min(72vw, 340px); height: min(72vw, 340px); color: var(--accent); transform-origin: 50% 50%;
            animation: stamp-strike .95s cubic-bezier(.55, 0, .68, 1.6) both, stamp-settle .35s .95s var(--ease-spring) both;
            filter: drop-shadow(0 10px 26px rgba(0,0,0,.6));
        }
        .stamp-ring {
            position: absolute; left: 50%; top: 50%; width: min(72vw, 340px); height: min(72vw, 340px);
            margin: calc(min(72vw, 340px) / -2) 0 0 calc(min(72vw, 340px) / -2); border-radius: 50%;
            border: 4px solid var(--accent); opacity: 0; pointer-events: none; animation: stamp-ring 1s .85s var(--ease) both;
        }
        /* fill "backwards" (not "both"): a transform left on html/body after the shake would turn
           every position:fixed element into a page-relative one (the stamp layer then lingered). */
        html.stamped-page, html.stamped-page body { animation: stamp-shake-page .6s .9s cubic-bezier(.36, .07, .19, .97) backwards; }
        @keyframes stamp-overlay-fade { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
        @keyframes stamp-strike {
            0% { opacity: 0; transform: translate3d(0, -140vh, 0) scale(3.2) rotate(-24deg); }
            78% { opacity: 1; }
            88% { transform: scale(1.14) rotate(-12deg); }
            100% { opacity: 1; transform: scale(.94) rotate(-12deg); }
        }
        @keyframes stamp-settle { 0% { transform: scale(.94) rotate(-12deg); } 100% { transform: scale(1) rotate(-12deg); } }
        @keyframes stamp-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.9); } }
        @keyframes stamp-shake-page {
            0%, 100% { transform: translate3d(0, 0, 0); }
            10% { transform: translate3d(-10px, 6px, 0) rotate(-.6deg); }
            20% { transform: translate3d(9px, -7px, 0) rotate(.6deg); }
            30% { transform: translate3d(-8px, 5px, 0) rotate(-.5deg); }
            40% { transform: translate3d(7px, -4px, 0) rotate(.4deg); }
            55% { transform: translate3d(-5px, 3px, 0) rotate(-.3deg); }
            70% { transform: translate3d(3px, -2px, 0); }
            85% { transform: translate3d(-1px, 1px, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
            .stamp, .stamp-ring, html.stamped-page, html.stamped-page body, .stamp-overlay { animation: none !important; }
            .stamp { transform: rotate(-12deg); }
            .stamp-overlay { opacity: 0; visibility: hidden; }
        }

        /* Compact mode: tighten vertical rhythm so the whole kiosk flow needs less scrolling.
           Scoped to .standalone-wrap only - theme.css's fieldset/label/input spacing is shared
           with the admin panel, so it's overridden here rather than edited globally. */
        .standalone-wrap fieldset { padding: 12px 14px; margin-bottom: 10px; }
        .standalone-wrap legend { padding: 1px 8px; font-size: 0.95rem; }
        .standalone-wrap label { margin-top: 8px; }
        .standalone-wrap input[type=text], .standalone-wrap input[type=tel], .standalone-wrap input[type=number],
        .standalone-wrap input[type=email], .standalone-wrap input[type=password], .standalone-wrap input[type=date],
        .standalone-wrap input:not([type]), .standalone-wrap textarea, .standalone-wrap select {
            padding: 8px 10px; margin-top: 3px;
        }
        .standalone-wrap textarea { min-height: 48px; }
        .standalone-wrap .kiosk-brand { margin-bottom: 3px; }
        .standalone-wrap .kiosk-lede { margin: 4px 0 8px; }
        .standalone-wrap .trust-row { margin: 0 0 2px; }
        .standalone-wrap .steps-wrap { margin: 10px 0 12px; }
        .standalone-wrap .steps-bar { margin: 10px 0 14px; }
        .standalone-wrap .wizard-nav { margin-top: 12px; }
        .standalone-wrap .capture-zone { padding: 10px; min-height: 60px; margin: 6px 0 4px; }
        .standalone-wrap .svc-tiles { margin: 6px 0 2px; }
        .standalone-wrap .chip-row { margin: 4px 0 8px; }
        .standalone-wrap .after-submit { padding: 12px 12px 4px; margin: 3px 0 4px; }
        .standalone-wrap .after-steps li { padding: 0 0 8px; }
        .standalone-wrap .secure-note { margin-top: 8px; }

        /* Multi-device visit: devices parked via "Add another device" */
        .extra-count { margin: 2px 0 6px; font-size: 0.88rem; font-weight: 600; }
        .extra-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
        .extra-list li {
            display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--card2); font-size: 0.88rem;
        }
        .extra-list li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .extra-list li .nm small { color: var(--muted); margin-left: 6px; }
        .extra-list li button { min-height: 36px; padding: 4px 10px; font-size: 0.8rem; }
        .dev-badge {
            display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem;
            color: #001018; background: rgb(var(--pa-rgb)); font-weight: 700;
        }
        /* Windows order (Step 2, Windows Install only) */
        .win-box { margin: 10px 0; padding: 12px; border: 1px solid var(--border, #2a3a4a); border-radius: 12px; background: var(--card2, rgba(255,255,255,.03)); }
        .win-box h4 { margin: 12px 0 4px; font-size: .85rem; letter-spacing: .03em; color: var(--accent, #00d4ff); text-transform: uppercase; }
        .win-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        @media (max-width: 480px) { .win-row { grid-template-columns: 1fr; } }
        .hp-wrap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
        /* ---- Phone ergonomics (fx2 pass) ---- */
        body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
        .chip { min-height: 44px; }
        .photo-thumb .remove { width: 40px; height: 40px; }
        @media (max-width: 560px) {
            .wizard-nav .btn { min-height: 52px; font-size: 1.05rem; }
            .wizard-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
            .wizard-step { overflow-wrap: anywhere; }
        }

        /* ---- Top-left Back (steps 2/3 + booked screen) ---- */
        .kiosk-back {
            flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; min-width: 44px; margin: 0;
            padding: 0 12px 0 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--card2);
            color: var(--text); font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; text-decoration: none; box-shadow: none;
        }
        .kiosk-back[hidden] { display: none; }
        .kiosk-back svg { width: 20px; height: 20px; flex: none; }
        .kiosk-back:hover { border-color: rgb(var(--pa-rgb) / 0.6); }
        .kiosk-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
        .kiosk-back::after { display: none; }
        .kiosk-lede-short { display: none; }

        /* ---- Typing: no line under the text (spellcheck is off on every field; no underline
           decorations either). The focus ring/border stays as the visible focus cue. ---- */
        .standalone-wrap input, .standalone-wrap textarea { text-decoration: none; -webkit-text-decoration: none; }

        /* ---- Name ghost hint "+ Last Name": inside the box, right side, left of the tick ---- */
        .name-ghost {
            position: absolute; right: 36px; top: 50%; transform: translateY(-50%); margin-top: 1px;
            font-size: 0.82rem; font-weight: 600; color: #60a5fa; opacity: .9; white-space: nowrap;
            pointer-events: none; user-select: none; -webkit-user-select: none;
        }
        .name-ghost[hidden] { display: none; }
        .fld-row > input.has-ghost { padding-right: calc(38px + var(--ghost-w, 90px)); }

        /* ---- Phones: compact top so step 1's Next fits on the first screen ---- */
        @media (max-width: 560px) {
            .standalone-wrap { margin-top: 8px !important; margin-bottom: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
            body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
            .kiosk-brand { gap: 8px; margin-bottom: 2px !important; }
            .kiosk-logo { width: 34px; height: 34px; border-radius: 10px; font-size: 1.1rem; box-shadow: none; }
            .kiosk-back:not([hidden]) ~ .kiosk-logo { display: none; }
            .kiosk-brand > div:not(.kiosk-logo):not(.chip-row) { min-width: 0; }
            .kiosk-brand h1 { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .kiosk-brand .shop { font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            #langToggle { gap: 4px; }
            #langToggle .chip { padding: 0 10px; min-width: 44px; justify-content: center; }
            #langToggle .chip::before { display: none; }
            .kiosk-lede, .trust-row { display: none !important; }
            .kiosk-lede-short { display: block; font-size: 0.75rem; color: var(--muted); margin: 0 0 2px; line-height: 1.3; }
            .standalone-wrap .steps-wrap { margin: 4px 0 6px; }
            .steps-meta { font-size: 0.75rem; margin-bottom: 4px; }
            .steps-track-wrap { margin-bottom: 5px; }
            .steps-track { height: 4px; }
            .standalone-wrap .steps-bar { margin: 0; gap: 6px; }
            .step-pill { min-height: 30px; padding: 3px 4px; font-size: 0.75rem; border-radius: 8px; }
            .step-pill .num { width: 18px; height: 18px; margin-right: 4px; font-size: 0.75rem; }
            .standalone-wrap fieldset { padding: 6px 10px 10px; margin-bottom: 8px; }
            .standalone-wrap legend { font-size: 0.86rem; }
            .standalone-wrap label { margin-top: 5px; font-size: 0.8rem; }
            .fld-row { gap: 8px; }
            .fld-ico { width: 34px; height: 34px; margin-top: 5px; border-radius: 10px; }
            .fld-ico svg { width: 18px; height: 18px; }
            .standalone-wrap input[type=text], .standalone-wrap input[type=tel], .standalone-wrap input[type=number],
            .standalone-wrap input:not([type]), .standalone-wrap textarea, .standalone-wrap select { padding: 9px 10px; margin-top: 2px; }
            .fld-row > input, .fld-row > textarea { padding-right: 36px; }
            .fld-row > input.has-ghost { padding-right: calc(36px + var(--ghost-w, 90px)); }
            .fld-ok { top: 13px; }
            .fld-ok.wa-ok { top: 12px; }
            .standalone-wrap textarea { min-height: 44px; height: 60px; }
            .standalone-wrap .wizard-nav { margin-top: 8px; gap: 8px; }
            .wizard-nav .btn { min-height: 48px; }
            .fld-hint { margin-top: 2px !important; }
            .standalone-wrap .capture-zone { padding: 8px 10px; min-height: 52px; gap: 10px; }
            .capture-icon { width: 38px; height: 38px; }
            .detail-meter { margin: -2px 0 8px; }
            .standalone-wrap .secure-note { margin-top: 6px; }
        }
        /* Phones, steps 2 + 3 (long steps): the Back / Next (Confirm) row sticks to the bottom of
           the screen so it is always reachable. While a field is focused (keyboard open) it drops
           back into the normal flow, so it never covers the field being typed or the keyboard. */
        @media (max-width: 560px) {
            html[data-kiosk-step="2"] .wizard-step.active > .wizard-nav,
            html[data-kiosk-step="3"] .wizard-step.active > .wizard-nav {
                position: sticky; bottom: 0; z-index: 6; flex-direction: row; align-items: center; gap: 8px;
                margin: 8px -12px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
                background: rgba(6, 9, 20, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
                border-top: 1px solid var(--border); animation: none;
            }
            html[data-kiosk-step="2"] .wizard-step.active > .wizard-nav .btn.secondary,
            html[data-kiosk-step="3"] .wizard-step.active > .wizard-nav .btn.secondary { width: auto; flex: none; padding-left: 14px; padding-right: 14px; }
            html[data-kiosk-step="2"] .wizard-step.active > .wizard-nav [data-next],
            html[data-kiosk-step="3"] .wizard-step.active > .wizard-nav .submit-wrap { flex: 1; min-width: 0; width: auto; }
            html[data-kiosk-step="3"] .wizard-step.active > .wizard-nav .submit-wrap .btn { width: 100%; }
            html:has(.wizard-step.active :is(input:not([type=checkbox]):not([type=file]), textarea, select):focus) .wizard-step.active > .wizard-nav {
                position: static; margin: 8px 0 0; padding: 0; background: none; border-top: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
            }
            /* lift the round sound/effects buttons above the sticky bar */
            html[data-kiosk-step="2"] .fx-sound-toggle, html[data-kiosk-step="2"] .fx2-mode, html[data-kiosk-step="2"] .fx2-top,
            html[data-kiosk-step="3"] .fx-sound-toggle, html[data-kiosk-step="3"] .fx2-mode, html[data-kiosk-step="3"] .fx2-top {
                bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }
        /* ---- Booked screen: compact on phones; the celebratory hero fades + collapses after ~5 s ---- */
        .book-another { margin-top: 18px; }
        .booked-hero, .success-box.booked > .fx-check { transition: opacity .45s var(--ease), height .6s var(--ease), margin .6s var(--ease); }
        .booked-hero.hero-out, .success-box.booked > .fx-check.hero-out { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; }
        @media (max-width: 560px) {
            .success-box.booked { display: flex; flex-direction: column; align-items: center; padding: 12px 12px 14px; margin-bottom: 8px; }
            .success-box.booked > * { max-width: 100%; }
            .success-box.booked > .fx-check { width: 34px; height: 34px; margin: 0 auto 4px; flex: none; }
            .booked h2 { font-size: 1.12rem; margin: 0 0 2px; }
            .booked .lede { font-size: 0.8rem; margin: 0 0 8px; }
            .booked .booked-device { width: 100%; margin-bottom: 6px !important; }
            .token-card { padding: 8px 14px 10px; gap: 2px; }
            .booked .token { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
            .copy-btn { margin-top: 2px; }
            .booked .print-pipeline { margin: 4px 0; }
            .booked .pp-row { margin: 6px 0; }
            /* the key action comes straight after the token(s); tips/next steps below it */
            .booked .book-another { order: 1; width: 100%; margin-top: 2px; }
            .booked .hint, .booked .next-steps { order: 2; }
            .booked .hint { margin: 8px 0 0; }
            .booked .next-steps { margin-top: 4px; }
            .next-steps li { padding: 5px 0 5px 34px; font-size: 0.84rem; }
            .next-steps li::before { top: 5px; }
        }
        @media (max-width: 340px) {
            .kiosk-brand .shop { display: none; }
            .kiosk-brand h1 { font-size: 1rem; }
            .kiosk-back { padding-right: 8px; }
            .name-ghost { font-size: 0.75rem; }
        }
        /* ---- Booking draft: round "Start over" icon in the top bar (same row - adds no height),
           one-line "restored" strip, and the shared-tablet idle prompt ---- */
        .kiosk-reset {
            flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 0 !important; min-width: 0;
            margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--card2); color: var(--text);
            cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
        }
        .kiosk-reset::after { display: none; }
        .kiosk-reset svg { width: 18px; height: 18px; flex: none; }
        .kiosk-reset:hover { border-color: rgb(var(--pa-rgb) / 0.6); }
        .kiosk-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); }
        .draft-strip {
            display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border-radius: 10px;
            border: 1px solid rgb(var(--pa-rgb) / 0.35); background: rgb(var(--pa-rgb) / 0.10); color: var(--text);
            font-size: 0.82rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .4s;
        }
        .draft-strip[hidden] { display: none; }
        .draft-strip .ds-warn { color: #fbbf24; }
        .idle-toast {
            position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
            display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 14px;
            border: 1px solid var(--border); background: rgba(6, 9, 20, 0.96); color: var(--text); font-size: 0.92rem; box-shadow: 0 10px 30px rgba(0,0,0,.45);
        }
        .idle-toast[hidden] { display: none; }
        .idle-toast .it-msg { flex: 1; min-width: 0; }
        .idle-toast .btn { flex: none; width: auto; white-space: nowrap; min-height: 40px; padding: 0 14px; margin: 0; }
        @media (max-width: 560px) {
            .draft-strip { margin: 0 0 6px; padding: 4px 8px; font-size: 0.75rem; border-radius: 8px; }
            .kiosk-brand .kiosk-reset { width: 34px; height: 34px; min-height: 0 !important; }
        }

        /* ================= Simple words + icons (EN / हिं) ================= */
        /* Icon next to the text of every main action (low-literacy rule: picture + short word). */
        .btn .bi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
        .btn .bi + span, .btn span + .bi { margin-left: 6px; }
        .print-opts { flex-wrap: wrap; }
        .print-opts .checkboxrow label { display: inline-flex; align-items: center; gap: 6px; }
        .print-opts .checkboxrow label .po-ico { width: 18px; height: 18px; flex: none; color: var(--muted); }
        /* WhatsApp consent: its own full-width line, never cut off with "…" */
        .print-opts .checkboxrow.wa-row { flex: 1 1 100%; }
        .print-opts .checkboxrow.wa-row label { white-space: normal; overflow: visible; align-items: flex-start; line-height: 1.35; }
        /* >= 44px touch targets without changing the look (an invisible hit area around small controls) */
        .chip-row .chip, .svc-suggest-note .dismiss { position: relative; }
        .kiosk-reset, .chip-row .chip, .svc-suggest-note .dismiss { overflow: visible; } /* the hit area may stick out */
        .kiosk-reset::after { content: ''; position: absolute; inset: -5px; }
        .photo-thumb .remove { width: 32px; height: 32px; top: 0; right: 0; font-size: 1.1rem; }
        .photo-thumb .remove::after { content: ''; position: absolute; inset: -6px; }
        .chip-row .chip::after { content: ''; position: absolute; inset: -7px -3px; }
        .svc-suggest-note .dismiss::after { content: ''; position: absolute; inset: -12px; }
        /* Staff-only advance: amount + Cash | UPI, live QR, and the "Payment received?" sheet */
        .adv-row { display: flex; gap: 8px; align-items: center; }
        .adv-row input { flex: 1; min-width: 0; margin: 0; }
        .adv-method { display: flex; gap: 6px; flex: none; }
        .adv-method .chip { min-height: 44px; }
        .adv-qr { text-align: center; margin: 10px 0 0; }
        .adv-qr img { background: #fff; border-radius: 12px; padding: 6px; width: 200px; height: 200px; }
        .adv-sheet { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: rgb(var(--pa-rgb) / 0.08); }
        .adv-sheet p { margin: 0 0 10px; font-weight: 600; font-size: 1.05rem; }
        .adv-sheet-btns, .inline-ask .ia-btns { display: flex; gap: 8px; }
        .adv-sheet-btns .btn { flex: 1; min-height: 48px; }
        .inline-ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
        .inline-ask .btn { min-height: 44px; padding: 0 14px; }
        /* Devanagari needs a little more line height than the Latin display fonts */
        html[lang="hi"] .kiosk-brand h1, html[lang="hi"] .step-heading, html[lang="hi"] .booked h2 { line-height: 1.35; }

/* Contrast / touch targets (phase 1): placeholder colour, 48px buttons, nothing under 0.75rem. */
.standalone-wrap ::placeholder { color: #7c8aa0; opacity: 1; }
.standalone-wrap .btn, .standalone-wrap button.btn, .standalone-wrap a.btn { min-height: 48px; }

/* ================= Staff booking: ONE screen (UI-SIMPLIFICATION-PLAN Phase 3) =================
   Only when a staff member is signed in (body.sb-page, Pages/_RegisterStaffForm.cshtml). Plain and calm: no
   animation, short labels, 48px touch targets, sticky bottom bar with the print options + "Save & print". */
.sb-page .sb-form { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
.sb-page .sb-form *, .sb-page .sb-form *::before, .sb-page .sb-form *::after { animation: none !important; }
.sb-one > label, .sb-more label { display: block; margin-top: 12px; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.sb-one > label:first-child { margin-top: 4px; }
.sb-one input[type=text], .sb-one input[type=tel], .sb-one input[type=number], .sb-one textarea, .sb-one select { font-size: 1rem; min-height: 48px; }
.sb-one textarea { min-height: 56px; }
.sb-one .fld-hint { font-size: 0.875rem; margin: 4px 0 0; }
.sb-one .sb-bad { color: var(--danger); }
.sb-one .sb-ok { color: var(--success); }
.sb-one .chip { min-height: 44px; padding: 8px 16px; font-size: 0.95rem; }
/* Service: one row of small chips instead of big tiles */
.sb-one .svc-tiles.sb-svc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.sb-one .svc-tiles.sb-svc[hidden] { display: none; }
.sb-one .sb-svc .svc-tile { flex: 0 1 auto; flex-direction: row; min-height: 44px; padding: 6px 12px; gap: 6px; border-radius: 999px; font-size: 0.9rem; transform: none !important; opacity: 1; }
.sb-one .sb-svc .svc-tile svg { width: 18px; height: 18px; transform: none !important; }
/* "More" fold */
.sb-more { margin: 16px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card2); }
.sb-more > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; }
.sb-more > summary::-webkit-details-marker { display: none; }
.sb-more > summary::before { content: '+'; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); font-weight: 700; flex: none; }
.sb-more[open] > summary::before { content: '\2212'; }
.sb-more > summary small { color: var(--muted); font-weight: 400; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-more[open] { padding: 0 14px 14px; }
.sb-more[open] > summary { padding: 0; }
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.sb-grid label { margin-top: 12px; }
.sb-more .sb-photo { margin-top: 14px; }
.sb-more .sb-extra { margin-top: 14px; }
.sb-more .sb-extra .btn { width: 100%; }
/* Sticky bottom bar */
.sb-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}
.sb-bar > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.sb-print { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 8px; }
.sb-check { flex: 1 1 0; min-width: 0; display: flex !important; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 0 !important;
    border: 1px solid var(--border); border-radius: 10px; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sb-check input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; }
.sb-check:has(input:checked) { border-color: var(--accent); }
.sb-bar .sb-save { width: 100%; min-height: 54px; font-size: 1.125rem; font-weight: 700; }
@media (max-width: 380px) { .sb-grid { grid-template-columns: 1fr; } }
/* the round sound / effects buttons sit above the bar, never on top of "Save & print" */
body.sb-page .fx-sound-toggle, body.sb-page .fx2-fab { margin-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
.sb-page .fx2-toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

/* Returning customer: earlier names / addresses as tap-to-use buttons under the mobile box */
.cust-suggest { margin: 6px 0 2px; }
.cust-suggest[hidden] { display: none; }
.cust-suggest .cs-group { margin-bottom: 6px; }
.cust-suggest .cs-label { font-size: .78rem; opacity: .75; margin-bottom: 4px; }
.cust-suggest .cs-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cust-suggest .cs-chip {
    max-width: 100%; min-height: 40px; padding: 6px 12px; border-radius: 999px; text-align: left;
    border: 1px solid rgb(var(--pa-rgb) / 0.5); background: rgb(var(--pa-rgb) / 0.10); color: inherit;
    font: inherit; font-size: .9rem; line-height: 1.25; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cust-suggest .cs-chip:active { background: rgb(var(--pa-rgb) / 0.25); }
.gallery-link { display: inline-block; position: relative; margin: 4px 0 0; font-size: .85rem; text-decoration: underline; opacity: .85; cursor: pointer; }
.gallery-link input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* While typing, floating buttons must not sit over the fields above the keyboard. */
body:has(input:focus, textarea:focus, select:focus) .fx-sound-toggle,
body:has(input:focus, textarea:focus, select:focus) .fx2-fab { display: none !important; }

/* Lite mode / phones: no endless animations (battery + typing smoothness); final look stays, only the motion stops. */
html.fx2-lite .steps-glint { animation: none; opacity: 0; }
html.fx2-lite .steps-head, html.fx2-lite .step-pill.active .num,
html.fx2-lite .submit-wrap.ready::before, html.fx2-lite .capture-zone.invite .capture-icon::after { animation: none !important; }
html.fx2-lite .token-card { animation: token-in .8s .35s var(--ease-spring) both; }
html.fx2-lite .submit-wrap.ready::before { opacity: .6; }
html.fx2-lite .kiosk-ambient .aurora, html.fx2-lite .kiosk-ambient .orb,
html.fx2-lite .kiosk-ambient .mote, html.fx2-lite .kiosk-ambient .sweep { animation: none !important; will-change: auto !important; }
@media (max-width: 760px), (pointer: coarse) { .kiosk-ambient { display: none !important; } }