#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.modal-overlay{position:fixed;inset:0;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-container{background-color:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:540px;width:100%;max-height:90vh;overflow:hidden;animation:slideUp .3s ease-out;position:relative}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px 20px;border-bottom:1px solid #f3f4f6;background-color:#fff;position:sticky;top:0;z-index:10}.modal-title{font-size:20px;font-weight:700;color:#111827;margin:0;letter-spacing:-.01em}.modal-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background-color:transparent;color:#6b7280;cursor:pointer;transition:all .15s ease-in-out;padding:0}.modal-close:hover{background-color:#f3f4f6;color:#111827}.modal-close:active{background-color:#e5e7eb;transform:scale(.95)}.modal-content{overflow-y:auto;max-height:calc(90vh - 80px)}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-content::-webkit-scrollbar-thumb{background-color:#d1d5db;border-radius:4px}.modal-content::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}@media(max-width:640px){.modal-overlay{padding:0;align-items:flex-end}.modal-container{max-width:100%;border-radius:16px 16px 0 0;max-height:95vh;animation:slideUpMobile .3s ease-out}@keyframes slideUpMobile{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{padding:20px 24px 16px}.modal-title{font-size:18px}.modal-close{width:32px;height:32px}.modal-content{max-height:calc(95vh - 70px)}}.employee-form{display:flex;flex-direction:column;gap:20px;padding:24px}.form-field{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:600;color:#1f2937;margin-bottom:4px}.form-input,.form-select{width:100%;padding:10px 2px;font-size:14px;color:#1f2937;border:2px solid #d1d5db;border-radius:8px;outline:none;transition:all .2s ease;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.form-input::placeholder{color:#9ca3af}.form-input:focus,.form-select:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.form-input:hover,.form-select:hover{border-color:#9ca3af}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}.form-select option{padding:8px}.form-error{color:#ef4444;font-size:13px;margin-top:4px}.form-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:8px;padding-top:20px}.btn-cancel,.btn-submit{padding:10px 20px;font-size:14px;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.btn-cancel{background-color:#fff;color:#374151;border:1px solid #d1d5db}.btn-cancel:hover{background-color:#f9fafb;border-color:#9ca3af}.btn-cancel:active{background-color:#f3f4f6}.btn-submit{background-color:#2563eb;color:#fff;padding:10px 24px}.btn-submit:hover{background-color:#1d4ed8}.btn-submit:active{background-color:#1e40af}.btn-submit:disabled,.btn-submit.submitting{opacity:.7;cursor:not-allowed}.btn-submit:disabled:hover,.btn-submit.submitting:hover{background-color:#2563eb}@media(max-width:640px){.employee-form{padding:16px;gap:16px}.form-footer{flex-direction:column-reverse}.btn-cancel,.btn-submit{width:100%}}.employees-container{padding:40px;max-width:1200px;margin:0 auto;background-color:#f5f5f5}.employees-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;gap:24px}.page-subtitle{font-size:15px;color:#737373;margin:0;font-weight:400}.btn-add-employee{display:flex;align-items:center;gap:6px;background:#3b82f6;color:#fff;border:none;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-add-employee:hover{background:#2563eb}.btn-add-employee:active{transform:scale(.98)}.stat-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:24px;box-shadow:0 1px 2px #00000005}.stat-label{font-size:11px;font-weight:600;color:#a3a3a3;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.stat-value{font-size:36px;font-weight:700;color:#1a1a1a;line-height:1}.stat-name{font-size:20px;font-weight:600;color:#1a1a1a;line-height:1.3}.employees-table{width:100%;border-collapse:collapse;font-size:14px}.employees-table thead{background-color:#fafafa}.employees-table th{padding:16px 24px;text-align:left;font-size:13px;font-weight:600;color:#737373;border-bottom:1px solid #e5e5e5}.employees-table th:last-child{width:120px;text-align:right}.employees-table tbody tr{border-bottom:1px solid #f5f5f5;transition:background-color .15s ease}.employees-table tbody tr:hover{background-color:#fafafa}.employees-table tbody tr:last-child{border-bottom:none}.employees-table td{padding:20px 24px;color:#1a1a1a;vertical-align:middle}.employees-table td:last-child{text-align:right}.employee-avatar{width:40px;height:40px;border-radius:50%;background:#dbeafe;color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.email-cell,.date-cell{color:#737373;font-size:14px}.btn-delete{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background-color:#fff;border:1px solid #e5e5e5;border-radius:6px;color:#737373;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-delete:hover{background-color:#fef2f2;border-color:#fecaca;color:#dc2626}.btn-delete.confirm{background-color:#dc2626;border-color:#dc2626;color:#fff;animation:pulse .5s ease-in-out}.btn-delete.confirm:hover{background-color:#b91c1c;border-color:#b91c1c}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media(max-width:1024px){.employees-container{padding:32px 24px}.page-title{font-size:28px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card:last-child{grid-column:1 / -1}}@media(max-width:768px){.employees-header{flex-direction:column;align-items:stretch}.btn-add-employee{width:100%;justify-content:center}.stats-grid{grid-template-columns:1fr}.stat-card:last-child{grid-column:auto}.employees-table th,.employees-table td{padding:14px 16px}.employees-table th:last-child,.employees-table td:last-child{display:table-cell}.employee-avatar{width:36px;height:36px;font-size:13px}.department-badge{font-size:12px;padding:4px 10px}.btn-delete{padding:6px 10px;font-size:12px}}@media(max-width:640px){.employees-container{padding:24px 16px}.page-title{font-size:24px}.page-subtitle{font-size:14px}.employees-table{font-size:13px}.employees-table th{font-size:12px}.empty-state{padding:60px 24px}.stat-value{font-size:32px}.stat-name{font-size:18px}.btn-delete svg{display:none}}.attendance-history{min-height:300px;padding:1rem}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#6b7280}.spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1rem}.error-state{padding:2rem;text-align:center;color:#dc2626;background-color:#fee2e2;border-radius:8px;margin:1rem 0}.error-state p{margin:0;font-weight:500}.empty-state{padding:3rem;text-align:center;color:#9ca3af}.empty-state p{margin:0;font-size:1rem}.table-container{overflow-x:auto;border-radius:8px;box-shadow:0 1px 3px #0000001a}.attendance-table{width:100%;border-collapse:collapse;background-color:#fff;font-size:.95rem}.attendance-table thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.attendance-table th{padding:1rem;text-align:left;font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;color:#fff}.attendance-table tbody tr{border-bottom:1px solid #e5e7eb;transition:background-color .2s ease}.attendance-table tbody tr:hover{background-color:#f9fafb}.attendance-table td{padding:1rem}.date-cell{color:#374151;font-weight:500}.status-cell{text-align:left}.status-badge{display:inline-block;padding:.375rem .875rem;border-radius:9999px;font-size:.8125rem;font-weight:600;text-transform:capitalize;letter-spacing:.025em}.status-present{background-color:#d1fae5;color:#065f46}.status-absent{background-color:#fee2e2;color:#991b1b}.status-late{background-color:#fef3c7;color:#92400e}.status-leave{background-color:#dbeafe;color:#1e40af}.status-holiday{background-color:#e9d5ff;color:#6b21a8}@media(max-width:640px){.attendance-history{padding:.5rem}.attendance-table{font-size:.875rem}.attendance-table th,.attendance-table td{padding:.75rem .5rem}.status-badge{font-size:.75rem;padding:.25rem .625rem}}.attendance-page{padding:40px;max-width:1200px;margin:0 auto;background-color:#f5f5f5;min-height:100vh}.attendance-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;gap:24px}.header-content{flex:1}.page-title{font-size:32px;font-weight:700;color:#1a1a1a;margin:0 0 8px;letter-spacing:-.02em}.page-date{display:flex;align-items:center;gap:8px;font-size:15px;color:#737373;margin:0}.page-date svg{color:#737373}.btn-refresh{display:flex;align-items:center;gap:6px;background:#fff;color:#1a1a1a;border:1px solid #e5e5e5;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn-refresh:hover{background:#fafafa;border-color:#d4d4d4}.btn-refresh:disabled{opacity:.5;cursor:not-allowed}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}.stat-card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:24px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 2px #00000005}.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon.present{background:#d1fae5;color:#065f46}.stat-icon.pending{background:#fef3c7;color:#92400e}.stat-icon.rate{background:#dbeafe;color:#1e40af}.stat-info{flex:1}.stat-label{font-size:13px;font-weight:600;color:#737373;margin-bottom:4px}.stat-value{font-size:28px;font-weight:700;color:#1a1a1a;line-height:1}.table-wrapper{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px #00000005}.table-header{padding:20px 24px;border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center;background-color:#fafafa}.table-header h2{font-size:18px;font-weight:600;color:#1a1a1a;margin:0}.table-tabs{display:flex;gap:8px}.tab{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:600;color:#737373;background:transparent;cursor:pointer;transition:all .2s ease}.tab.active{background:#f5f5f5;color:#1a1a1a}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 40px;gap:16px}.spinner{width:40px;height:40px;border:3px solid #e5e5e5;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{color:#737373;font-size:14px;margin:0}.attendance-table{width:100%;border-collapse:collapse;font-size:14px}.attendance-table thead{background-color:#fafafa}.attendance-table th{padding:16px 24px;text-align:left;font-size:13px;font-weight:600;color:#fff;border-bottom:1px solid #e5e5e5}.attendance-table tbody tr{border-bottom:1px solid #f5f5f5;transition:background-color .15s ease}.attendance-table tbody tr:hover{background-color:#fafafa}.attendance-table tbody tr:last-child{border-bottom:none}.attendance-table td{padding:20px 24px;color:#1a1a1a;vertical-align:middle}.unmarked-row{background-color:#fffbeb}.unmarked-row:hover{background-color:#fef3c7}.employee-name{display:flex;align-items:center;gap:12px}.employee-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.pending-avatar{background:#fef3c7;color:#92400e}.marked-avatar{background:#d1fae5;color:#065f46}.employee-name span{font-weight:500;color:#1a1a1a;font-size:15px}.department-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid}.dept-engineering{background-color:#dbeafe;color:#1e40af;border-color:#bfdbfe}.dept-design{background-color:#fce7f3;color:#9f1239;border-color:#fbcfe8}.dept-hr{background-color:#d1fae5;color:#065f46;border-color:#a7f3d0}.dept-finance{background-color:#fef3c7;color:#92400e;border-color:#fde68a}.status-select{width:160px;padding:8px 36px 8px 12px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:500;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%234b5563' d='M11.707 5.293L7 10 2.293 5.293a1 1 0 10-1.414 1.414l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.status-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.status-select option{padding:8px}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;border:1px solid}.status-present{background-color:#d1fae5;color:#065f46;border-color:#a7f3d0}.action-buttons{display:flex;gap:8px;align-items:center}.btn-mark,.btn-view{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid;white-space:nowrap}.btn-mark{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.btn-mark:hover:not(:disabled){background-color:#2563eb;border-color:#2563eb}.btn-mark:disabled{opacity:.6;cursor:not-allowed}.btn-view{background-color:#fff;border-color:#e5e5e5;color:#1a1a1a}.btn-view:hover{background-color:#fafafa;border-color:#d4d4d4}.btn-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}.empty-row td{padding:0!important;border:none!important}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 40px;text-align:center}.empty-icon{margin-bottom:16px;opacity:.4}.empty-title{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 8px}.empty-description{font-size:14px;color:#737373;margin:0}@media(max-width:1024px){.attendance-page{padding:32px 24px}.page-title{font-size:28px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card:last-child{grid-column:1 / -1}}@media(max-width:768px){.attendance-header{flex-direction:column;align-items:stretch}.btn-refresh{width:100%;justify-content:center}.stats-grid{grid-template-columns:1fr}.stat-card:last-child{grid-column:auto}.table-header{flex-direction:column;align-items:flex-start;gap:12px}.attendance-table th,.attendance-table td{padding:14px 16px}.employee-avatar{width:36px;height:36px;font-size:13px}.department-badge{font-size:12px;padding:4px 10px}.status-select{width:140px;font-size:13px}.action-buttons{flex-direction:column;width:100%}.btn-mark,.btn-view{width:100%;justify-content:center}}@media(max-width:640px){.attendance-page{padding:24px 16px}.page-title{font-size:24px}.page-date{font-size:14px}.stat-icon{width:40px;height:40px}.stat-value{font-size:24px}.attendance-table{font-size:13px}.attendance-table th{font-size:12px}.empty-state{padding:60px 24px}}