:root{
  --el-primary:#635bff;--el-primary-2:#8b5cf6;--el-primary-soft:#eeecff;
  --el-bg:#f6f7fb;--el-surface:#fff;--el-surface-2:#f9fafc;--el-text:#18212f;
  --el-muted:#6b7280;--el-border:#e7e9f0;--el-success:#16a34a;--el-danger:#dc2626;
  --el-warning:#d97706;--el-shadow:0 18px 50px rgba(31,35,53,.08);--el-radius:20px;
  --el-sidebar:244px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0!important;min-height:100vh!important;background:var(--el-bg)!important;color:var(--el-text)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;display:block!important;align-items:initial!important;justify-content:initial!important}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* Public/auth */
.el-public{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:linear-gradient(135deg,#f7f7ff 0%,#eef5ff 100%)}
.el-hero{position:relative;overflow:hidden;padding:clamp(38px,7vw,92px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(139,92,246,.25),transparent 34%),linear-gradient(145deg,#4f46e5,#7c3aed);color:#fff}
.el-brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;letter-spacing:-.5px}
.el-brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font-size:22px}
.el-hero h1{font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-3px;margin:64px 0 22px;max-width:760px}
.el-hero p{max-width:650px;font-size:17px;line-height:1.8;color:rgba(255,255,255,.82);margin:0}
.el-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px;max-width:760px}
.el-feature{padding:16px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.el-feature strong{display:block;font-size:14px}.el-feature span{font-size:12px;color:rgba(255,255,255,.72)}
.el-auth-panel{display:flex;align-items:center;justify-content:center;padding:36px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px)}
.el-auth-card{width:min(100%,500px);padding:38px;border-radius:28px;background:#fff;border:1px solid rgba(231,233,240,.9);box-shadow:var(--el-shadow)}
.el-auth-card h2{font-size:32px;letter-spacing:-1px;margin:0 0 8px}.el-auth-card>.lead{color:var(--el-muted);margin:0 0 30px;line-height:1.65}
.el-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.el-form-grid .full{grid-column:1/-1}
.el-field{margin-bottom:16px}.el-field label,.input-group label,.form-group label{display:block;color:#384152;font-size:13px;font-weight:650;margin-bottom:8px}
.el-field input,.el-field select,.input-group input,.input-group select,.form-group input,.form-group select,.form-group textarea,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;min-height:48px;padding:12px 14px!important;border:1px solid var(--el-border)!important;border-radius:13px!important;background:#fff!important;color:var(--el-text)!important;outline:none!important;transition:.2s!important
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--el-primary)!important;box-shadow:0 0 0 4px rgba(99,91,255,.10)!important}
.el-btn,.auth-btn,.btn,.primary-btn,.save-btn,.assign-btn,#openModal,#saveTeacher,#createButton,#saveModule,#saveLesson,#saveQuestion{
  border:0!important;border-radius:13px!important;min-height:46px;padding:12px 18px!important;font-weight:700!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:.2s!important
}
.el-btn-primary,.auth-btn,.btn.primary,.primary-btn,.save-btn,.assign-btn,#openModal,#saveTeacher,#createButton,#saveModule,#saveLesson,#saveQuestion{background:linear-gradient(135deg,var(--el-primary),var(--el-primary-2))!important;color:#fff!important;box-shadow:0 9px 22px rgba(99,91,255,.20)!important}
.el-btn:hover,.auth-btn:hover,.btn:hover,.primary-btn:hover,.save-btn:hover{transform:translateY(-1px)}
.el-btn-secondary,.btn.secondary,.back-btn,.reset-btn{background:var(--el-primary-soft)!important;color:var(--el-primary)!important;border:0!important;border-radius:13px!important;padding:12px 18px!important;font-weight:700!important;text-decoration:none!important}
.el-auth-actions{display:flex;gap:12px;margin-top:8px}.el-auth-actions>*{flex:1}
.el-auth-note{margin-top:22px;padding:14px 16px;border-radius:14px;background:#f7f7ff;color:#5d5a7b;font-size:12px;line-height:1.6}
.el-auth-footer{text-align:center;margin-top:22px;color:var(--el-muted);font-size:13px}.el-auth-footer a{color:var(--el-primary);font-weight:700;text-decoration:none}
#message.error,.error{background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important;padding:12px 14px!important;border-radius:13px!important}
#message.success,.success{background:#f0fdf4!important;color:#15803d!important;border:1px solid #bbf7d0!important;padding:12px 14px!important;border-radius:13px!important}

/* Application shell */
.el-app-shell{min-height:100vh;display:grid;grid-template-columns:var(--el-sidebar) minmax(0,1fr)}
.el-sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--el-sidebar);padding:22px 16px;background:#111827;color:#e5e7eb;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06)}
.el-sidebar-brand{display:flex;align-items:center;gap:11px;padding:5px 9px 22px;font-weight:800;font-size:18px;color:#fff}.el-sidebar-brand .el-brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--el-primary),var(--el-primary-2));border:0}
.el-role-chip{margin:0 8px 18px;padding:9px 11px;border-radius:11px;background:rgba(99,91,255,.14);color:#c7d2fe;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.el-nav{display:grid;gap:5px}.el-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;text-decoration:none;color:#9ca3af;font-size:13px;font-weight:600;transition:.18s}.el-nav a:hover,.el-nav a.active{background:rgba(255,255,255,.08);color:#fff}.el-nav-icon{width:20px;text-align:center;opacity:.95}
.el-sidebar-bottom{margin-top:auto}.el-sidebar-bottom a{color:#fca5a5}
.el-app-main{grid-column:2;min-width:0;padding:24px clamp(18px,3vw,42px) 42px}
.el-topbar{height:66px;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.el-topbar-title{display:flex;align-items:center;gap:12px}.el-menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--el-border);background:#fff;border-radius:12px}.el-page-kicker{font-size:12px;color:var(--el-muted);text-transform:uppercase;letter-spacing:.09em;font-weight:700}.el-page-title{font-size:23px;font-weight:800;letter-spacing:-.6px}.el-topbar-actions{display:flex;align-items:center;gap:10px}.el-user-pill{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--el-border);border-radius:14px;padding:7px 11px}.el-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#ddd6fe,#c7d2fe);color:#4f46e5;display:grid;place-items:center;font-weight:800}.el-user-pill small{display:block;color:var(--el-muted);font-size:10px}.el-user-pill strong{display:block;font-size:12px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-page-content{max-width:1420px;margin:0 auto}.el-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 22px}.el-page-header h1{font-size:clamp(26px,3vw,36px);letter-spacing:-1.2px;margin:0;color:var(--el-text)!important}.el-page-header p{margin:7px 0 0;color:var(--el-muted);font-size:13px}

/* Generic cards/tables */
.el-grid{display:grid;gap:18px}.el-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.el-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.el-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.el-card,.card,.form-card,.table-card,.settings-card,.summary-card,.filter-card,.class-card{background:var(--el-surface)!important;border:1px solid var(--el-border)!important;border-radius:var(--el-radius)!important;box-shadow:0 8px 30px rgba(31,35,53,.05)!important}
.el-card{padding:22px}.el-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.el-card-title h3{margin:0;font-size:16px}.el-card-title span{font-size:12px;color:var(--el-muted)}
.el-stat{padding:20px;position:relative;overflow:hidden}.el-stat::after{content:'';position:absolute;width:74px;height:74px;border-radius:50%;right:-22px;top:-22px;background:var(--el-primary-soft)}.el-stat-label{font-size:12px;color:var(--el-muted);font-weight:600}.el-stat-value{font-size:32px;font-weight:800;letter-spacing:-1px;margin-top:8px}.el-stat-meta{font-size:11px;color:var(--el-muted);margin-top:7px}.el-stat-icon{width:38px;height:38px;border-radius:12px;background:var(--el-primary-soft);color:var(--el-primary);display:grid;place-items:center;font-size:18px;margin-bottom:16px}
.el-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.el-quick{padding:16px;border:1px solid var(--el-border);border-radius:16px;text-decoration:none;background:#fff;transition:.18s}.el-quick:hover{border-color:#c7c4ff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,35,53,.06)}.el-quick .icon{width:38px;height:38px;border-radius:12px;background:var(--el-primary-soft);display:grid;place-items:center;margin-bottom:12px}.el-quick strong{display:block;font-size:13px}.el-quick span{display:block;font-size:11px;color:var(--el-muted);margin-top:4px;line-height:1.5}
.el-progress{height:9px;border-radius:99px;background:#eceef4;overflow:hidden}.el-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--el-primary),var(--el-primary-2))}
.el-chart{height:190px;display:flex;align-items:flex-end;gap:11px;padding-top:24px}.el-bar{flex:1;min-width:12px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--el-primary),#a78bfa);opacity:.88}.el-chart-labels{display:flex;justify-content:space-between;color:var(--el-muted);font-size:10px;margin-top:8px}
.table-wrapper{overflow:auto!important;border-radius:16px}.table-card{overflow:hidden!important}table{width:100%!important;border-collapse:collapse!important;background:#fff!important}thead,th{background:#f8f8fc!important}th{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:#667085!important;font-weight:700!important;padding:13px 15px!important;text-align:left!important;white-space:nowrap!important}td{padding:14px 15px!important;border-top:1px solid #eff0f4!important;font-size:12px!important;vertical-align:middle!important}tbody tr:hover{background:#fafaff!important}
.badge,.status{display:inline-flex!important;align-items:center!important;padding:5px 9px!important;border-radius:999px!important;font-size:10px!important;font-weight:700!important}.badge-active,.status.active,.badge-passing{background:#ecfdf3!important;color:#15803d!important}.badge-inactive,.status.inactive{background:#f3f4f6!important;color:#6b7280!important}.badge-failing{background:#fff1f2!important;color:#be123c!important}
.empty,.loading,.message-box{padding:34px!important;border-radius:16px!important;background:#fafaff!important;color:var(--el-muted)!important;text-align:center!important;border:1px dashed #d9dbe5!important}

/* Normalize old page wrappers */
.phone,.container,.page,.reports-container,.settings-container{width:100%!important;max-width:none!important;min-height:auto!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.phone>.header,.container>.header,.page>.header{background:transparent!important;color:var(--el-text)!important;border-radius:0!important;padding:0!important;margin:0 0 22px!important}.phone>.header h1,.phone>.header h2,.container>.header h1,.container>.header h2,.page>.header h1,.page>.header h2{color:var(--el-text)!important}.phone>.header p,.container>.header p,.page>.header p{color:var(--el-muted)!important}
.grid,.stats,.summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}.grid .card,.stats .box,.summary-card{padding:20px!important;text-align:left!important;background:#fff!important;border:1px solid var(--el-border)!important;border-radius:18px!important;box-shadow:0 8px 28px rgba(31,35,53,.05)!important}.grid .card h1,.stats .box h1,.summary-card strong{color:var(--el-text)!important;font-size:29px!important}.grid .card p,.stats .box p{color:var(--el-muted)!important;font-size:12px!important}.menu,.actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-top:18px!important}.menu a,.action{background:#fff!important;color:var(--el-text)!important;border:1px solid var(--el-border)!important;border-radius:15px!important;padding:15px!important;text-decoration:none!important;text-align:left!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important}.menu a:hover,.action:hover{background:var(--el-primary-soft)!important;color:var(--el-primary)!important;border-color:#cbc8ff!important}.menu .logout,.action[href*="index"],.action[href*="login"]{background:#fff1f2!important;color:#be123c!important;border-color:#fecdd3!important}
.bottom,.bottom-nav{position:static!important;transform:none!important;max-width:none!important;width:100%!important;margin-top:18px!important;border-radius:16px!important;box-shadow:none!important;border:1px solid var(--el-border)!important;background:#fff!important;padding:10px!important}
.form-card,.table-card,.settings-card,.filter-card{padding:22px!important;margin:0 0 18px!important}.form-grid{gap:14px!important}.reports-header,.settings-header{margin:0 0 22px!important}.reports-header h1,.settings-header h1{color:var(--el-text)!important;font-size:30px!important}

/* Teacher/student dynamic content */
#teacherList,#moduleList,#lessonList,#modulesContainer,#progressContainer{gap:16px!important}.teacher-card,.module-card,.lesson-card,.progress-card{background:#fff!important;border:1px solid var(--el-border)!important;border-radius:18px!important;box-shadow:0 8px 28px rgba(31,35,53,.05)!important;padding:19px!important}.teacher-actions,.module-actions,.actions{gap:9px!important}.teacher-actions button,.module-actions button,.actions button,.edit-btn,.delete-btn{border:0!important;border-radius:10px!important;padding:9px 12px!important;font-size:11px!important;font-weight:700!important}.edit-btn{background:var(--el-primary-soft)!important;color:var(--el-primary)!important}.delete-btn{background:#fff1f2!important;color:#be123c!important}
.modal{backdrop-filter:blur(8px)}.modal-content{border-radius:22px!important;border:1px solid var(--el-border)!important;box-shadow:0 24px 70px rgba(0,0,0,.18)!important}

/* Landing decorative visual */
.el-visual{position:relative;margin-top:48px;max-width:720px}.el-visual-card{background:rgba(255,255,255,.94);color:var(--el-text);border-radius:25px;padding:18px;box-shadow:0 24px 70px rgba(21,16,72,.22);display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.el-mini-panel{background:#f8f8ff;border-radius:17px;padding:16px}.el-mini-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.el-mini-dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--el-primary),var(--el-primary-2))}.el-mini-lines{display:grid;gap:8px}.el-mini-line{height:9px;border-radius:8px;background:#e6e8f0}.el-mini-line:nth-child(2){width:75%}.el-mini-line:nth-child(3){width:55%}.el-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}.el-mini-stat{padding:13px;border-radius:14px;background:#f3f2ff}.el-mini-stat b{display:block;font-size:20px}.el-mini-stat small{color:var(--el-muted);font-size:9px}

/* Responsive */
@media(max-width:1100px){.el-grid-4,.grid,.stats,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.el-quick-grid,.menu,.actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.filter-card{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:900px){
  .el-public{grid-template-columns:1fr}.el-hero{min-height:44vh;padding:34px}.el-hero h1{font-size:42px;margin:36px 0 16px;letter-spacing:-2px}.el-feature-row{grid-template-columns:1fr 1fr}.el-auth-panel{padding:22px}.el-auth-card{padding:27px}
  .el-app-shell{display:block}.el-sidebar{transform:translateX(-102%);transition:.22s;box-shadow:0 20px 50px rgba(0,0,0,.2)}body.el-nav-open .el-sidebar{transform:translateX(0)}.el-app-main{padding:15px 16px 30px}.el-menu-toggle{display:grid;place-items:center}.el-topbar{height:58px;margin-bottom:16px}.el-user-pill small{display:none}.el-user-pill strong{max-width:100px}.el-page-content{max-width:none}
}
@media(max-width:640px){
  .el-hero{min-height:38vh}.el-hero h1{font-size:36px}.el-hero p{font-size:14px}.el-feature-row{grid-template-columns:1fr}.el-visual{display:none}.el-auth-panel{padding:14px}.el-auth-card{padding:23px 19px;border-radius:22px}.el-form-grid{grid-template-columns:1fr}.el-form-grid .full{grid-column:auto}.el-auth-actions{flex-direction:column}
  .el-grid-4,.el-grid-3,.el-grid-2,.grid,.stats,.summary-grid,.el-quick-grid,.menu,.actions,.form-grid,.filter-card{grid-template-columns:1fr!important}.el-card,.card,.form-card,.table-card,.settings-card,.summary-card,.filter-card,.class-card{border-radius:16px!important}.el-page-header{flex-direction:column}.el-page-header h1{font-size:27px}.el-topbar-actions .el-user-pill{padding:5px 7px}.el-user-pill strong{display:none}.el-app-main{padding:12px 12px 24px}.reports-header,.settings-header{align-items:flex-start!important;gap:12px!important;flex-direction:column!important}.reports-container,.settings-container{width:100%!important}
}


/* EqualLearn visual theme additions */
.el-brand-logo{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 8px 22px rgba(76,69,230,.28)}
.el-sidebar-brand .el-brand-logo{width:38px;height:38px;border-radius:12px;box-shadow:0 8px 18px rgba(99,91,255,.28)}
.el-theme-toggle{width:42px;height:42px;border-radius:13px;border:1px solid var(--el-border);background:var(--el-surface);color:var(--el-text);display:grid;place-items:center;font-size:18px;box-shadow:0 8px 22px rgba(31,35,53,.06)}
.el-theme-fab{position:fixed;z-index:80;right:18px;top:18px}
.el-dashboard::before{content:'';position:fixed;z-index:-1;inset:0;background:radial-gradient(circle at 88% 8%,rgba(99,91,255,.11),transparent 27%),radial-gradient(circle at 68% 94%,rgba(14,165,233,.08),transparent 30%);pointer-events:none}
.el-stat:nth-child(1) .el-stat-icon{background:#eef2ff;color:#4f46e5}.el-stat:nth-child(2) .el-stat-icon{background:#ecfeff;color:#0891b2}.el-stat:nth-child(3) .el-stat-icon{background:#f5f3ff;color:#7c3aed}.el-stat:nth-child(4) .el-stat-icon{background:#fff7ed;color:#ea580c}

body[data-theme="dark"]{
  --el-bg:#0b1020;--el-surface:#11182b;--el-surface-2:#151d32;--el-text:#f4f7ff;--el-muted:#9aa7bd;--el-border:#25314a;--el-primary-soft:#211f4b;--el-shadow:0 18px 50px rgba(0,0,0,.26);
  background:var(--el-bg)!important;color:var(--el-text)!important;
}
body[data-theme="dark"] .el-public{background:linear-gradient(135deg,#070b18 0%,#111936 100%)}
body[data-theme="dark"] .el-auth-panel{background:rgba(8,12,27,.72)}
body[data-theme="dark"] .el-auth-card,body[data-theme="dark"] .el-card,body[data-theme="dark"] .card,body[data-theme="dark"] .form-card,body[data-theme="dark"] .table-card,body[data-theme="dark"] .settings-card,body[data-theme="dark"] .summary-card,body[data-theme="dark"] .filter-card,body[data-theme="dark"] .class-card,body[data-theme="dark"] .el-user-pill,body[data-theme="dark"] table,body[data-theme="dark"] .el-quick{background:var(--el-surface)!important;color:var(--el-text)!important;border-color:var(--el-border)!important}
body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{background:#0d1426!important;color:var(--el-text)!important;border-color:var(--el-border)!important}
body[data-theme="dark"] thead,body[data-theme="dark"] th{background:#151d32!important;color:#b6c1d4!important}
body[data-theme="dark"] td{border-color:#25314a!important}body[data-theme="dark"] tbody tr:hover{background:#151d32!important}
body[data-theme="dark"] .el-profile-item,body[data-theme="dark"] .el-mini-panel,body[data-theme="dark"] .el-mini-stat,body[data-theme="dark"] .empty,body[data-theme="dark"] .loading{background:#151d32!important;border-color:var(--el-border)!important}
body[data-theme="dark"] .el-visual-card{background:#11182b;color:var(--el-text)}
body[data-theme="dark"] .el-progress{background:#283149}body[data-theme="dark"] .el-auth-note{background:#171b35;color:#c7ccde}
body[data-theme="dark"] .el-auth-card .el-brand{color:var(--el-text)!important}
@media(max-width:640px){.el-theme-fab{right:12px;top:12px}.el-theme-toggle{width:38px;height:38px}}


/* ===== EqualLearn polish / speed / responsive update ===== */
:root{--el-content:1480px;--el-header-h:76px}
img{max-width:100%;height:auto}svg{display:block}.el-svg-icon{flex:0 0 auto}
.el-wordmark,.el-sidebar-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;letter-spacing:-.6px;color:var(--el-text)}
.el-wordmark-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 20px rgba(91,92,240,.2);background:#fff}
.el-wordmark-mark img{width:100%;height:100%;object-fit:cover}.el-wordmark-text{font-size:21px;line-height:1}.el-wordmark-on-dark{color:#fff}.el-sidebar-brand .el-wordmark-text{font-size:20px}
.el-site-header{height:var(--el-header-h);max-width:var(--el-content);margin:auto;padding:0 clamp(18px,4vw,54px);display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:20}
.el-site-nav{display:flex;align-items:center;gap:10px}.el-site-nav>a:not(.el-btn){padding:10px 12px;text-decoration:none;color:var(--el-muted);font-size:13px;font-weight:650}.el-site-nav>a:not(.el-btn):hover{color:var(--el-text)}
.el-btn-ghost{background:transparent!important;color:var(--el-text)!important;border:1px solid var(--el-border)!important;box-shadow:none!important}.el-btn-lg{min-height:52px!important;padding:14px 20px!important}.el-btn .el-svg-icon{width:18px;height:18px}
.el-home-hero{max-width:var(--el-content);margin:auto;min-height:calc(100vh - var(--el-header-h));display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.95fr);align-items:center;gap:clamp(36px,6vw,90px);padding:clamp(42px,6vw,86px) clamp(18px,4vw,54px) 78px}
.el-home-copy{max-width:720px}.el-eyebrow,.el-section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--el-primary);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.el-eyebrow{padding:8px 11px;border:1px solid #dcdafe;background:#f6f5ff;border-radius:999px}
.el-home-copy h1{font-size:clamp(46px,6.4vw,86px);line-height:.98;letter-spacing:-.055em;margin:22px 0 22px;max-width:780px}.el-home-copy h1 span{background:linear-gradient(120deg,var(--el-primary),#8b5cf6,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}.el-home-copy>p{font-size:clamp(15px,1.4vw,18px);line-height:1.8;color:var(--el-muted);max-width:660px}
.el-home-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}.el-trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:25px;color:var(--el-muted);font-size:12px;font-weight:650}.el-trust-row span{display:flex;align-items:center;gap:7px}.el-trust-row i{color:var(--el-primary);font-style:normal}
.el-device-stage{position:relative;min-height:570px;display:grid;place-items:center}.el-browser-mock{width:min(100%,680px);border:1px solid #dedff0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 34px 100px rgba(49,46,129,.16);transform:perspective(1200px) rotateY(-5deg) rotateX(1deg)}.el-browser-bar{height:44px;background:#f7f8fc;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid #e9eaf2}.el-browser-bar>span{width:8px;height:8px;border-radius:50%;background:#d3d5df}.el-browser-bar b{font-size:10px;margin-left:7px;color:#7b8191}.el-browser-body{height:390px;display:grid;grid-template-columns:84px 1fr}.el-preview-sidebar{background:#15172f;padding:20px 14px;display:grid;align-content:start;gap:20px}.el-preview-sidebar div{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#635bff,#8b5cf6)}.el-preview-sidebar i{height:7px;border-radius:8px;background:#323653}.el-preview-main{padding:28px;background:#f7f8fc}.el-preview-main small{font-size:9px;color:#777d91;font-weight:800}.el-preview-main h3{font-size:27px;margin:6px 0 26px}.el-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.el-preview-stats i{height:72px;border-radius:14px;background:#fff;border:1px solid #ececf3;box-shadow:0 8px 20px rgba(31,35,53,.04)}.el-preview-chart{height:170px;margin-top:18px;padding:18px;display:flex;align-items:end;gap:10px;border-radius:16px;background:#fff}.el-preview-chart span{flex:1;border-radius:7px 7px 2px 2px;background:linear-gradient(#8b5cf6,#635bff)}
.el-phone-mock{position:absolute;right:-8px;bottom:10px;width:178px;height:360px;border:7px solid #151725;border-radius:32px;background:#fff;box-shadow:0 28px 70px rgba(15,23,42,.28);overflow:hidden}.el-phone-notch{position:absolute;z-index:2;top:7px;left:50%;transform:translateX(-50%);width:62px;height:16px;border-radius:0 0 12px 12px;background:#151725}.el-phone-screen{padding:31px 15px 15px;background:#f7f8fc;height:100%}.el-mini-brand{display:flex;align-items:center;gap:7px;font-size:10px;margin-bottom:28px}.el-mini-brand img{width:25px;height:25px;border-radius:8px}.el-phone-screen>small{font-size:7px;color:#81879a}.el-phone-screen>strong{display:block;font-size:30px;margin:3px 0 9px}.el-phone-card{height:85px;background:#fff;border:1px solid #ebecef;border-radius:13px;margin-top:20px}.el-phone-card.short{height:60px;margin-top:10px}
.el-home-section,.el-apk-section,.el-cta{max-width:var(--el-content);margin:auto;padding:96px clamp(18px,4vw,54px)}.el-section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:32px}.el-section-head h2,.el-apk-copy h2,.el-cta h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-.04em;margin:8px 0 0}.el-section-head>p{max-width:500px;color:var(--el-muted);line-height:1.7;font-size:14px}.el-feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.el-feature-cards article{padding:28px;background:var(--el-surface);border:1px solid var(--el-border);border-radius:22px;box-shadow:0 12px 35px rgba(31,35,53,.05)}.el-feature-icon{width:48px;height:48px;border-radius:14px;background:var(--el-primary-soft);color:var(--el-primary);display:grid;place-items:center}.el-feature-cards h3{font-size:20px;margin:20px 0 7px}.el-feature-cards p{color:var(--el-muted);font-size:13px;line-height:1.7;margin:0}
.el-apk-section{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:center;gap:70px;border-radius:36px;background:linear-gradient(135deg,#111531,#22215b);color:#fff;max-width:calc(var(--el-content) - 40px);margin-top:40px;margin-bottom:40px}.el-apk-copy p{max-width:700px;color:#c7c9de;line-height:1.8}.el-apk-points{display:grid;gap:10px;margin:24px 0}.el-apk-points span{display:flex;align-items:center;gap:9px;color:#e3e5f3;font-size:13px}.el-apk-points i{color:#a7f3d0}.el-apk-section .el-btn-secondary{background:#ffffff14!important;color:#fff!important;border:1px solid #ffffff25!important}.el-apk-visual{min-height:390px;position:relative;display:grid;place-items:center}.el-app-icon-large{display:grid;justify-items:center;gap:14px}.el-app-icon-large img{width:180px;height:180px;border-radius:42px;box-shadow:0 30px 60px #0006}.el-app-icon-large span{font-size:27px;font-weight:850;letter-spacing:-1px}.el-apk-badge{position:absolute;right:0;bottom:32px;display:flex;align-items:center;gap:10px;padding:13px 16px;background:#ffffff14;border:1px solid #ffffff25;border-radius:16px;backdrop-filter:blur(14px)}.el-apk-badge small{display:block;font-size:8px;color:#aeb3d1}.el-apk-badge b{font-size:13px}
.el-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:80px;padding-bottom:80px}.el-cta .el-home-actions{margin:0}.el-site-footer{max-width:var(--el-content);margin:auto;padding:28px clamp(18px,4vw,54px) 40px;border-top:1px solid var(--el-border);display:flex;align-items:center;justify-content:space-between;color:var(--el-muted);font-size:12px}.el-site-footer .el-wordmark{color:var(--el-text)}
.el-password-wrap{position:relative}.el-password-wrap input{padding-right:50px!important}.el-password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:37px;height:37px;border:0;border-radius:10px;background:transparent;color:var(--el-muted);display:grid;place-items:center}.el-password-toggle:hover{background:var(--el-primary-soft);color:var(--el-primary)}
.el-nav-icon{display:grid;place-items:center}.el-stat-icon,.el-quick .icon{display:grid!important;place-items:center!important}.el-stat-icon .el-svg-icon{width:22px;height:22px}.el-quick .icon .el-svg-icon{width:21px;height:21px}
.el-card,.el-quick,.el-auth-card{content-visibility:auto;contain-intrinsic-size:1px 240px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:1050px){.el-home-hero{grid-template-columns:1fr;min-height:auto;padding-top:60px}.el-home-copy{max-width:850px}.el-device-stage{min-height:500px}.el-apk-section{grid-template-columns:1fr 360px;gap:35px}.el-site-nav>a:not(.el-btn){display:none}}
@media(max-width:760px){.el-site-header{height:66px;padding:0 16px}.el-site-nav .el-btn-ghost{display:none!important}.el-wordmark-text{font-size:19px}.el-wordmark-mark{width:34px;height:34px}.el-home-hero{padding:38px 16px 56px;gap:22px}.el-home-copy h1{font-size:clamp(42px,13vw,62px)}.el-device-stage{min-height:380px}.el-browser-mock{transform:none}.el-browser-body{height:290px;grid-template-columns:58px 1fr}.el-preview-main{padding:20px}.el-phone-mock{width:135px;height:278px;right:-2px}.el-home-section,.el-apk-section,.el-cta{padding:68px 16px}.el-section-head{display:block}.el-section-head>p{margin-top:14px}.el-feature-cards{grid-template-columns:1fr}.el-apk-section{grid-template-columns:1fr;max-width:calc(100% - 24px);border-radius:28px}.el-apk-visual{min-height:270px}.el-app-icon-large img{width:130px;height:130px;border-radius:31px}.el-apk-badge{right:8px;bottom:14px}.el-cta{display:block}.el-cta .el-home-actions{margin-top:24px}.el-site-footer{padding:24px 16px 34px}.el-site-footer p{display:none}.el-feature-row{grid-template-columns:1fr!important}.el-auth-panel{padding:14px}.el-auth-card{width:100%;max-width:520px}.el-public{min-height:100dvh}.el-hero{padding:28px 18px 30px}.el-hero h1{font-size:clamp(34px,10vw,48px);margin:34px 0 14px}.el-feature-row{margin-top:24px}.el-auth-card h2{font-size:28px}}
@media(max-width:520px){.el-site-nav .el-btn-primary{min-height:40px!important;padding:8px 12px!important;font-size:12px}.el-home-actions{display:grid;grid-template-columns:1fr}.el-home-actions .el-btn{width:100%}.el-device-stage{min-height:330px}.el-phone-mock{display:none}.el-browser-body{grid-template-columns:44px 1fr}.el-preview-main h3{font-size:20px}.el-preview-chart{height:110px}.el-trust-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.el-apk-section{padding:48px 18px}.el-apk-visual{min-height:220px}.el-app-icon-large img{width:110px;height:110px}.el-apk-badge{position:static;margin-top:22px}.el-cta{padding-top:54px;padding-bottom:54px}.el-grid-2,.el-grid-3,.el-grid-4{grid-template-columns:1fr!important}.el-card{padding:16px!important}.el-page-header{gap:14px}.el-page-header .el-btn{width:100%}.el-topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--el-bg) 88%,transparent);backdrop-filter:blur(12px);margin:-12px -12px 14px;padding:8px 12px;border-bottom:1px solid var(--el-border)}body[data-theme="dark"] .el-home-hero,body[data-theme="dark"] .el-home-section,body[data-theme="dark"] .el-cta{background:transparent}}
@media(max-width:760px){.el-feature,.el-auth-panel,.el-apk-badge{backdrop-filter:none!important}}

/* =========================================================
   EqualLearn performance + responsive upload polish
   ========================================================= */
#moduleList,#lessonList{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px!important;align-items:start}
#moduleList>.module-card,#lessonList>.lesson-card{height:100%;margin:0!important;display:flex;flex-direction:column;min-width:0}
#moduleList .module-actions,#lessonList .actions{margin-top:auto!important;padding-top:16px}
#moduleList>.loading,#moduleList>.empty,#lessonList>.message-box{grid-column:1/-1}
.module-card .module-description,.lesson-card .lesson-description{overflow-wrap:anywhere}.module-card .file-link,.lesson-card .file-info{overflow-wrap:anywhere}
.page>.add-btn,.container>.add-btn{width:auto!important;min-width:150px!important;padding:12px 18px!important;display:inline-flex!important;align-items:center;justify-content:center;margin:0 0 20px auto!important}

.el-upload-panel,#uploadProgress{margin-top:12px!important;padding:13px!important;border:1px solid var(--el-border)!important;border-radius:14px!important;background:var(--el-surface-2)!important}
.el-upload-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:12px}.el-upload-head span{color:var(--el-primary);font-weight:800}
.el-upload-track,.progress-container{width:100%;height:8px!important;border-radius:999px!important;overflow:hidden;background:#e5e7eb!important}
.el-upload-track span,#progressBar{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--el-primary),#8b5cf6,#06b6d4)!important;transition:width .14s linear!important}
.el-upload-meta,#progressText{margin:8px 0 0!important;color:var(--el-muted)!important;font-size:11px!important;line-height:1.45!important}
.el-upload-cancel{margin-top:9px;border:0;border-radius:9px;padding:8px 11px;background:#fff1f2;color:#be123c;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.el-upload-cancel:hover{background:#ffe4e6}
.upload-status{min-height:18px;overflow-wrap:anywhere}.upload-status.error{color:#be123c!important}.message.info{background:#eef2ff!important;color:#4338ca!important}
.el-cache-label{margin-left:8px;padding:3px 6px;border-radius:999px;background:var(--el-primary-soft);color:var(--el-primary);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.el-inline-spinner{display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px;border:2px solid #d9d6ff;border-top-color:var(--el-primary);border-radius:50%;animation:elSpin .65s linear infinite}.loading small,.message-box small,.empty small{display:block;margin-top:5px;color:var(--el-muted)}@keyframes elSpin{to{transform:rotate(360deg)}}
input[type="file"]{padding:7px!important}input[type="file"]::file-selector-button{border:0;border-radius:9px;padding:8px 10px;margin-right:10px;background:var(--el-primary-soft);color:var(--el-primary);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.modal-content{overscroll-behavior:contain}.modal.is-busy .modal-content{cursor:progress}.modal button:disabled,.modal input:disabled,.modal textarea:disabled,.modal select:disabled{opacity:.68}
.el-route-progress{position:fixed;z-index:100000;left:0;right:0;top:0;height:3px;pointer-events:none;opacity:0;overflow:hidden;background:transparent;transition:opacity .1s}.el-route-progress::after{content:"";display:block;height:100%;width:35%;background:linear-gradient(90deg,var(--el-primary),#8b5cf6,#06b6d4);transform:translateX(-110%)}body.el-route-loading .el-route-progress{opacity:1}body.el-route-loading .el-route-progress::after{animation:elRoute 1s ease-in-out infinite}@keyframes elRoute{to{transform:translateX(300%)}}

@media(max-width:720px){
  #moduleList,#lessonList{grid-template-columns:1fr!important;gap:12px!important}.module-card,.lesson-card{padding:16px!important}.module-top{align-items:flex-start!important}.module-title,.lesson-card h2{font-size:18px!important}.module-description,.lesson-description{font-size:13px!important}
  .page>.add-btn,.container>.add-btn{width:100%!important;margin:0 0 14px!important;min-height:44px}.header-buttons{width:100%;display:grid!important;grid-template-columns:1fr 1fr!important}.header-buttons button{width:100%;min-height:44px}
  .modal{padding:0!important;align-items:flex-end!important}.modal.show{align-items:flex-end!important}.modal-content{max-width:none!important;width:100%!important;max-height:92dvh!important;border-radius:24px 24px 0 0!important;padding:18px 16px calc(18px + env(safe-area-inset-bottom))!important}.modal-header{position:sticky;top:-18px;z-index:2;margin:-18px -16px 16px!important;padding:16px;background:var(--el-surface);border-bottom:1px solid var(--el-border)}
  .form-group input,.form-group textarea,.form-group select{font-size:16px!important;min-height:46px}.form-group textarea{min-height:100px}.save-btn,.cancel-btn{min-height:46px}.modal-actions{position:sticky;bottom:0;margin:18px -16px -18px!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--el-surface);border-top:1px solid var(--el-border)}
}
@media(max-width:420px){.header-buttons{grid-template-columns:1fr!important}.module-actions,.lesson-card .actions{grid-template-columns:1fr 1fr!important}.el-upload-meta,#progressText{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){.el-inline-spinner,.el-route-progress::after{animation:none!important}}
body[data-theme="dark"] .el-upload-track,body[data-theme="dark"] .progress-container{background:#26324a!important}body[data-theme="dark"] .modal-header,body[data-theme="dark"] .modal-actions{background:var(--el-surface)}



/* ==========================================
   EQUALLEARN SIDEBAR - GRID COLLAPSE FIX
========================================== */

/* Normal expanded state */
:root {
    --el-sidebar: 244px;
}

/* Smooth sidebar and content transition */
.el-app-shell {
    display: grid !important;
    grid-template-columns: var(--el-sidebar) minmax(0, 1fr) !important;
    transition: grid-template-columns .28s ease;
}

.el-sidebar {
    width: var(--el-sidebar) !important;
    transition: width .28s ease, transform .28s ease !important;
}

/* COLLAPSED STATE */
body.el-sidebar-collapsed {
    --el-sidebar: 82px;
}

body.el-sidebar-collapsed .el-sidebar {
    width: 82px !important;
}

/* Hide text labels */
body.el-sidebar-collapsed .el-wordmark-text,
body.el-sidebar-collapsed .el-role-chip,
body.el-sidebar-collapsed .el-nav-label {
    display: none !important;
}

/* Center brand */
body.el-sidebar-collapsed .el-sidebar-brand {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Center navigation icons */
body.el-sidebar-collapsed .el-nav a {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
}

body.el-sidebar-collapsed .el-nav-icon {
    width: 100% !important;
    margin: 0 !important;
}

/* Collapse button */
.el-sidebar-collapse {
    position: absolute !important;
    top: 145px !important;
    right: -14px !important;
    width: 29px !important;
    height: 29px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    background: #252d40 !important;
    color: white !important;
    z-index: 9999 !important;
    cursor: pointer !important;
}

/* Tooltip */
body.el-sidebar-collapsed .el-nav a[title] {
    position: relative;
}

body.el-sidebar-collapsed .el-nav a[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    padding: 9px 13px;
    border-radius: 9px;
    background: #202a3d;
    color: white;
    font-size: 12px;
    white-space: nowrap;
    z-index: 99999;
    pointer-events: none;
}

/* MOBILE - retain existing drawer behavior */
@media (max-width: 900px) {
    .el-app-shell {
        display: block !important;
    }

    .el-sidebar,
    body.el-sidebar-collapsed .el-sidebar {
        width: 244px !important;
        transform: translateX(-102%);
    }

    body.el-nav-open .el-sidebar {
        transform: translateX(0) !important;
    }

    .el-sidebar-collapse {
        display: none !important;
    }

    body.el-sidebar-collapsed .el-wordmark-text,
    body.el-sidebar-collapsed .el-role-chip,
    body.el-sidebar-collapsed .el-nav-label {
        display: initial !important;
    }

    body.el-sidebar-collapsed .el-nav a {
        justify-content: flex-start !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.el-sidebar-collapsed .el-sidebar-brand {
        justify-content: flex-start !important;
    }
}