@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";body,html{margin:0;padding:0}.fixed-layout-container{display:flex;min-height:100vh;background-color:#f8fafc}.fixed-sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background-color:#2563eb;box-shadow:2px 0 10px #0000001a;border-right:1px solid #1d4ed8;display:flex;flex-direction:column;z-index:1000}.scrollable-content{margin-left:280px;min-height:100vh;background-color:#f8fafc;width:calc(100vw - 280px);overflow:hidden}.sidebar-navigation{padding:20px 0;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;max-height:calc(100vh - 300px)}.sidebar-navigation::-webkit-scrollbar{width:6px}.sidebar-navigation::-webkit-scrollbar-track{background:#f1f1f1}.sidebar-navigation::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.sidebar-navigation::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.sidebar-bottom{margin-top:auto;flex-shrink:0}.register-page-header{background:#fff!important;padding:24px 32px;border-bottom:1px solid #e0e0e0;border-radius:0}.register-title{font-size:24px;font-weight:700;margin:0 0 4px;color:#000!important}.register-subtitle{font-size:14px;margin:0;color:#555!important}.register-back-button{background:#f0f0f0!important;border:none;color:#000!important;border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.register-back-button:hover{background:#e0e0e0!important}.settings{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.settings.access-restricted{display:flex;align-items:center;justify-content:center;padding:40px}.restriction-container{background:#fff;border-radius:20px;padding:60px 40px;text-align:center;box-shadow:0 20px 40px #0000001a;max-width:500px;width:100%}.restriction-icon{width:80px;height:80px;background:#ef44441a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.restriction-icon i{font-size:40px;color:#ef4444}.restriction-container h2{color:#1e293b;font-size:28px;font-weight:700;margin:0 0 12px}.restriction-container p{color:#64748b;font-size:16px;margin:0 0 8px}.restriction-container small{color:#94a3b8;font-size:14px}.filter-section{max-width:1200px;margin:0 auto 24px;padding:0 24px}.filter-content{background:#fff;border-radius:16px;padding:24px;box-shadow:0 5px 20px #0000000d}.filter-header{margin-bottom:20px}.filter-info{display:flex;align-items:center;gap:12px}.filter-info i{font-size:20px;color:#667eea;background:#6366f11a;padding:8px;border-radius:8px}.filter-info h2{color:#1e293b;font-size:20px;font-weight:700;margin:0}.filter-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-group label{color:#374151;font-weight:500;font-size:14px}.input-container{position:relative}.input-container i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#667eea;font-size:14px}.input-container input{width:100%;padding:12px 12px 12px 40px;border:1px solid #e2e8f0;border-radius:12px;font-size:14px;transition:all .2s;box-sizing:border-box}.input-container input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #6366f11a}.filter-actions{display:flex;gap:12px}.apply-btn,.clear-btn{display:flex;align-items:center;gap:8px;padding:12px 16px;border:none;border-radius:12px;font-weight:500;cursor:pointer;transition:all .2s;font-size:14px}.apply-btn{background:#667eea;color:#fff}.apply-btn:hover{background:#5856eb}.clear-btn{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.clear-btn:hover{background:#f1f5f9}.records-section{max-width:1200px;margin:0 auto;padding:0 24px}.records-header{background:#fff;padding:24px;border-radius:16px 16px 0 0;box-shadow:0 5px 20px #0000000d;display:flex;align-items:center;justify-content:space-between}.records-info{display:flex;align-items:center;gap:12px}.records-info i{font-size:20px;color:#10b981;background:#10b9811a;padding:8px;border-radius:8px}.records-info h2{color:#1e293b;font-size:20px;font-weight:700;margin:0}.records-badge{background:#10b9811a;color:#10b981;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;background:#fff;border-radius:0 0 16px 16px;box-shadow:0 5px 20px #0000000d;text-align:center}.empty-state i{font-size:48px;color:#64748b;margin-bottom:16px}.empty-state small{color:#94a3b8;font-size:14px;margin-top:4px}.records-list{background:#fff;border-radius:0 0 16px 16px;box-shadow:0 5px 20px #0000000d;padding:24px}.record-card{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;transition:all .2s}.record-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.record-card:last-child{margin-bottom:0}.record-avatar{flex-shrink:0}.avatar-circle{width:56px;height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center}.avatar-emoji{font-size:24px}.record-content{flex:1;min-width:0}.record-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.record-header h3{color:#1e293b;font-size:18px;font-weight:700;margin:0}.status-badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid}.record-details{display:flex;flex-direction:column;gap:4px}.detail-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#64748b}.detail-item i{width:14px;color:#667eea}.detail-item .remark{font-style:italic;color:#64748b}.record-actions{flex-shrink:0}.edit-btn{display:flex;align-items:center;gap:8px;background:#6366f11a;color:#667eea;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.edit-btn:hover{background:#6366f133}.edit-btn i{font-size:14px}.modal-content{background:#fff;border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #00000040}.status-select,.remarks-textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s;box-sizing:border-box;font-family:inherit}.status-select:focus,.remarks-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #6366f11a}.remarks-textarea{resize:vertical;min-height:80px}.requirement-note{display:block;color:#f59e0b;font-size:12px;margin-top:4px;font-weight:500}.cancel-btn,.save-btn{padding:12px 24px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.cancel-btn{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.cancel-btn:hover{background:#f1f5f9}.save-btn{background:#667eea;color:#fff}.save-btn:hover{background:#5856eb}.save-btn:disabled{background:#d1d5db;cursor:not-allowed}@media (max-width: 768px){.settings{padding:0}.header-section{padding:20px}.header-info{flex-direction:column;align-items:flex-start;text-align:left}.stats-cards{grid-template-columns:repeat(2,1fr)}.filter-section,.records-section{padding:0 16px}.filter-controls{grid-template-columns:1fr;gap:16px}.filter-actions{justify-content:stretch}.filter-actions button{flex:1}.records-header{flex-direction:column;align-items:flex-start;gap:12px}.record-card{flex-direction:column;align-items:flex-start;text-align:left}.record-header{width:100%}.record-actions{width:100%;display:flex;justify-content:flex-end}.modal-content{margin:20px;max-width:none}.modal-footer{flex-direction:column;gap:8px}.modal-footer button{width:100%}}@media (max-width: 480px){.stats-cards{grid-template-columns:1fr}.header-text h1{font-size:24px}.header-text p{font-size:14px}.restriction-container{padding:40px 20px}}.sequential-wizard{background:#fff;border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0003}.wizard-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0}.wizard-header h2{margin:0;font-size:20px;color:#333}.wizard-header .close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.wizard-header .close-btn:hover{background:#f0f0f0;color:#333}.wizard-progress{padding:24px;background:#f8f9fa;border-bottom:1px solid #e0e0e0}.progress-bar{display:flex;justify-content:center;gap:12px;margin-bottom:12px}.progress-step{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e0e0e0;color:#666;font-weight:600;font-size:14px;transition:all .3s}.progress-step.active{background:#667eea;color:#fff;transform:scale(1.1)}.progress-step.completed{background:#10b981;color:#fff}.progress-text{text-align:center;color:#666;font-size:14px;margin:0}.wizard-content{padding:24px}.face-preview{text-align:center;margin-bottom:24px;position:relative}.face-preview img{width:200px;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:12px;box-shadow:0 4px 12px #0000001a}.position-badge{position:absolute;top:10px;right:calc(50% - 90px);background:#667eeae6;color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.wizard-form .form-group{margin-bottom:16px}.wizard-form label{display:block;margin-bottom:6px;font-weight:500;color:#333;font-size:14px}.wizard-form input,.wizard-form select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s}.wizard-form input:focus,.wizard-form select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.wizard-actions{display:flex;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid #e0e0e0}.wizard-actions button{flex:1;padding:12px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.wizard-actions button:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#f3f4f6;color:#374151}.btn-secondary:hover:not(:disabled){background:#e5e7eb}.btn-skip{background:#fef3c7;color:#92400e}.btn-skip:hover:not(:disabled){background:#fde68a}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background:#5568d3}.btn-success{background:#10b981;color:#fff}.btn-success:hover:not(:disabled){background:#059669}.visitor-management{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.header-content{max-width:1200px;margin:0 auto}.header-info{display:flex;align-items:center;gap:16px;margin-bottom:20px}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.stat-card{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px}.stat-card i{font-size:20px;color:#333}.stat-info{display:flex;flex-direction:column}.stat-label{color:#666;font-size:12px;margin-bottom:2px}.stat-value{color:#000;font-size:18px;font-weight:700}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;background:#fff;padding:24px;border-radius:16px;box-shadow:0 5px 20px #0000000d}.section-info{display:flex;align-items:center;gap:12px}.section-info i{font-size:20px;color:#10b981}.section-info h2{color:#1e293b;font-size:20px;font-weight:700;margin:0}.refresh-btn{display:flex;align-items:center;gap:8px;background:#667eea;color:#fff;border:none;padding:12px 16px;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.refresh-btn:hover{background:#5856eb}.refresh-btn i{font-size:14px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d}.loading-state p{color:#64748b;font-size:16px;margin:0}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d;text-align:center}.error-state p{color:#64748b;margin:0 0 24px}.error-state button{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:500}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d;text-align:center}.empty-state i{font-size:48px;color:#10b981;margin-bottom:16px}.empty-state p{color:#64748b;margin:0}.faces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:24px;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d}.face-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}.face-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.face-image{position:relative;height:200px;overflow:hidden}.face-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#f3f4f6}.status-badge{position:absolute;top:8px;right:8px;padding:4px 8px;border-radius:20px;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase}.face-info{padding:16px}.info-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;color:#64748b}.info-row i{width:14px;color:#667eea}.face-actions{padding:16px;border-top:1px solid #e2e8f0}.action-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.action-btn.primary{background:#667eea;color:#fff}.action-btn.primary:hover{background:#5856eb}.action-options{display:flex;flex-direction:column;gap:12px}.action-option{display:flex;align-items:center;gap:16px;padding:20px;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s;text-align:left}.action-option:hover{border-color:#667eea;background:#f8fafc;transform:translateY(-1px)}.action-option.visitor:hover{border-color:#667eea}.action-option.employee:hover{border-color:#764ba2}.action-option.dismiss:hover{border-color:#ef4444}.action-option i{font-size:24px;color:#667eea}.action-option.visitor i{color:#667eea}.action-option.employee i{color:#764ba2}.action-option.dismiss i{color:#ef4444}.action-option h4{color:#1e293b;font-size:18px;font-weight:600;margin:0 0 4px}.action-option p{color:#64748b;font-size:14px;margin:0}.form-group{margin-bottom:20px}.form-group label{display:block;color:#374151;font-weight:500;margin-bottom:8px;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #6366f11a}.form-group textarea{resize:vertical;font-family:inherit}.form-group small{display:block;color:#6b7280;font-size:12px;margin-top:4px}.form-actions{display:flex;gap:12px;margin-top:24px}.form-actions button{flex:1;padding:12px 24px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:background .2s}.form-actions button[type=button]{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.form-actions button[type=button]:hover{background:#f1f5f9}.form-actions button.primary,.form-actions button[type=submit]{background:#667eea;color:#fff}.form-actions button.primary:hover,.form-actions button[type=submit]:hover{background:#5856eb}@media (max-width: 768px){.visitor-management{padding:0}.header-section{padding:20px}.header-info{flex-direction:column;align-items:flex-start;text-align:left}.stats-cards{grid-template-columns:repeat(2,1fr)}.content-section{padding:0 16px}.section-header{flex-direction:column;align-items:flex-start;gap:16px}.faces-grid{grid-template-columns:1fr;padding:16px}.modal-content{margin:20px;max-width:none}.action-options{gap:8px}.action-option{padding:16px}.form-actions{flex-direction:column}}@media (max-width: 480px){.stats-cards{grid-template-columns:1fr}.header-text h1{font-size:24px}.header-text p{font-size:14px}}.image-loading{display:flex;align-items:center;justify-content:center;height:120px;background:#f8f9fa;border-radius:8px;color:#6c757d}.image-loading i{font-size:24px;animation:spin 1s linear infinite}.image-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;background:#f8f9fa;border-radius:8px;color:#dc3545;font-size:12px;text-align:center;padding:8px}.image-error i{font-size:18px;margin-bottom:4px}.face-image img{width:100%;height:120px;-o-object-fit:cover;object-fit:cover;border-radius:8px}.image-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);border-radius:8px;color:#64748b;font-size:12px;text-align:center}.image-placeholder i{font-size:24px;margin-bottom:4px;opacity:.7}.face-image-container{width:100%;height:120px;border-radius:8px;overflow:hidden}.image-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:8px;color:#64748b;font-size:11px}.image-loading i{font-size:20px;margin-bottom:4px}.image-loading span{font-size:10px;opacity:.8}.notifications{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.header-section{background:#fff;padding:32px;margin-bottom:24px;box-shadow:0 10px 25px #0000001a}.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.header-info{display:flex;align-items:center;gap:16px}.header-icon{width:48px;height:48px;background:#fff3;border-radius:12px;display:flex;align-items:center;justify-content:center}.header-icon i{font-size:24px;color:#000}.header-text h1{color:#000;font-size:28px;font-weight:700;margin:0}.header-text p{color:#333;font-size:16px;margin:4px 0 0}.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.connection-status{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;border:1px solid;font-size:12px;font-weight:500}.connection-status i{font-size:14px}.mark-all-btn,.refresh-btn{display:flex;align-items:center;gap:8px;background:#0000001a;color:#000;border:1px solid rgba(0,0,0,.2);padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s;font-size:14px}.mark-all-btn:hover,.refresh-btn:hover{background:#0003}.mark-all-btn i,.refresh-btn i{font-size:14px}.summary-section{max-width:1200px;margin:0 auto 24px;padding:0 24px}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.summary-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 5px 20px #0000000d;display:flex;align-items:center;gap:16px;border-left:4px solid}.summary-card.total{border-left-color:#667eea}.summary-card.unread{border-left-color:#f59e0b}.summary-card.alerts{border-left-color:#ef4444}.summary-card i{font-size:24px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}.summary-card.total i{background:#3b82f61a;color:#667eea}.summary-card.unread i{background:#f59e0b1a;color:#f59e0b}.summary-card.alerts i{background:#ef44441a;color:#ef4444}.summary-info{display:flex;flex-direction:column}.summary-value{font-size:24px;font-weight:700;color:#1e293b}.summary-label{font-size:14px;color:#64748b}.content-section{max-width:1200px;margin:0 auto;padding:0 24px}.loading-state,.error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d;text-align:center}.spinner{width:32px;height:32px;border:4px solid #e2e8f0;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.loading-state p,.error-state p,.empty-state p{color:#64748b;font-size:16px;margin:0}.error-state i{font-size:48px;color:#ef4444;margin-bottom:16px}.error-state h3{color:#1e293b;font-size:24px;font-weight:700;margin:0 0 8px}.error-state button{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:500;margin-top:16px}.empty-state i{font-size:48px;color:#9ca3af;margin-bottom:16px}.empty-state h3{color:#1e293b;font-size:24px;font-weight:700;margin:0 0 8px}.notifications-list{background:#fff;border-radius:16px;box-shadow:0 5px 20px #0000000d;overflow:hidden}.notification-card{display:flex;align-items:flex-start;gap:16px;padding:20px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .2s;position:relative}.notification-card:hover{background:#f8fafc}.notification-card:last-child{border-bottom:none}.notification-card.unread{border-left:4px solid #667eea;background:#3b82f605}.notification-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f8fafc}.notification-icon i{font-size:20px}.notification-content{flex:1;min-width:0}.notification-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.notification-header h4{color:#1e293b;font-size:16px;font-weight:600;margin:0;flex:1}.unread-indicator{width:8px;height:8px;background:#667eea;border-radius:50%;flex-shrink:0}.notification-message{color:#64748b;font-size:14px;margin:0 0 12px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.notification-meta{display:flex;align-items:center;gap:16px;font-size:12px;color:#9ca3af}.notification-actions{display:flex;align-items:center;gap:8px}.mark-read-btn{background:#667eea;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:background .2s}.mark-read-btn:hover{background:#2563eb}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px #00000040}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid #e2e8f0}.modal-header h3{color:#1e293b;font-size:20px;font-weight:700;margin:0}.close-btn{background:none;border:none;padding:8px;cursor:pointer;color:#64748b;border-radius:8px;transition:background .2s}.close-btn:hover{background:#f1f5f9}.close-btn i{font-size:16px}.modal-body{padding:24px}.notification-details{space-y:16px}.detail-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9}.detail-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.detail-row strong{color:#374151;font-weight:600;min-width:80px;flex-shrink:0}.detail-row span{color:#6b7280;flex:1}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e2e8f0}.modal-footer .mark-read-btn.primary{background:#667eea;color:#fff;padding:10px 20px;font-size:14px}.close-modal-btn{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.close-modal-btn:hover{background:#f1f5f9}.notification-snackbar{position:fixed;top:20px;right:20px;max-width:400px;border-radius:8px;padding:16px;box-shadow:0 10px 25px #0000004d;z-index:1001;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.snackbar-content{display:flex;align-items:flex-start;gap:12px}.snackbar-content i{font-size:20px;color:#fff;flex-shrink:0;margin-top:2px}.snackbar-text{flex:1;display:flex;flex-direction:column;gap:4px}.snackbar-text strong{color:#fff;font-weight:600;font-size:14px}.snackbar-text span{color:#ffffffe6;font-size:13px;line-height:1.4}.snackbar-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;opacity:.8;transition:opacity .2s}.snackbar-close:hover{opacity:1}@media (max-width: 768px){.notifications{padding:0}.header-section{padding:20px}.header-content{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{width:100%;justify-content:flex-start}.summary-section{padding:0 16px}.summary-cards{grid-template-columns:1fr}.content-section{padding:0 16px}.notification-card{padding:16px}.notification-meta{flex-direction:column;align-items:flex-start;gap:4px}.notification-snackbar{top:10px;right:10px;left:10px;max-width:none}.modal-content{margin:20px;max-width:none}}@media (max-width: 480px){.header-text h1{font-size:24px}.header-text p{font-size:14px}.notification-card{flex-direction:column;align-items:flex-start}.notification-icon{align-self:flex-start}.notification-actions{align-self:flex-end}}/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-content:""}}}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-1\/2{top:50%}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-inline:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-full{height:100%}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-\[320px\]{max-width:320px}.min-w-\[280px\]{min-width:280px}.min-w-\[400px\]{min-width:400px}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-transparent{border-color:#0000}.border-t-transparent{border-top-color:#0000}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.object-cover{-o-object-fit:cover;object-fit:cover}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.leading-none{--tw-leading:1;line-height:1}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.capitalize{text-transform:capitalize}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-90{opacity:.9}.opacity-100{opacity:1}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.peer-focus\:ring-4:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(4px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.peer-focus\:outline-none:is(:where(.peer):focus~*){--tw-outline-style:none;outline-style:none}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:border:after{content:var(--tw-content);border-style:var(--tw-border-style);border-width:1px}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.peer-checked\:after\:translate-x-full:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.focus\:border-transparent:focus{border-color:#0000}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}