*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{background:#f8f9fa;color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}.element-visible{display:block!important}.auth-hidden,.clock-hidden,.element-hidden,.enrollment-hidden{display:none!important}.show{display:block!important}.d-none{display:none!important}:root{--primary-blue:#0056b3;--dark-navy:#374151;--success-green:#28a745;--warning-orange:#f59e0b;--error-red:#ef4444;--white:#fff;--light-gray:#f8f9fa;--border-gray:#e5e7eb;--text-dark:#1f2937;--text-muted:#6b7280;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--font-sm:0.875rem;--font-base:1rem;--font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--font-3xl:2rem;--shadow-sm:0 2px 4px rgba(0,0,0,.05);--shadow-card:0 4px 16px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);--shadow-button:0 8px 32px rgba(66,133,244,.3),0 4px 8px rgba(0,0,0,.12);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:50%;--component-width-narrow:500px;--component-width-standard:640px;--component-width-wide:768px;--component-width-modal:640px}.app-container{background:var(--white);box-shadow:0 0 20px rgba(0,0,0,.1);margin:0 auto;max-width:var(--component-width-wide);min-height:100vh}.dashboard-container{min-height:100vh;width:100%}.clock-header{align-items:center;backdrop-filter:blur(20px);background:linear-gradient(135deg,hsla(0,0%,100%,.98),rgba(248,250,252,.95));border-bottom:1px solid rgba(0,68,148,.08);box-shadow:0 2px 20px rgba(0,0,0,.06);display:grid;grid-template-columns:1fr auto 1fr;padding:var(--space-md) var(--space-lg);position:relative}.clock-header:after{background:linear-gradient(90deg,transparent,rgba(0,68,148,.1) 50%,transparent);bottom:0;content:"";height:1px;left:0;position:absolute;right:0}.facility-details h5{color:var(--text-dark);font-size:var(--font-xl);font-weight:600}.facility-details small{color:var(--text-muted);font-size:var(--font-sm)}.connection-status{align-items:center;background:linear-gradient(135deg,var(--success-green) 0,#28a745 100%);border-radius:20px;box-shadow:0 2px 8px rgba(25,135,84,.3);color:#fff;display:flex;font-size:.875rem;font-weight:600;gap:var(--space-xs);justify-content:center;padding:.25rem .75rem;transition:all .3s ease}.connection-status.offline{background:linear-gradient(135deg,var(--warning-orange) 0,#e67e22 100%);box-shadow:0 2px 8px rgba(245,158,11,.3)}.connection-status i,.connection-status small{color:#fff;font-size:var(--font-sm)}.connection-status small{font-weight:600}.logout-button{background:transparent;border:none;color:#dc3545;cursor:pointer;justify-self:end;padding:var(--space-xs);transition:opacity .2s ease}.logout-button:hover{opacity:.7}.time-display{background:linear-gradient(135deg,#1e293b,#334155);box-shadow:0 2px 8px rgba(0,0,0,.1),0 4px 20px rgba(0,0,0,.15);color:#fff;overflow:hidden;padding:1.75rem var(--space-md);position:relative;text-align:center;width:100%}.current-time{color:#fff;font-size:3.5rem;font-weight:400;letter-spacing:-1px;line-height:1}.current-date{color:hsla(0,0%,100%,.9);font-size:var(--font-base);margin-top:var(--space-xs);opacity:.9}.status-display{background:var(--white);padding:1.5rem var(--space-lg) var(--space-xl);text-align:center}.status-card,.status-display{margin:0 auto;max-width:var(--component-width-standard)}.status-card{background:hsla(0,0%,100%,.98);border:1px solid #e5e7eb;border-radius:var(--radius-lg);box-shadow:0 8px 25px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.06);cursor:default;overflow:hidden;padding:var(--space-xl);position:relative}.status-icon{color:var(--dark-navy);display:block;font-size:2.5rem;margin-bottom:var(--space-md)}.status-card h4{color:var(--text-dark);font-size:var(--font-2xl);font-weight:600;margin-bottom:var(--space-xs)}.status-card p{color:var(--text-muted);font-size:var(--font-base)}.dashboard-scan-button{align-items:center;background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:none;border-radius:var(--radius-full);box-shadow:0 8px 25px rgba(0,68,148,.3),0 3px 10px rgba(0,0,0,.15),inset 0 1px 0 hsla(0,0%,100%,.2);color:#fff;cursor:pointer;display:flex;flex-direction:column;font-size:var(--font-lg);font-weight:500;height:200px;justify-content:center;margin:1.5rem auto 3rem;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:200px}.dashboard-scan-button:before{background:linear-gradient(135deg,hsla(0,0%,100%,.1),transparent 50%);border-radius:50%;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.dashboard-scan-button i{font-size:3rem;margin-bottom:var(--space-sm)}.dashboard-scan-button:hover{box-shadow:0 12px 35px rgba(0,68,148,.4),0 5px 15px rgba(0,0,0,.2);transform:translateY(-3px) scale(1.02)}.dashboard-scan-button:hover:before{opacity:1}.dashboard-scan-button:active{box-shadow:0 6px 20px rgba(0,68,148,.35),0 2px 8px rgba(0,0,0,.15);transform:translateY(-1px) scale(.98)}.facility-status{margin:var(--space-xl) auto;max-width:var(--component-width-standard);padding:0 var(--space-lg)}.status-grid{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr;margin-bottom:var(--space-lg)}.status-item{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:var(--radius-lg);box-shadow:0 6px 20px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);color:#374151;cursor:default;display:flex;flex-direction:column;font-weight:500;justify-content:center;min-height:80px;overflow:hidden;padding:var(--space-lg) var(--space-md);position:relative;text-align:center}.status-item:after{background:#6b7280;border-radius:50%;content:"";height:12px;position:absolute;right:12px;top:12px;width:12px}.status-item.status-good{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border-color:#10b981;color:#065f46}.status-item.status-good:after{background:#10b981}.status-item.status-good i{color:#10b981;font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.status-item.status-degraded,.status-item.status-warning{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#f59e0b;color:#92400e}.status-item.status-degraded:after,.status-item.status-warning:after{background:#f59e0b}.status-item.status-degraded i,.status-item.status-warning i{color:#f59e0b;font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.status-item.status-error{background:linear-gradient(135deg,#fef2f2,#fee2e2);border-color:#ef4444;color:#991b1b}.status-item.status-error:after{background:#ef4444}.status-item.status-error i{color:#ef4444;font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.system-status{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border-color:#10b981;color:#065f46}.system-status:after{background:#10b981}.system-status i{color:#10b981;font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.camera-status{background:linear-gradient(135deg,#fffbeb,#fef3c7);border-color:#f59e0b;color:#92400e}.camera-status:after{background:#f59e0b}.camera-status i{color:#f59e0b}.camera-status i,.status-item i{font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.status-item i{display:block}.status-label{font-size:.875rem;font-weight:600;letter-spacing:.5px;line-height:1.2;margin-top:var(--space-xs);text-transform:uppercase}.security-notice{margin-top:var(--space-lg);text-align:center}.security-notice small{align-items:center;color:var(--text-muted);display:inline-flex;font-size:var(--font-sm);gap:var(--space-xs)}.action-grid{margin:var(--space-xl) auto;max-width:var(--component-width-standard);padding:0 var(--space-lg) var(--space-xl)}.facility-subtitle{color:var(--text-muted);font-size:var(--font-sm)}.connection-icon{color:var(--success-green);font-size:var(--font-base)}.connection-text{color:var(--success-green);font-size:var(--font-sm);font-weight:500}.security-notice-text{color:var(--text-muted);font-size:var(--font-sm)}.empty-state{color:var(--text-muted);padding:var(--space-xl) var(--space-md);text-align:center}.employee-number{color:var(--text-muted);font-size:var(--font-sm);margin-left:var(--space-xs)}.instruction-icon{margin-right:var(--space-xs)}.photo-counter{color:var(--text-muted);font-size:var(--font-sm)}.success-icon{color:var(--success-green);margin-right:var(--space-xs)}.instruction-text{color:var(--text-muted);font-size:var(--font-sm)}.session-icon{margin-right:var(--space-xs)}.session-icon,.session-title{color:var(--success-green);font-size:var(--font-xl)}.session-title{margin-bottom:0}.session-subtitle,.success-message{color:var(--text-muted);font-size:var(--font-sm);margin-bottom:0}.success-title{font-size:var(--font-xl);margin-bottom:0}.status-ready,.success-title{color:var(--success-green)}.status-continue{color:var(--primary-blue)}.status-icon-muted{color:var(--text-muted)}.status-icon-success{color:var(--success-green)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success-green)}@media (max-width:480px){.current-time{font-size:3rem}.dashboard-scan-button{font-size:1.1rem;height:180px;width:180px}.dashboard-scan-button i{font-size:2.5rem}}.enrollment-step{background:#fff;min-height:calc(100vh - 200px)}.enrollment-banner{color:#fff;padding:.625rem var(--space-md);text-align:center}.enrollment-title{color:#fff;font-size:var(--font-2xl);font-weight:500;margin-bottom:var(--space-xs)}.enrollment-subtitle{color:hsla(0,0%,100%,.9);font-size:var(--font-base);opacity:.9}.step-wizard-container{background:#fff;margin:0 auto;max-width:var(--component-width-standard);padding:0}.page-banner{color:#fff;padding:.625rem var(--space-md);text-align:center}.banner-title{color:#fff;font-size:var(--font-2xl);font-weight:500;margin-bottom:var(--space-xs)}.banner-subtitle{color:hsla(0,0%,100%,.9);font-size:var(--font-base);opacity:.9}.enrollment-step.active{margin:0 auto;max-width:var(--component-width-standard);padding:2rem 1.5rem}.step-indicator{display:flex;gap:var(--space-lg);justify-content:center;margin-bottom:var(--space-lg);margin-top:1.5rem}#step1.enrollment-step.active{padding-top:1.5rem}#step1.enrollment-step>.step-indicator{margin-top:0}.step-item{align-items:center;background:var(--white);border:2px solid var(--border-gray);border-radius:50%;color:var(--text-muted);display:flex;font-size:var(--font-base);font-weight:600;height:40px;justify-content:center;transition:all .3s ease;width:40px}.step-item.active{background:var(--primary-blue);border-color:var(--primary-blue);box-shadow:0 4px 12px rgba(0,86,179,.3);color:#fff}.step-item.completed{background:var(--success-green);border-color:var(--success-green);color:#fff}.step-title{color:var(--text-dark);font-size:var(--font-2xl);font-weight:600;letter-spacing:-.025em;margin-bottom:var(--space-xl);text-align:center;text-shadow:0 1px 2px rgba(15,23,42,.05)}.selected-employee-context{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;gap:1.5rem;justify-content:center;margin-bottom:1.5rem;padding:1rem 1.25rem}.enrolling-employee{align-items:center;display:flex;gap:.5rem}.enrolling-label{color:#64748b;font-size:.875rem;font-weight:500}.employee-name{font-size:1rem}.confirmation-nav-context{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;justify-content:center;margin-bottom:var(--space-lg);padding:.75rem 1rem}.nav-back-link{align-items:center;border-radius:6px;color:#06c;display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;line-height:1;padding:.5rem .75rem;text-decoration:none;transition:all .2s ease}.nav-back-link:hover{background:#e0f2fe;color:#0284c7;text-decoration:none}.nav-back-link:active{transform:translateY(1px)}.nav-back-link i{font-size:.75rem;line-height:1}.employee-search{margin-bottom:var(--space-xl)}.search-input-container{margin-bottom:var(--space-lg);position:relative}.search-icon{color:var(--text-muted);font-size:var(--font-base);left:var(--space-lg);position:absolute;top:50%;transform:translateY(-50%);z-index:2}.search-input{background:linear-gradient(135deg,hsla(0,0%,100%,.98),rgba(248,250,252,.95));border:2px solid rgba(0,68,148,.1);border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.03);font-size:var(--font-base);padding:var(--space-lg) var(--space-xl) var(--space-lg) 3rem;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.search-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,86,179,.1),0 8px 25px rgba(0,68,148,.15),0 4px 12px rgba(0,0,0,.08);outline:none;transform:translateY(-1px)}.search-input::placeholder{color:var(--text-muted);font-weight:400}.search-clear-btn{align-items:center;background:var(--text-muted);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:.75rem;height:24px;justify-content:center;position:absolute;right:var(--space-lg);top:50%;transform:translateY(-50%);transition:all .3s ease;width:24px}.search-clear-btn:hover{background:var(--error-red);transform:translateY(-50%) scale(1.1)}.search-results{background:rgba(0,86,179,.05);border:1px solid rgba(0,86,179,.1);border-radius:var(--radius-md);color:var(--primary-blue);font-size:var(--font-sm);font-weight:500;margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-lg);text-align:center}.employee-list{margin-bottom:var(--space-xl);min-height:200px}.employee-card{backdrop-filter:saturate(180%) blur(20px);background:linear-gradient(145deg,#fff,#fafbfc);border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 1px 3px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.24);cursor:pointer;margin-bottom:1.75rem;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.34,1.56,.64,1);user-select:none}.employee-card:before{background:linear-gradient(90deg,var(--primary-blue) 0,#004494 50%,#06c 100%);border-radius:20px 20px 0 0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:all .3s ease}.employee-card:hover{border-color:var(--primary-blue);box-shadow:0 16px 32px rgba(0,86,179,.12),0 8px 16px rgba(15,23,42,.08);transform:translateY(-3px)}.employee-card:hover .employee-number,.employee-card:hover:before{opacity:1}.employee-card.selected{background:linear-gradient(145deg,rgba(0,86,179,.05),rgba(0,86,179,.02));border-color:var(--primary-blue);box-shadow:0 12px 30px rgba(0,86,179,.2),0 6px 12px rgba(15,23,42,.1);transform:translateY(-2px)}.employee-card.selected:before{opacity:1}.employee-card.selecting{animation:selectPulse .6s ease-out;border-color:var(--primary-blue)}@keyframes selectPulse{0%{transform:translateY(0) scale(1)}50%{box-shadow:0 16px 40px rgba(0,86,179,.25);transform:translateY(-6px) scale(1.02)}to{transform:translateY(-2px) scale(1)}}.employee-card-header{align-items:flex-start;display:flex;gap:1rem;padding:1.5rem;position:relative}.employee-avatar{border:2px solid hsla(0,0%,100%,.95);border-radius:16px;box-shadow:0 4px 6px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.06);flex-shrink:0;height:56px;overflow:hidden;position:relative;transition:all .2s ease;width:56px}.employee-card .employee-photo{border-radius:14px;height:100%;object-fit:cover;width:100%}.employee-initials{align-items:center;background:linear-gradient(135deg,#0056b3,#004494);border-radius:14px;color:#fff;display:flex;font-size:1rem;font-weight:700;height:100%;justify-content:center;letter-spacing:.5px;text-transform:uppercase;width:100%}.employee-name{color:#0f172a;font-size:1.125rem;font-weight:700;line-height:1.4;margin-bottom:.25rem}.employee-meta-line{align-items:center;color:#64748b;display:flex;font-size:.875rem;gap:.5rem;line-height:1.4;margin-bottom:.375rem}.employee-position{color:#475569;display:inline-block;font-size:.875rem;font-weight:500}.employee-position.text-muted{color:#94a3b8;font-style:italic}.employee-status-line{align-items:center;display:flex;gap:.5rem;margin-top:.25rem}.employee-status-text{align-items:center;color:#94a3b8;display:inline-flex;font-size:.75rem;font-weight:500;gap:.25rem}.employee-status-text.status-success{color:#059669}.employee-status-text.status-warning{color:#d97706}.employee-status-text.status-danger{color:#dc2626}.employee-status-text.status-secondary{color:#9ca3af}.employee-status-text.status-pending{color:#0056b3}.employee-card-date{position:absolute;right:.75rem;top:.75rem;z-index:2}.employee-number{color:#94a3b8;font-size:.7rem;font-weight:400;letter-spacing:.025em;line-height:1.2;opacity:.8;text-transform:none;transition:opacity .2s ease}.status-badge{align-items:center;border:1px solid;border-radius:8px;display:inline-flex;font-size:.75rem;font-weight:600;letter-spacing:.015em;line-height:1;overflow:hidden;padding:.5rem .875rem;position:relative;text-transform:none;transition:all .2s ease}.status-badge:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.status-badge:hover:before{left:100%}.status-badge-success{background:#dcfce7;border-color:#bbf7d0;color:#15803d}.status-badge-warning{background:#fef3c7;border-color:#fde68a;color:#d97706}.status-badge-danger{background:#fee2e2;border-color:#fecaca;color:#dc2626}.status-badge-info{background:#dbeafe;border-color:#bfdbfe;color:var(--primary-blue)}.status-badge-secondary{background:#f1f5f9;border-color:#e2e8f0;color:#475569}.add-employee-button{align-items:center;background:hsla(0,0%,100%,.98);border:1px solid rgba(0,86,179,.08);border-radius:var(--radius-lg);border-top:3px solid var(--primary-blue);box-shadow:0 8px 25px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.06);color:var(--text-dark);cursor:pointer;display:flex;flex-direction:column;margin-bottom:var(--space-lg);overflow:hidden;padding:var(--space-lg);position:relative;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.add-employee-button:hover{background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border-color:var(--primary-blue);box-shadow:0 12px 35px rgba(30,58,138,.25),0 5px 15px rgba(0,0,0,.15);color:#fff;transform:translateY(-2px)}.add-employee-button i{color:var(--dark-navy);font-size:var(--font-3xl);margin-bottom:var(--space-sm)}.add-employee-button:hover .button-subtitle,.add-employee-button:hover .button-title,.add-employee-button:hover i{color:#fff}.button-title{font-size:1.125rem;font-weight:600;margin-bottom:.25rem}.button-subtitle{font-size:.875rem;opacity:.8}.no-employees{align-items:center;background:linear-gradient(145deg,#fff,#fafbfc);border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 1px 3px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.24);display:flex;flex-direction:column;justify-content:center;margin-bottom:1.75rem;min-height:130px;padding:1.5rem;text-align:center}.no-employees i{color:var(--dark-navy);font-size:2rem;margin-bottom:.75rem}.no-employees p{color:var(--text-muted);font-size:var(--font-md);font-weight:500;margin:0}.add-employee-btn{align-items:center;background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:none;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,86,179,.3);color:#fff;cursor:pointer;display:inline-flex;font-size:var(--font-base);font-weight:600;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);transition:all .3s cubic-bezier(.4,0,.2,1)}.add-employee-btn:hover{background:linear-gradient(135deg,#004494,#003875);box-shadow:0 8px 25px rgba(0,68,148,.4);transform:translateY(-2px)}.btn{border-radius:var(--radius-md);font-weight:500;transition:all .3s ease}.btn-primary{border:none;border-radius:12px;box-shadow:0 0 0 1px rgba(0,86,179,.1),0 2px 4px rgba(0,86,179,.2),0 8px 16px rgba(0,86,179,.15);cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary:hover{box-shadow:0 0 0 1px rgba(0,68,148,.15),0 4px 6px rgba(0,68,148,.25),0 12px 20px rgba(0,68,148,.2)}.font-xs{font-size:.75rem}.font-sm{font-size:var(--font-sm)}.me-1{margin-right:.25rem}.enrollment-actions{margin-top:calc(var(--space-xl) + var(--space-md))}.step-actions{display:flex;gap:1.375rem;justify-content:center;margin-top:3rem;padding:2rem 0 1rem}.enrollment-nav-buttons{display:flex;gap:var(--space-lg);justify-content:center;margin-top:var(--space-xl)}.enrollment-nav-button{align-items:center;background:var(--white);border:2px solid var(--border-gray);border-radius:var(--radius-md);color:var(--text-dark);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-xs);min-width:80px;padding:var(--space-lg);transition:all .3s ease}.enrollment-nav-button:hover:not(:disabled){background:rgba(0,86,179,.05);border-color:var(--primary-blue)}.enrollment-nav-button:disabled{cursor:not-allowed;opacity:.5}.enrollment-nav-button i{font-size:var(--font-lg)}.enrollment-nav-button small{font-size:var(--font-sm);font-weight:500}.enrollment-complete-button{align-items:center;background:linear-gradient(135deg,var(--success-green) 0,#1e7e34 100%);border:none;border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(40,167,69,.3);color:#fff;cursor:pointer;display:flex;font-size:var(--font-lg);font-weight:600;gap:var(--space-sm);justify-content:center;min-width:200px;padding:var(--space-lg) var(--space-xl);transition:all .3s cubic-bezier(.4,0,.2,1)}.enrollment-complete-button:hover{background:linear-gradient(135deg,#1e7e34,#155724);box-shadow:0 8px 25px rgba(40,167,69,.4);transform:translateY(-2px)}.enrollment-complete-button i{font-size:var(--font-xl)}.camera-section{margin-bottom:var(--space-xl);text-align:center}.camera-container{border-radius:var(--radius-lg);box-shadow:0 8px 25px rgba(0,0,0,.15);margin:0 auto var(--space-lg)}.camera-canvas,.camera-video{display:block;height:auto;width:100%}.camera-canvas{display:none}.camera-capture-button,.camera-overlay{align-items:center;display:flex;justify-content:center}.camera-capture-button{background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:none;border-radius:50%;box-shadow:0 4px 16px rgba(0,86,179,.3);color:#fff;cursor:pointer;flex-direction:column;height:80px;margin:0 auto;transition:all .3s ease;width:80px}.camera-capture-button:hover{box-shadow:0 6px 20px rgba(0,86,179,.4);transform:scale(1.05)}.camera-capture-button i{font-size:var(--font-xl);margin-bottom:.25rem}.camera-capture-button span{font-size:.75rem;font-weight:500}.photo-preview{text-align:center}.captured-photo{border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(0,0,0,.15);height:auto;margin-bottom:var(--space-lg);max-width:300px;width:100%}.photo-controls{display:flex;gap:var(--space-md);justify-content:center;margin-bottom:var(--space-lg)}.enrollment-summary{margin-bottom:var(--space-xl);text-align:center}.employee-preview{background:var(--white);border:2px solid var(--border-gray);border-radius:var(--radius-lg);box-shadow:0 8px 25px rgba(0,0,0,.08);margin:0 auto;max-width:300px;padding:var(--space-xl)}.employee-preview .employee-photo{border:4px solid var(--border-gray);border-radius:50%;height:120px;margin-bottom:var(--space-lg);object-fit:cover;width:120px}.employee-name{color:var(--text-dark);font-size:var(--font-xl);font-weight:600;margin-bottom:var(--space-xs)}.login-container{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;justify-content:center;min-height:100vh;padding:var(--space-lg)}.login-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);max-width:400px;overflow:hidden;padding:3rem;position:relative;text-align:center;width:100%}.login-card:before{background:linear-gradient(90deg,var(--primary-blue) 0,#20c997 100%);content:"";height:4px;left:0;position:absolute;right:0;top:0}.login-header{margin-bottom:var(--space-md)}.login-icon{animation:loginIconPulse 3s ease-in-out infinite;color:#004494;display:block;font-size:4rem;margin-bottom:var(--space-lg)}@keyframes loginIconPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.login-title{color:var(--text-dark);font-size:var(--font-2xl);font-weight:600;line-height:1.2;margin-bottom:var(--space-sm)}.login-subtitle{color:var(--text-muted);font-size:var(--font-lg);line-height:1.5;margin-bottom:var(--space-xl)}.login-actions{margin-bottom:var(--space-lg)}.login-button{align-items:center;background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:none;border-radius:var(--radius-md);box-shadow:0 4px 12px rgba(66,133,244,.3);color:#fff;cursor:pointer;display:inline-flex;font-size:var(--font-lg);font-weight:600;gap:var(--space-sm);justify-content:center;overflow:hidden;padding:var(--space-lg) var(--space-xl);position:relative;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.login-button:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.login-button:hover{background:linear-gradient(135deg,#004494,#003875);box-shadow:0 8px 20px rgba(0,86,179,.4);color:#fff;text-decoration:none;transform:translateY(-2px)}.login-button:hover:before{left:100%}.login-button:active{box-shadow:0 4px 12px rgba(66,133,244,.3);transform:translateY(0)}.login-footer{border-top:1px solid var(--border-gray);margin-top:var(--space-lg);padding-top:var(--space-lg)}.security-indicators{text-align:center}.login-footer-text,.ssl-indicator{align-items:center;color:var(--text-muted);display:flex;font-size:var(--font-sm);justify-content:center}.ssl-indicator{margin-top:var(--space-xs)}@media (max-width:480px){.login-container{padding:var(--space-md)}.login-card{padding:var(--space-lg)}.login-title{font-size:var(--font-xl)}.login-subtitle{font-size:var(--font-base)}.login-icon{font-size:3rem}}.logout-container{align-items:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);display:flex;justify-content:center;min-height:100vh;padding:var(--space-lg)}.logout-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);max-width:400px;overflow:hidden;padding:var(--space-xl);position:relative;text-align:center;width:100%}.logout-card:before{background:linear-gradient(90deg,#ef4444,#dc2626);content:"";height:4px;left:0;position:absolute;right:0;top:0}.logout-header{margin-bottom:var(--space-xl)}.logout-icon{animation:logoutIconBounce 2s ease-in-out infinite;color:#ef4444;display:block;font-size:4rem;margin-bottom:var(--space-lg)}@keyframes logoutIconBounce{0%,to{transform:scale(1) rotate(0deg)}50%{transform:scale(1.1) rotate(-5deg)}}.logout-title{color:var(--text-dark);font-size:var(--font-2xl);font-weight:600;line-height:1.2;margin-bottom:var(--space-sm)}.logout-subtitle{color:var(--text-muted);font-size:var(--font-lg);line-height:1.4;margin-bottom:0}.logout-spinner{display:flex;justify-content:center;margin:var(--space-xl) 0}.spinner{animation:spin 1s linear infinite;border-top:4px solid var(--border-gray);border:4px solid var(--border-gray);border-radius:50%;border-top-color:var(--primary-blue);height:40px;width:40px}.logout-footer{border-top:1px solid var(--border-gray);margin-top:var(--space-xl);padding-top:var(--space-lg)}.logout-footer-text{color:var(--text-muted);font-size:var(--font-sm)}@media (max-width:480px){.logout-container{padding:var(--space-md)}.logout-card{padding:var(--space-lg)}.logout-title{font-size:var(--font-xl)}.logout-subtitle{font-size:var(--font-base)}.logout-icon{font-size:3rem}}.logout-modal-overlay{align-items:center;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden;width:100%;z-index:1050}.logout-modal-overlay.visible{display:flex;opacity:1;visibility:visible}.logout-modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);max-height:90vh;max-width:480px;overflow:hidden;transform:scale(.9) translateY(-20px);transition:transform .3s ease;width:90%}.logout-modal-overlay.visible .logout-modal{transform:scale(1) translateY(0)}.logout-modal .modal-header{border-bottom:1px solid var(--border-gray);padding:var(--space-xl) var(--space-xl) var(--space-lg)}.logout-modal .modal-header h3{color:var(--text-dark);font-size:var(--font-xl);font-weight:600;margin:0}.logout-modal .modal-body{padding:var(--space-xl)}.logout-modal .modal-body p{color:var(--text-dark);line-height:1.5;margin:0 0 var(--space-sm)}.logout-modal .modal-body p:last-child{margin-bottom:0}.logout-modal .modal-body .text-muted{color:var(--text-muted);font-size:var(--font-sm)}.logout-modal .modal-actions{display:flex;gap:var(--space-md);justify-content:flex-end;padding:var(--space-lg) var(--space-xl) var(--space-xl)}.logout-modal .btn-cancel,.logout-modal .btn-logout{border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-sm);font-weight:500;min-width:100px;padding:var(--space-sm) var(--space-xl);transition:all .2s ease}.logout-modal .btn-cancel{background:var(--light-gray);border:1px solid var(--border-gray);color:var(--text-dark)}.logout-modal .btn-cancel:hover{background:#e9ecef;color:var(--text-dark)}.logout-modal .btn-logout{background:var(--error-red);color:#fff}.logout-modal .btn-logout:hover{background:#c82333}.logout-modal .btn-cancel:focus,.logout-modal .btn-logout:focus{outline:2px solid var(--primary-blue);outline-offset:2px}.modal-overlay{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(13,33,60,.6);bottom:0;display:flex;justify-content:center;left:0;opacity:0;padding:2rem;position:fixed;right:0;top:0;transition:all .3s cubic-bezier(.4,0,.2,1);visibility:hidden;z-index:1000}.modal-overlay.visible{display:flex;opacity:1;visibility:visible}.modal-container{background:linear-gradient(145deg,#fff,#fafbfc);border:1px solid rgba(0,86,179,.08);border-radius:24px;box-shadow:0 32px 64px rgba(0,86,179,.25),0 16px 32px rgba(0,86,179,.15),0 0 0 1px hsla(0,0%,100%,.8);margin:auto;max-height:85vh;max-width:var(--component-width-modal);overflow:hidden;transform:translateY(40px) scale(.95);transition:all .4s cubic-bezier(.34,1.56,.64,1);width:100%}.modal-overlay.visible .modal-container{transform:translateY(0) scale(1)}.modal-header{border-bottom:1px solid rgba(15,23,42,.08);justify-content:space-between;padding:1.5rem 1.5rem 1rem}.modal-header,.modal-title{align-items:center;display:flex}.modal-title{color:#0f172a;font-size:1.25rem;font-weight:700;gap:.5rem;margin:0}.modal-title i{color:#374151;font-size:1.125rem}.modal-close-btn{align-items:center;background:transparent;border:none;border-radius:8px;color:#64748b;cursor:pointer;display:flex;font-size:1.25rem;justify-content:center;padding:.5rem;transition:all .2s ease}.modal-close-btn:hover{background:#f1f5f9;color:#374151}.modal-body{max-height:60vh;overflow-y:auto;padding:1.5rem}.form-grid{display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-label{color:#374151;font-size:.875rem;font-weight:600;margin-bottom:.25rem}.form-input{background:#fff;border:1px solid #d1d5db;border-radius:12px;font-family:inherit;font-size:.875rem;padding:.75rem 1rem;transition:all .2s ease}.form-input:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,86,179,.1),0 4px 6px rgba(0,0,0,.05);outline:none;transform:translateY(-1px)}.form-input::placeholder{color:#9ca3af}.form-help-text{color:#6b7280;font-size:.75rem;line-height:1.4;margin-top:.25rem}.form-input.is-invalid{background:#fef2f2;border-color:#dc2626;border-width:2px}.form-error{align-items:center;color:#dc2626;display:flex;font-size:.75rem;font-weight:500;gap:.25rem;min-height:1rem}.modal-footer{border-top:1px solid rgba(15,23,42,.08);display:flex;gap:.75rem;justify-content:flex-end;padding:1rem 1.5rem 1.5rem}.btn{align-items:center;border:none;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s ease}.btn-secondary{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.1);color:#475569;cursor:pointer;font-size:1rem;font-weight:500;padding:.875rem 2rem;transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06);color:#334155;transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:1px solid rgba(0,86,179,.2);box-shadow:0 8px 25px rgba(0,86,179,.3),0 3px 10px rgba(0,0,0,.15);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#004494,#003875);box-shadow:0 12px 30px rgba(0,86,179,.4),0 6px 12px rgba(0,0,0,.2);transform:translateY(-2px)}.btn-primary:disabled{background:#94a3b8;box-shadow:none;cursor:not-allowed;transform:none}@media (max-width:768px){.modal-overlay{padding:1rem}.modal-container{border-radius:20px;max-height:95vh;max-width:100%;transform:translateY(40px) scale(.95)}.form-grid{gap:1rem;grid-template-columns:1fr}.modal-header{padding:1.25rem 1.25rem .75rem}.modal-body{max-height:70vh;padding:1.25rem}.modal-footer{flex-direction:column-reverse;padding:.75rem 1.25rem 1.25rem}.btn{justify-content:center;width:100%}}@media (max-width:480px){.modal-container{border-radius:16px;margin:.5rem}.modal-title{font-size:1.125rem}.form-input{font-size:1rem;padding:.875rem 1rem}}.action-summary-card,.camera-interface-card,.capture-instructions-card,.photo-preview-card,.photo-progress-card,.sequence-complete-card,.step-actions-card{backdrop-filter:blur(8px) saturate(120%);background:linear-gradient(145deg,#fff,#f8fafb 35%,#f1f5f9);border:1px solid rgba(226,232,240,.8);border-radius:12px;box-shadow:0 0 0 1px rgba(15,23,42,.04),0 2px 5px rgba(15,23,42,.06),0 5px 10px rgba(15,23,42,.08),0 10px 20px rgba(15,23,42,.1),0 20px 35px rgba(15,23,42,.09);margin-bottom:1.125rem;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.action-summary-card:before,.camera-interface-card:before,.capture-instructions-card:before,.photo-preview-card:before,.photo-progress-card:before,.sequence-complete-card:before,.step-actions-card:before{background:linear-gradient(90deg,var(--primary-blue) 0,#004494 50%,#06c 100%);border-radius:20px 20px 0 0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:all .3s ease}.camera-error-display{animation:errorSlideIn .3s ease-out;background:linear-gradient(135deg,#fef3cd,#fde68a);border:1px solid #f59e0b;border-radius:12px;box-shadow:0 2px 4px rgba(245,158,11,.1),0 1px 2px rgba(245,158,11,.06);margin:1rem 1.25rem}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-content{gap:.75rem;padding:1rem}.error-content,.error-icon{align-items:center;display:flex}.error-icon{flex-shrink:0;height:24px;justify-content:center;width:24px}.error-icon i{color:#d97706;font-size:1.125rem}.error-message{color:#92400e;flex:1;font-size:.875rem;font-weight:500;line-height:1.4}.error-dismiss{background:none;border:none;border-radius:4px;color:#92400e;cursor:pointer;flex-shrink:0;padding:.25rem;transition:all .2s ease}.error-dismiss:hover{background:rgba(146,64,14,.1);color:#78350f}.error-dismiss i{font-size:.875rem}.camera-error-display.error-critical{background:linear-gradient(135deg,#fee2e2,#fecaca);border-color:#ef4444;box-shadow:0 2px 4px rgba(239,68,68,.1),0 1px 2px rgba(239,68,68,.06)}.camera-error-display.error-critical .error-icon i{color:#dc2626}.camera-error-display.error-critical .error-dismiss,.camera-error-display.error-critical .error-message{color:#991b1b}.camera-error-display.error-critical .error-dismiss:hover{background:rgba(153,27,27,.1);color:#7f1d1d}.capture-button-container{align-items:center;display:flex;flex-direction:column;gap:1rem;margin:1.5rem 1.25rem}.completion-actions{display:flex;justify-content:center;margin-top:1.5rem}.photo-progress-card:before{opacity:1}.photo-progress-card.progress-complete-state{background:linear-gradient(145deg,#f0fdf4,#dcfce7);border-color:#059669}.photo-progress-card.progress-complete-state:before{background:linear-gradient(90deg,#059669,#047857 50%,#065f46)}.photo-progress-card.completion-celebration{animation:completionCelebration 1s ease-out}@keyframes completionCelebration{0%{transform:scale(1)}25%{box-shadow:0 8px 32px rgba(5,150,105,.3);transform:scale(1.02)}50%{transform:scale(1.01)}75%{transform:scale(1.015)}to{transform:scale(1)}}.camera-card-header,.complete-card-header,.instructions-card-header,.photo-progress-card-header,.preview-card-header{align-items:center;display:flex;justify-content:space-between;padding:1.5rem;position:relative}.progress-info{flex:1}.photo-progress-title{align-items:center;color:#0f172a;display:flex;font-size:1rem;font-weight:600;gap:.75rem;margin:0}.progress-icon{color:#06c;font-size:1rem;opacity:.9}.photo-counter-display{align-items:flex-start;display:flex;flex-direction:column;gap:.125rem;margin-left:1rem;margin-top:.375rem}.counter-number{color:#06c;font-size:1.5rem;font-weight:700;line-height:1}.photo-counter-label{color:#64748b;font-size:.75rem;font-weight:500}.progress-badge{background:linear-gradient(135deg,#06c,#0052a3);border:.5px solid rgba(0,102,204,.2);border-radius:20px;box-shadow:0 1px 3px rgba(0,102,204,.15),0 2px 6px rgba(0,102,204,.1),inset 0 1px 0 hsla(0,0%,100%,.15);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:-.005em;min-width:40px;padding:.3125rem .75rem;text-align:center}.progress-percentage{font-size:1.125rem;font-weight:700}.capture-progress-container{padding:0 1.5rem 1.5rem}.capture-progress{backdrop-filter:blur(4px) saturate(110%);background:rgba(248,250,252,.4);border:.5px solid rgba(226,232,240,.5);border-radius:12px;box-shadow:inset 0 1px 2px rgba(15,23,42,.03),0 1px 2px rgba(15,23,42,.04);height:40px;overflow:hidden;position:relative}.progress-fill{background:linear-gradient(90deg,#06c,#0052a3);border-radius:10px;box-shadow:0 1px 3px rgba(0,102,204,.15),inset 0 1px 0 hsla(0,0%,100%,.2);overflow:hidden;transition:all .6s cubic-bezier(.4,0,.2,1)}.progress-fill:before{animation:progressShimmer 2.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.25),transparent);height:100%;left:-100%;width:100%}@keyframes progressShimmer{0%{left:-100%}to{left:100%}}.capture-progress[data-progress="0"] .progress-fill{width:0}.capture-progress[data-progress="33"] .progress-fill{width:33%}.capture-progress[data-progress="67"] .progress-fill{width:67%}.capture-progress[data-progress="100"] .progress-fill{width:100%}.progress-labels{align-items:center;bottom:0;display:flex;justify-content:space-around;left:0;padding:0 .75rem;pointer-events:none;position:absolute;right:0;top:0;z-index:2}.progress-label{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.95);border:1px solid rgba(203,213,225,.6);border-radius:6px;color:#475569;font-size:.75rem;font-weight:600;padding:.25rem .5rem;text-shadow:0 1px 2px hsla(0,0%,100%,.8)}.instructions-card-header{padding:1rem 1.5rem}.instruction-icon{align-items:center;background:linear-gradient(135deg,rgba(0,86,179,.1),rgba(0,86,179,.05));border-radius:12px;display:flex;flex-shrink:0;height:40px;justify-content:center;margin-right:1rem;width:40px}.instruction-icon i{color:var(--primary-blue);font-size:1.125rem}.instruction-content{flex:1}.capture-instructions{background:transparent;border:none;color:#374151;font-size:.8125rem;font-weight:500;letter-spacing:-.005em;line-height:1.4;margin:0;padding:0}.camera-card-title{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;font-weight:600;gap:.5rem;letter-spacing:-.01em;margin:0}.camera-title-icon{color:#06c;font-size:.875rem;opacity:.85}.camera-status{align-items:center;display:flex;gap:.375rem}.status-indicator{background:#9ca3af;border-radius:50%;box-shadow:0 0 4px rgba(156,163,175,.4);height:6px;transition:all .3s cubic-bezier(.4,0,.2,1);width:6px}.status-indicator.active{animation:statusPulse 2s infinite;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.4)}.camera-status small{color:#64748b;font-size:.6875rem;font-weight:500}.camera-container{align-items:center;background:linear-gradient(145deg,#f8fafc,#f1f5f9);border:1px solid rgba(226,232,240,.8);border-radius:12px;box-shadow:0 0 0 1px rgba(15,23,42,.02),0 2px 4px rgba(15,23,42,.06),0 4px 8px rgba(15,23,42,.08),inset 0 1px 0 hsla(0,0%,100%,.5);display:flex;justify-content:center;margin:1rem auto;max-width:400px;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.camera-container:hover{border-color:rgba(0,102,204,.3);box-shadow:0 0 0 1px rgba(15,23,42,.02),0 4px 8px rgba(15,23,42,.08),0 8px 16px rgba(0,102,204,.12),inset 0 1px 0 hsla(0,0%,100%,.5);transform:translateY(-1px)}.camera-video{background:linear-gradient(145deg,#1e293b,#334155);border-radius:10px;box-shadow:inset 0 2px 4px rgba(0,0,0,.2);height:auto;max-width:400px;min-height:300px;object-fit:cover;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.camera-canvas{border-radius:14px;height:100%;left:0;top:0;width:100%;z-index:5}.camera-canvas,.face-guide{pointer-events:none;position:absolute}.face-guide{animation:guideIntro .5s cubic-bezier(.4,0,.2,1);height:280px;left:50%;opacity:.85;top:50%;transform:translate(-50%,-50%);width:220px;z-index:10}@keyframes guideIntro{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.guide-corners{backdrop-filter:blur(10px);background:rgba(0,86,179,.05);border:2px solid rgba(0,86,179,.4);border-radius:20px;box-shadow:inset 0 2px 10px rgba(0,86,179,.1),0 4px 20px rgba(0,86,179,.15);height:100%;position:relative;width:100%}.corner{animation:cornerPulse 3s infinite;backdrop-filter:blur(3px);background:linear-gradient(135deg,rgba(0,102,204,.08),rgba(0,102,204,.04));border:1.5px solid #06c;border-radius:3px;box-shadow:0 1px 2px rgba(0,102,204,.15),inset 0 1px 0 hsla(0,0%,100%,.1);height:18px;opacity:.9;position:absolute;transition:all .3s cubic-bezier(.4,0,.2,1);width:18px}@keyframes cornerPulse{0%,to{box-shadow:0 1px 2px rgba(0,102,204,.15);opacity:.9;transform:scale(1)}50%{box-shadow:0 1px 3px rgba(0,102,204,.2);opacity:.6;transform:scale(1.02)}}.corner.top-left{border-bottom:none;border-radius:20px 0 0 0;border-right:none;left:-3px;top:-3px}.corner.top-right{border-bottom:none;border-left:none;border-radius:0 20px 0 0;right:-3px;top:-3px}.corner.bottom-left{border-radius:0 0 0 20px;border-right:none;border-top:none;bottom:-3px;left:-3px}.corner.bottom-right{border-left:none;border-radius:0 0 20px 0;border-top:none;bottom:-3px;right:-3px}.face-guide-text{animation:textFade 3.5s infinite;backdrop-filter:blur(4px);background:linear-gradient(135deg,rgba(0,102,204,.92),rgba(0,82,163,.92));border:.5px solid hsla(0,0%,100%,.15);border-radius:14px;bottom:-32px;box-shadow:0 1px 4px rgba(0,102,204,.2),0 1px 2px rgba(0,0,0,.08),inset 0 1px 0 hsla(0,0%,100%,.12);color:#fff;font-size:.625rem;font-weight:500;left:50%;letter-spacing:-.005em;opacity:.95;padding:.375rem .75rem;position:absolute;transform:translateX(-50%);white-space:nowrap}@keyframes textFade{0%,to{opacity:1}50%{opacity:.8}}.camera-overlay{background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.1) 70%);bottom:0;left:0;position:absolute;right:0;top:0;z-index:8}.camera-capture-button,.camera-complete-button{align-items:center;backdrop-filter:blur(6px) saturate(115%);border:none;border-radius:10px;cursor:pointer;display:flex;font-size:.8125rem;font-weight:600;gap:.4375rem;letter-spacing:-.005em;overflow:hidden;padding:.6875rem 1.375rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.primary-action{background:linear-gradient(135deg,#06c,#0052a3);border:.5px solid rgba(0,102,204,.2);box-shadow:0 1px 3px rgba(0,102,204,.15),0 4px 8px rgba(0,102,204,.1),0 8px 16px rgba(0,102,204,.08),inset 0 1px 0 hsla(0,0%,100%,.15);color:#fff}.primary-action:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.primary-action:hover:before{left:100%}.primary-action:hover{background:linear-gradient(135deg,#0052a3,#003d82);box-shadow:0 2px 3px rgba(0,102,204,.15),0 4px 8px rgba(0,102,204,.12),0 8px 16px rgba(0,102,204,.08),inset 0 1px 0 hsla(0,0%,100%,.2);transform:translateY(-.5px)}.button-pulse{animation:buttonPulse 2s infinite;background:hsla(0,0%,100%,.3);border-radius:50%;height:20px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}.primary-action:not(:disabled) .button-pulse{opacity:1}@keyframes buttonPulse{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(4)}}.secondary-action{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;box-shadow:0 4px 6px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.06);color:#475569}.secondary-action:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:rgba(203,213,225,.9);box-shadow:0 1px 3px rgba(0,0,0,.04),0 3px 6px rgba(0,0,0,.06),inset 0 1px 0 hsla(0,0%,100%,.6);color:#374151;transform:translateY(-.5px)}.action-display{align-items:center;border-radius:12px;display:flex;gap:1rem;justify-content:space-between;margin:1rem 0;padding:1.5rem}.clock-step .clock-action-summary .action-display{margin:0;padding:0}.clock-step .action-type-badge{margin-bottom:0}#clockStep3 .action-display-section{margin:0;padding:0}#clockStep3 .action-display{align-items:center;flex-direction:column;gap:1rem;justify-content:center;margin:0;min-height:180px;padding:2.5rem 2rem;position:relative}.success-action{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:.5px solid rgba(16,185,129,.2);box-shadow:0 1px 2px rgba(16,185,129,.12),0 2px 4px rgba(16,185,129,.08),0 4px 8px rgba(16,185,129,.06),inset 0 1px 0 hsla(0,0%,100%,.15);color:#047857}.success-action:hover{background:linear-gradient(135deg,#d1fae5,#a7f3d0);box-shadow:0 2px 3px rgba(16,185,129,.15),0 4px 8px rgba(16,185,129,.12),0 8px 16px rgba(16,185,129,.08),inset 0 1px 0 hsla(0,0%,100%,.2);transform:translateY(-.5px)}.success-action .action-icon{color:#047857}#clockStep3 .action-icon{margin-left:0;margin-right:0}#clockStep3 .action-content{align-items:center;text-align:center}.clock-out-success-action{background:linear-gradient(135deg,#fef2f2,#fecaca);border:.5px solid rgba(239,68,68,.2);box-shadow:0 1px 2px rgba(239,68,68,.12),0 2px 4px rgba(239,68,68,.08),0 4px 8px rgba(239,68,68,.06),inset 0 1px 0 hsla(0,0%,100%,.15);color:#dc2626}.clock-out-success-action:hover{background:linear-gradient(135deg,#fecaca,#fca5a5);box-shadow:0 2px 3px rgba(239,68,68,.15),0 4px 8px rgba(239,68,68,.12),0 8px 16px rgba(239,68,68,.08),inset 0 1px 0 hsla(0,0%,100%,.2);transform:translateY(-.5px)}.clock-out-success-action .action-icon{color:#dc2626}.success-badge{align-items:center;background:hsla(0,0%,100%,.25);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1rem;height:2rem;justify-content:center;margin-left:auto;width:2rem}.success-badge i{font-size:1rem}#clockStep3 .success-badge{display:none}.success-badge.clock-in{background:#047857;color:#fff}.success-badge.clock-out{background:#dc2626;color:#fff}.preview-header-content{align-items:center;display:flex;justify-content:space-between;width:100%}.preview-title{align-items:center;color:#1e293b;display:flex;font-size:.9375rem;font-weight:600;gap:.5rem;letter-spacing:-.01em;margin:0}.preview-icon{color:#06c;font-size:.875rem;opacity:.85}.preview-stats{background:linear-gradient(135deg,rgba(0,102,204,.08),rgba(0,102,204,.04));border:.5px solid rgba(0,102,204,.1);border-radius:8px;color:#06c;font-size:.6875rem;font-weight:500;padding:.375rem .625rem}.preview-card-body{padding:0 1.5rem 1.5rem}.photo-preview-card{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.photo-preview-card.has-photos:before{opacity:1}.camera-interface-card,.capture-instructions-card{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.camera-interface-card{align-items:center;display:flex;flex-direction:column}.camera-card-header{align-items:center;align-self:stretch;display:flex;justify-content:center;padding:.75rem 0 .5rem;position:relative;width:100%}.camera-card-title{text-align:center}.camera-card-header .camera-status{position:absolute;right:1.25rem;top:.75rem}.action-summary-card:hover,.camera-interface-card:hover,.capture-instructions-card:hover,.step-actions-card:hover{box-shadow:0 4px 8px rgba(15,23,42,.15),0 2px 4px rgba(15,23,42,.1);transform:translateY(-1px)}.action-summary-card:hover:before,.camera-interface-card:hover:before,.capture-instructions-card:hover:before,.step-actions-card:hover:before{opacity:.6}.recognition-status{background:linear-gradient(145deg,#f8fafc,#f1f5f9);border-radius:8px;margin-bottom:var(--space-md);padding:var(--space-lg);text-align:center}.status-message{align-items:center;display:flex;gap:var(--space-sm);justify-content:center;margin-bottom:var(--space-md)}.status-message .status-icon{color:var(--primary-blue);font-size:var(--font-lg)}.status-message .status-text{color:var(--text-dark);font-size:var(--font-base);font-weight:500}.scanning-animation{animation:pulse 2s ease-in-out infinite}.scanning-progress{margin-top:var(--space-sm)}.progress-bar{background:rgba(226,232,240,.5);height:6px;overflow:hidden;width:100%}.progress-bar,.progress-fill{border-radius:3px;position:relative}.progress-fill{background:linear-gradient(90deg,var(--primary-blue) 0,#3b82f6 50%,var(--primary-blue) 100%);height:100%;transition:width .3s ease;width:0}.progress-fill:before{animation:shimmer 2s ease-in-out infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3) 50%,transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.photo-preview-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin:0 auto;max-width:600px}.photo-preview-placeholder{align-items:center;background:var(--background-light);border:2px dashed var(--border-light);border-radius:12px;display:flex;flex-direction:column;justify-content:center;min-height:140px;padding:1rem;transition:all .3s ease}.photo-preview-placeholder .placeholder-icon{color:var(--text-light);font-size:1.5rem;margin-bottom:.5rem}.photo-preview-placeholder .placeholder-text{color:var(--text-light);font-size:.75rem;line-height:1.3;text-align:center}.photo-preview-item{backdrop-filter:saturate(180%) blur(20px);background:linear-gradient(145deg,#fff,#fafbfc);border:1px solid rgba(15,23,42,.08);border-radius:20px;box-shadow:0 1px 3px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.24);cursor:pointer;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.34,1.56,.64,1);user-select:none}.photo-preview-item:before{background:linear-gradient(90deg,var(--primary-blue) 0,#004494 50%,#06c 100%);border-radius:20px 20px 0 0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:all .3s ease}.photo-preview-item:hover{border-color:var(--primary-blue);box-shadow:0 16px 32px rgba(0,86,179,.12),0 8px 16px rgba(15,23,42,.08);transform:translateY(-3px)}.photo-preview-item:hover:before{opacity:1}.photo-preview-item.selected{background:linear-gradient(145deg,rgba(0,86,179,.05),rgba(0,86,179,.02));border-color:var(--primary-blue);box-shadow:0 12px 30px rgba(0,86,179,.2),0 6px 12px rgba(15,23,42,.1);transform:translateY(-2px)}.photo-preview-item.selected:before{opacity:1}.photo-preview-item.just-captured{animation:photoCaptureSuccess .8s ease-out}@keyframes photoCaptureSuccess{0%{opacity:0;transform:scale(.8) rotate(-5deg)}50%{opacity:1;transform:scale(1.05) rotate(0deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}.preview-image-container{aspect-ratio:1;overflow:hidden;position:relative}.preview-image{height:100%;object-fit:cover;width:100%}.photo-overlay{align-items:center;background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:2px solid hsla(0,0%,100%,.9);border-radius:50%;box-shadow:0 4px 12px rgba(0,86,179,.4),0 2px 6px rgba(0,0,0,.1);color:#fff;display:flex;font-size:.8rem;font-weight:700;height:28px;justify-content:center;position:absolute;right:.75rem;top:.75rem;transition:all .3s ease;width:28px}.photo-preview-item:hover .photo-overlay{box-shadow:0 6px 16px rgba(0,86,179,.5),0 3px 8px rgba(0,0,0,.15);transform:scale(1.1)}.photo-info{background:linear-gradient(135deg,rgba(248,250,252,.8),rgba(241,245,249,.8));border-top:1px solid rgba(15,23,42,.05);padding:1rem .75rem .75rem;text-align:center}.photo-actions{background:linear-gradient(135deg,rgba(248,250,252,.95),rgba(241,245,249,.9));border-top:1px solid rgba(226,232,240,.5);padding:.5rem .75rem .75rem}.individual-retake-button{align-items:center;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:8px;box-shadow:0 1px 2px rgba(239,68,68,.2),0 1px 3px rgba(239,68,68,.15);color:#fff;cursor:pointer;display:flex;font-size:.6875rem;font-weight:600;gap:.25rem;justify-content:center;padding:.375rem .75rem;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.individual-retake-button:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 2px 4px rgba(239,68,68,.3),0 4px 8px rgba(239,68,68,.2);transform:translateY(-1px)}.individual-retake-button:active{box-shadow:0 1px 2px rgba(239,68,68,.2),inset 0 1px 2px rgba(0,0,0,.1);transform:translateY(0)}.individual-retake-button i{font-size:.625rem}.individual-retake-button span{font-size:.6875rem}.photo-angle,.photo-quality{display:block;font-size:.75rem;font-weight:500;line-height:1.4}.photo-quality{align-items:center;color:var(--primary-blue);display:flex;font-weight:700;gap:.25rem;justify-content:center;margin-bottom:.25rem}.photo-quality:before{color:#059669;content:"●";font-size:.5rem}.photo-angle{color:#64748b;font-size:.7rem;text-transform:capitalize}.photo-preview-item[data-quality=high] .photo-quality:before{color:#059669}.photo-preview-item[data-quality=medium] .photo-quality:before{color:#d97706}.photo-preview-item[data-quality=low] .photo-quality:before{color:#dc2626}.photo-preview-item.loading{animation:photoLoading 1.5s infinite}@keyframes photoLoading{0%,to{opacity:.6}50%{opacity:1}}.photo-preview-item.loading .preview-image{filter:blur(2px)}.photo-preview-item.retake-pending{animation:retakePulsePending 2s ease-in-out infinite;background:linear-gradient(145deg,rgba(0,86,179,.08),rgba(0,86,179,.03));border:2px dashed var(--primary-blue);opacity:.7;transform:scale(.96)}@keyframes retakePulsePending{0%,to{border-color:var(--primary-blue);opacity:.7}50%{border-color:rgba(0,86,179,.6);opacity:.85}}.photo-preview-item.retake-pending:hover{animation:none;opacity:.8;transform:scale(.96)}.retake-pending-overlay{align-items:center;backdrop-filter:blur(1px);background:linear-gradient(135deg,rgba(0,86,179,.9),rgba(0,86,179,.8));border-radius:20px;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:10}.retake-pending-overlay .pending-content{animation:pendingContentPulse 1.5s ease-in-out infinite;color:#fff;text-align:center}@keyframes pendingContentPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.retake-pending-overlay .pending-icon{animation:pendingIconRotate 2s ease-in-out infinite;font-size:1.5rem;margin-bottom:.5rem}@keyframes pendingIconRotate{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(-5deg) scale(1.1)}75%{transform:rotate(5deg) scale(1.1)}}.retake-pending-overlay .pending-text{font-size:.75rem;line-height:1.2}.retake-pending-overlay .pending-text small{display:block;margin-bottom:.25rem;opacity:.9}.retake-pending-overlay .pending-text strong{font-weight:600;text-transform:capitalize}.photo-preview-item.replacing{animation:photoReplacing .6s ease-out}@keyframes photoReplacing{0%{opacity:1;transform:scale(1) rotate(0deg)}50%{filter:blur(2px);opacity:.3;transform:scale(.8) rotate(-3deg)}to{filter:blur(4px);opacity:.1;transform:scale(.7) rotate(-5deg)}}.photo-preview-item.just-replaced{animation:photoReplaceSuccess 1.2s ease-out}@keyframes photoReplaceSuccess{0%{filter:blur(4px);opacity:0;transform:scale(.7) rotate(5deg)}30%{filter:blur(1px);opacity:.8;transform:scale(1.1) rotate(-2deg)}60%{filter:blur(0);opacity:1;transform:scale(.95) rotate(1deg)}80%{box-shadow:0 16px 32px rgba(34,197,94,.25),0 8px 16px rgba(34,197,94,.15);transform:scale(1.05) rotate(0deg)}to{box-shadow:0 8px 20px rgba(15,23,42,.08),0 4px 8px rgba(15,23,42,.04);transform:scale(1) rotate(0deg)}}.photo-preview-item.just-replaced:after{animation:successGlow 1.2s ease-out;background:linear-gradient(45deg,rgba(34,197,94,.3),rgba(34,197,94,.1) 50%,rgba(34,197,94,.3));border-radius:22px;bottom:-2px;content:"";left:-2px;pointer-events:none;position:absolute;right:-2px;top:-2px;z-index:-1}@keyframes successGlow{0%,to{opacity:0}30%{opacity:1}60%{opacity:.7}}.sequence-complete-card{align-items:center;display:flex;flex-direction:column}.complete-card-header{display:flex;justify-content:center;padding:2rem 1.5rem 1.5rem;text-align:center;width:100%}.complete-success-message{align-items:center;display:flex;flex-direction:column;gap:1rem;width:100%}.complete-success-message h4{color:var(--success-color,#059669);font-size:1.25rem;font-weight:600;margin:0;text-align:center;width:100%}.complete-success-message p{color:var(--text-secondary);font-size:.9rem;margin:0;text-align:center;width:100%}.completion-summary{align-items:center;color:var(--text-secondary);display:flex;font-size:.85rem;gap:.75rem;justify-content:center;margin-top:.25rem;width:100%}.summary-separator{color:var(--border-color);font-weight:700}.summary-text{font-weight:500}.complete-icon{align-items:center;animation:successBounce .6s ease-out;background:linear-gradient(135deg,#059669,#047857);border-radius:50%;box-shadow:0 8px 25px rgba(5,150,105,.3),0 3px 10px rgba(0,0,0,.15);display:flex;flex-shrink:0;height:60px;justify-content:center;width:60px}@keyframes successBounce{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.complete-icon i{color:#fff;font-size:1.75rem}.complete-content{align-items:flex-start;display:flex;flex:1;flex-direction:column}.complete-content h4{color:#047857;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .375rem}.complete-content p{color:#065f46;font-size:.8125rem;letter-spacing:-.005em;margin:0}.complete-card-footer{padding:0 1.5rem 1.5rem;text-align:center}@media (max-width:768px){.action-summary-card,.camera-interface-card,.capture-instructions-card,.photo-preview-card,.photo-progress-card,.sequence-complete-card,.step-actions-card{border-radius:16px;margin-bottom:1.5rem}.camera-card-header,.complete-card-header,.instructions-card-header,.photo-progress-card-header,.preview-card-header{padding:1.25rem}.camera-capture-button,.camera-complete-button{justify-content:center;max-width:280px;width:100%}.photo-preview-grid{gap:.75rem;grid-template-columns:repeat(3,1fr)}.capture-progress-container{padding:0 1.25rem 1.25rem}.camera-container{margin:0 auto 1.25rem;max-width:calc(100% - 2.5rem)}.preview-card-body{padding:0 1.25rem 1.25rem}.face-guide{height:280px;width:220px}}@media (max-width:480px){.photo-progress-card-header{align-items:flex-start;flex-direction:column;gap:1rem}.progress-badge{align-self:flex-end}.preview-header-content{align-items:flex-start;flex-direction:column;gap:.75rem}.face-guide{height:240px;width:180px}}:focus{outline:3px solid rgba(66,133,244,.5);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.6}.photo-preview-card.photo-preview-visible{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.photo-preview-card.photo-preview-hidden{opacity:.6;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}.enrollment-step#step3 .confirmation-employee-section,.enrollment-step#step3 .confirmation-photos-section,.enrollment-step#step3 .confirmation-summary-section{display:block;margin-bottom:20px;width:100%}.enrollment-step#step3 .confirmation-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden}.enrollment-step#step3 .confirmation-card .card-header{align-items:center;background:linear-gradient(135deg,#0056b3,#4a90e2);color:#fff;display:flex;justify-content:space-between;padding:16px 20px}.enrollment-step#step3 .confirmation-card .card-header h4{align-items:center;display:flex;font-size:1rem;font-weight:600;gap:8px;margin:0}.enrollment-step#step3 .confirmation-card .card-body{padding:20px}.enrollment-step#step3 .photo-count-badge{background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.3);border-radius:6px;font-size:.8rem;font-weight:600;padding:4px 8px}.enrollment-step#step3 .confirmation-employee-card{align-items:flex-start;display:flex;gap:16px}.enrollment-step#step3 .confirmation-employee-card .employee-avatar{align-items:center;background:linear-gradient(135deg,#e8f4fd,#d1e9ff);border-radius:8px;color:#0056b3;display:flex;flex-shrink:0;font-size:1.2rem;font-weight:700;height:50px;justify-content:center;width:50px}.enrollment-step#step3 .confirmation-employee-card .employee-details h3{color:#1a1a1a;font-size:1.1rem;font-weight:600;margin:0 0 6px}.enrollment-step#step3 .confirmation-employee-card .employee-meta{display:flex;flex-direction:column;gap:4px}.enrollment-step#step3 .confirmation-employee-card .meta-item{display:flex;font-size:.85rem;gap:4px}.enrollment-step#step3 .confirmation-employee-card .meta-label{color:#6b7280;font-weight:500}.enrollment-step#step3 .confirmation-employee-card .meta-value{color:#374151;font-weight:600}.enrollment-step#step3 .confirmation-photo-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));max-width:100%}.enrollment-step#step3 .confirmation-photo-item{aspect-ratio:1;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;position:relative}.enrollment-step#step3 .confirmation-photo-item img{display:block;height:100%;object-fit:cover;width:100%}.enrollment-step#step3 .confirmation-photo-item .photo-info{background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.3));bottom:0;color:#fff;font-size:.75rem;font-weight:600;left:0;padding:8px;position:absolute;right:0;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}.enrollment-step#step3 .confirmation-photo-item .photo-info .photo-quality{color:#fff}.enrollment-step#step3 .summary-stats-grid{display:flex;flex-direction:column;gap:12px}.enrollment-step#step3 .stat-item{align-items:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;display:flex;gap:12px;padding:12px}.enrollment-step#step3 .stat-icon{align-items:center;background:linear-gradient(135deg,#0056b3,#4a90e2);border-radius:6px;color:#fff;display:flex;flex-shrink:0;font-size:.9rem;height:32px;justify-content:center;width:32px}.enrollment-step#step3 .stat-details{display:flex;flex:1;flex-direction:column;gap:2px}.enrollment-step#step3 .stat-label{color:#6b7280;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.enrollment-step#step3 .stat-value{color:#1a1a1a;font-size:1rem;font-weight:700}.enrollment-step#step3 .stat-value.ready{color:#059669}.enrollment-step#step3 .confirmation-nav-controls{align-items:center;background:#fff;border-radius:12px;border-top:1px solid #e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:12px;margin-top:24px;padding:20px}.enrollment-step#step3 .confirmation-nav-button{align-items:center;background:transparent;border:none;color:#6b7280;cursor:pointer;display:flex;font-size:.8rem;font-weight:500;gap:6px;order:-1;padding:8px 12px;text-decoration:none;transition:all .2s ease}.enrollment-step#step3 .confirmation-nav-button:hover{color:#374151}.enrollment-step#step3 .confirmation-complete-button{align-items:center;background:linear-gradient(135deg,#0056b3,#4a90e2);border:none;border-radius:8px;box-shadow:0 2px 8px rgba(0,86,179,.3);color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s ease}.enrollment-step#step3 .confirmation-complete-button:hover{background:linear-gradient(135deg,#0041a3,#357abd);box-shadow:0 4px 12px rgba(0,86,179,.4);transform:translateY(-1px)}.enrollment-step#step3 .confirmation-complete-button.submitting,.enrollment-step#step3 .confirmation-complete-button:disabled{background:linear-gradient(135deg,#9ca3af,#d1d5db);box-shadow:0 2px 4px rgba(0,0,0,.1);color:#6b7280;cursor:not-allowed;pointer-events:none;transform:none}.enrollment-step#step3 .confirmation-complete-button.submitting:before{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:#6b7280;content:"";height:16px;left:16px;position:absolute;top:50%;transform:translateY(-50%);width:16px}.button-glow{background:linear-gradient(135deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,.1) 50%,hsla(0,0%,100%,.05));border-radius:inherit;bottom:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;transition:all .4s cubic-bezier(.4,0,.2,1)}.button-glow:before{background:linear-gradient(45deg,transparent 30%,hsla(0,0%,100%,.3) 50%,transparent 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;transform:translateX(-100%);transition:transform .6s ease;width:200%}.confirmation-complete-button{overflow:hidden;position:relative}.confirmation-complete-button:hover .button-glow{opacity:1}.confirmation-complete-button:hover .button-glow:before{transform:translateX(100%)}.clock-step .confirmation-complete-button{align-items:center;animation:buttonReadyPulse 3s ease-in-out infinite;backdrop-filter:blur(12px);background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:2px solid rgba(0,86,179,.15);border-radius:18px;box-shadow:0 0 0 1px rgba(0,86,179,.12),0 4px 8px rgba(0,86,179,.15),0 8px 16px rgba(0,86,179,.12),0 16px 32px rgba(0,86,179,.1),0 24px 48px rgba(0,86,179,.08),inset 0 2px 4px hsla(0,0%,100%,.25),inset 0 -2px 4px rgba(0,56,179,.1);color:#fff;cursor:pointer;display:flex;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:1.1875rem;font-weight:800;gap:.875rem;justify-content:center;letter-spacing:.5px;min-width:320px;overflow:hidden;padding:1.375rem 3.25rem;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}@keyframes buttonReadyPulse{0%,to{box-shadow:0 0 0 1px rgba(0,86,179,.12),0 4px 8px rgba(0,86,179,.15),0 8px 16px rgba(0,86,179,.12),0 16px 32px rgba(0,86,179,.1),0 24px 48px rgba(0,86,179,.08),inset 0 2px 4px hsla(0,0%,100%,.25),inset 0 -2px 4px rgba(0,56,179,.1);transform:scale(1)}50%{box-shadow:0 0 0 1px rgba(0,86,179,.15),0 6px 12px rgba(0,86,179,.18),0 12px 24px rgba(0,86,179,.15),0 20px 40px rgba(0,86,179,.12),0 32px 64px rgba(0,86,179,.1),inset 0 3px 6px hsla(0,0%,100%,.3),inset 0 -3px 6px rgba(0,56,179,.12);transform:scale(1.01)}}.clock-step .confirmation-complete-button:before{background:radial-gradient(circle,hsla(0,0%,100%,.2) 0,transparent 70%);content:"";height:200%;left:-50%;opacity:0;pointer-events:none;position:absolute;top:-50%;transition:opacity .3s ease;width:200%}.clock-step .confirmation-complete-button:hover:before{opacity:1}.clock-step .confirmation-complete-button:hover{background:linear-gradient(135deg,#004494,#003875);box-shadow:0 0 0 1px rgba(0,68,163,.2),0 6px 12px rgba(0,86,179,.25),0 12px 24px rgba(0,86,179,.2),0 24px 48px rgba(0,86,179,.15),inset 0 2px 0 hsla(0,0%,100%,.25),0 0 28px rgba(0,86,179,.35);color:#fff;transform:translateY(-3px)}.clock-step .confirmation-complete-button:active{box-shadow:0 0 0 1px rgba(0,68,163,.3),0 4px 8px rgba(0,86,179,.3),0 8px 16px rgba(0,86,179,.2),0 16px 32px rgba(0,86,179,.15);transform:translateY(-1px);transition:all .15s cubic-bezier(.4,0,.2,1)}@media (max-width:640px){.enrollment-step#step3 .confirmation-employee-card{align-items:center;flex-direction:column;text-align:center}.enrollment-step#step3 .confirmation-nav-controls{flex-direction:column}.enrollment-step#step3 .confirmation-complete-button,.enrollment-step#step3 .confirmation-nav-button{justify-content:center;width:100%}.enrollment-step#step3 .confirmation-photo-grid{gap:12px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}}.step3-phase-indicator{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin:var(--space-lg) 0;padding:var(--space-md)}.phase-progress{display:flex;flex-direction:column;gap:var(--space-sm)}.phase-progress-bar{background:var(--border-gray);border-radius:999px;height:8px;overflow:hidden;position:relative}.phase-progress-fill{background:linear-gradient(90deg,var(--primary-blue) 0,#0056b3 100%);border-radius:999px;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.phase-progress-fill[data-phase="1"]{width:33.33%}.phase-progress-fill[data-phase="2"]{width:66.66%}.phase-progress-fill[data-phase="3"]{width:100%}.phase-labels{align-items:center;display:flex;justify-content:space-between}.phase-label{color:var(--text-muted);font-size:var(--font-sm);font-weight:500;transition:all .3s ease}.phase-label.phase-active,.phase-label.phase-completed{color:var(--primary-blue);font-weight:600}.phase-label.phase-pending{color:var(--text-muted);font-weight:500;opacity:.7}#step3 .step3-phase{display:none}#step3 .step3-phase.active{animation:phaseSlideIn .3s cubic-bezier(.4,0,.2,1);display:block}@keyframes phaseSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.verification-title{color:var(--text-dark);font-size:var(--font-2xl);font-weight:600;margin-bottom:var(--space-md)}.verification-message{color:var(--text-muted);font-size:var(--font-base);line-height:1.8;margin-bottom:var(--space-lg);margin-left:auto;margin-right:auto;max-width:400px;text-align:center;white-space:pre-line}#verificationErrorMessage{max-width:none}.error-heading{color:var(--text-dark);font-weight:500;margin-bottom:var(--space-md);text-align:center}.error-tips-list{list-style-position:outside;list-style-type:disc;margin:0 auto;max-width:100%;padding:0 0 0 1.5rem;text-align:left;width:fit-content}.error-tips-list li{color:var(--text-muted);line-height:1.6;margin:0 0 .5rem;padding:0}.error-tips-list li:last-child{margin-bottom:0}.verification-camera-card{animation:contentZoomIn .3s cubic-bezier(.4,0,.2,1);background:var(--white);border-radius:var(--radius-lg);box-shadow:0 20px 50px rgba(0,0,0,.3);max-width:600px;padding:var(--space-xl);width:100%}.verification-header{margin-bottom:var(--space-lg);text-align:center}.verification-instructions{color:var(--text-muted);font-size:var(--font-base);margin-top:var(--space-sm)}.verification-camera-container{background:#000;border-radius:var(--radius-md);margin-bottom:var(--space-lg);overflow:hidden;position:relative}.verification-camera-video{display:block;height:auto;transform:scaleX(-1);width:100%}.verification-camera-canvas{display:none}.verification-camera-overlay{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.verification-face-guide{height:300px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:250px}.verification-face-guide .guide-corners{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border:none;box-shadow:none;height:100%;position:relative;width:100%}.verification-face-guide .guide-corners .corner{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border:3px solid hsla(0,0%,100%,.8);height:30px;position:absolute;width:30px}.guide-corners .corner.top-left{border-bottom:none;border-right:none;left:0;top:0}.guide-corners .corner.top-right{border-bottom:none;border-left:none;right:0;top:0}.guide-corners .corner.bottom-left{border-right:none;border-top:none;bottom:0;left:0}.guide-corners .corner.bottom-right{border-left:none;border-top:none;bottom:0;right:0}.verification-countdown{align-items:center;background:rgba(0,0,0,.7);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:10}.countdown-number{animation:countdownPulse 1s ease-in-out;color:#fff;font-size:8rem;text-shadow:0 4px 20px rgba(0,0,0,.5)}@keyframes countdownPulse{0%{opacity:0;transform:scale(1.2)}50%{opacity:1;transform:scale(1)}to{opacity:1;transform:scale(.95)}}.verification-actions{flex-direction:column;gap:var(--space-md);text-align:center}.verification-hint{color:var(--text-muted);font-size:var(--font-base);font-weight:500;margin:0;padding:var(--space-sm)}.verification-capture-button,.verification-retry-button{align-items:center;background:linear-gradient(135deg,var(--primary-blue) 0,#004494 100%);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-button);color:#fff;cursor:pointer;display:flex;font-size:var(--font-lg);font-weight:600;gap:var(--space-sm);justify-content:center;min-height:60px;padding:var(--space-lg) var(--space-xl);transition:all .3s ease}.verification-capture-button:hover,.verification-retry-button:hover{box-shadow:0 12px 40px rgba(66,133,244,.4),0 6px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.verification-capture-button:active,.verification-retry-button:active{transform:translateY(0)}.verification-cancel-button{align-items:center;background:transparent;border:2px solid var(--border-gray);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:flex;font-size:var(--font-base);font-weight:500;gap:var(--space-sm);justify-content:center;min-height:60px;padding:var(--space-md) var(--space-xl);transition:all .3s ease}.verification-cancel-button:hover{border-color:var(--error-red);color:var(--error-red)}.verification-spinner{height:100px;margin:var(--space-xl) auto;width:100px}.spinner-ring{animation:spinRing 1.5s linear infinite;left:0;top:0}.spinner-ring:nth-child(2){animation-delay:-.5s;border-top-color:rgba(0,86,179,.5)}.spinner-ring:nth-child(3){animation-delay:-1s;border-top-color:rgba(0,86,179,.25)}@keyframes spinRing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.verification-confidence{background:var(--light-gray);border-radius:var(--radius-md);gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md)}.confidence-label{font-size:var(--font-sm)}.confidence-value{font-size:var(--font-lg)}@media (max-width:768px){.verification-camera-card,.verification-overlay-content{max-width:90%;padding:var(--space-lg)}.verification-icon{font-size:3rem;height:100px;width:100px}.verification-title{font-size:var(--font-xl)}.verification-face-guide{height:250px;width:200px}.phase-labels{font-size:.75rem}}.verification-error-card,.verification-processing-card,.verification-success-card,.verification-upload-card{animation:cardFadeIn .4s ease-out;background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);margin:2rem auto;max-width:600px;min-height:320px;padding:2.5rem 2rem;text-align:center;will-change:transform,opacity}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.verification-error-card .card-header,.verification-processing-card .card-header,.verification-success-card .card-header,.verification-upload-card .card-header{margin-bottom:2rem}.verification-error-card .card-body,.verification-processing-card .card-body,.verification-success-card .card-body,.verification-upload-card .card-body{margin-top:1.5rem}.error-icon-large,.processing-icon-inline,.success-icon-large,.upload-icon-inline{align-items:center;border-radius:50%;display:flex;font-size:3rem;height:100px;justify-content:center;margin:0 auto 1.5rem;width:100px}.processing-icon-inline,.upload-icon-inline{background:linear-gradient(135deg,#06c,#0052a3);color:#fff}.processing-icon-inline{animation:processingPulse 1.5s ease-in-out infinite}@keyframes processingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.success-icon-large{animation:successPop .6s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#059669,#047857);box-shadow:0 8px 25px rgba(5,150,105,.3),0 3px 10px rgba(0,0,0,.15);color:#fff}@keyframes successPop{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.error-icon-large{animation:errorShake .5s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,var(--error-red) 0,#c82333 100%);color:#fff}@keyframes errorShake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.upload-progress-container{margin:0 auto;max-width:400px;width:100%}.upload-progress-bar{background:rgba(0,102,204,.1);border-radius:4px;height:8px;margin-bottom:1rem;overflow:hidden;width:100%}.upload-progress-fill{background:linear-gradient(90deg,#06c,#0052a3);border-radius:4px;height:100%;transition:width .3s ease-out;will-change:width}.upload-status{color:var(--text-muted);font-size:.9rem;font-weight:500}.verification-spinner{height:80px;margin:0 auto;position:relative;width:80px}.spinner-ring{animation:spinnerRotate 1.2s cubic-bezier(.5,0,.5,1) infinite;border:4px solid transparent;border-radius:50%;border-top:4px solid var(--primary-blue);height:100%;position:absolute;width:100%}.spinner-ring:first-child{animation-delay:-.45s}.spinner-ring:nth-child(2){animation-delay:-.3s}.spinner-ring:nth-child(3){animation-delay:-.15s}@keyframes spinnerRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.verification-confidence{align-items:center;display:flex;font-size:1.1rem;gap:.75rem;justify-content:center;margin-top:1rem}.confidence-label{color:var(--text-muted);font-weight:500}.confidence-value{color:var(--success-green);font-size:1.3rem;font-weight:700}.verification-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.verification-cancel-button,.verification-retry-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease}.verification-retry-button.primary{background:var(--primary-blue);color:#fff}.verification-retry-button.primary:hover{background:#004494;box-shadow:0 4px 12px rgba(0,102,204,.3);color:#fff;transform:translateY(-2px)}.verification-cancel-button.secondary{background:transparent;border:2px solid var(--border-color);color:var(--text-muted)}.verification-cancel-button.secondary:hover{background:var(--bg-light);border-color:var(--text-muted);color:var(--text-muted)}@media (max-width:768px){.verification-error-card,.verification-processing-card,.verification-success-card,.verification-upload-card{margin:1.5rem 1rem;min-height:280px;padding:2rem 1.5rem}.error-icon-large,.processing-icon-inline,.success-icon-large,.upload-icon-inline{font-size:2.5rem;height:80px;margin-bottom:1rem;width:80px}.verification-actions{flex-direction:column;gap:.75rem}.verification-cancel-button,.verification-retry-button{justify-content:center;width:100%}}.employee-loading{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:60px 20px}.employee-loading .loading-spinner{animation:spin 1s linear infinite;color:var(--primary-blue);font-size:48px;margin-bottom:20px}.employee-loading .loading-text{color:var(--text-muted);font-size:16px;margin:0}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-overlay{align-items:center;background:rgba(0,0,0,.7);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}.loading-overlay .loading-content{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.3);padding:40px 60px;text-align:center}.loading-overlay .loading-spinner{color:var(--primary-blue);font-size:48px;margin-bottom:20px}.loading-overlay .loading-message{color:var(--text-dark);font-size:18px;margin:0}.employee-count-display{background-color:rgba(0,86,179,.04);border:1px solid rgba(0,86,179,.08);border-radius:8px;color:var(--text-muted);font-size:14px;margin-bottom:12px;padding:8px 16px;text-align:center}.employee-count-display.d-none{display:none}@media (max-width:768px){.logout-modal{margin:var(--space-md);width:95%}.logout-modal .modal-actions{flex-direction:column-reverse}.logout-modal .btn-cancel,.logout-modal .btn-logout{width:100%}}.step-subtitle{color:#6b7280;font-size:1rem;font-weight:400;margin-bottom:24px;text-align:center}.employee-confirmation-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);margin-bottom:2rem;overflow:hidden;position:relative}.employee-summary-section{align-items:center;background:#fafafa;border-bottom:1px solid #f1f5f9;display:flex;flex-direction:column;gap:1.5rem;justify-content:center;padding:2.5rem 2rem;position:relative;text-align:center}.employee-summary-section .employee-info{text-align:center;width:100%}.employee-summary-section .employee-info h4{color:#1e293b;font-size:1.5rem;font-weight:600;line-height:1.3;margin:0 0 .5rem;word-wrap:break-word;overflow-wrap:break-word}.employee-summary-section .employee-meta{color:#64748b;display:block;font-size:.9rem;margin:0;text-align:center;width:100%}.employee-summary-section .confidence-progress-container{max-width:320px;width:100%}@media (max-width:768px){.employee-summary-section{flex-direction:column;gap:1.5rem;padding:1.5rem;text-align:center}.clock-step .employee-confirmation-card .employee-avatar{height:120px;width:120px}.action-type{font-size:2.25rem}.context-grid{gap:.75rem;grid-template-columns:1fr}}.employee-info{flex:1;min-width:0}.employee-info h4{color:#374151;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:1.625rem;font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:0 0 12px}.confidence-progress-container{align-items:center;display:flex;flex-direction:column;gap:8px;max-width:280px;width:100%}.confidence-progress-bar{background:rgba(226,232,240,.6);border-radius:12px;height:8px;overflow:hidden;position:relative;width:100%}.confidence-progress-fill{background:#10b981;border-radius:12px;height:100%;transition:all .5s ease;width:0}.confidence-progress-fill.high-confidence{background:#10b981}.confidence-progress-fill.medium-confidence{background:#f59e0b}.confidence-progress-fill.low-confidence{background:#ef4444}.confidence-progress-fill.manual-selection{background:#8b5cf6;background-image:linear-gradient(90deg,#8b5cf6,#7c3aed)}.progress-width-5{width:5%}.progress-width-10{width:10%}.progress-width-15{width:15%}.progress-width-20{width:20%}.progress-width-25{width:25%}.progress-width-30{width:30%}.progress-width-35{width:35%}.progress-width-40{width:40%}.progress-width-45{width:45%}.progress-width-50{width:50%}.progress-width-55{width:55%}.progress-width-60{width:60%}.progress-width-65{width:65%}.progress-width-70{width:70%}.progress-width-75{width:75%}.progress-width-80{width:80%}.progress-width-85{width:85%}.progress-width-90{width:90%}.progress-width-95{width:95%}.progress-width-100{width:100%}.confidence-width-0{width:0}.confidence-width-5{width:5%}.confidence-width-10{width:10%}.confidence-width-15{width:15%}.confidence-width-20{width:20%}.confidence-width-25{width:25%}.confidence-width-30{width:30%}.confidence-width-35{width:35%}.confidence-width-40{width:40%}.confidence-width-45{width:45%}.confidence-width-50{width:50%}.confidence-width-55{width:55%}.confidence-width-60{width:60%}.confidence-width-65{width:65%}.confidence-width-70{width:70%}.confidence-width-75{width:75%}.confidence-width-80{width:80%}.confidence-width-85{width:85%}.confidence-width-90{width:90%}.confidence-width-95{width:95%}.confidence-width-100{width:100%}.confidence-text{color:#64748b;font-size:.875rem;font-weight:500;text-align:center}.employee-meta{color:#475569;display:flex;flex-wrap:wrap;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:1rem;font-weight:500;gap:16px;letter-spacing:.75px;margin-bottom:16px;transition:all .3s ease}.employee-meta .separator{color:#d1d5db}.recognition-confidence{align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;color:#047857;display:flex;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:.875rem;font-weight:500;gap:8px;margin-top:16px;padding:12px 16px}.recognition-confidence i{color:#10b981;font-size:1rem}.clock-step .employee-confirmation-card .employee-avatar{align-items:center;background:#f8fafc;border:2px solid #e2e8f0;border-radius:24px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#64748b;display:flex;flex-shrink:0;font-size:4rem;font-weight:600;height:160px;justify-content:center;overflow:hidden;position:relative;width:160px}.clock-step .employee-confirmation-card .employee-avatar .employee-image{border-radius:22px;height:100%;object-fit:cover;position:relative;width:100%;z-index:1}.clock-action-summary{background:#fafafa;border-top:1px solid #e5e7eb;margin:0;padding:2rem 2rem 1rem;position:relative;text-align:center}.action-description{margin-bottom:2rem}.status-context{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);margin:1.5rem 0;padding:1.5rem}.context-grid{display:grid;gap:1rem;grid-template-columns:1fr}.context-item{border-bottom:1px solid #f1f5f9;justify-content:space-between;padding:.5rem 0}.context-item:last-child{border-bottom:none}.context-label{color:#64748b}.context-label,.context-value{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:.875rem}.context-value{color:#1e293b}.action-label{color:#475569;display:block;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:.875rem;font-weight:600;letter-spacing:1.5px;margin-bottom:1.5rem}.action-type{align-items:center;color:#1e293b;display:flex;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:2.75rem;font-weight:800;gap:.75rem;justify-content:center;letter-spacing:3px;line-height:1.1;margin:0;text-rendering:optimizeLegibility;text-transform:uppercase}.action-type i{color:#0056b3;font-size:2.75rem}.time-label{color:#475569;display:block;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-size:.9375rem;font-weight:700;letter-spacing:1.5px;margin-bottom:1rem;text-transform:uppercase}.time-value{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;display:block;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,monospace;font-size:1.875rem;font-variant-numeric:tabular-nums;letter-spacing:.025em;padding:.75rem 1.5rem}.action-type-badge{align-items:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0);border:2px solid #e2e8f0;border-radius:var(--radius-lg);box-shadow:0 4px 12px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);display:flex;gap:var(--space-md);justify-content:center;margin:var(--space-md) 0;overflow:hidden;padding:var(--space-xl) var(--space-xl);position:relative;transition:all .3s ease;width:100%}.action-type-badge.clock-in{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:.5px solid rgba(16,185,129,.2);color:#047857;font-weight:600;letter-spacing:.025em}.action-type-badge.clock-out{background:linear-gradient(135deg,#fef2f2,#fecaca);border:.5px solid rgba(239,68,68,.2);color:#dc2626;font-weight:600;letter-spacing:.025em}.action-type-badge:hover{box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.06);transform:translateY(-1px)}.action-type-badge.clock-in:hover{box-shadow:0 6px 16px rgba(16,185,129,.15),0 3px 8px rgba(16,185,129,.1)}.action-type-badge.clock-out:hover{box-shadow:0 6px 16px rgba(239,68,68,.15),0 3px 8px rgba(239,68,68,.1)}#clockStep1.active{padding-top:0}#clockStep2 .action-type-badge{flex-direction:column;gap:1rem;padding:2.5rem 2rem}#clockStep2 .action-type-badge .action-icon{margin:0}#clockStep2 .action-type-badge .action-content{align-items:center;text-align:center}.action-icon{flex-shrink:0;font-size:var(--font-3xl);opacity:.95}.action-content{display:flex;flex-direction:column;gap:4px}.action-label{font-size:var(--font-sm);font-weight:500;letter-spacing:.5px;opacity:.8;text-transform:uppercase}.action-type{font-size:var(--font-xl);font-weight:700;line-height:1.2}.status-context-card{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.98);border:1px solid #e5e7eb;border-radius:var(--radius-lg);box-shadow:0 8px 25px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.06);margin:var(--space-lg) 0;padding:var(--space-lg);transition:all .3s ease}.status-context-card:hover{border-color:#d1d5db;box-shadow:0 12px 35px rgba(0,0,0,.1),0 5px 15px rgba(0,0,0,.08);transform:translateY(-2px)}.status-card-header{border-bottom:1px solid #f1f5f9;margin-bottom:var(--space-md);padding-bottom:var(--space-sm)}.status-card-title{align-items:center;color:var(--text-dark);display:flex;font-size:1.25rem;font-weight:700;justify-content:center;margin:0;text-align:center}.status-card-title i{color:var(--primary-blue);font-size:1.1em;opacity:.85}.context-grid{display:flex;flex-direction:column;gap:var(--space-md)}.context-item{align-items:center;background:rgba(248,250,252,.8);border:1px solid rgba(226,232,240,.6);border-radius:var(--radius-md);display:flex;justify-content:center;padding:var(--space-sm) var(--space-md);transition:all .2s ease}.context-item:hover{background:rgba(241,245,249,.8);border-color:#cbd5e1}.success-summary-grid{display:grid;gap:1rem;grid-template-columns:1fr}.success-summary-grid .context-item{align-items:stretch;background:rgba(248,250,252,.8);border:1px solid #e2e8f0;flex-direction:column;justify-content:center;min-height:90px;padding:1.5rem 1.25rem}.success-summary-grid .context-content{align-items:center;display:flex;flex-direction:column;gap:.6rem;text-align:center}.success-summary-grid .context-label{color:#64748b;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.success-summary-grid .context-value{color:#1e293b;font-size:1.5rem;font-weight:700}#clockStep2 .context-grid .context-item{align-items:stretch;flex-direction:column;justify-content:center;min-height:90px;padding:1.5rem 1.25rem}#clockStep2 .context-grid .context-content{align-items:center;display:flex;flex-direction:column;gap:.6rem;text-align:center}#clockStep2 .context-grid .context-label{color:#64748b;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}#clockStep2 .context-grid .context-value{color:#1e293b;font-size:1.5rem;font-weight:700}#clockStep3 .employee-avatar{position:relative}#clockStep3 .employee-avatar .employee-image{border-radius:18px;height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%;z-index:1}@media (max-width:640px){.success-summary-grid{gap:1rem;grid-template-columns:1fr}}.context-icon{align-items:center;background:rgba(59,130,246,.1);border-radius:var(--radius-md);color:var(--primary-blue);display:flex;flex-shrink:0;font-size:var(--font-md);height:36px;justify-content:center;width:36px}.context-content{display:flex;flex-direction:column;gap:var(--space-xs);text-align:center;width:100%}.context-label{color:var(--text-muted);font-size:var(--font-sm);font-weight:500;letter-spacing:.5px;text-transform:uppercase}.context-value{align-items:center;color:var(--text-dark);display:flex;flex-direction:column;font-size:var(--font-base);font-weight:600;gap:.25rem;line-height:1.3}.context-action{color:#1e293b;font-size:.875rem;font-weight:500;margin-top:.25rem}.context-time{color:#0f172a;font-family:SF Mono,Monaco,Menlo,monospace;font-size:2.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;margin:.5rem 0}.context-relative{color:#94a3b8;font-size:.813rem;font-style:italic;font-weight:400}.context-time.clock-in-color{background:rgba(16,185,129,.2);border-radius:.5rem;box-shadow:0 2px 4px rgba(16,185,129,.15);color:#059669;padding:.5rem 1rem}.context-time.clock-out-color{background:rgba(220,38,38,.12);border-radius:.5rem;box-shadow:0 2px 4px rgba(220,38,38,.12);color:#dc2626;padding:.5rem 1rem}.context-time.active-session-color{background:rgba(59,130,246,.18);border-radius:.5rem;box-shadow:0 2px 4px rgba(59,130,246,.15);color:#1d4ed8;padding:.5rem 1rem}.today-hours .context-time{font-size:2.25rem;font-weight:800}.today-hours .context-relative{font-size:.75rem;opacity:.6}.action-time{align-items:center;background:rgba(241,245,249,.6);border:1px solid rgba(203,213,225,.8);border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;margin:var(--space-lg) 0;padding:var(--space-md);transform:translateX(0)}.time-icon{color:var(--text-muted);opacity:.7}.time-value{color:var(--text-dark);font-family:SF Mono,Monaco,Menlo,monospace;font-size:var(--font-lg);font-weight:600}.action-time-display,.clock-action-display{display:none}.success-details{display:flex;flex-direction:column;gap:12px;margin:20px 0}.success-detail-item{align-items:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;display:flex;gap:12px;padding:12px 16px}.success-detail-item i{color:#0056b3;font-size:1rem;width:20px}.success-detail-item span{color:#374151;font-weight:600}.success-icon-large{color:#059669;font-size:4rem;margin-bottom:20px}.success-icon-large i{color:#fff;font-size:2.9rem}.success-title{color:#1a1a1a;font-size:1.5rem;font-weight:600;margin:0 0 8px}.success-message{color:#6b7280;font-size:1rem;margin:0 0 24px}@media (max-width:640px){.employee-summary-section{align-items:center;flex-direction:column;gap:12px;text-align:center}.action-summary-card{padding:var(--space-md)}.action-type{font-size:var(--font-xl)}}.success-details-enhanced{background:rgba(249,250,251,.7);border:1px solid #e5e7eb;border-radius:12px;display:flex;flex-direction:column;gap:12px;margin:24px 0;padding:20px}.success-details-enhanced .success-detail-item{align-items:center;display:flex;font-size:1.1rem;gap:12px}.success-details-enhanced .success-detail-item i{color:#059669;font-size:1.2rem;width:20px}.success-details-enhanced .success-detail-item span{color:#1f2937;font-weight:600}.success-stats-section{background:rgba(243,244,246,.8);border:1px solid #d1d5db;border-radius:12px;margin:24px 0;padding:20px}.stats-title{align-items:center;color:#374151;display:flex;font-size:1.1rem;font-weight:600;gap:10px;margin:0 0 16px}.stats-title i{color:#6366f1;font-size:1.2rem}.stats-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.stat-item{align-items:center;display:flex;justify-content:space-between;padding:8px 0}.stat-label{color:#6b7280;font-size:.95rem;font-weight:500}.stat-value{color:#1f2937;font-size:1rem;font-weight:600}.auto-redirect-section{margin:32px 0 24px;text-align:center}.countdown-container{align-items:center;display:flex;flex-direction:column;gap:16px}.countdown-circle{align-items:center;animation:countdownSpin 3s linear;background:hsla(0,0%,100%,.95);border:4px solid #e5e7eb;border-radius:50%;border-top-color:#06c;box-shadow:0 4px 12px rgba(0,102,204,.15);display:flex;height:80px;justify-content:center;position:relative;width:80px}.countdown-number{color:#06c;font-size:2rem;font-weight:800;line-height:1}.countdown-message{text-align:center}.countdown-text{color:#374151;font-size:1.1rem;font-weight:600;margin:0 0 4px}.countdown-subtext{color:#6b7280;font-size:.9rem;margin:0}@keyframes countdownSpin{0%{border-top-color:#06c;transform:rotate(0deg)}33%{border-top-color:#f59e0b;transform:rotate(120deg)}66%{border-top-color:#ef4444;transform:rotate(240deg)}to{border-top-color:#059669;transform:rotate(1turn)}}#clockStep3 .success-container{margin:0 auto;max-width:100%;padding:0 0 32px;text-align:center}#clockStep3 .success-title{color:#059669;font-size:2.2rem;font-weight:700;margin:0 0 8px}#clockStep3 .success-message{color:#374151;font-size:1.2rem;margin:0 0 32px}#clockStep3 .success-icon-large{color:#059669;font-size:5.5rem;margin-bottom:24px}#clockStep3 .success-details-enhanced{margin:24px 0;transform:translateX(-10px)}#clockStep3 .success-detail-item{align-items:center;background:rgba(248,250,252,.5);border:1px solid rgba(226,232,240,.6);border-radius:var(--radius-md);color:#374151;display:flex;font-size:1.1rem;gap:var(--space-md);margin:8px 0;padding:var(--space-sm) var(--space-md);transition:all .2s ease}#clockStep3 .success-detail-item:hover{background:rgba(241,245,249,.8);border-color:#cbd5e1}#clockStep3 .success-detail-item .context-icon i{color:#059669;font-size:1.2rem}#clockStep3 .success-detail-item .context-content{display:flex;flex-direction:column;gap:var(--space-xs)}@media (max-width:640px){#clockStep3 .success-container{padding:24px 16px}.countdown-circle{height:70px;width:70px}.countdown-number{font-size:1.8rem}.stats-grid{gap:8px;grid-template-columns:1fr}#clockStep3 .success-title{font-size:1.8rem}#clockStep3 .success-message{font-size:1.1rem}#clockStep3 .success-icon-large{font-size:4.5rem}}body.modal-scroll-locked{overflow:hidden;position:fixed;width:100%}.modal-service-overlay{align-items:center;animation:fadeIn .3s ease;backdrop-filter:blur(4px);background:rgba(0,0,0,.85);display:flex;height:100%;justify-content:center;left:0;padding:max(32px,env(safe-area-inset-top)) max(32px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(32px,env(safe-area-inset-left));position:fixed;top:0;width:100%;z-index:10000}.modal-service-dialog{animation:slideUp .3s ease;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:500px;padding:32px;text-align:center;width:90%}.modal-service-dialog h3{color:#1e293b;font-size:1.75rem;font-weight:600;margin:0 0 16px}.modal-service-dialog .modal-message{color:#475569;font-size:1rem;line-height:1.6;margin:12px 0}.modal-service-dialog .modal-details{background:#f1f5f9;border-left:4px solid #3b82f6;border-radius:8px;color:#334155;font-size:.95rem;margin:20px 0;padding:12px 16px;text-align:left}.modal-alert-icon{font-size:3rem;margin-bottom:16px}.modal-icon-info{color:#3b82f6}.modal-icon-error{color:#ef4444}.modal-icon-warning{color:#f59e0b}.modal-icon-success{color:#10b981}.modal-actions{display:flex;gap:12px;margin-top:24px;padding-bottom:max(0px,env(safe-area-inset-bottom))}.modal-actions,.modal-actions-single,.modal-btn{justify-content:center}.modal-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;flex:1;font-size:1rem;font-weight:500;gap:8px;min-height:44px;padding:12px 24px;touch-action:manipulation;transition:all .2s ease}.modal-actions-single .modal-btn{flex:0 1 auto;min-width:120px}.modal-btn-cancel{background:#f1f5f9;color:#475569}.modal-btn-cancel:hover{background:#e2e8f0}.modal-btn-cancel:active{background:#cbd5e1;transform:scale(.98)}.modal-btn-default{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff}.modal-btn-default:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 16px rgba(59,130,246,.4)}.modal-btn-default:active{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:scale(.98)}.modal-btn-danger,.modal-btn-error{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 12px rgba(239,68,68,.3);color:#fff}.modal-btn-danger:hover,.modal-btn-error:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 6px 16px rgba(239,68,68,.4)}.modal-btn-danger:active,.modal-btn-error:active{background:linear-gradient(135deg,#b91c1c,#991b1b);transform:scale(.98)}.modal-btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px rgba(245,158,11,.3);color:#fff}.modal-btn-warning:hover{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 6px 16px rgba(245,158,11,.4)}.modal-btn-warning:active{background:linear-gradient(135deg,#b45309,#92400e);transform:scale(.98)}.modal-btn-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px rgba(16,185,129,.3);color:#fff}.modal-btn-success:hover{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 6px 16px rgba(16,185,129,.4)}.modal-btn-success:active{background:linear-gradient(135deg,#047857,#065f46);transform:scale(.98)}.modal-btn-info{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff}.modal-btn-info:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 16px rgba(59,130,246,.4)}.modal-btn-info:active{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:scale(.98)}.modal-btn i{font-size:1.1rem}.modal-variant-danger .modal-details,.modal-variant-error .modal-details{border-left-color:#ef4444}.modal-variant-warning .modal-details{border-left-color:#f59e0b}.modal-variant-success .modal-details{border-left-color:#10b981}@media (max-width:640px){.modal-service-dialog{padding:24px;width:95%}.modal-service-dialog h3{font-size:1.5rem}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}@media (prefers-reduced-motion:reduce){.modal-service-overlay{animation:none;backdrop-filter:none}.modal-service-dialog{animation:none}}.employee-card-clickable{cursor:pointer}.employee-status-text.status-info{color:#3b82f6}.status-dot{border-radius:50%;display:inline-block;flex-shrink:0;height:8px;width:8px}.status-dot.dot-solid{background-color:currentColor}.status-dot.dot-outline{background-color:transparent;border:1.5px solid}.status-dot.dot-pulse{animation:statusPulse 1.5s ease-in-out infinite;background-color:currentColor}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.notification-container{display:flex;flex-direction:column;gap:12px;max-width:400px;pointer-events:none;position:fixed;right:20px;top:20px;z-index:10000}.notification{align-items:center;animation:slideInRight .3s ease-out;background:#fff;border-left:4px solid;border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.1);display:flex;gap:12px;min-width:320px;padding:16px;pointer-events:auto}.notification-error{border-left-color:var(--error-red)}.notification-success{border-left-color:var(--success-green)}.notification-warning{border-left-color:var(--warning-orange)}.notification-info{border-left-color:var(--primary-blue)}.notification i{flex-shrink:0;font-size:1.25rem}.notification-error i{color:var(--error-red)}.notification-success i{color:var(--success-green)}.notification-warning i{color:var(--warning-orange)}.notification-info i{color:var(--primary-blue)}.notification-message{color:var(--text-dark);flex:1;font-size:.9375rem;line-height:1.5}.notification-close{background:none;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;flex-shrink:0;font-size:1.25rem;padding:4px 8px;transition:all .2s}.notification-close:hover{background:rgba(0,0,0,.05);color:var(--text-dark)}.notification-enter,.notification-exit{opacity:0;transform:translateX(400px)}.notification-exit{transition:all .3s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.notification-container{left:10px;max-width:none;right:10px;top:10px}.notification{min-width:0}}@media (prefers-reduced-motion:reduce){.notification{animation:none}.notification-enter,.notification-exit{animation:none;transition:none}}.upload-error-container{margin:0 auto;max-width:600px;padding:2rem;text-align:center}.upload-error-container .error-header{align-items:center;display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem}.upload-error-container .error-header i{font-size:3rem}.upload-error-container .error-header h4{font-size:1.5rem;font-weight:600;margin:0}.upload-error-container .error-message{color:#666;font-size:1rem;line-height:1.6;margin-bottom:2rem}.failed-photos-preview{background:#f8f9fa;border-radius:8px;margin-bottom:2rem;padding:1.5rem}.failed-photos-preview h5{font-size:1rem;font-weight:600;margin-bottom:1rem;text-align:left}.photo-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.photo-item{background:#fff;border:2px solid #dee2e6;border-radius:8px;overflow:hidden;position:relative}.photo-item.failed{animation:shake .5s ease-in-out;border-color:#dc3545}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.photo-thumbnail{height:150px;object-fit:cover;width:100%}.photo-status{align-items:center;display:flex;font-size:.875rem;gap:.5rem;padding:.5rem}.photo-status.success{background:#d4edda;color:#155724}.photo-status.error{background:#f8d7da;color:#721c24}.photo-status i{font-size:1rem}.retake-badge{background:#dc3545;border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .75rem;position:absolute;right:8px;text-transform:uppercase;top:8px}.error-tips{background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:2rem;padding:1rem;text-align:left}.error-tips h6{font-size:.875rem;font-weight:600;margin-bottom:.5rem}.error-tips ul{font-size:.875rem;margin:0;padding-left:1.5rem}.error-tips li{margin-bottom:.25rem}.error-actions{display:flex;flex-direction:column;gap:1rem}.error-actions .btn{font-size:1rem;padding:.75rem 1.5rem}.upload-failed-badge{background:rgba(220,53,69,.95);border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.3);color:#fff;font-size:.875rem;font-weight:600;left:50%;padding:.5rem 1rem;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:10}.photo-preview-item.upload-failed{border-color:#dc3545;border-width:3px}.photo-preview-item.upload-failed .retake-btn{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}