.employee-page{display:flex;min-height:100vh;font-family:Poppins,sans-serif;background:#f5f7fa}.left-panel{flex:1;background-image:linear-gradient(#1b5e20c7,#2e7d32c7),url(http://127.0.0.1:8000/assets/images/background.landingsuhada.jpeg);background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px;color:#fff;text-align:center}.logo{width:120px;margin-bottom:20px}.left-panel h1{font-size:36px;margin-bottom:8px}.subtitle{font-size:18px;opacity:.9;margin-bottom:40px}.clock{margin-bottom:35px}.clock h2{font-size:48px;font-weight:700;margin-bottom:8px}.clock p{font-size:18px}.status-box{width:100%;max-width:320px;padding:20px;border-radius:20px;background:#ffffff2e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);margin-bottom:40px}.status-box h3{margin-bottom:10px}.status-box p{font-size:16px}.back-btn{text-decoration:none;color:#fff;font-weight:600;transition:.3s}.back-btn:hover{opacity:.8}.right-panel{flex:1.3;padding:60px;display:flex;flex-direction:column;justify-content:center}.right-panel h2{color:var(--primary);font-size:34px;margin-bottom:35px}.stepper{display:flex;align-items:center;margin-bottom:40px}.step{display:flex;flex-direction:column;align-items:center}.step span{width:50px;height:50px;border-radius:50%;background:#e5e7eb;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:18px;color:#94a3b8;transition:.35s;box-shadow:0 8px 20px #00000014}.step.active span{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;transform:scale(1.08);box-shadow:0 10px 25px #22c55e59}.step.completed span{background:#16a34a;color:#fff}.step small{margin-top:8px;font-size:13px;color:#607d8b}.line{flex:1;height:6px;background:#e5e7eb;margin:0 15px;border-radius:20px}.line.completed{background:#22c55e}.attendance-card{background:#fff;border-radius:25px;padding:45px;box-shadow:0 20px 50px #00000014;animation:fadeUp .6s ease}.attendance-card h3{color:var(--primary);font-size:28px;margin-bottom:15px}.attendance-card p{color:#607d8b;margin-bottom:30px;line-height:1.6}.primary-btn{width:100%;height:55px;border:none;border-radius:14px;background:linear-gradient(135deg,#2e7d32,#43a047);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:.3s}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px #2e7d3240}@keyframes fadeUp{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media(max-width:992px){.employee-page{flex-direction:column}.left-panel{padding:40px 20px}.right-panel{padding:30px 20px}.stepper{overflow-x:auto;gap:10px}.attendance-card{padding:30px}}#reader{width:100%;max-width:350px;margin:20px auto}#reader video{border-radius:15px}.login-step{display:flex;flex-direction:column;gap:22px}.success-box{display:flex;align-items:center;gap:18px;padding:20px;border-radius:18px;background:#ecfdf5;border:1px solid #BBF7D0;animation:fadeUp .5s ease}.success-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#2e7d32,#43a047);color:#fff;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:700;flex-shrink:0;box-shadow:0 8px 20px #2e7d3240}.success-content h3{color:#1b5e20;margin:0 0 6px;font-size:20px}.success-content p{margin:0;color:#607d8b;line-height:1.6}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:600;color:#1b5e20}.form-group input{width:100%;height:56px;padding:0 18px;border:2px solid #E5E7EB;border-radius:14px;outline:none;font-size:15px;transition:.25s;background:#fff}.form-group input:focus{border-color:#2e7d32;box-shadow:0 0 0 4px #2e7d321f}.password-wrapper{position:relative}.password-wrapper input{padding-right:55px}.password-wrapper button{position:absolute;right:15px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;color:#607d8b;font-size:18px}.remember-box{display:flex;align-items:center;gap:10px}.remember-box input{width:18px;height:18px;accent-color:#2E7D32;cursor:pointer}.remember-box label{color:#607d8b;cursor:pointer;-webkit-user-select:none;user-select:none}.step.completed span{background:#2e7d32}.step.completed small{color:#2e7d32;font-weight:600}.primary-btn{margin-top:10px}.primary-btn:active{transform:scale(.98)}.employee-form-card{background:#fff;border-radius:16px;padding:30px;box-shadow:0 10px 25px #0000000d;max-width:900px;margin:0 auto}.form-header{margin-bottom:30px}.form-header h2{font-size:26px;margin-bottom:8px}.form-header p{color:#777}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;margin-bottom:8px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid #dcdcdc;border-radius:10px;font-size:15px;transition:.3s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#18a558;outline:none}.full-width{grid-column:1/3}.form-button{display:flex;justify-content:flex-end;gap:15px;margin-top:30px}.btn-save{background:#18a558;color:#fff;border:none;border-radius:10px;padding:12px 24px;cursor:pointer}.btn-save:hover{background:#148a4b}.btn-cancel{text-decoration:none;background:#f1f1f1;color:#333;padding:12px 24px;border-radius:10px}.btn-cancel:hover{background:#ddd}@media(max-width:768px){.form-grid{grid-template-columns:1fr}.full-width{grid-column:auto}}.validation-step{text-align:center;animation:fadeUp .5s ease}.validation-step h2{color:#1b5e20;font-size:30px;margin-bottom:8px}.validation-step p{color:#6b7280;margin-bottom:35px}.validation-list{display:flex;flex-direction:column;gap:18px;margin-top:30px}.validation-item{display:flex;align-items:center;gap:15px;padding:18px 22px;background:#f8fafc;border-radius:16px;border:1px solid #E5E7EB;font-size:16px;font-weight:500;color:#374151;transition:.35s;box-shadow:0 4px 12px #0000000d}.validation-item:hover{transform:translate(5px)}.validation-item.done{background:#ecfdf5;border-color:#bbf7d0;color:#166534}.validation-item.done i{color:#22c55e}.validation-item.loading{background:#eff6ff;border-color:#bfdbfe}.validation-item.loading i{color:#3b82f6}.loading-circle{width:70px;height:70px;margin:0 auto 25px;border:6px solid #E5E7EB;border-top:6px solid #16A34A;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.finish-step{animation:fadeUp .5s ease;text-align:center}.success-icon-big{width:95px;height:95px;margin:0 auto 25px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;display:flex;justify-content:center;align-items:center;font-size:42px;box-shadow:0 15px 35px #22c55e59}.finish-step h2{color:#14532d;font-size:30px;margin-bottom:10px}.finish-step p{color:#6b7280;margin-bottom:30px}.finish-card{background:#fff;border-radius:22px;padding:25px;box-shadow:0 12px 30px #00000014;margin:30px 0}.finish-section{text-align:left;margin-bottom:30px}.finish-section:last-child{margin-bottom:0}.finish-section h3{color:#166534;font-size:18px;margin-bottom:18px;border-left:5px solid #22C55E;padding-left:12px}.finish-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #F1F5F9}.finish-row:last-child{border-bottom:none}.finish-row span{color:#64748b;font-size:15px}.finish-row strong{color:#111827;font-size:15px}.status-badge{background:#dcfce7;color:#166534;padding:6px 14px;border-radius:30px;font-size:13px;font-weight:600}.already-attendance{text-align:center;animation:fadeUp .5s ease}.already-attendance h2{color:#166534;font-size:32px;margin-top:25px;margin-bottom:15px}.already-attendance p{color:#64748b;font-size:16px;line-height:1.8;margin-bottom:35px}.already-attendance .primary-btn{margin-top:20px}.already-icon{width:95px;height:95px;margin:auto;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;justify-content:center;align-items:center;color:#fff;font-size:42px;box-shadow:0 15px 35px #22c55e59}.error-icon-big{width:90px;height:90px;margin:0 auto 25px;border-radius:50%;background:#fee2e2;color:#dc2626;display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 8px 20px #dc26262e}.error-description{color:#64748b;margin:15px 0 30px;font-size:15px;line-height:1.6}.error-info{width:100%;max-width:520px;margin:auto auto 30px;background:#f8fafc;border-radius:16px;padding:20px}.error-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #E5E7EB}.error-row:last-child{border-bottom:none}.status-error{color:#dc2626;font-weight:700}.error-step .primary-btn{margin-top:10px}.error-step{text-align:center;animation:fadeUp .5s ease}.error-step h2{color:#991b1b;font-size:30px;margin-bottom:10px}@media(max-width:992px){.employee-page{flex-direction:column;min-height:100dvh}.left-panel{flex:none;width:100%;min-height:auto;padding:35px 25px;box-sizing:border-box}.logo{width:90px;margin-bottom:15px}.left-panel h1{font-size:30px;margin-bottom:6px}.subtitle{font-size:16px;margin-bottom:25px}.clock{margin-bottom:25px}.clock h2{font-size:40px}.clock p{font-size:15px}.status-box{width:100%;max-width:400px;box-sizing:border-box;padding:16px;margin-bottom:25px}.back-btn{font-size:14px}.right-panel{flex:none;width:100%;padding:30px 25px;box-sizing:border-box}.right-panel h2{font-size:28px;margin-bottom:25px}.attendance-card{width:100%;box-sizing:border-box;padding:30px 25px}}@media(max-width:768px){body{overflow-x:hidden}.employee-page{width:100%;min-height:100dvh;overflow-x:hidden}.left-panel{width:100%;padding:28px 18px;box-sizing:border-box}.logo{width:75px;margin-bottom:12px}.left-panel h1{font-size:25px;margin-bottom:5px}.subtitle{font-size:14px;margin-bottom:20px}.clock{margin-bottom:20px}.clock h2{font-size:32px;line-height:1.2;margin-bottom:5px}.clock p{font-size:13px}.status-box{width:100%;max-width:100%;padding:14px 16px;margin-bottom:20px;border-radius:16px;box-sizing:border-box}.status-box h3{font-size:15px;margin-bottom:6px}.status-box p{font-size:13px;line-height:1.5}.back-btn{font-size:13px}.right-panel{width:100%;padding:22px 14px;box-sizing:border-box}.right-panel h2{font-size:23px;margin-bottom:20px}.stepper{width:100%;margin-bottom:22px;overflow-x:auto;overflow-y:hidden;padding:5px 2px 10px;box-sizing:border-box;scrollbar-width:none}.stepper::-webkit-scrollbar{display:none}.step{flex-shrink:0}.step span{width:40px;height:40px;font-size:15px}.step small{margin-top:6px;font-size:10px;white-space:nowrap}.line{flex:1;min-width:25px;height:4px;margin:0 7px}.attendance-card{width:100%;max-width:100%;padding:20px 16px;border-radius:18px;box-sizing:border-box}.attendance-card h3{font-size:21px;line-height:1.3;margin-bottom:10px}.attendance-card p{font-size:14px;line-height:1.6;margin-bottom:20px}#reader{width:100%;max-width:100%;margin:15px auto;box-sizing:border-box}#reader video{width:100%!important;max-width:100%;height:auto!important;border-radius:14px}.login-step{width:100%;gap:16px}.form-group{width:100%}.form-group label{font-size:13px}.form-group input,.form-group select,.form-group textarea{width:100%;max-width:100%;box-sizing:border-box;font-size:15px}.form-group input{height:52px;padding:0 15px}.password-wrapper{width:100%}.password-wrapper input{padding-right:50px}.primary-btn{width:100%;height:52px;min-height:52px;font-size:15px;border-radius:12px}.success-box{width:100%;padding:14px;gap:12px;box-sizing:border-box;align-items:flex-start}.success-icon{width:45px;height:45px;min-width:45px;font-size:18px}.success-content h3{font-size:16px}.success-content p{font-size:13px;line-height:1.5}.validation-step{width:100%}.validation-step h2{font-size:23px;line-height:1.3}.validation-step p{font-size:14px;margin-bottom:25px}.validation-list{gap:12px;margin-top:20px}.validation-item{padding:14px;gap:10px;font-size:13px;text-align:left}.loading-circle{width:55px;height:55px;border-width:5px}.finish-step{width:100%}.success-icon-big{width:75px;height:75px;font-size:32px;margin-bottom:18px}.finish-step h2{font-size:23px;line-height:1.3}.finish-step p{font-size:14px;line-height:1.6;margin-bottom:20px}.finish-card{width:100%;padding:16px;margin:20px 0;border-radius:16px;box-sizing:border-box}.finish-section{margin-bottom:20px}.finish-section h3{font-size:16px;margin-bottom:12px}.finish-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;padding:12px 0}.finish-row span,.finish-row strong{font-size:13px}.finish-row strong{text-align:right;overflow-wrap:anywhere}.already-attendance{width:100%}.already-icon{width:75px;height:75px;font-size:32px}.already-attendance h2{font-size:23px;line-height:1.3}.already-attendance p{font-size:14px;line-height:1.6;margin-bottom:25px}.error-step{width:100%}.error-icon-big{width:75px;height:75px;font-size:32px}.error-step h2{font-size:23px;line-height:1.3}.error-description{font-size:14px;line-height:1.6}.error-info{width:100%;max-width:100%;padding:14px;box-sizing:border-box}.error-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;padding:12px 0}.status-error{overflow-wrap:anywhere;text-align:right}}@media(max-width:480px){.left-panel{padding:22px 14px}.logo{width:68px}.left-panel h1{font-size:22px}.subtitle{font-size:13px}.clock h2{font-size:29px}.clock p{font-size:12px}.right-panel{padding:18px 10px}.right-panel h2{font-size:21px}.attendance-card{padding:18px 14px;border-radius:16px}.step span{width:36px;height:36px;font-size:14px}.step small{font-size:9px}.line{min-width:18px;margin:0 5px}.primary-btn{height:50px;min-height:50px}}