*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--color-accent: #3DAA8E;--color-success: #22C55E;--color-warning: #F59E0B;--color-danger: #EF4444;--color-unknown: #6366F1;--bg-dark: #0f172a;--bg-card: #1e293b;--bg-elevated: #334155;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-muted: #475569;--radius: 16px;--radius-sm: 8px;--gap: 24px}html,body,#root{height:100%;width:100%;overflow:hidden;background:var(--bg-dark);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:16px;line-height:1.5;user-select:none;cursor:default}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--gap);overflow:hidden}.screen-fullcolor{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--gap)}.text-hero{font-size:3rem;font-weight:700;letter-spacing:-.02em}.text-large{font-size:2rem;font-weight:600}.text-title{font-size:1.5rem;font-weight:600}.text-subtitle{font-size:1.125rem;font-weight:500}.text-body{font-size:1rem}.text-caption{font-size:.875rem;color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:120px;padding:0 28px;border-radius:var(--radius);font-size:1.125rem;font-weight:600;border:none;cursor:pointer;transition:opacity .1s,transform .1s;text-decoration:none}.btn:active{opacity:.85;transform:scale(.98)}.btn-primary{background:var(--color-accent);color:#fff}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary)}.btn-success{background:var(--color-success);color:#fff}.btn-danger{background:var(--color-danger);color:#fff}.btn-ghost{background:transparent;color:var(--text-secondary);border:2px solid var(--bg-elevated)}.btn-full{width:100%}.btn-lg{min-height:72px;font-size:1.25rem;border-radius:20px}.card{background:var(--bg-card);border-radius:var(--radius);padding:var(--gap)}.worker-photo{width:200px;height:200px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.2)}.worker-photo-placeholder{width:200px;height:200px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:5rem;color:var(--text-secondary)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:360px}.keypad-key{background:var(--bg-card);border:2px solid var(--bg-elevated);border-radius:var(--radius);min-height:72px;font-size:1.5rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:background .1s}.keypad-key:active{background:var(--bg-elevated)}.keypad-key.backspace{font-size:1.25rem}.keypad-key.empty{visibility:hidden}.pin-dots{display:flex;gap:16px;margin:24px 0}.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-secondary);background:transparent;transition:background .1s}.pin-dot.filled{background:var(--color-accent);border-color:var(--color-accent)}.status-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#0006;font-size:.8125rem;color:var(--text-secondary);z-index:100}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.status-dot.online{background:var(--color-success)}.status-dot.offline{background:var(--color-warning)}.offline-banner{position:fixed;bottom:34px;left:0;right:0;background:#78350f;color:#fef3c7;text-align:center;padding:8px;font-size:.875rem;font-weight:500;z-index:99}.mode-buttons{display:flex;flex-direction:column;gap:16px;width:100%;max-width:400px}.pairing-input{display:flex;gap:10px;justify-content:center}.pairing-char{width:52px;height:68px;background:var(--bg-card);border:2px solid var(--bg-elevated);border-radius:var(--radius-sm);text-align:center;font-size:1.5rem;font-weight:700;color:var(--text-primary);text-transform:uppercase;caret-color:var(--color-accent)}.pairing-char:focus{outline:none;border-color:var(--color-accent)}.progress-steps{display:flex;gap:8px;margin-bottom:32px}.progress-step{height:4px;border-radius:2px;flex:1;background:var(--bg-elevated);transition:background .2s}.progress-step.active{background:var(--color-accent)}.progress-step.complete{background:var(--color-success)}.kiosk-logo{font-size:1.5rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em}.kiosk-logo span{color:var(--color-accent)}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--bg-elevated)}.settings-row:last-child{border-bottom:none}.camera-wrapper{width:100%;max-width:480px;aspect-ratio:3/4;max-height:40vh;border-radius:var(--radius);overflow:hidden;background:#000;position:relative}.face-hint-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.face-hint-oval{width:200px;height:260px;border:3px dashed rgba(255,255,255,.4);border-radius:50%}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.block-reasons{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;max-width:480px;width:100%;text-align:left}.block-reason-item{background:#0000004d;border-left:4px solid var(--color-danger);padding:12px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:1rem;color:#fff}.hs-text{max-width:560px;text-align:left;background:var(--bg-card);border-radius:var(--radius);padding:var(--gap);font-size:1rem;line-height:1.7;color:var(--text-primary);white-space:pre-wrap;overflow-y:auto;max-height:40vh}.countdown-ring{position:absolute;top:24px;right:24px;width:56px;height:56px}.countdown-ring circle{fill:none;stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}.countdown-ring .bg{stroke:#fff3}.countdown-ring .fill{stroke:#fffc;transition:stroke-dashoffset 1s linear}