@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--color-bg: #f0f2f5;--color-bg-secondary: #e8eaed;--color-surface: #ffffff;--color-surface-hover: #f8f9fa;--color-surface-alt: #f5f6f8;--color-accent: #2563eb;--color-accent-secondary: #3b82f6;--color-accent-glow: rgba(37, 99, 235, .15);--color-accent-light: rgba(37, 99, 235, .08);--color-text-primary: #1a1a2e;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--color-error: #ef4444;--color-success: #22c55e;--color-warning: #f59e0b;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text-primary);line-height:1.5;overflow-x:hidden}button{font-family:inherit;outline:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}::selection{background:var(--color-accent);color:#fff}.clock{text-align:center;-webkit-user-select:none;user-select:none}.clock__time{font-size:4rem;font-weight:700;letter-spacing:.04em;color:var(--color-text-primary);font-variant-numeric:tabular-nums}.clock__date{font-size:1.05rem;font-weight:400;color:var(--color-text-secondary);text-transform:capitalize;margin-top:.15rem;letter-spacing:.02em}@media(max-width:1024px){.clock__time{font-size:3.25rem}.clock__date{font-size:.95rem}}@media(max-width:768px){.clock__time{font-size:2.5rem}.clock__date{font-size:.9rem}}@media(max-width:600px){.clock__time{font-size:2rem}.clock__date{font-size:.8rem}}@media(max-height:600px)and (orientation:landscape){.clock__time{font-size:1.85rem}.clock__date{font-size:.75rem;margin-top:.1rem}}.pinpad{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:280px;margin:0 auto}.pinpad__display{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:50px}.pinpad__dots{display:flex;gap:10px}.pinpad__dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--color-border-hover);background:transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}.pinpad__dot--filled{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 0 8px var(--color-accent-glow);transform:scale(1.15)}.pinpad__dot--error{border-color:var(--color-error);background:var(--color-error);box-shadow:0 0 8px #ef44444d;animation:shake .5s ease-in-out}.pinpad__error{color:var(--color-error);font-size:.875rem;font-weight:500;text-align:center;animation:fadeIn .3s ease}.pinpad__loading{color:var(--color-accent);font-size:.875rem;font-weight:500;animation:pulse 1.5s ease-in-out infinite}.pinpad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.pinpad__key{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1.5;min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-primary);font-size:1.35rem;font-weight:600;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.pinpad__key:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--color-accent-glow) 0%,transparent 70%);opacity:0;transition:opacity .3s ease}.pinpad__key:active:after{opacity:.4}.pinpad__key:hover{border-color:var(--color-accent);background:var(--color-accent-light);transform:scale(1.03)}.pinpad__key:active{transform:scale(.96);border-color:var(--color-accent)}.pinpad__key:disabled{opacity:.4;cursor:not-allowed;transform:none}.pinpad__key--action{background:var(--color-surface-alt);font-size:1rem}.pinpad__key--action:hover{background:var(--color-bg-secondary)}.pinpad__key-number{position:relative;z-index:1}.pinpad__key-icon{position:relative;z-index:1;font-size:1.1rem}.pinpad__submit{width:100%;padding:.6rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-alt);color:var(--color-text-muted);font-size:.85rem;font-weight:700;letter-spacing:.15em;cursor:not-allowed;transition:all .2s ease;-webkit-user-select:none;user-select:none;min-height:40px;display:flex;align-items:center;justify-content:center}.pinpad__submit--active{background:var(--color-accent);color:#fff;cursor:pointer;box-shadow:0 2px 12px #2563eb4d;border-color:var(--color-accent)}.pinpad__submit--active:hover{transform:translateY(-1px);box-shadow:0 4px 18px #2563eb59;background:var(--color-accent-secondary)}.pinpad__submit--active:active{transform:translateY(0)}.pinpad__spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.pinpad--error .pinpad__grid{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.pinpad{max-width:400px;gap:1.25rem}.pinpad__key{min-height:74px;font-size:1.85rem;border-radius:14px}.pinpad__submit{min-height:54px;font-size:1.05rem;border-radius:14px}}@media(max-width:768px){.pinpad{max-width:360px;gap:1rem}.pinpad__grid{gap:12px}.pinpad__key{min-height:66px;font-size:1.7rem;border-radius:12px}.pinpad__key--action{font-size:1.25rem}.pinpad__key-icon{font-size:1.4rem}.pinpad__dot{width:17px;height:17px}.pinpad__dots{gap:14px}.pinpad__submit{min-height:50px;font-size:1rem;padding:.75rem;border-radius:12px}}@media(max-width:600px){.pinpad{max-width:320px;gap:.75rem}.pinpad__grid{gap:10px}.pinpad__key{min-height:58px;font-size:1.5rem;border-radius:10px}.pinpad__submit{min-height:46px;font-size:.95rem}.pinpad__display{min-height:55px;gap:.5rem}}@media(max-height:600px)and (orientation:landscape){.pinpad{max-width:260px;gap:.5rem}.pinpad__grid{gap:6px}.pinpad__key{min-height:42px;aspect-ratio:1.6;font-size:1.2rem;border-radius:10px}.pinpad__key--action{font-size:1rem}.pinpad__dot{width:12px;height:12px}.pinpad__dots{gap:10px}.pinpad__display{min-height:40px;gap:.35rem}.pinpad__submit{min-height:38px;font-size:.85rem;padding:.5rem;border-radius:10px}}.camera{display:flex;flex-direction:column;align-items:center;gap:1.25rem;animation:fadeInScale .4s ease}.camera__header{text-align:center}.camera__greeting{display:block;font-size:1.4rem;font-weight:700;color:var(--color-text-primary);margin-bottom:.25rem}.camera__instruction{font-size:.95rem;color:var(--color-text-secondary)}.camera__viewport{position:relative;width:560px;max-width:90vw;aspect-ratio:4 / 3;border-radius:var(--radius-lg);overflow:hidden;border:2px solid rgba(37,99,235,.5);background:linear-gradient(145deg,#0a0e17,#1a1f2e);box-shadow:0 0 20px #2563eb26,0 0 60px #2563eb14,0 8px 32px #0000004d;animation:viewportGlowPulse 3s ease-in-out infinite}@keyframes viewportGlowPulse{0%,to{box-shadow:0 0 20px #2563eb26,0 0 60px #2563eb14,0 8px 32px #0000004d;border-color:#2563eb80}50%{box-shadow:0 0 30px #2563eb40,0 0 80px #2563eb1f,0 8px 32px #0000004d;border-color:#2563ebb3}}.camera__video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera__face-oval{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:90%;border:2px solid rgba(37,99,235,.5);border-radius:50%;pointer-events:none;z-index:3;box-shadow:0 0 15px #2563eb26;animation:ovalPulse 2.5s ease-in-out infinite}@keyframes ovalPulse{0%,to{border-color:#2563eb80;box-shadow:0 0 15px #2563eb26}50%{border-color:#2563ebcc;box-shadow:0 0 25px #2563eb4d}}.camera__scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(37,99,235,.3) 15%,rgba(37,99,235,.8) 50%,rgba(37,99,235,.3) 85%,transparent 100%);box-shadow:0 0 12px #2563eb66;z-index:4;pointer-events:none;animation:scanMove 2.5s ease-in-out infinite}@keyframes scanMove{0%{top:10%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:90%;opacity:0}}.camera__countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000001a;pointer-events:none}.camera__countdown-number{font-size:5rem;font-weight:800;color:#fff;text-shadow:0 0 30px rgba(37,99,235,.5);animation:countdownPulse 1s ease-in-out infinite}.camera__flash{position:absolute;inset:0;background:#fff;animation:flash .5s ease-out forwards}.camera__validated-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10b98140;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeInScale .4s ease;z-index:5;gap:.5rem}.camera__validated-icon{font-size:4rem;animation:validatedBounce .6s cubic-bezier(.34,1.56,.64,1) forwards;filter:drop-shadow(0 4px 12px rgba(16,185,129,.4))}.camera__validated-text{font-size:1.3rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:.03em;animation:fadeInScale .5s ease .2s both}.camera__validated-hint{font-size:.9rem;color:var(--color-text-secondary);animation:hintPulse 1.5s ease-in-out infinite;margin-top:.25rem}@keyframes validatedBounce{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}@keyframes hintPulse{0%,to{opacity:.6}50%{opacity:1}}.camera__capture-btn{padding:.875rem 2.25rem;border:none;border-radius:var(--radius-md);background:var(--color-accent);color:#fff;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #2563eb4d;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}.camera__capture-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #2563eb59;background:var(--color-accent-secondary)}.camera__capture-btn:active{transform:translateY(0)}.camera--error{padding:3rem 2rem;text-align:center}.camera__error-icon{font-size:3rem;margin-bottom:1rem;filter:grayscale(1)}.camera__error-text{color:var(--color-error);font-size:1rem;margin-bottom:1.5rem}.camera__retry-btn{padding:.75rem 2rem;border:1px solid var(--color-error);border-radius:var(--radius-md);background:transparent;color:var(--color-error);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.camera__retry-btn:hover{background:#ef444414}@keyframes fadeInScale{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes countdownPulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1);opacity:1}to{transform:scale(.8);opacity:.5}}@keyframes flash{0%{opacity:.9}to{opacity:0}}@media(max-width:1024px){.camera__viewport{width:480px}.camera__greeting{font-size:1.25rem}}@media(max-width:768px){.camera{gap:1rem}.camera__viewport{width:400px}.camera__greeting{font-size:1.15rem}.camera__instruction{font-size:.85rem}.camera__capture-btn{padding:.6rem 1.5rem;font-size:.9rem}.camera__countdown-number{font-size:4rem}}@media(max-width:600px){.camera__viewport{width:95vw}.camera__greeting{font-size:1.05rem}.camera__capture-btn{width:100%}}@media(max-height:600px)and (orientation:landscape){.camera{gap:.5rem}.camera__viewport{width:50vh}.camera__greeting{font-size:1rem}.camera__instruction{font-size:.8rem}.camera__capture-btn{padding:.5rem 1.25rem;font-size:.85rem}.camera__countdown-number{font-size:3rem}}.status{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2.5rem 2rem;border-radius:var(--radius-xl);max-width:400px;width:100%;animation:statusSlideIn .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-lg)}.status--entry{border:1px solid rgba(34,197,94,.3);border-top:3px solid #22c55e}.status--exit{border:1px solid rgba(245,158,11,.3);border-top:3px solid #f59e0b}.status--break{border:1px solid rgba(139,92,246,.3);border-top:3px solid #8b5cf6}.status__icon{font-size:3.5rem;animation:iconBounce .6s ease}.status__type{font-size:1.25rem;font-weight:700;letter-spacing:.15em}.status--entry .status__type{color:#16a34a}.status--exit .status__type{color:#d97706}.status--break .status__type{color:#7c3aed}.status__employee-name{font-size:1.6rem;font-weight:700;color:var(--color-text-primary)}.status__details{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--color-text-secondary)}.status__separator{opacity:.4}.status__time{font-size:2rem;font-weight:700;color:var(--color-text-primary);font-variant-numeric:tabular-nums;margin-top:.25rem}.status__progress{width:100%;height:3px;background:var(--color-bg-secondary);border-radius:2px;margin-top:.75rem;overflow:hidden}.status__progress-bar{height:100%;border-radius:2px;animation:progressShrink 4s linear forwards}.status--entry .status__progress-bar{background:linear-gradient(90deg,#22c55e,#4ade80)}.status--exit .status__progress-bar{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.status--break .status__progress-bar{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.status__dismiss{padding:.5rem 1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;transition:all .2s ease;margin-top:.5rem}.status__dismiss:hover{color:var(--color-text-primary);border-color:var(--color-border-hover);background:var(--color-surface-alt)}@keyframes statusSlideIn{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes iconBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes progressShrink{0%{width:100%}to{width:0%}}@media(max-width:1024px){.status{max-width:360px;padding:2rem 1.5rem}.status__icon{font-size:3rem}.status__employee-name{font-size:1.4rem}.status__time{font-size:1.75rem}}@media(max-width:768px){.status{max-width:320px;padding:1.75rem 1.25rem;border-radius:18px}.status__icon{font-size:2.5rem}.status__type{font-size:1.1rem}.status__employee-name{font-size:1.25rem}.status__time{font-size:1.5rem}.status__details{font-size:.85rem}.status__dismiss{padding:.4rem 1.25rem;font-size:.8rem}}@media(max-width:600px){.status{max-width:280px;padding:1.5rem 1rem;gap:.5rem}.status__icon{font-size:2.25rem}.status__type{font-size:1rem}.status__employee-name{font-size:1.1rem}.status__time{font-size:1.35rem}}@media(max-height:600px)and (orientation:landscape){.status{max-width:300px;padding:1rem;gap:.35rem;border-radius:14px}.status__icon{font-size:2rem}.status__type{font-size:.9rem;letter-spacing:.12em}.status__employee-name{font-size:1rem}.status__time{font-size:1.2rem;margin-top:0}.status__progress{margin-top:.35rem}.status__dismiss{margin-top:.25rem;padding:.35rem 1rem;font-size:.75rem}}.checkin-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--color-bg);color:var(--color-text-primary);position:relative;overflow:hidden}.checkin-page__header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2.5rem;position:relative;z-index:1;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.checkin-page__logo{display:flex;align-items:center;gap:.75rem}.checkin-page__logo-icon{font-size:1.75rem}.checkin-page__logo-text{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:var(--color-text-primary)}.checkin-page__content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 2rem 2rem;position:relative;z-index:1}.checkin-page__pin-section{display:flex;flex-direction:column;align-items:center;gap:1.75rem;animation:fadeInUp .4s ease;background:var(--color-surface);border-radius:var(--radius-xl);padding:2.5rem 3rem;border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}.checkin-page__greeting{text-align:center}.checkin-page__greeting h1{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin:0 0 .35rem}.checkin-page__greeting p{font-size:1rem;color:var(--color-text-secondary);margin:0}.checkin-page__start-btn{padding:.875rem 2.25rem;border:none;border-radius:var(--radius-md);background:var(--color-accent);color:#fff;font-size:1.1rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #2563eb4d;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.checkin-page__start-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #2563eb59;background:var(--color-accent-secondary)}.checkin-page__start-btn:active{transform:translateY(0)}.checkin-page__processing{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:fadeInUp .3s ease}.checkin-page__processing p{font-size:1.1rem;color:var(--color-text-secondary)}.checkin-page__processing-spinner{width:44px;height:44px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}.checkin-page__footer{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;font-size:.8rem;color:var(--color-text-muted);position:relative;z-index:1}.checkin-page__footer-dot{opacity:.4}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1024px){.checkin-page__header{padding:1rem 1.5rem}.checkin-page__content{padding:.75rem 1.5rem 1.5rem}.checkin-page__greeting h1{font-size:1.6rem}.checkin-page__greeting p{font-size:.95rem}.checkin-page__pin-section{gap:1.5rem;padding:2rem 2.5rem}.checkin-page__processing-spinner{width:40px;height:40px}}@media(max-width:768px){.checkin-page__header{padding:.75rem 1rem}.checkin-page__logo-icon{font-size:1.5rem}.checkin-page__logo-text{font-size:1.15rem}.checkin-page__content{padding:.5rem 1rem 1rem}.checkin-page__greeting h1{font-size:1.4rem}.checkin-page__greeting p{font-size:.9rem}.checkin-page__pin-section{gap:1.25rem;padding:1.75rem 2rem}.checkin-page__processing p{font-size:1rem}.checkin-page__footer{padding:.75rem;font-size:.75rem}}@media(max-width:600px){.checkin-page__header{padding:.5rem .75rem}.checkin-page__logo-icon{font-size:1.25rem}.checkin-page__logo-text{font-size:1rem}.checkin-page__content{padding:.25rem .75rem .75rem}.checkin-page__greeting h1{font-size:1.25rem}.checkin-page__greeting p{font-size:.85rem}.checkin-page__pin-section{gap:1rem;padding:1.5rem 1.25rem}.checkin-page__footer{padding:.5rem}}@media(max-height:600px)and (orientation:landscape){.checkin-page__header{padding:.4rem 1rem}.checkin-page__content{padding:.25rem 1rem .5rem}.checkin-page__greeting h1{font-size:1.2rem;margin-bottom:.15rem}.checkin-page__greeting p{font-size:.85rem}.checkin-page__pin-section{gap:.5rem;padding:1rem 1.5rem}.checkin-page__processing{gap:.75rem}.checkin-page__footer{padding:.35rem;font-size:.7rem}}#root{width:100%;min-height:100vh;min-height:100dvh}