:root{--primary-color:#1e3a8a;--secondary-color:#10b981;--accent-color:#3b82f6;--danger-color:#ef4444;--warning-color:#f59e0b;--success-color:#22c55e;--info-color:#3b82f6;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--border-radius:8px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--spacing-unit:8px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--gray-100);color:var(--gray-800);line-height:1.5}#app{max-width:1400px;margin:0 auto;padding:16px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin-bottom:32px;border-bottom:1px solid var(--gray-200)}.app-header h1{font-size:24px;color:var(--primary-color);margin:0}.user-info{display:flex;align-items:center;gap:16px}.user-info span{font-weight:500;color:var(--gray-700)}.btn-logout{background-color:transparent;color:var(--gray-600);border:1px solid var(--gray-300);padding:8px 16px;border-radius:var(--border-radius);cursor:pointer;transition:all .2s}.btn-logout:hover{background-color:var(--gray-100);color:var(--gray-800)}.notification{position:fixed;top:16px;right:16px;padding:12px 16px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);z-index:1000;max-width:400px;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.notification button{background:transparent;border:none;font-size:18px;color:currentColor;opacity:.7;cursor:pointer;padding:0 0 0 16px}.notification.info{background-color:var(--info-color);color:#fff}.notification.success{background-color:var(--success-color);color:#fff}.notification.warning{background-color:var(--warning-color);color:#fff}.notification.error{background-color:var(--danger-color);color:#fff}.auth-container{max-width:480px;margin:48px auto;background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden}.auth-tabs{display:flex;border-bottom:1px solid var(--gray-200)}.tab-btn{flex:1;padding:16px;background:transparent;border:none;font-size:16px;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all .2s}.tab-btn.active{color:var(--primary-color);box-shadow:inset 0 -2px 0 var(--primary-color)}.auth-form{padding:24px}.auth-form h2{margin-bottom:24px;font-size:20px;color:var(--gray-800);text-align:center}.form-group{margin-bottom:16px}.form-group label{margin-bottom:8px;font-weight:500;color:var(--gray-700)}.form-group label,.form-hint{display:block;text-align:left}.form-hint{margin-top:4px;font-size:12px;color:var(--gray-500)}.form-row{display:flex;gap:16px}.form-group.half{flex:1}input{width:100%;padding:12px;border:1px solid var(--gray-300);border-radius:var(--border-radius);font-size:14px;color:var(--gray-800);transition:all .2s}input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.btn-primary{width:100%;padding:12px;margin-top:16px;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:16px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary:hover{background-color:#1a365d;transform:translateY(-1px)}.btn-primary:disabled{background-color:var(--gray-400);cursor:not-allowed;transform:none}.main-content{display:flex;flex-direction:column;gap:24px}.admin-panel{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}.admin-panel h2{padding:16px;margin:0;font-size:18px;color:var(--gray-800)}.admin-panel h2,.admin-tabs{border-bottom:1px solid var(--gray-200)}.admin-tabs{display:flex;background-color:var(--gray-100);padding:8px}.admin-tab-btn{flex:1;padding:8px 16px;background:transparent;border:none;font-size:14px;color:var(--gray-600);border-radius:var(--border-radius);cursor:pointer;transition:all .2s}.admin-tab-btn.active{background-color:#fff;color:var(--primary-color);box-shadow:var(--shadow-sm)}.admin-content{padding:16px}.btn-secondary{padding:8px 16px;background-color:#fff;color:var(--primary-color);border:1px solid var(--primary-color);border-radius:var(--border-radius);font-size:14px;cursor:pointer;transition:all .2s}.btn-secondary:hover{background-color:rgba(59,130,246,.05)}.admin-form{max-width:600px;margin:16px auto;padding:16px;background-color:var(--gray-100);border-radius:var(--border-radius)}.course-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}.course-table td,.course-table th{padding:12px;text-align:left;border-bottom:1px solid var(--gray-200)}.course-table th{font-weight:500;color:var(--gray-700);background-color:var(--gray-100)}.btn-danger{background-color:var(--danger-color);color:#fff;border:none;border-radius:var(--border-radius);padding:8px 16px;font-size:14px;cursor:pointer;transition:all .2s}.btn-danger:hover{background-color:#b91c1c}.btn-small{padding:4px 8px;font-size:12px;background-color:#fff;color:var(--primary-color);border:1px solid var(--primary-color);border-radius:var(--border-radius);cursor:pointer;transition:all .2s}.btn-small:hover{background-color:rgba(59,130,246,.05)}select{width:100%;padding:12px;border:1px solid var(--gray-300);border-radius:var(--border-radius);font-size:14px;color:var(--primary-color);transition:all .2s}.text-danger{color:var(--danger-color);font-weight:500}.stats-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}.stat-card{background-color:#fff;padding:16px;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.stat-title{font-size:14px;color:var(--gray-600);margin-bottom:8px}.stat-value{font-size:24px;font-weight:600;color:var(--primary-color)}.teacher-panel{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}.teacher-panel h2{padding:16px;margin:0;font-size:18px;color:var(--gray-800)}.teacher-panel h2,.teacher-tabs{border-bottom:1px solid var(--gray-200)}.teacher-tabs{display:flex;background-color:var(--gray-100);padding:8px}.teacher-tab-btn{flex:1;padding:8px 16px;background:transparent;border:none;font-size:14px;color:var(--gray-600);border-radius:var(--border-radius);cursor:pointer;transition:all .2s}.teacher-tab-btn.active{background-color:#fff;color:var(--primary-color);box-shadow:var(--shadow-sm)}.teacher-content{padding:16px}.teacher-form{max-width:600px;margin:16px auto;padding:16px;background-color:var(--gray-100);border-radius:var(--border-radius)}.course-list-teacher{margin-top:20px}.teacher-courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px}.teacher-course-card{background-color:#fff;border:1px solid var(--gray-200);border-radius:var(--border-radius);padding:16px;box-shadow:var(--shadow-sm)}.teacher-course-card h4{margin:0 0 8px 0;font-size:18px;color:var(--primary-color);display:flex;justify-content:space-between;align-items:center}.course-id-badge{font-size:12px;background-color:var(--gray-100);color:var(--gray-600);padding:2px 6px;border-radius:12px}.course-meta-row{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;font-size:13px;color:var(--gray-600)}.course-schedules{margin:16px 0;border-top:1px solid var(--gray-200);padding-top:12px}.course-schedules h5{margin:0 0 8px 0;font-size:14px;color:var(--gray-700);display:flex;justify-content:space-between;align-items:center}.schedule-list{display:flex;flex-direction:column;gap:8px}.schedule-item{align-items:center;padding:8px;background-color:var(--gray-50);border-radius:var(--border-radius);font-size:13px}.course-actions,.schedule-item{display:flex;justify-content:space-between}.course-actions{margin-top:16px;border-top:1px solid var(--gray-200);padding-top:16px}.breadcrumb{margin-bottom:16px;font-size:14px;color:var(--gray-600)}.breadcrumb a{color:var(--primary-color);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.student-list,.student-table{margin-top:16px}.student-table{width:100%;border-collapse:collapse;font-size:14px}.student-table td,.student-table th{padding:12px;text-align:left;border-bottom:1px solid var(--gray-200)}.student-table th{font-weight:500;color:var(--gray-700);background-color:var(--gray-100)}.empty-state.small{padding:12px;font-size:13px}textarea{width:100%;padding:12px;border:1px solid var(--gray-300);border-radius:var(--border-radius);font-size:14px;color:var(--gray-800);transition:all .2s;resize:vertical;font-family:var(--font-sans)}textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.student-content h2{margin-bottom:16px;font-size:20px;color:var(--gray-800)}.course-search{margin-bottom:16px}.course-search input{width:100%;max-width:400px;padding:12px 16px;border:1px solid var(--gray-300);border-radius:24px;background-color:#fff;font-size:14px}.course-container{display:grid;grid-template-columns:1fr 300px;gap:16px}.course-section,.enrolled-section{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);overflow:hidden}.course-section h3,.enrolled-section h3{padding:16px;margin:0;font-size:16px;color:var(--gray-800);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}.badge{background-color:var(--primary-color);color:#fff;font-size:12px;padding:2px 6px;border-radius:12px}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:16px}.course-card{background-color:#fff;border:1px solid var(--gray-200);border-radius:var(--border-radius);overflow:hidden;transition:all .2s}.course-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.course-header{padding:12px;background-color:var(--gray-100);border-bottom:1px solid var(--gray-200)}.course-title{margin:0;font-size:16px;font-weight:500;color:var(--primary-color)}.course-id{font-size:12px;color:var(--gray-500)}.course-body{padding:12px}.instructor{margin:0 0 8px 0;font-size:14px;color:var(--gray-700)}.course-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--gray-600)}.course-footer{padding:8px 12px;background-color:var(--gray-50);border-top:1px solid var(--gray-200)}.btn-enroll{width:100%;padding:8px;background-color:var(--secondary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:14px;cursor:pointer;transition:all .2s}.btn-enroll:hover{background-color:#059669}.btn-enroll:disabled{background-color:var(--gray-400);cursor:not-allowed}.course-full{opacity:.7}.enrolled-list{padding:16px}.enrolled-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--gray-200)}.enrolled-item:last-child{border-bottom:none}.enrolled-info h4{margin:0;font-size:16px;color:var(--gray-800)}.enrolled-info p{margin:4px 0 0 0;font-size:12px;color:var(--gray-600)}.btn-drop{padding:6px 12px;background-color:var(--danger-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:12px;cursor:pointer;transition:all .2s}.btn-drop:hover{background-color:#b91c1c}.empty-state{padding:32px;text-align:center;color:var(--gray-500);font-size:14px}.confirm-dialog-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-dialog{background-color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:24px;width:90%;max-width:400px}.confirm-dialog h3{margin-top:0;margin-bottom:16px;font-size:18px;color:var(--gray-800)}.dialog-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:hsla(0,0%,100%,.8);display:flex;align-items:center;justify-content:center;z-index:2000}.loading-spinner{width:40px;height:40px;border:4px solid var(--gray-200);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:768px){.course-container{grid-template-columns:1fr}.course-table td:nth-child(4),.course-table td:nth-child(5),.course-table th:nth-child(4),.course-table th:nth-child(5){display:none}}