*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--brand-deep: #1D1912;--brand-black: #0A0A0A;--brand-gold-light: #EECD5C;--brand-gold: #D2A63C;--brand-gold-deep: #BB8525;--surface-1: rgba(255,255,255,.04);--surface-2: rgba(255,255,255,.07);--border-subtle: rgba(255,255,255,.08);--text-primary: #FFFFFF;--text-muted: rgba(255,255,255,.45);--text-hint: rgba(255,255,255,.22);--success: #22C55E;--error: #EF4444;--radius: 20px;--radius-sm: 12px}html,body{height:100%;font-family:Inter,sans-serif;background:var(--brand-black);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}#app{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.bg-gradient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(ellipse 90% 55% at 50% -5%,rgba(210,166,60,.22) 0%,transparent 65%),#0a0a0a}.bg-grid{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px}.particles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.particle{position:absolute;border-radius:50%;background:var(--brand-gold);opacity:0;animation:float-particle var(--dur, 8s) var(--delay, 0s) ease-in-out infinite}@keyframes float-particle{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.5}85%{opacity:.15}to{opacity:0;transform:translateY(-80vh) scale(.4)}}.hidden{display:none}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;transition:opacity .4s ease,transform .4s ease}.screen.hidden{opacity:0;pointer-events:none;transform:translateY(16px)}.kiosk-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:20px 48px;background:linear-gradient(to bottom,rgba(10,10,10,.95),transparent)}.brand-logo{display:flex;align-items:center;gap:14px}.brand-icon{width:38px;height:38px;background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-deep));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--brand-deep)}.brand-name{font-size:11px;font-weight:900;letter-spacing:.38em;color:var(--text-muted);text-transform:uppercase}.live-clock{text-align:right}.clock-time{font-size:22px;font-weight:900;color:var(--text-primary);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.clock-date{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase}.setup-card{width:500px;padding:52px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:28px;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}.setup-eyebrow{font-size:10px;font-weight:900;letter-spacing:.35em;color:var(--brand-gold);text-transform:uppercase;margin-bottom:10px}.setup-heading{font-size:30px;font-weight:900;letter-spacing:-.03em;margin-bottom:8px}.setup-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:40px;line-height:1.65}.form-label{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px}.form-input{width:100%;height:54px;padding:0 18px;background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:15px;font-family:Inter,sans-serif;font-weight:500;outline:none;transition:border-color .2s;caret-color:var(--brand-gold);margin-bottom:20px}.form-input:focus{border-color:var(--brand-gold)}.form-input::placeholder{color:var(--text-hint)}.btn-primary{width:100%;height:58px;background:linear-gradient(135deg,var(--brand-gold-light),var(--brand-gold));border:none;border-radius:var(--radius-sm);color:var(--brand-deep);font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .2s;font-family:Inter,sans-serif}.btn-primary:hover{box-shadow:0 10px 32px #d2a63c61}.btn-primary:active{transform:scale(.98)}.error-text{font-size:12px;color:var(--error);font-weight:600;min-height:18px;margin:-8px 0 12px}#screen-qr{flex-direction:column;gap:24px;align-items:center;justify-content:center}.qr-left{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-right:80px;max-width:520px}.qr-eyebrow{font-size:11px;font-weight:900;letter-spacing:.38em;text-transform:uppercase;color:var(--brand-gold);margin-bottom:16px}.qr-headline{font-size:56px;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:20px}.qr-headline span{color:var(--brand-gold-light)}.qr-instruction{font-size:16px;color:var(--text-muted);line-height:1.7;margin-bottom:40px}.steps-list{display:flex;flex-direction:column;gap:14px}.step-item{display:flex;align-items:flex-start;gap:14px}.step-num{width:28px;height:28px;border-radius:50%;background:#d2a63c1f;border:1px solid rgba(210,166,60,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--brand-gold);shrink:0;flex-shrink:0}.step-text{font-size:13px;color:var(--text-muted);line-height:1.5;padding-top:4px}.qr-right{display:flex;flex-direction:column;align-items:center;gap:24px}.qr-frame{position:relative;padding:28px;background:#fff;border-radius:24px;box-shadow:0 0 0 1px #d2a63c33,0 40px 80px #00000080}.qr-frame canvas,.qr-frame img{display:block;border-radius:8px}.qr-frame:before,.qr-frame:after{content:"";position:absolute;width:24px;height:24px;border-color:var(--brand-gold);border-style:solid}.qr-frame:before{top:-3px;left:-3px;border-width:3px 0 0 3px;border-radius:6px 0 0}.qr-frame:after{bottom:-3px;right:-3px;border-width:0 3px 3px 0;border-radius:0 0 6px}.qr-expired-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0a0a0ad9;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.qr-expired-overlay.hidden{display:none}.qr-expired-text{font-size:13px;font-weight:900;color:var(--error);text-transform:uppercase;letter-spacing:.2em}.countdown-wrap{position:relative;width:80px;height:80px}.countdown-ring{transform:rotate(-90deg)}.countdown-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:5}.countdown-ring-bar{fill:none;stroke:var(--brand-gold);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}.countdown-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--text-primary)}.countdown-num.urgent{color:var(--error)}.qr-meta{display:flex;flex-direction:column;align-items:center;gap:8px}.qr-branch-chip{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#d2a63c14;border:1px solid rgba(210,166,60,.2);border-radius:100px;font-size:11px;font-weight:800;color:var(--brand-gold);letter-spacing:.1em;text-transform:uppercase}.qr-status-chip{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--text-muted)}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.stats-row{display:flex;gap:12px;margin-top:8px}.stat-chip{padding:9px 16px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:100px;font-size:11px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:7px}#screen-confirm{gap:20px}.confirm-ring{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:58px;animation:pop-in .5s cubic-bezier(.34,1.56,.64,1) forwards}.confirm-ring.success{background:radial-gradient(circle,rgba(34,197,94,.14),transparent);border:2px solid rgba(34,197,94,.28)}.confirm-ring.gold{background:radial-gradient(circle,rgba(210,166,60,.14),transparent);border:2px solid rgba(210,166,60,.3)}@keyframes pop-in{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.confirm-action{font-size:12px;font-weight:900;letter-spacing:.35em;text-transform:uppercase}.confirm-action.ci{color:var(--success)}.confirm-action.lb{color:var(--brand-gold-light)}.confirm-action.co{color:var(--text-muted)}.confirm-name{font-size:46px;font-weight:900;letter-spacing:-.04em}.confirm-meta{font-size:16px;color:var(--text-muted)}.confirm-time{font-size:30px;font-weight:700;color:var(--brand-gold-light);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.progress-bar-wrap{width:320px;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;margin-top:16px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-light));border-radius:100px;animation:shrink 4s linear forwards}@keyframes shrink{0%{width:100%}to{width:0%}}.footer-hint{position:fixed;bottom:22px;font-size:10px;font-weight:600;color:var(--text-hint);letter-spacing:.14em;text-transform:uppercase;z-index:20}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1024px){body{overflow:auto}.screen{position:relative;min-height:100vh;padding:100px 24px 80px;overflow-y:auto;justify-content:flex-start}.screen.hidden{display:none}#screen-qr{flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:40px}.qr-left{padding-right:0;align-items:center;text-align:center;max-width:100%}.qr-headline{font-size:38px;margin-bottom:12px}.qr-instruction{font-size:14px;margin-bottom:24px}.steps-list{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:420px;margin:0 auto}.qr-right{gap:20px;width:100%;align-items:center}.qr-frame{padding:20px}.qr-frame canvas{width:220px!important;height:220px!important}.footer-hint{position:relative;bottom:auto;margin-top:40px;text-align:center;padding-bottom:24px}}@media (max-width: 580px){.kiosk-header{padding:16px 20px}.brand-logo img{height:38px!important}.brand-logo h1{font-size:16px!important}.brand-logo p{font-size:7px!important}.clock-time{font-size:18px}.clock-date{font-size:8px}.setup-card{width:100%;max-width:100%;padding:32px 20px;border-radius:20px}.setup-heading{font-size:24px}.setup-subtitle{font-size:13px;margin-bottom:24px}.confirm-name{font-size:32px}.confirm-time{font-size:24px}.confirm-meta{font-size:14px;text-align:center;padding:0 16px}.confirm-ring{width:100px;height:100px;font-size:44px}}.btn-help{background:#ffffff0d;border:1px solid var(--border-subtle);color:var(--brand-gold-light);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;outline:none}.btn-help:hover{background:#d2a63c26;border-color:var(--brand-gold-light);transform:scale(1.05);box-shadow:0 0 15px #d2a63c40}.btn-help:active{transform:scale(.95)}.btn-fullscreen{background:#ffffff0d;border:1px solid var(--border-subtle);color:var(--brand-gold-light);width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;outline:none}.btn-fullscreen:hover{background:#d2a63c26;border-color:var(--brand-gold-light);transform:scale(1.05);box-shadow:0 0 15px #d2a63c40}.btn-fullscreen:active{transform:scale(.95)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0a0a0ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .3s ease}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-card{position:relative;width:100%;max-width:480px;background:#1d1912;border:1px solid var(--brand-gold-deep);border-radius:28px;padding:40px;box-shadow:0 20px 50px #000c,0 0 30px #d2a63c14;animation:modal-pop-in .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes modal-pop-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-close-btn{position:absolute;top:24px;right:24px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:color .2s;outline:none}.modal-close-btn:hover{color:var(--brand-gold-light)}