:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#f3f4f6;color:#1f2937}#root{width:100%;min-height:100vh}a{color:inherit;text-decoration:none}a:hover{color:inherit}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:#1f2937}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb:hover{background:#a1a1a1}.admin-layout{min-height:100vh;display:flex;flex-direction:column;background:#f3f4f6}.admin-header{height:60px;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 2px 4px #0000001a;position:fixed;top:0;left:0;right:0;z-index:100}.header-left{display:flex;align-items:center;gap:16px}.sidebar-toggle{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:8px;border-radius:6px}.sidebar-toggle:hover{background:#ffffff1a}.logo{font-size:20px;font-weight:700;margin:0}.badge{background:#1d4ed8;padding:4px 10px;border-radius:4px;font-size:12px}.header-right{display:flex;align-items:center;gap:16px}.header-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;color:#374151;text-decoration:none;border-radius:6px;transition:background .2s}.header-btn:hover{background:#f3f4f6}.user-name{font-size:14px}.admin-container{display:flex;margin-top:60px;min-height:calc(100vh - 60px)}.admin-sidebar{width:220px;background:#fff;box-shadow:2px 0 4px #0000000d;transition:width .3s ease;position:fixed;top:60px;left:0;bottom:0;overflow-y:auto;display:flex;flex-direction:column}.admin-sidebar.collapsed{width:60px}.sidebar-nav{padding:16px 0}.nav-item{display:flex;align-items:center;padding:14px 20px;color:#4b5563!important;text-decoration:none;transition:all .2s;gap:12px}.nav-item:hover{background:#f3f4f6;color:#1f2937!important}.nav-item.active{background:#eff6ff;color:#2563eb!important;border-right:3px solid #2563eb}.nav-icon{font-size:18px;min-width:20px;text-align:center}.nav-label{font-size:14px}.admin-sidebar.collapsed .nav-label{display:none}.admin-main{flex:1;padding:24px;margin-left:220px;transition:margin-left .3s ease}.admin-sidebar.collapsed+.admin-main{margin-left:60px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-title{font-size:24px;color:#1f2937;margin:0;display:flex;align-items:center;gap:10px}.btn{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover{background:#4b5563}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}.btn-sm{padding:6px 12px;font-size:12px}.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.card-header{padding:16px 20px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.card-title{font-size:16px;font-weight:600;color:#1f2937;margin:0}.card-body{padding:20px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}.stat-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.stat-number{font-size:36px;font-weight:700;margin-bottom:4px}.stat-label{color:#6b7280;font-size:14px}.stat-card.blue .stat-number{color:#2563eb}.stat-card.green .stat-number{color:#16a34a}.stat-card.purple .stat-number{color:#9333ea}.stat-card.orange .stat-number{color:#ea580c}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px 20px;text-align:left;border-bottom:1px solid #e5e7eb}.table th{background:#f9fafb;font-weight:500;color:#6b7280;font-size:13px;text-transform:uppercase}.table td{color:#374151;font-size:14px}.table tr:hover{background:#f9fafb}.tag{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.tag-admin{background:#fef2f2;color:#dc2626}.tag-teacher{background:#eff6ff;color:#2563eb}.tag-student,.tag-online{background:#f0fdf4;color:#16a34a}.tag-offline{background:#f3f4f6;color:#6b7280}.tag-active{background:#fef3c7;color:#d97706}.tag-ended{background:#f3f4f6;color:#6b7280}.form-input,.form-select{width:100%;padding:10px 14px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s}.form-input:focus,.form-select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:12px;width:480px;max-width:90%;max-height:90vh;overflow-y:auto}.modal-header{padding:20px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:18px;font-weight:600;margin:0}.modal-close{background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer}.modal-body{padding:20px}.modal-footer{padding:16px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:12px}.empty-state{text-align:center;padding:60px 20px;color:#9ca3af}.error-msg{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:20px}.success-msg{background:#f0fdf4;color:#16a34a;padding:12px 16px;border-radius:8px;font-size:14px;margin-bottom:20px}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.admin-sidebar{width:60px}.admin-sidebar .nav-label{display:none}.admin-main{margin-left:60px}.stats-grid{grid-template-columns:1fr}}.frontend-section{margin-top:auto;padding:16px;border-top:1px solid #e5e7eb}.section-title{font-size:12px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;padding:0 4px}.frontend-entries{display:flex;flex-direction:column;gap:8px}.frontend-entry{display:flex;align-items:center;gap:12px;padding:12px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:10px;text-decoration:none;transition:all .2s;border:1px solid #bae6fd}.frontend-entry:hover{transform:translate(4px);box-shadow:0 4px 12px #3b82f626;border-color:#7dd3fc}.entry-icon{font-size:24px}.entry-info{display:flex;flex-direction:column}.entry-label{font-size:14px;font-weight:600;color:#0369a1}.entry-desc{font-size:11px;color:#0284c7}.teacher-layout{min-height:100vh;display:flex;flex-direction:column;background:#f5f7fa}.teacher-header{display:flex;align-items:center;justify-content:center;padding:0 24px;height:52px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 3px #00000014;position:sticky;top:0;z-index:100;gap:8px}.header-nav{display:flex;align-items:center;gap:2px}.nav-item{display:flex;align-items:center;gap:5px;padding:7px 13px;color:#64748b;border-radius:8px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;white-space:nowrap}.nav-item:hover{background:#f1f5f9;color:#1e3a5f}.nav-item.active{background:#eff6ff;color:#2563eb;font-weight:600}.nav-item.nav-brand{font-weight:700;color:#1e3a5f;font-size:15px;margin-right:4px}.nav-icon{font-size:15px}.header-user-dropdown{position:relative}.user-trigger{cursor:pointer;border:none;background:none}.dropdown-arrow{font-size:12px;color:#94a3b8;transition:transform .2s}.dropdown-arrow.open{transform:rotate(180deg)}.user-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border-radius:10px;box-shadow:0 4px 24px #0000001f;padding:6px;z-index:200;animation:dropdownFadeIn .15s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.dropdown-user-info{padding:10px 14px;display:flex;flex-direction:column;gap:2px}.dropdown-user-name{font-size:14px;font-weight:600;color:#1e3a5f}.dropdown-user-role{font-size:12px;color:#94a3b8}.dropdown-item{display:block;width:100%;padding:10px 14px;font-size:14px;color:#475569;text-decoration:none;border:none;background:none;border-radius:6px;cursor:pointer;text-align:left;transition:all .15s}.dropdown-item:hover{background:#f1f5f9;color:#1e3a5f}.dropdown-item.logout:hover{background:#fef2f2;color:#dc2626}.dropdown-divider{height:1px;background:#e2e8f0;margin:4px 8px}.teacher-main{flex:1;padding:24px;max-width:1400px;margin:0 auto;width:100%}@media(max-width:1024px){.header-nav{display:none}.teacher-header{padding:0 16px}}@media(max-width:768px){.teacher-main{padding:16px}.brand-text{font-size:16px}}.student-layout{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(135deg,#f5f7fa,#e4e8ee)}.student-header{display:flex;align-items:center;justify-content:center;padding:0 24px;height:64px;background:linear-gradient(135deg,#4facfe,#00f2fe);box-shadow:0 2px 12px #4facfe4d;position:sticky;top:0;z-index:100}.header-inner{max-width:1400px;width:100%;display:flex;align-items:center;justify-content:space-between}.header-brand{display:flex;align-items:center;gap:10px}.brand-icon{font-size:28px}.brand-text{font-size:20px;font-weight:600;color:#fff}.header-nav{display:flex;align-items:center;gap:8px}.nav-item{display:flex;align-items:center;gap:6px;padding:10px 20px;color:#ffffffd9;border-radius:25px;font-size:14px;font-weight:500;transition:all .3s}.nav-item:hover{background:#fff3;color:#fff}.nav-item.active{background:#fff;color:#4facfe;box-shadow:0 2px 8px #0000001a}.header-user{display:flex;align-items:center;gap:12px}.user-avatar{width:40px;height:40px;border-radius:50%;background:#fff;color:#4facfe;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}.user-name{font-size:14px;font-weight:500;color:#fff}.user-class{font-size:12px;color:#fffc}.btn-logout{padding:8px 16px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:20px;font-size:13px;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#ffffff4d}.student-main{flex:1;overflow-y:auto;padding:24px;max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box}@media(max-width:768px){.student-header{padding:0 16px}.header-nav{display:none}.brand-text{font-size:16px}.student-main{padding:16px}.user-info{display:none}}.parent-layout{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.parent-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:0 24px;height:64px;display:flex;align-items:center;gap:32px;box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:100}.header-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-icon{font-size:24px}.brand-text{font-size:18px;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-nav{display:flex;gap:8px;flex:1;justify-content:center}.nav-item{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;text-decoration:none;color:#666;font-size:14px;transition:all .2s}.nav-item:hover{background:#667eea1a;color:#667eea}.nav-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.nav-icon{font-size:16px}.nav-label{font-weight:500}.header-user{display:flex;align-items:center;gap:12px;flex-shrink:0}.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px}.user-info{display:flex;flex-direction:column}.user-name{font-size:14px;font-weight:500;color:#333}.user-role{font-size:12px;color:#667eea}.btn-logout{padding:6px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#666;font-size:13px;cursor:pointer;transition:all .2s}.btn-logout:hover{border-color:#667eea;color:#667eea}.parent-main{min-height:calc(100vh - 64px);padding:24px}@media(max-width:1024px){.header-nav{gap:4px}.nav-item{padding:8px 12px}.nav-label{display:none}}@media(max-width:768px){.parent-header{padding:0 16px;gap:16px}.brand-text{display:none}.header-nav{overflow-x:auto}.nav-item{padding:8px}.user-info{display:none}}.home-page.home-simple{min-height:100vh;background:#f8fafc}.home-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 3px #00000014;padding:12px 0;position:sticky;top:0;z-index:100}.header-container{max-width:1400px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:#1e3a5f}.logo-icon{font-size:24px}.header-actions{display:flex;align-items:center;gap:12px}.welcome-text{color:#64748b;font-size:14px}.btn{padding:8px 18px;border-radius:6px;font-weight:500;cursor:pointer;text-decoration:none;border:none;font-size:14px;transition:all .2s}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}.btn-outline{background:transparent;color:#2563eb;border:1px solid #2563eb}.btn-outline:hover{background:#2563eb;color:#fff}.hero-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#3b82f6,#06b6d4 35%,#f59e0b);color:#fff;text-align:center;padding:100px 32px 80px;min-height:480px;display:flex;align-items:center;justify-content:center}.hero-bg{position:absolute;inset:0;pointer-events:none}.hero-mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 70%)}.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);animation:glow-drift 10s ease-in-out infinite}.hero-glow.g1{width:450px;height:450px;background:radial-gradient(circle,rgba(251,191,36,.4) 0%,transparent 70%);top:-120px;right:-60px}.hero-glow.g2{width:400px;height:400px;background:radial-gradient(circle,rgba(56,189,248,.35) 0%,transparent 70%);bottom:-100px;left:-80px;animation-delay:-3s}.hero-glow.g3{width:350px;height:350px;background:radial-gradient(circle,rgba(251,146,60,.3) 0%,transparent 70%);top:30%;left:50%;animation-delay:-6s}@keyframes glow-drift{0%,to{transform:translate(0) scale(1);opacity:.8}33%{transform:translate(25px,-15px) scale(1.1);opacity:1}66%{transform:translate(-15px,12px) scale(.9);opacity:.7}}.hero-particles{position:absolute;inset:0}.particle{position:absolute;border-radius:50%;background:#fff6;animation:float-up 8s ease-in-out infinite}.particle.p1{width:5px;height:5px;left:12%;top:80%;animation-duration:7s}.particle.p2{width:4px;height:4px;left:32%;top:70%;animation-duration:9s;animation-delay:-2s}.particle.p3{width:6px;height:6px;left:55%;top:85%;animation-duration:6s;animation-delay:-4s}.particle.p4{width:4px;height:4px;left:78%;top:75%;animation-duration:8s;animation-delay:-1s}.particle.p5{width:5px;height:5px;left:22%;top:90%;animation-duration:10s;animation-delay:-5s}.particle.p6{width:3px;height:3px;left:88%;top:65%;animation-duration:7s;animation-delay:-3s}@keyframes float-up{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translateY(-180px) scale(.5);opacity:0}}.hero-content{position:relative;z-index:2;max-width:960px;margin:0 auto}.hero-badge-pill{display:inline-block;background:#fff3;border:1px solid rgba(255,255,255,.35);padding:10px 30px;border-radius:24px;font-size:17px;font-weight:500;margin-bottom:28px;letter-spacing:2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-title{font-size:88px;font-weight:800;margin:0;letter-spacing:10px;background:linear-gradient(135deg,#fff,#fde68a,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;filter:drop-shadow(0 2px 12px rgba(251,191,36,.3))}.hero-subtitle{font-size:36px;font-weight:300;margin:18px 0 0;background:linear-gradient(90deg,#e0f2fe,#fff,#fef3c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:10px}.hero-divider{width:80px;height:3px;background:linear-gradient(90deg,#38bdf8,#fbbf24);margin:28px auto;border-radius:2px}.hero-slogan{font-size:26px;margin:0;background:linear-gradient(90deg,#bae6fd,#fff,#fed7aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:400;letter-spacing:4px}.hero-desc{font-size:18px;margin:20px 0 0;color:#ffffffb3;line-height:2;letter-spacing:1px}.btn-hero{display:inline-block;padding:14px 42px;margin-top:20px;background:#fff;color:#2563eb;font-size:16px;font-weight:600;border-radius:10px;text-decoration:none;box-shadow:0 4px 20px #0000001f;transition:all .3s;letter-spacing:1px}.btn-hero:hover{transform:translateY(-3px);box-shadow:0 8px 30px #0000002e}.features-section{padding:50px 0 40px;background:#fff}.section-inner{max-width:1400px;margin:0 auto;padding:0 32px}.section-title{font-size:28px;font-weight:700;color:#1e3a5f;text-align:center;margin:0 0 8px}.section-desc{font-size:16px;color:#64748b;text-align:center;margin:0 0 32px}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.feature-card{background:#f8fafc;border-radius:16px;padding:28px 24px;transition:all .25s;border:1px solid #e2e8f0}.feature-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000014;border-color:#bfdbfe;background:#eff6ff}.feature-icon{font-size:36px;margin-bottom:12px}.feature-card h3{font-size:18px;font-weight:600;color:#1e3a5f;margin:0 0 8px}.feature-card p{font-size:14px;color:#64748b;line-height:1.7;margin:0}.stats-section{max-width:1400px;margin:0 auto;padding:48px 32px}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.stat-card{background:#fff;border-radius:14px;padding:24px 16px;text-align:center;box-shadow:0 2px 8px #0000000f;transition:transform .2s}.stat-card:hover{transform:translateY(-2px)}.stat-card.highlight{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.stat-card.highlight .stat-txt{color:#ffffffe6}.stat-num{display:block;font-size:32px;font-weight:700;color:#1e3a5f}.stat-card.highlight .stat-num{color:#fff}.stat-txt{display:block;font-size:13px;color:#64748b;margin-top:4px}.data-section{max-width:1400px;margin:0 auto 24px;padding:0 32px}.data-section h2{font-size:18px;font-weight:600;color:#1e3a5f;margin:0 0 14px}.sessions-list{display:flex;flex-direction:column;gap:10px}.session-item{background:#fff;border-radius:12px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px #0000000d}.session-main{flex:1}.session-name{font-size:15px;font-weight:600;color:#1e3a5f}.session-info{font-size:13px;color:#64748b;margin-left:12px}.session-right{display:flex;align-items:center;gap:12px}.status-tag{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:500}.status-tag.green{background:#dcfce7;color:#16a34a}.status-tag.blue{background:#dbeafe;color:#2563eb}.status-tag.gray{background:#f1f5f9;color:#64748b}.time-text{font-size:12px;color:#94a3b8}.classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.class-item{background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 1px 4px #0000000d}.class-item .class-name{font-size:15px;font-weight:600;color:#1e3a5f;margin-bottom:6px}.class-item .class-info{font-size:12px;color:#64748b}.empty-text,.loading-text{text-align:center;padding:40px;color:#94a3b8;font-size:14px}.home-footer-simple{background:#1e293b;color:#94a3b8;text-align:center;padding:30px 20px;margin-top:20px}.home-footer-simple p{margin:0;font-size:13px}.home-footer-simple .footer-brand{color:#cbd5e1;font-size:15px;font-weight:500;margin-bottom:8px!important}.test-hint{margin-top:10px!important;font-size:12px!important;opacity:.7}@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr)}.hero-title{font-size:48px;letter-spacing:4px}.hero-subtitle{font-size:22px;letter-spacing:5px}.hero-section{padding:60px 20px 50px}.features-grid{grid-template-columns:1fr}.session-item{flex-direction:column;align-items:flex-start;gap:10px}.session-right{width:100%;justify-content:space-between}.session-info{margin-left:0;display:block;margin-top:4px}}@media(max-width:480px){.stats-grid{grid-template-columns:repeat(2,1fr)}.hero-title{font-size:36px;letter-spacing:3px}.stat-num{font-size:22px}}.login-page{min-height:100vh;background:linear-gradient(135deg,#2563eb,#7c3aed,#f97316);display:flex;align-items:center;justify-content:center;padding:20px}.login-container{width:100%;max-width:420px}.back-home{display:inline-block;color:#fff;text-decoration:none;margin-bottom:20px;opacity:.9;font-size:14px;transition:all .2s}.back-home:hover{opacity:1;transform:translate(-4px)}.login-box{background:#fff;border-radius:20px;padding:40px;box-shadow:0 25px 80px #00000040}.login-header{text-align:center;margin-bottom:32px}.login-icon{font-size:56px;display:block;margin-bottom:16px}.login-header h1{font-size:28px;color:#1f2937;margin:0 0 8px;font-weight:700}.login-subtitle{color:#6b7280;font-size:15px;margin:0}.form-group{margin-bottom:20px}.form-label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:14px}.form-input{width:100%;padding:14px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:15px;transition:all .2s;box-sizing:border-box}.form-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.form-input:disabled{background:#f9fafb;cursor:not-allowed}.password-wrapper{position:relative}.password-wrapper .form-input{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:4px;opacity:.6;transition:opacity .2s}.password-toggle:hover{opacity:1}.btn-login{width:100%;padding:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #2563eb4d}.btn-login:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #2563eb66}.btn-login:disabled{opacity:.7;cursor:not-allowed;transform:none}.error-msg{background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:20px;text-align:center;border:1px solid #fecaca}.login-tips{margin-top:28px;padding:16px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;border:1px solid #e2e8f0}.tips-title{font-size:12px;color:#94a3b8;text-align:center;margin-bottom:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px}.tips-list{display:flex;flex-direction:column;gap:8px}.tip-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border-radius:8px;font-size:13px}.tip-role{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;color:#fff}.tip-role.admin{background:#2563eb}.tip-role.teacher{background:#16a34a}.tip-role.student{background:#9333ea}.tip-account{color:#64748b;font-family:Monaco,Consolas,monospace;font-size:12px}.login-footer{margin-top:24px;text-align:center;font-size:14px;color:#6b7280}.register-link{color:#2563eb;text-decoration:none;font-weight:600;margin-left:6px;transition:color .2s}.register-link:hover{color:#1d4ed8;text-decoration:underline}.register-page{min-height:100vh;background:linear-gradient(135deg,#3b82f6,#06b6d4,#f59e0b);display:flex;align-items:center;justify-content:center;padding:20px}.register-container{width:100%;max-width:460px}.register-page .back-home{display:inline-block;color:#fff;text-decoration:none;margin-bottom:20px;opacity:.9;font-size:14px;transition:all .2s}.register-page .back-home:hover{opacity:1;transform:translate(-4px)}.register-box{background:#fff;border-radius:20px;padding:36px 40px;box-shadow:0 25px 80px #00000040}.register-header{text-align:center;margin-bottom:28px}.register-icon{font-size:48px;display:block;margin-bottom:12px}.register-header h1{font-size:26px;color:#1f2937;margin:0 0 8px;font-weight:700}.register-subtitle{color:#6b7280;font-size:14px;margin:0}.register-page .form-group{margin-bottom:16px}.register-page .form-label{display:block;margin-bottom:6px;font-weight:500;color:#374151;font-size:14px}.register-page .form-input{width:100%;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;transition:all .2s;box-sizing:border-box}.register-page .form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.register-page .form-input:disabled{background:#f9fafb;cursor:not-allowed}.register-page select.form-input{appearance:auto;cursor:pointer}.register-page .error-msg{background:#fef2f2;color:#dc2626;padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;text-align:center;border:1px solid #fecaca}.btn-register{width:100%;padding:13px;background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #3b82f64d;margin-top:4px}.btn-register:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}.btn-register:disabled{opacity:.7;cursor:not-allowed;transform:none}.register-footer{margin-top:20px;text-align:center;font-size:14px;color:#6b7280}.login-link{color:#3b82f6;text-decoration:none;font-weight:600;margin-left:6px;transition:color .2s}.login-link:hover{color:#2563eb;text-decoration:underline}.success-content{text-align:center;padding:24px 0}.success-icon{font-size:56px;display:block;margin-bottom:16px}.success-content h2{font-size:24px;color:#1f2937;margin:0 0 8px}.success-content p{color:#6b7280;font-size:15px;margin:0 0 24px}.btn-go-login{padding:12px 36px;background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #3b82f64d}.btn-go-login:hover{transform:translateY(-2px);box-shadow:0 8px 25px #3b82f666}:root{--bg-primary: #ffffff;--bg-secondary: #f5f7fa;--bg-tertiary: #f3f4f6;--bg-hover: #e5e7eb;--bg-active: #eef2ff;--text-primary: #1f2937;--text-secondary: #6b7280;--text-tertiary: #9ca3af;--text-inverse: #ffffff;--border-color: #e5e7eb;--border-light: #f3f4f6;--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #eef2ff;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--info: #3b82f6;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 6px rgba(0,0,0,.08);--shadow-lg: 0 10px 15px rgba(0,0,0,.1)}:root[data-theme=dark]{--bg-primary: #1f2937;--bg-secondary: #111827;--bg-tertiary: #374151;--bg-hover: #4b5563;--bg-active: #312e81;--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-tertiary: #9ca3af;--text-inverse: #1f2937;--border-color: #374151;--border-light: #4b5563;--primary: #818cf8;--primary-hover: #6366f1;--primary-light: #312e81;--shadow-sm: 0 1px 2px rgba(0,0,0,.3);--shadow-md: 0 4px 6px rgba(0,0,0,.4);--shadow-lg: 0 10px 15px rgba(0,0,0,.5)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.5;transition:background-color .3s,color .3s}a{text-decoration:none;color:inherit}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}:root[data-theme=dark] body{background-color:var(--bg-secondary);color:var(--text-primary)}:root[data-theme=dark] ::-webkit-scrollbar-track{background:#374151}:root[data-theme=dark] ::-webkit-scrollbar-thumb{background:#6b7280}:root[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:768px){html{font-size:14px}*{touch-action:manipulation}input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],textarea,select{font-size:16px!important}button,.btn{min-height:44px;min-width:44px}a{padding:8px 0}}@media(min-width:769px)and (max-width:1024px){html{font-size:15px}}@media(min-width:1280px){html{font-size:16px}}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:block!important}.container{padding-left:16px;padding-right:16px}.card{border-radius:12px;margin-bottom:12px}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.form-group{margin-bottom:16px}.form-group input,.form-group select,.form-group textarea{width:100%;max-width:100%}.modal{width:100%!important;max-width:100%!important;margin:0;border-radius:0;height:100%}.fixed-bottom{position:fixed;bottom:0;left:0;right:0;padding:16px;background:var(--bg-primary, white);box-shadow:0 -2px 10px #0000001a;z-index:100}.has-fixed-bottom{padding-bottom:80px}}@media(min-width:769px){.mobile-only{display:none!important}.desktop-only{display:block!important}}@media(max-height:500px)and (orientation:landscape){.mobile-header{position:sticky;top:0;z-index:100}}@media(hover:none){button:active,.btn:active,a:active{opacity:.7;transform:scale(.98)}button:hover,.btn:hover{transform:none}}@supports (padding-bottom: env(safe-area-inset-bottom)){.fixed-bottom{padding-bottom:calc(16px + env(safe-area-inset-bottom))}body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@media(max-width:768px){:root[data-theme=dark]{--text-primary: #e5e7eb;--bg-secondary: #0f172a}}@media print{.no-print,.sidebar,.header,.nav,button,.btn{display:none!important}body{background:#fff!important;color:#000!important}.print-only{display:block!important}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}