.sidebar{width:280px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;display:flex;flex-direction:column;box-shadow:2px 0 10px #0000001a}.sidebar-header{padding:2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-header h2{font-size:1.5rem;font-weight:700;margin:0}.sidebar-nav{flex:1;padding:1rem 0}.nav-item{position:relative;margin:.25rem 0}.nav-item-main{display:flex;align-items:center;padding:1rem 1.5rem;cursor:pointer;transition:all .2s ease;position:relative}.nav-item-main:hover{background:rgba(255,255,255,.1);transform:translate(4px)}.nav-icon{margin-right:1rem;display:flex;align-items:center}.nav-label{flex:1;font-weight:500;font-size:1rem}.nav-arrow{display:flex;align-items:center;transition:transform .2s ease}.submenu{position:absolute;left:100%;top:0;background:white;color:#374151;border-radius:8px;box-shadow:0 10px 25px #00000026;min-width:200px;z-index:1000;overflow:hidden;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.submenu-item{padding:.875rem 1.25rem;cursor:pointer;transition:background-color .2s ease;border-bottom:1px solid #f3f4f6}.submenu-item:last-child{border-bottom:none}.submenu-item:hover{background-color:#f8fafc;color:#667eea}.main-content{flex:1;background:#f8fafc;overflow-y:auto}.content-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.content-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.content-header p{font-size:1.125rem;color:#64748b;margin:0}.content-body{padding:2rem}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}.dashboard-card{background:white;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;display:flex;align-items:center;transition:all .2s ease;cursor:pointer}.dashboard-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.card-icon{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:1rem;color:#fff}.card-icon.students{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.card-icon.attendance{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.card-icon.grades{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.card-icon.courses{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}.card-content h3{font-size:1.25rem;font-weight:600;color:#1e293b;margin-bottom:.25rem}.card-content p{color:#64748b;font-size:.875rem;margin:0}.quick-actions{background:white;border-radius:12px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.quick-actions h2{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:1.5rem}.action-buttons{display:flex;gap:1rem;flex-wrap:wrap}.action-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.action-btn.secondary{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.action-btn.secondary:hover{background:#f1f5f9;color:#475569;transform:translateY(-1px)}.students-page{flex:1;background:#f8fafc;overflow-y:auto}.students-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.students-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.students-header p{font-size:1.125rem;color:#64748b;margin:0}.students-content{padding:2rem}.students-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}.student-action-card{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.student-action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transform:scaleX(0);transition:transform .3s ease}.student-action-card.register:before{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.student-action-card.view:before{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.student-action-card:hover:before{transform:scaleX(1)}.student-action-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.student-action-card.register:hover{border-color:#667eea}.student-action-card.view:hover{border-color:#4facfe}.student-action-card.register .card-icon-wrapper{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.student-action-card.view .card-icon-wrapper{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.student-action-card:hover .card-icon-wrapper{transform:scale(1.1) rotate(5deg)}.student-action-card h3{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:.75rem}.student-action-card p{color:#64748b;font-size:.875rem;line-height:1.6;margin-bottom:1rem}.student-action-card:hover .card-arrow{color:#667eea;transform:translate(4px)}.students-chart-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.chart-header{margin-bottom:2rem}.chart-header h2{font-size:1.75rem;font-weight:600;color:#1e293b;margin-bottom:.5rem}.chart-header p{color:#64748b;font-size:.875rem;margin:0}.chart-container{width:100%;height:400px}.chart-container :global(.recharts-bar-rectangle){cursor:pointer;transition:opacity .2s ease}.chart-container :global(.recharts-bar-rectangle:hover){opacity:.8}.status-bar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9999;animation:fadeIn .2s ease-out;pointer-events:auto}.status-bar{position:fixed;top:20px;right:20px;min-width:300px;max-width:500px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:10000;animation:slideIn .3s ease-out;overflow:hidden}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.status-bar-content{display:flex;align-items:center;padding:16px;gap:12px}.status-bar-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px}.status-bar-loading .status-bar-icon{color:#3b82f6}.status-bar-success .status-bar-icon{color:#10b981}.status-bar-error .status-bar-icon{color:#ef4444}.status-bar-message{flex:1;min-width:0}.status-bar-message p{margin:0;font-size:14px;font-weight:500;color:#1f2937}.status-bar-progress{margin-top:8px;width:100%;height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden}.status-bar-progress-bar{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:2px;transition:width .3s ease;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.status-bar-close{flex-shrink:0;background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:color .2s;border-radius:4px}.status-bar-close:hover{color:#1f2937;background:#f3f4f6}.status-bar-loading{border-left:4px solid #3b82f6}.status-bar-success{border-left:4px solid #10b981}.status-bar-error{border-left:4px solid #ef4444}.spinner{width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 640px){.status-bar{top:10px;right:10px;left:10px;min-width:auto;max-width:none}}.register-student-page{flex:1;background:#f8fafc;overflow-y:auto}.register-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.register-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.register-header p{font-size:1.125rem;color:#64748b;margin:0}.register-content{padding:2rem;max-width:900px;margin:0 auto}.student-form{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:1.5rem}.form-row-full{grid-template-columns:1fr}.form-group select:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.form-group input::-moz-placeholder{color:#9ca3af}.form-group input::placeholder{color:#9ca3af}.form-group textarea{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937;font-family:inherit;resize:vertical}.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea::-moz-placeholder{color:#9ca3af}.form-group textarea::placeholder{color:#9ca3af}.form-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e5e7eb}.form-section:last-of-type{border-bottom:none}.form-section-title{font-size:1.25rem;font-weight:600;color:#1e293b;margin-bottom:1.5rem;padding-bottom:.5rem;border-bottom:2px solid #667eea}.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-primary{display:flex;align-items:center;justify-content:center;gap:.5rem}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.file-upload-wrapper{position:relative}.file-input{position:absolute;opacity:0;width:0;height:0}.file-label{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border:2px dashed #d1d5db;border-radius:8px;background:#f8fafc;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;justify-content:center}.file-label:hover{border-color:#667eea;background:#f0f4ff;color:#667eea}.file-label svg{flex-shrink:0}.photo-preview{margin-top:1rem;position:relative;display:inline-block}.photo-preview img{width:120px;height:120px;-o-object-fit:cover;object-fit:cover;border-radius:8px;border:2px solid #e2e8f0}.remove-photo-btn{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 4px #0003}.remove-photo-btn:hover{background:#dc2626;transform:scale(1.1)}.documents-list{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.document-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;font-size:.875rem}.document-item svg{color:#64748b;flex-shrink:0}.document-name{flex:1;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-doc-btn{padding:.25rem;background:transparent;border:none;color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.remove-doc-btn:hover{background:#fee2e2;transform:scale(1.1)}.success-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.success-dialog{background:white;border-radius:16px;padding:2.5rem;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .3s ease;text-align:center}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-dialog-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;animation:scaleIn .3s ease .1s both}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.success-dialog-title{font-size:1.5rem;font-weight:700;color:#1e293b;margin-bottom:.75rem}.success-dialog-message{font-size:1rem;color:#64748b;margin-bottom:2rem;line-height:1.5}.success-dialog-button{padding:.75rem 2rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;width:100%}.success-dialog-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.form-row{grid-template-columns:1fr}.success-dialog{padding:2rem 1.5rem}.success-dialog-title{font-size:1.25rem}}.view-students-page{flex:1;background:#f8fafc;overflow-y:auto}.view-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.view-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.view-header p{font-size:1.125rem;color:#64748b;margin:0}.view-content{padding:2rem}.filter-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.students-table-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.student-count{color:#64748b;font-size:.875rem;font-weight:500}.no-students{text-align:center;padding:4rem 2rem;color:#94a3b8}.no-students svg{margin:0 auto 1rem;color:#cbd5e1}.no-students p{font-size:1.125rem;margin:0}.students-table{width:100%;border-collapse:collapse}.students-table thead{background:#f8fafc}.students-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.students-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.students-table tbody tr{transition:background-color .2s ease}.students-table tbody tr:hover{background-color:#f8fafc}.action-buttons{display:flex;gap:.5rem}.action-btn{padding:.5rem;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.edit-btn{background:#eff6ff;color:#3b82f6}.edit-btn:hover{background:#dbeafe;transform:scale(1.1)}.delete-btn{background:#fef2f2;color:#ef4444}.delete-btn:hover{background:#fee2e2;transform:scale(1.1)}.student-photo{display:flex;align-items:center;justify-content:center}.student-photo img{width:48px;height:48px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #e2e8f0}.student-photo-placeholder{width:48px;height:48px;border-radius:50%;background:#f1f5f9;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#94a3b8}.documents-download{display:flex;flex-direction:column;gap:.5rem;max-width:200px}.download-doc-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;color:#0369a1;font-size:.75rem;cursor:pointer;transition:all .2s ease;text-align:left;width:100%}.download-doc-btn:hover{background:#e0f2fe;border-color:#7dd3fc;transform:translate(2px)}.download-doc-btn svg{flex-shrink:0}.download-doc-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.no-documents{color:#94a3b8;font-size:.75rem;font-style:italic}@media (max-width: 768px){.filter-form{flex-direction:column;align-items:stretch}.filter-group{min-width:100%}.table-container{overflow-x:scroll}.students-table{min-width:800px}}.attendance-page{flex:1;background:#f8fafc;overflow-y:auto}.attendance-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.attendance-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.attendance-header p{font-size:1.125rem;color:#64748b;margin:0}.attendance-content{padding:2rem}.attendance-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}.attendance-action-card{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.attendance-action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .3s ease}.attendance-action-card.mark:before{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.attendance-action-card.view:before{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.attendance-action-card.reports:before{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}.attendance-action-card:hover:before{transform:scaleX(1)}.attendance-action-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.attendance-action-card.mark:hover{border-color:#f5576c}.attendance-action-card.view:hover{border-color:#4facfe}.attendance-action-card.reports:hover{border-color:#43e97b}.attendance-action-card.mark .card-icon-wrapper{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.attendance-action-card.view .card-icon-wrapper{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.attendance-action-card.reports .card-icon-wrapper{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:#fff}.attendance-action-card:hover .card-icon-wrapper{transform:scale(1.1) rotate(5deg)}.attendance-action-card h3{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:.75rem}.attendance-action-card p{color:#64748b;font-size:.875rem;line-height:1.6;margin-bottom:1rem}.attendance-action-card:hover .card-arrow{color:#667eea;transform:translate(4px)}.attendance-stats-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.stat-icon.present{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff}.stat-icon.absent{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff}.stat-icon.late{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff}.mark-attendance-page{flex:1;background:#f8fafc;overflow-y:auto}.mark-attendance-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.mark-attendance-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.mark-attendance-header p{font-size:1.125rem;color:#64748b;margin:0}.mark-attendance-content{padding:2rem;max-width:1200px;margin:0 auto}.attendance-form{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.form-group input:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.attendance-table-container{overflow-x:auto;margin-top:1rem}.attendance-table{width:100%;border-collapse:collapse}.attendance-table thead{background:#f8fafc}.attendance-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.attendance-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.attendance-table tbody tr:hover{background-color:#f8fafc}.status-buttons{display:flex;gap:.5rem;flex-wrap:wrap}.status-btn{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease;background:white;color:#64748b}.status-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.status-btn.active.present{background:#10b981;color:#fff;border-color:#10b981}.status-btn.active.absent{background:#ef4444;color:#fff;border-color:#ef4444}.status-btn.active.late{background:#f59e0b;color:#fff;border-color:#f59e0b}.status-btn.active.excused{background:#6366f1;color:#fff;border-color:#6366f1}.btn-primary{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #f5576c66}.view-attendance-page{flex:1;background:#f8fafc;overflow-y:auto}.view-attendance-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.view-attendance-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.view-attendance-header p{font-size:1.125rem;color:#64748b;margin:0}.view-attendance-content{padding:2rem}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:#f5576c;box-shadow:0 0 0 3px #f5576c1a}.attendance-records-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.attendance-records-table{width:100%;border-collapse:collapse}.attendance-records-table thead{background:#f8fafc}.attendance-records-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.attendance-records-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.attendance-records-table tbody tr:hover{background-color:#f8fafc}.status-badge{padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;text-transform:capitalize}.status-badge.present{background:#d1fae5;color:#065f46}.status-badge.absent{background:#fee2e2;color:#991b1b}.status-badge.late{background:#fef3c7;color:#92400e}.status-badge.excused{background:#e0e7ff;color:#3730a3}.attendance-reports-page{flex:1;background:#f8fafc;overflow-y:auto}.tab-btn.active{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.export-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff;border:none;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease}.export-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f5576c66}.grades-page{flex:1;background:#f8fafc;overflow-y:auto}.grades-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.grades-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.grades-header p{font-size:1.125rem;color:#64748b;margin:0}.grades-content{padding:2rem}.grades-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}.grade-action-card{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.grade-action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .3s ease}.grade-action-card.enter:before{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.grade-action-card.view:before{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}.grade-action-card.reports:before{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.grade-action-card:hover:before{transform:scaleX(1)}.grade-action-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.grade-action-card.enter:hover{border-color:#4facfe}.grade-action-card.view:hover{border-color:#43e97b}.grade-action-card.reports:hover{border-color:#667eea}.grade-action-card.enter .card-icon-wrapper{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.grade-action-card.view .card-icon-wrapper{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:#fff}.grade-action-card.reports .card-icon-wrapper{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.grade-action-card:hover .card-icon-wrapper{transform:scale(1.1) rotate(5deg)}.grade-action-card h3{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:.75rem}.grade-action-card p{color:#64748b;font-size:.875rem;line-height:1.6;margin-bottom:1rem}.grade-action-card:hover .card-arrow{color:#667eea;transform:translate(4px)}.grades-stats-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.stat-icon.average{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.stat-icon.excellent{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#fff}.stat-icon.passing{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff}.stat-icon.improvement{background:linear-gradient(135deg,#06b6d4 0%,#0891b2 100%);color:#fff}.enter-grades-page{flex:1;background:#f8fafc;overflow-y:auto}.enter-grades-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.enter-grades-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.enter-grades-header p{font-size:1.125rem;color:#64748b;margin:0}.enter-grades-content{padding:2rem;max-width:1200px;margin:0 auto}.grades-form{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.form-group input,.form-group select{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937}.form-group input:focus,.form-group select:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.grades-table-container{overflow-x:auto;margin-top:1rem}.grades-table{width:100%;border-collapse:collapse}.grades-table thead{background:#f8fafc}.grades-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.grades-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.grades-table tbody tr:hover{background-color:#f8fafc}.score-input{width:80px;padding:.5rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem}.score-input:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.view-grades-page{flex:1;background:#f8fafc;overflow-y:auto}.view-grades-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.view-grades-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.view-grades-header p{font-size:1.125rem;color:#64748b;margin:0}.view-grades-content{padding:2rem}.filter-group{display:flex;flex-direction:column;min-width:180px}.filter-group input,.filter-group select{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.grades-records-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.record-count{color:#64748b;font-size:.875rem;font-weight:500}.no-records{text-align:center;padding:4rem 2rem;color:#94a3b8}.no-records svg{margin:0 auto 1rem;color:#cbd5e1}.no-records p{font-size:1.125rem;margin:0}.grades-records-table{width:100%;border-collapse:collapse}.grades-records-table thead{background:#f8fafc}.grades-records-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.grades-records-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.grades-records-table tbody tr:hover{background-color:#f8fafc}.grade-badge{padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;display:inline-block;min-width:40px;text-align:center}.grade-badge.grade-a{background:#d1fae5;color:#065f46}.grade-badge.grade-b{background:#dbeafe;color:#1e40af}.grade-badge.grade-c{background:#fef3c7;color:#92400e}.grade-badge.grade-d{background:#fed7aa;color:#9a3412}.grade-badge.grade-f{background:#fee2e2;color:#991b1b}.grade-reports-page{flex:1;background:#f8fafc;overflow-y:auto}.reports-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.reports-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.reports-header p{font-size:1.125rem;color:#64748b;margin:0}.reports-content{padding:2rem}.report-tabs{display:flex;gap:1rem;margin-bottom:2rem;background:white;padding:.5rem;border-radius:12px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.tab-btn{flex:1;padding:.75rem 1.5rem;border:none;background:transparent;color:#64748b;font-weight:500;font-size:.875rem;cursor:pointer;border-radius:8px;transition:all .2s ease}.tab-btn:hover{background:#f8fafc;color:#475569}.tab-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.report-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;margin-bottom:2rem}.report-section h2{font-size:1.75rem;font-weight:600;color:#1e293b;margin-bottom:2rem}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.chart-card{background:#f8fafc;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0}.chart-card h3{font-size:1.25rem;font-weight:600;color:#1e293b;margin-bottom:1rem}.stats-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.stat-item{background:#f8fafc;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0;text-align:center}.stat-value{font-size:2rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.stat-label{font-size:.875rem;color:#64748b}.export-section{display:flex;justify-content:flex-end;margin-top:2rem}.export-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease}.export-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.charts-grid,.stats-summary{grid-template-columns:1fr}}.courses-page{flex:1;background:#f8fafc;overflow-y:auto}.courses-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.courses-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.courses-header p{font-size:1.125rem;color:#64748b;margin:0}.courses-content{padding:2rem}.courses-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:3rem}.course-action-card{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.course-action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;transform:scaleX(0);transition:transform .3s ease}.course-action-card.add:before{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%)}.course-action-card.view:before{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.course-action-card.schedule:before{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.course-action-card.enroll:before{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.course-action-card:hover:before{transform:scaleX(1)}.course-action-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #00000026}.course-action-card.add:hover{border-color:#43e97b}.course-action-card.view:hover{border-color:#667eea}.course-action-card.schedule:hover{border-color:#f5576c}.course-action-card.enroll:hover{border-color:#4facfe}.card-icon-wrapper{width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:transform .3s ease}.course-action-card.add .card-icon-wrapper{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:#fff}.course-action-card.view .card-icon-wrapper{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.course-action-card.schedule .card-icon-wrapper{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.course-action-card.enroll .card-icon-wrapper{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.course-action-card:hover .card-icon-wrapper{transform:scale(1.1) rotate(5deg)}.course-action-card h3{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:.75rem}.course-action-card p{color:#64748b;font-size:.875rem;line-height:1.6;margin-bottom:1rem}.card-arrow{display:flex;align-items:center;color:#94a3b8;transition:all .3s ease}.course-action-card:hover .card-arrow{color:#667eea;transform:translate(4px)}.courses-stats-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.stats-header{margin-bottom:2rem}.stats-header h2{font-size:1.75rem;font-weight:600;color:#1e293b;margin-bottom:.5rem}.stats-header p{color:#64748b;font-size:.875rem;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.stat-card{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;transition:all .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon.total{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.stat-icon.active{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff}.stat-icon.enrolled{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.stat-icon.departments{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff}.stat-content h3{font-size:1.75rem;font-weight:700;color:#1e293b;margin-bottom:.25rem}.stat-content p{color:#64748b;font-size:.875rem;margin:0}.add-course-page{flex:1;background:#f8fafc;overflow-y:auto}.add-course-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.add-course-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.add-course-header p{font-size:1.125rem;color:#64748b;margin:0}.add-course-content{padding:2rem;max-width:900px;margin:0 auto}.course-form{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:1.5rem}.form-group input,.form-group select,.textarea-input{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937;font-family:inherit}.textarea-input{resize:vertical}.form-group input:focus,.form-group select:focus,.textarea-input:focus{outline:none;border-color:#43e97b;box-shadow:0 0 0 3px #43e97b1a}.btn-primary{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #43e97b66}.view-courses-page{flex:1;background:#f8fafc;overflow-y:auto}.view-courses-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.view-courses-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.view-courses-header p{font-size:1.125rem;color:#64748b;margin:0}.view-courses-content{padding:2rem}.filter-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;margin-bottom:2rem}.filter-section h2{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:1.5rem}.filter-form{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;min-width:200px}.filter-group label{font-weight:500;color:#374151;margin-bottom:.5rem;font-size:.875rem}.filter-group select{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937}.filter-group select:focus{outline:none;border-color:#43e97b;box-shadow:0 0 0 3px #43e97b1a}.clear-filters-btn{padding:.75rem 1.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;height:-moz-fit-content;height:fit-content}.clear-filters-btn:hover{background:#f1f5f9;color:#475569}.courses-table-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.table-header h2{font-size:1.5rem;font-weight:600;color:#1e293b}.course-count{color:#64748b;font-size:.875rem;font-weight:500}.no-courses{text-align:center;padding:4rem 2rem;color:#94a3b8}.no-courses svg{margin:0 auto 1rem;color:#cbd5e1}.no-courses p{font-size:1.125rem;margin:0}.courses-table{width:100%;border-collapse:collapse}.courses-table thead{background:#f8fafc}.courses-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.courses-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.courses-table tbody tr:hover{background-color:#f8fafc}.course-schedule-page{flex:1;background:#f8fafc;overflow-y:auto}.schedule-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.schedule-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.schedule-header p{font-size:1.125rem;color:#64748b;margin:0}.schedule-content{padding:2rem}.schedule-tabs{display:flex;gap:1rem;margin-bottom:2rem;background:white;padding:.5rem;border-radius:12px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;flex-wrap:wrap}.day-tab{flex:1;min-width:120px;padding:.75rem 1.5rem;border:none;background:transparent;color:#64748b;font-weight:500;font-size:.875rem;cursor:pointer;border-radius:8px;transition:all .2s ease}.day-tab:hover{background:#f8fafc;color:#475569}.day-tab.active{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}.schedule-table-section{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.schedule-table-section h2{font-size:1.75rem;font-weight:600;color:#1e293b;margin-bottom:1.5rem}.no-schedule{text-align:center;padding:4rem 2rem;color:#94a3b8}.no-schedule p{font-size:1.125rem;margin:0}.table-container{overflow-x:auto}.schedule-table{width:100%;border-collapse:collapse}.schedule-table thead{background:#f8fafc}.schedule-table th{padding:1rem;text-align:left;font-weight:600;color:#374151;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #e5e7eb}.schedule-table td{padding:1rem;border-bottom:1px solid #e5e7eb;color:#1f2937;font-size:.875rem}.schedule-table tbody tr:hover{background-color:#f8fafc}.student-enrollment-page{flex:1;background:#f8fafc;overflow-y:auto}.enrollment-header{background:white;padding:2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.back-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:1rem}.back-button:hover{background:#f1f5f9;color:#475569;transform:translate(-2px)}.enrollment-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem}.enrollment-header p{font-size:1.125rem;color:#64748b;margin:0}.success-message{margin:1.5rem 2rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;border-radius:8px;display:flex;align-items:center;gap:.75rem;font-weight:500;box-shadow:0 4px 6px #10b9814d;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.enrollment-content{padding:2rem;max-width:1200px;margin:0 auto}.enrollment-form{background:white;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0}.form-section{margin-bottom:2rem}.form-section h2{font-size:1.5rem;font-weight:600;color:#1e293b;margin-bottom:1.5rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.select-all-btn{padding:.5rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease}.select-all-btn:hover{background:#f1f5f9;color:#475569}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:500;color:#374151;margin-bottom:.5rem;font-size:.875rem}.required{color:#ef4444}.form-group select{padding:.75rem 1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;transition:all .2s ease;background:white;color:#1f2937}.form-group select:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.students-list{display:flex;flex-direction:column;gap:.75rem;max-height:500px;overflow-y:auto;padding:1rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}.student-checkbox-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:white;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s ease}.student-checkbox-item:hover{border-color:#4facfe;background:#f0f9ff}.student-checkbox-item.selected{border-color:#4facfe;background:#e0f2fe}.student-checkbox{width:20px;height:20px;cursor:pointer}.student-info{display:flex;flex-direction:column;flex:1}.student-name{font-weight:500;color:#1e293b;font-size:.875rem;margin-bottom:.25rem}.student-details{font-size:.75rem;color:#64748b}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:2rem;border-top:1px solid #e5e7eb}.btn-primary,.btn-secondary{padding:.75rem 2rem;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .2s ease;border:none}.btn-primary{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #4facfe66}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.btn-secondary:hover{background:#f1f5f9;color:#475569}.app{display:flex;height:100vh;width:100%}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc}#root{height:100vh;display:flex}