*{box-sizing:border-box}body{margin:0;padding:0;background:#0a0a0a;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#fff;line-height:1.6}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}::-webkit-scrollbar-thumb{background:#333;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#444}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.employee-card{animation:slideIn .4s ease-out}input:focus,button:focus,select:focus{outline:2px solid #d4af37;outline-offset:2px}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.02em}.glass{background:#ffffff0d;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.gradient-text{background:linear-gradient(135deg,#d4af37,#f4e4a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:2rem 1.5rem}.header-content{text-align:center;margin-bottom:2rem}.header h1{margin:0 0 .5rem;font-size:2rem;font-weight:600}.header p{margin:0;opacity:.9;font-size:1rem}.period-selector{display:flex;justify-content:center;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.selector-group{display:flex;flex-direction:column;gap:.5rem;align-items:center}.selector-group label{font-size:.875rem;font-weight:600;opacity:.9}.custom-select{background:#fff;color:#1e293b;border:2px solid rgba(255,255,255,.2);padding:.75rem 1rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;min-width:140px}.custom-select:hover,.custom-select:focus{border-color:#fff6;outline:none}.period-actions{display:flex;gap:1rem;flex-wrap:wrap}.save-btn,.history-btn,.export-btn,.clear-filters-btn,.sync-btn{background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;font-size:.875rem}.save-btn:hover:not(:disabled),.history-btn:hover,.export-btn:hover,.clear-filters-btn:hover,.sync-btn:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80}.save-btn:disabled,.sync-btn:disabled{opacity:.5;cursor:not-allowed}.save-btn.saved,.sync-btn{background:#10b981;border-color:#059669}.clear-filters-btn{background:#ef4444;border-color:#dc2626}.clear-filters-btn:hover{background:#dc2626;border-color:#b91c1c}.period-history{background:#fffffff2;color:#1e293b;border-radius:12px;padding:1.5rem;margin-top:1rem;backdrop-filter:blur(10px)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.history-header h3{margin:0;font-size:1.25rem;font-weight:600}.history-actions{display:flex;gap:.5rem;align-items:center}.import-btn{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s}.import-btn:hover{background:#e2e8f0;border-color:#94a3b8}.close-btn{background:#fee2e2;color:#dc2626;border:1px solid #fecaca;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.25rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-btn:hover{background:#fecaca}.history-list{display:flex;flex-direction:column;gap:1rem;max-height:400px;overflow-y:auto}.history-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;transition:all .2s}.history-item:hover{background:#f1f5f9;border-color:#cbd5e1}.period-info{flex:1}.period-main{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.5rem}.period-label{font-weight:600;font-size:1.1rem;color:#1e293b}.period-stats{font-size:.875rem;color:#64748b}.period-dates{display:flex;gap:1rem;flex-wrap:wrap}.date-info{font-size:.75rem;color:#94a3b8}.period-actions-small{display:flex;gap:.5rem;flex-shrink:0}.load-btn,.duplicate-btn,.delete-btn{background:#fff;border:1px solid #e2e8f0;padding:.5rem .75rem;border-radius:6px;cursor:pointer;font-size:.75rem;transition:all .2s;white-space:nowrap}.load-btn:hover{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8}.duplicate-btn:hover{background:#fef3c7;border-color:#f59e0b;color:#d97706}.delete-btn:hover{background:#fee2e2;border-color:#dc2626;color:#dc2626}.no-history{text-align:center;padding:3rem 1rem;color:#64748b}.no-history-icon{font-size:3rem;margin-bottom:1rem}.no-history p{margin:0 0 .5rem;font-weight:600}.no-history small{opacity:.7}.export-dialog-overlay,.import-dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.export-dialog,.import-dialog{background:#fff;border-radius:12px;width:100%;max-width:1000px;max-height:80vh;overflow:hidden}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e2e8f0}.dialog-header h3{margin:0;color:#1e293b}.dialog-content{padding:1.5rem;max-height:60vh;overflow-y:auto}.export-options{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.option-group{display:flex;flex-direction:column;gap:.5rem}.option-group label{display:flex;align-items:center;gap:.75rem;font-weight:600;cursor:pointer}.option-group small{color:#64748b;margin-left:1.5rem}.date-range{margin-left:1.5rem;padding:1rem;background:#f8fafc;border-radius:8px;display:flex;flex-direction:column;gap:1rem}.date-input-group{display:flex;align-items:center;gap:1rem}.date-input-group label{min-width:80px;font-weight:500}.small-select{padding:.5rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem}.dialog-content p{margin:0 0 1rem;color:#64748b}.import-textarea{width:100%;height:200px;padding:1rem;border:1px solid #d1d5db;border-radius:8px;font-family:monospace;font-size:.875rem;resize:vertical;margin-bottom:1rem}.import-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.dialog-actions{display:flex;gap:1rem;justify-content:flex-end}.cancel-btn,.import-confirm-btn,.export-confirm-btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.cancel-btn{background:#f8fafc;color:#64748b;border:1px solid #d1d5db}.cancel-btn:hover{background:#f1f5f9}.import-confirm-btn,.export-confirm-btn{background:#3b82f6;color:#fff;border:1px solid #3b82f6}.import-confirm-btn:hover:not(:disabled),.export-confirm-btn:hover{background:#2563eb}.import-confirm-btn:disabled{opacity:.5;cursor:not-allowed}.main-content{max-width:1400px;margin:0 auto;padding:1.5rem}.current-period-info{text-align:center;margin-bottom:1.5rem}.period-badge{display:inline-flex;align-items:center;gap:1rem;background:#fff;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 1px 3px #0000001a;flex-wrap:wrap;justify-content:center}.period-text{font-weight:600;color:#1e293b}.save-status{padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.save-status.saved{background:#dcfce7;color:#166534}.save-status.unsaved{background:#fef3c7;color:#92400e}.storage-indicator,.filter-status{background:#dbeafe;color:#1d4ed8;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:600}.comparison-section{background:#fff;padding:2rem;border-radius:12px;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.comparison-section .comparison-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.comparison-section h2{margin:0;color:#1e293b;font-size:1.5rem;font-weight:600}.toggle-comparison-btn,.close-comparison-btn{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;cursor:pointer;transition:all .2s}.toggle-comparison-btn:hover,.close-comparison-btn:hover{background:#e2e8f0;border-color:#94a3b8}.comparison-week-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e2e8f0}.comparison-week-header h2{margin:0;color:#1e293b;font-size:1.25rem;font-weight:600}.comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}.comparison-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem}.comparison-card .comparison-header h4{margin:0 0 1rem;color:#1e293b;font-weight:600}.comparison-content{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.current-week,.compare-week{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1;min-width:80px}.week-label{font-size:.75rem;color:#64748b;font-weight:500}.week-hours{font-size:1.25rem;font-weight:700;color:#3b82f6}.comparison-arrow{font-size:1.5rem;color:#94a3b8}.difference{background:#f1f5f9;padding:.5rem 1rem;border-radius:6px;font-weight:600;font-size:.875rem;min-width:60px;text-align:center}.difference.positive{background:#dcfce7;color:#166534}.difference.negative{background:#fee2e2;color:#dc2626}.filtered-employee{background:#eff6ff!important;border-left:4px solid #3b82f6}.filtered-day{background:#eff6ff!important}.weekly-view{background:#fff;border-radius:12px;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a;overflow:hidden}.schedule-container{padding:1.5rem}.schedule-table-wrapper{overflow-x:auto;border-radius:8px;border:1px solid #e2e8f0}.schedule-table{width:100%;border-collapse:collapse;min-width:1000px}.schedule-table th,.schedule-table td{padding:1rem;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0;vertical-align:top}.schedule-table th:last-child,.schedule-table td:last-child{border-right:none}.schedule-table tbody tr:last-child td{border-bottom:none}.schedule-table th{background:#f8fafc;font-weight:600;color:#1e293b;text-align:center}.employee-column{width:200px;text-align:left!important}.day-column{width:150px}.total-column{width:180px}.overtime-column{width:220px}.day-header-content{display:flex;flex-direction:column;gap:.25rem}.day-name{font-weight:700;font-size:1rem}.day-date{font-size:.75rem;color:#64748b;font-weight:400}.employee-row{transition:background-color .2s}.employee-row:hover{background:#f8fafc}.employee-cell{background:#f1f5f9}.employee-info{display:flex;justify-content:space-between;align-items:center}.employee-name{font-weight:600;color:#1e293b}.btn-remove-small{background:#ef4444;color:#fff;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-remove-small:hover{background:#dc2626;transform:scale(1.1)}.day-cell{text-align:center}.day-schedule{display:flex;flex-direction:column;gap:.75rem;align-items:center}.absent-check{width:100%}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;justify-content:center}.absent-checkbox{width:16px;height:16px;cursor:pointer}.absent-text{color:#64748b;font-weight:500}.time-inputs{display:flex;flex-direction:column;gap:.5rem;align-items:center;width:100%}.time-inputs.disabled{opacity:.5}.time-input{width:100%;max-width:100px;padding:.5rem;border:1px solid #d1d5db;border-radius:4px;font-size:.875rem;text-align:center}.time-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.time-input:disabled{background:#f3f4f6;cursor:not-allowed}.time-separator{color:#3b82f6;font-weight:600;font-size:.875rem}.time-display{font-size:.875rem;color:#64748b;font-weight:500;padding:.25rem .5rem;background:#f8fafc;border-radius:4px;min-width:50px;text-align:center}.hours-display{background:#3b82f6;color:#fff;padding:.5rem;border-radius:6px;font-weight:600;font-size:.875rem;min-width:40px;text-align:center}.hours-display.absent{background:#94a3b8}.total-cell{background:#f1f5f9;text-align:center}.employee-total{display:flex;flex-direction:column;gap:.5rem;align-items:center}.total-hours{background:#3b82f6;color:#fff;padding:.75rem 1rem;border-radius:8px;font-weight:700;font-size:1.1rem}.hours-breakdown{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;text-align:center}.normal-hours{color:#059669;font-weight:600}.overtime-hours{color:#f59e0b;font-weight:600}.overtime-cell{background:#fefce8;text-align:center;padding:.75rem}.overtime-breakdown{display:flex;flex-direction:column;gap:.5rem;align-items:center}.overtime-tranche{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:.5rem;width:100%;min-width:140px}.tranche-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.tranche-hours{font-weight:700;color:#1e293b;font-size:.875rem}.tranche-rate{background:#f59e0b;color:#fff;padding:.125rem .375rem;border-radius:3px;font-size:.75rem;font-weight:600}.tranche-label{font-size:.75rem;color:#64748b;text-align:center}.no-overtime{display:flex;align-items:center;justify-content:center;height:100%;min-height:60px}.no-overtime-text{color:#94a3b8;font-size:.875rem;font-style:italic;text-align:center}.global-summary{background:#fff;padding:2rem;border-radius:12px;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.global-summary h2{margin:0 0 1.5rem;color:#1e293b;font-size:1.5rem;font-weight:600}.global-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:#f8fafc;padding:1.5rem;border-radius:8px;text-align:center;border:2px solid #e2e8f0}.stat-value{font-size:2rem;font-weight:700;color:#3b82f6;margin-bottom:.5rem}.stat-label{color:#64748b;font-size:.875rem;font-weight:500}.overtime-summary h3{margin:0 0 1rem;color:#1e293b;font-size:1.25rem;font-weight:600}.tranche-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.tranche-card{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b;padding:1.5rem;border-radius:8px;text-align:center}.tranche-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.tranche-label{font-weight:600;color:#92400e}.tranche-rate{background:#f59e0b;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}.tranche-hours{font-size:1.5rem;font-weight:700;color:#92400e}.add-employee{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 1px 3px #0000001a}.form-group{display:flex;gap:1rem;align-items:center}.input{flex:1;padding:.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem}.input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.btn-primary{background:#3b82f6;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#2563eb;transform:translateY(-1px)}@media (max-width: 768px){.period-selector{flex-direction:column;gap:1rem}.period-actions{justify-content:center}.comparison-content{flex-direction:column;align-items:stretch;gap:1rem}.comparison-arrow{transform:rotate(90deg);align-self:center}.form-group{flex-direction:column;align-items:stretch}.global-stats,.tranche-grid{grid-template-columns:1fr}.history-item{flex-direction:column;align-items:flex-start;gap:1rem}.period-actions-small{align-self:flex-end}.period-dates{flex-direction:column;gap:.25rem}.schedule-table{min-width:1200px}.date-input-group{flex-direction:column;align-items:flex-start;gap:.5rem}.comparison-section .comparison-header,.comparison-week-header{flex-direction:column;gap:1rem;align-items:flex-start}.period-badge{flex-direction:column;gap:.5rem}.overtime-breakdown{gap:.25rem}.overtime-tranche{min-width:120px;padding:.375rem}}@media (max-width: 480px){.main-content{padding:1rem}.history-actions{flex-direction:column;gap:.5rem}.schedule-table{min-width:1400px}.comparison-grid{grid-template-columns:1fr}.overtime-tranche{min-width:100px}}