@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");
:root {
  --navy: #101730;
  --purple: #6558f5;
  --cyan: #48cbef;
  --text: #202944;
  --muted: #8992a8;
  --line: #e9ebf3;
  --bg: #f5f6fb;
  --shadow: 0 14px 40px rgba(30, 39, 84, 0.06);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
}
h1,
h2,
h3,
h4 {
  font-family: Outfit, sans-serif;
  margin: 0 0 12px;
}
h1 {
  font-size: 40px;
  letter-spacing: -1.5px;
}
h3 {
  font-size: 19px;
}
p {
  line-height: 1.65;
}
a {
  color: var(--purple);
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: 0.2s;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 101, 88, 245), 0.12);
}
label {
  font-weight: 700;
  font-size: 12px;
  display: block;
  margin-bottom: 14px;
}
label input,
label select,
label textarea {
  display: block;
  margin-top: 8px;
}
small,
.muted {
  color: var(--muted);
}
.tiny {
  font-size: 11px;
}
.app-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 264px;
  position: fixed;
  inset: 0 auto 0 0;
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 26px 17px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  margin: 5px 8px 44px;
}
.brandmark {
  height: 42px;
  width: 42px;
  border-radius: 14px;
  background: linear-gradient(130deg, color-mix(in srgb, var(--purple), white 18%), var(--purple), #48d4d0, var(--purple));
  background-size: 220% 220%;
  box-shadow: 0 7px 18px rgba(var(--theme-primary-rgb, 101, 88, 245), 0.36);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  animation: brandmark-glow 3.6s ease-in-out infinite, brandmark-shimmer 7s ease-in-out infinite;
}
.brand strong {
  font: 800 22px Outfit;
  letter-spacing: -0.7px;
  display: block;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.7px;
  font-weight: 800;
}
.navtitle {
  font-size: 10px;
  color: #a1aabe;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 0 18px;
  margin-bottom: 12px;
}
.navlink {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #6d778f;
  border-radius: 12px;
  padding: 13px 14px;
  margin: 2px 0;
  font-weight: 700;
  transition: 0.2s;
}
.navlink:hover,
.navlink.active {
  background: color-mix(in srgb, var(--purple), transparent 91%);
  color: var(--purple);
}
.navdot {
  height: 8px;
  width: 8px;
  background: #c6c9d6;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f1f2f8;
}
.navlink.active .navdot {
  background: var(--purple);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple), transparent 78%);
}
.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 16px 3px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.sidebar-bottom strong,
.sidebar-bottom small {
  display: block;
  font-size: 11px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--purple), white 90%);
  color: var(--purple);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.avatar.small {
  width: 31px;
  height: 31px;
}
.iconbtn {
  border: 0;
  background: transparent;
  font-size: 24px;
  color: #9096aa;
}
.powered {
  font-size: 10px;
  color: #a2a9b7;
  text-align: center;
}
.main {
  margin-left: 264px;
  width: calc(100% - 264px);
}
.topbar {
  height: 91px;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 35px;
  backdrop-filter: blur(15px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar small {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}
.topbar h2 {
  font-size: 21px;
  margin: 4px 0 0;
}
.topright {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #69728b;
  font-weight: 700;
  font-size: 12px;
}
.online {
  background: #29cba5;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.page {
  padding: 30px 35px 55px;
  max-width: 1600px;
  margin: auto;
}
.card {
  background: #fff;
  border: 1px solid #eceef6;
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.hero {
  background: linear-gradient(115deg, #272052 0%, #5948ce 55%, #8c64e9 100%);
  color: #fff;
  border-radius: 24px;
  padding: 40px 45px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  margin-bottom: 23px;
  min-height: 240px;
}
.hero:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border: 1px solid #ffffff40;
  border-radius: 50%;
  right: 30px;
  top: -100px;
}
.hero h1 {
  font-size: 39px;
  margin: 15px 0 10px;
}
.hero em {
  font-style: normal;
  color: #a5ddff;
}
.hero p {
  max-width: 490px;
  color: #e7e3ff;
  margin-bottom: 23px;
}
.hero-graphic {
  font-size: 140px;
  line-height: 1;
  color: #d0c6ff50;
  position: absolute;
  right: 110px;
  top: 30px;
  transform: rotate(17deg);
}
.hero-graphic span {
  font-size: 50px;
  position: absolute;
  top: 70px;
  left: 70px;
  color: white;
}
.badge {
  display: inline-block;
  border-radius: 30px;
  padding: 8px 13px;
  background: #ffffff29;
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 11px;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  min-height: 40px;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn.primary {
  background: linear-gradient(120deg, color-mix(in srgb, var(--purple), white 10%), var(--purple));
  color: #fff;
  box-shadow: 0 5px 14px rgba(var(--theme-primary-rgb, 101, 88, 245), 0.22);
}
.btn.white {
  background: #fff;
  color: var(--purple);
}
.btn.light {
  background: color-mix(in srgb, var(--purple), white 91%);
  color: color-mix(in srgb, var(--purple), #252b45 22%);
}
.btn.compact {
  padding: 8px 10px;
  min-height: 32px;
}
.btn.danger-btn {
  background: #fff0f1;
  color: #e0465c;
}
.btn.full {
  width: 100%;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px;
}
.stat-icon {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--purple), white 91%);
  color: var(--purple);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 5px;
}
.stat small {
  font-weight: 700;
}
.stat strong {
  font: 800 33px Outfit;
  color: var(--navy);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr);
  gap: 20px;
}
.sectionheading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 20px;
}
.sectionheading h3 {
  margin: 0 0 5px;
}
.sectionheading p {
  margin: 0;
}
.tablewrap {
  overflow: auto;
  max-width: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  text-align: left;
}
th {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9ba3b5;
  padding: 14px 12px;
  background: #f9faff;
}
td {
  padding: 14px 12px;
  border-top: 1px solid #f0f1f6;
  vertical-align: middle;
  max-width: 360px;
}
td small {
  display: block;
  margin-top: 3px;
}
td b {
  font-weight: 800;
}
.pill {
  padding: 6px 11px;
  border-radius: 20px;
  background: #eeeaff;
  color: #6758b3;
  font-size: 10px;
  font-weight: 800;
  display: inline-block;
}
.pill.good {
  background: #def9ef;
  color: #13a675;
}
.pill.warn {
  background: #fff2db;
  color: #ba8732;
}
.accent-card {
  background: #f0eeff;
}
.accent-card p {
  color: #75708f;
}
.steps {
  padding: 10px 0 20px;
}
.steps p {
  border-bottom: 1px solid #dddafa;
  padding: 9px 2px;
  font-weight: 700;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.course-card {
  padding: 0;
  overflow: hidden;
}
.course-art {
  background: linear-gradient(135deg, var(--course, #5f52dc), #25194d);
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #ffffff78;
  font-size: 60px;
}
.course-art .pill {
  position: absolute;
  right: 15px;
  top: 15px;
  background: #ffffffde;
}
.course-body {
  padding: 24px;
}
.course-body h3 {
  margin: 10px 0;
  font-size: 21px;
}
.course-body small {
  font-size: 10px;
  color: var(--purple);
  font-weight: 800;
  letter-spacing: 1px;
}
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 43px;
}
.meta {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  color: #858ba1;
  font-size: 11px;
  font-weight: 700;
  margin: 15px 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.inline {
  display: inline-block;
}
.toolbar {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.toolbar form {
  display: flex;
  gap: 9px;
  align-items: center;
}
.toolbar input[type="file"] {
  max-width: 220px;
}
.search {
  max-width: 400px;
}
.formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.wide {
  grid-column: 1/-1;
}
.formgrid h3 {
  margin-bottom: 6px;
}
.dialogactions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal {
  border: 0;
  border-radius: 22px;
  padding: 30px;
  max-width: 680px;
  width: calc(100% - 20px);
  box-shadow: 0 30px 100px #14122c70;
  max-height: 90vh;
  overflow: auto;
}
.modal::backdrop {
  background: #101629a6;
  backdrop-filter: blur(5px);
}
.check {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
}
.check input {
  width: auto;
  margin: 0;
}
.studentlist {
  height: 285px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  margin: 10px 0;
}
.studentlabel {
  padding: 9px;
  border-bottom: 1px solid #f1f1f6;
}
.alert {
  background: #edefff;
  color: #4e57a5;
  border-radius: 12px;
  padding: 13px 17px;
  margin: 15px 0;
  font-size: 12px;
  font-weight: 700;
}
.alert.success {
  background: #e8fff5;
  color: #12845c;
}
.alert.danger {
  background: #ffebec;
  color: #b9374c;
}
.progress {
  height: 9px;
  background: #eeeff7;
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 0;
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 12px;
  transition: width 0.5s;
}
.module-hero {
  margin: 22px 0;
  padding: 35px;
  background: linear-gradient(125deg, #fff, #f2f0ff);
}
.module-hero .badge {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple), white 89%);
}
.module-hero h1 {
  margin: 18px 0;
}
.lesson {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 13px;
}
.lessonnum {
  width: 47px;
  height: 47px;
  flex-shrink: 0;
  background: #f0eeff;
  color: var(--purple);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.lessoninfo {
  flex: 1;
  min-width: 0;
}
.lessoninfo h3 {
  margin: 0;
}
.lessoninfo p {
  margin: 4px 0;
}
.lessoninfo .meta {
  margin: 5px 0;
}
.player-shell {
  position: relative;
  background: #090d1b;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 18px;
}
.player-shell video {
  width: 100%;
  max-height: 65vh;
  display: block;
}
.watermark {
  position: absolute;
  pointer-events: none;
  right: 5%;
  top: 12%;
  opacity: 0.23;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 6px #000;
  animation: drift 16s infinite alternate;
}
@keyframes drift {
  to {
    right: 55%;
    top: 70%;
  }
}
.watch-card {
  margin-top: 16px;
}
.quizcard {
  max-width: 900px;
  margin: 22px auto;
}
.quizcard h1 {
  margin: 10px 0;
}
.quizcard .badge {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple), white 89%);
}
.question {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.question h3 {
  line-height: 1.5;
}
.qindex {
  color: var(--purple);
}
.choice {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  padding: 13px;
  margin: 10px 0;
  cursor: pointer;
}
.choice input {
  width: 18px;
  margin: 0;
  flex-shrink: 0;
}
.choice:has(input:checked) {
  background: color-mix(in srgb, var(--purple), white 92%);
  border-color: color-mix(in srgb, var(--purple), white 45%);
}
.certificate-card {
  text-align: center;
}
.certicon {
  font-size: 58px;
  color: #d7af67;
}
.certificate-card .badge {
  color: var(--purple);
  background: color-mix(in srgb, var(--purple), white 89%);
}
.certificate-card h3 {
  margin: 24px 0 8px;
}
.profile {
  max-width: 760px;
}
.profilebadge {
  height: 80px;
  width: 80px;
  border-radius: 23px;
  background: #e4e2ff;
  color: #6659dc;
  display: grid;
  place-items: center;
  font-size: 35px;
  font-weight: 900;
}
.empty {
  text-align: center;
  padding: 60px;
  color: var(--muted);
}
.auth-shell {
  display: flex;
  min-height: 100vh;
  background: #f8f9fe;
}
.auth-visual {
  width: 53%;
  background: linear-gradient(140deg, #121a42, #31256d 55%, #6750c9);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.auth-presentation {
  z-index: 1;
  padding: 9%;
  max-width: 700px;
}
.auth-presentation h1 {
  font-size: clamp(45px, 5vw, 80px);
  line-height: 1.09;
  margin: 25px 0;
  letter-spacing: -3px;
}
.auth-presentation em {
  color: #92dcff;
  font-style: normal;
}
.auth-presentation > p {
  font-size: 16px;
  color: #d8d3f3;
  max-width: 480px;
}
.feature-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 38px 0;
}
.feature-pills span {
  padding: 11px 13px;
  border: 1px solid #ffffff3d;
  border-radius: 30px;
  background: #ffffff14;
  font-size: 11px;
}
.institute {
  font-size: 14px;
  font-weight: 800;
  margin-top: 90px;
}
.institute small {
  display: block;
  font-size: 11px;
  color: #c0bcdf;
  margin-top: 5px;
}
.orbit {
  height: 450px;
  width: 450px;
  border: 1px solid #ffffff28;
  border-radius: 50%;
  position: absolute;
  right: -180px;
  top: 5%;
}
.orbit.two {
  height: 700px;
  width: 700px;
  right: -320px;
  top: -15%;
}
.auth-panel {
  width: 47%;
  display: grid;
  place-items: center;
  padding: 50px;
}
.auth-card {
  width: min(440px, 100%);
}
.authbrand {
  margin: 0 0 68px;
}
.auth-card .eyebrow {
  color: #7667f8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}
.auth-card h2 {
  font-size: 32px;
  margin: 14px 0 5px;
}
.auth-card > p {
  margin: 0 0 20px;
}
.auth-card label {
  margin: 0 0 13px;
}
.password-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.password-wrap input {
  padding-right: 68px;
}
.password-wrap button {
  position: absolute;
  right: 8px;
  border: 0;
  background: none;
  color: var(--purple);
  font-weight: 800;
}
.formend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  margin: 4px 0 18px;
  color: #959bad;
}
.footerbrand {
  margin-top: 55px;
  text-align: center;
  color: #a4aaba;
  font-size: 10px;
}
.login-author-credit{margin-top:16px;color:#8491a7;font-size:9px;line-height:1.5;text-align:center}
.login-author-credit strong{color:#475875;font-weight:800}
.login-author-credit span{display:block;color:#98a2b4;font-size:8px}
.simple-auth {
  max-width: 450px;
  width: calc(100% - 30px);
  margin: auto;
}
.simple-auth .brand {
  margin: 0 0 20px;
}
.simple-auth form {
  margin: 20px 0;
}
.mobiletoggle {
  display: none;
}
.alert a {
  text-decoration: underline;
}
@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
  }
  .hero-graphic {
    right: 30px;
  }
}
@media (max-width: 780px) {
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
  }
  .navopen .sidebar {
    transform: none;
  }
  .main {
    margin: 0;
    width: 100%;
  }
  .mobiletoggle {
    display: block;
    border: 0;
    background: none;
    font-size: 23px;
  }
  .topbar {
    padding: 15px;
    height: 76px;
  }
  .topright {
    display: none;
  }
  .page {
    padding: 18px;
  }
  .hero {
    padding: 30px 25px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero-graphic {
    display: none;
  }
  .auth-visual {
    display: none;
  }
  .auth-panel {
    width: 100%;
    padding: 35px;
  }
  .authbrand {
    margin-bottom: 45px;
  }
  .lesson {
    flex-wrap: wrap;
  }
  .lessoninfo {
    flex-basis: calc(100% - 70px);
  }
}
@media (max-width: 540px) {
  .stats,
  .course-grid,
  .formgrid {
    grid-template-columns: 1fr;
  }
  .wide {
    grid-column: auto;
  }
  .hero h1 {
    font-size: 29px;
  }
  .sectionheading {
    align-items: flex-start;
    flex-direction: column;
  }
  .card {
    padding: 19px;
  }
  .course-card {
    padding: 0;
  }
  .course-body {
    padding: 19px;
  }
  .topbar small {
    font-size: 8px;
  }
  .toolbar form {
    flex-wrap: wrap;
  }
}
.auth-visual{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:38px 5.2% 24px;background:linear-gradient(135deg,#111a3c 0%,#282461 56%,#403c91 100%)}
.auth-visual:before,.auth-visual:after{content:"";position:absolute;inset:0;pointer-events:none}
.auth-visual:before{z-index:0;background:radial-gradient(ellipse at 78% 28%,#3ed6d033 0,transparent 34%),radial-gradient(ellipse at 15% 88%,#4888ff30 0,transparent 38%),linear-gradient(120deg,#101a3900 15%,#6758d526 54%,#17bdc526 100%);background-size:150% 150%;animation:auth-atmosphere 16s ease-in-out infinite alternate}
.auth-visual:after{z-index:0;background-image:linear-gradient(#b4e6ff0a 1px,transparent 1px),linear-gradient(90deg,#b4e6ff0a 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(115deg,transparent 9%,#000 48%,transparent 93%);opacity:.55;animation:auth-grid-drift 28s linear infinite}
.auth-visual>*{position:relative}
.auth-visual>.orbit,.auth-visual>.auth-spark{position:absolute}
.auth-institution{position:relative;z-index:2;display:flex;align-items:center;gap:16px;min-height:90px;max-width:670px;animation:auth-enter .7s both}
.auth-institution img{width:78px;height:78px;flex:none;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 6px 24px #090f3040}
.auth-seal{width:66px;height:66px;flex:none;display:grid;place-items:center;border:2px solid #e8f2ff;border-radius:50%;color:#fff;font:800 15px Outfit,sans-serif;box-shadow:inset 0 0 0 5px #ffffff18}
.auth-institution strong,.auth-institution small,.auth-institution div>span{display:block}
.auth-institution strong{color:#fff;font:700 18px Outfit,sans-serif;line-height:1.25}
.auth-institution small{margin-top:5px;color:#d3d8ed;font-size:10px;line-height:1.4}
.auth-institution div>span{position:relative;display:inline-block;margin-top:8px;padding:0 0 6px;color:#a8f1ff;font-size:15px;font-weight:800;text-shadow:0 0 16px #57d9f05c;animation:vtu-glow 3.8s ease-in-out infinite}
.auth-institution div>span:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#53dbd3,#9ee8ff,#53dbd3);background-size:200% 100%;animation:vtu-underline 3s ease-in-out infinite}
.auth-presentation{max-width:700px;margin:auto 0;padding:35px 0 45px;animation:auth-enter .85s .08s both}
.auth-presentation h1{margin:24px 0 18px;font-size:clamp(45px,5vw,76px);line-height:1.04;letter-spacing:-2px}
.auth-presentation>p{max-width:490px;color:#e0e4f4}
.feature-pills{margin:30px 0 0}
.feature-pills span{transition:transform .25s,border-color .25s,background .25s}
.feature-pills span:hover{transform:translateY(-3px);border-color:#9de9f2;background:#ffffff20}
.orbit{border-color:#d9eeff26;animation:auth-orbit 30s linear infinite}
.orbit.two{animation-direction:reverse;animation-duration:42s}
.auth-spark{position:absolute;z-index:0;width:9px;height:9px;border-radius:50%;background:#9cecff;box-shadow:0 0 18px 5px #83e9ff65;animation:auth-spark 4.5s ease-in-out infinite}
.spark-a{right:18%;top:30%;}
.spark-b{right:41%;bottom:24%;width:5px;height:5px;animation-delay:-2s}
.auth-copyright{position:relative;z-index:2;color:#c0c7e1;font-size:10px;letter-spacing:.3px;animation:auth-enter .9s .18s both}
.auth-panel{background:linear-gradient(160deg,#fcfdff,#f3f6fc);}
.auth-card{animation:auth-card-in .65s .12s both}
.authbrand{margin-bottom:42px}
.footerbrand{margin-top:28px}
.demo-access{margin-top:16px;padding:11px 14px 8px;border:1px solid #dce5f1;border-radius:12px;background:linear-gradient(125deg,#f8fbff,#f1f6fc);box-shadow:0 9px 25px #243d6410;animation:auth-card-in .7s .24s both}
.demo-access-heading{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.demo-access-heading strong{color:#344765;font-size:9px;letter-spacing:1px}
.demo-access-heading small{margin-left:auto;font-size:9px}
.demo-access-pulse{width:7px;height:7px;border-radius:50%;background:#25ae94;box-shadow:0 0 0 0 #25ae944c;animation:demo-pulse 2.2s ease-out infinite}
.demo-account{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:7px;padding:7px 0;border-top:1px solid #e2e9f1}
.demo-role{width:max-content;padding:4px 6px;border-radius:5px;background:#e7eaff;color:#5653b8;font-size:8px;font-weight:900;letter-spacing:.6px}
.demo-role.student-role{background:#dff4ee;color:#237b68}
.demo-account>div{min-width:0}
.demo-field-label{display:block;margin-bottom:2px;color:#8692a5;font-size:8px;font-weight:700}
.demo-account code{display:block;overflow-wrap:anywhere;color:#293a55;font-family:Consolas,"Courier New",monospace;font-size:9px;font-weight:700}
@keyframes auth-atmosphere{from{background-position:0% 0%}to{background-position:100% 90%}}
@keyframes auth-grid-drift{to{background-position:34px 34px}}
@keyframes vtu-glow{0%,100%{text-shadow:0 0 8px #57d9f02b}50%{text-shadow:0 0 17px #57d9f07d}}
@keyframes vtu-underline{0%,100%{background-position:0% 50%;opacity:.68}50%{background-position:100% 50%;opacity:1}}
@keyframes demo-pulse{0%{box-shadow:0 0 0 0 #25ae944c}75%,100%{box-shadow:0 0 0 6px #25ae9400}}
@keyframes auth-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-orbit{to{transform:rotate(360deg)}}
@keyframes auth-spark{0%,100%{opacity:.28;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:780px){
  .auth-shell{display:flex;flex-direction:column;}
  .auth-visual{display:flex;width:100%;height:106px;min-height:106px;padding:12px 20px;}
  .auth-institution{min-height:80px;gap:12px;}
  .auth-institution img{width:62px;height:62px;}
  .auth-seal{width:54px;height:54px;font-size:12px;}
  .auth-institution strong{font-size:14px;}
  .auth-institution small{font-size:9px;}
  .auth-institution div>span{font-size:12px;margin-top:5px;}
  .auth-presentation,.auth-copyright,.auth-spark{display:none;}
  .auth-visual .orbit{right:-280px;top:-540px;}
  .auth-visual .orbit.two{right:-310px;top:-570px;}
  .auth-panel{width:100%;flex:1;padding:30px 24px 24px;}
  .authbrand{margin-bottom:28px;}
  .auth-card > p{margin-bottom:16px;}
  .auth-card label{margin-bottom:11px;}
  .formend{margin-bottom:15px;}
  .footerbrand{margin-top:18px;}
  .demo-access{margin-top:14px;padding:10px 12px 7px;}
}
@media(max-width:420px){
  .auth-visual{height:96px;min-height:96px;padding:10px 15px;}
  .auth-institution{gap:9px;}
  .auth-institution img{width:54px;height:54px;}
  .auth-institution strong{font-size:12px;}
  .auth-institution small{font-size:8px;}
  .auth-institution div>span{font-size:11px;}
  .auth-panel{padding:16px 18px 20px;}
  .authbrand{margin-bottom:18px;}
  .auth-card .eyebrow{font-size:9px;}
  .auth-card h2{font-size:27px;margin:8px 0 3px;}
  .auth-card>p{display:none;}
  .auth-card label{margin-bottom:8px;}
  .auth-card input{padding:10px 12px;}
  .formend{margin:2px 0 12px;}
  .auth-card form>.btn{min-height:38px;padding:10px 14px;}
  .demo-access{margin-top:11px;padding:9px 10px 6px;}
  .demo-access-heading{margin-bottom:5px;}
  .demo-access-heading small{font-size:8px;}
  .demo-account{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:4px;padding:5px 0;}
  .demo-field-label{font-size:7.5px;}
  .demo-account code{font-size:8.5px;}
  .footerbrand{margin-top:11px;font-size:9px;}
  .login-author-credit{margin-top:11px;font-size:8.5px}
  .login-author-credit span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .auth-institution,.auth-presentation,.auth-copyright,.auth-card,.demo-access{animation:none;}
  .orbit,.auth-spark,.auth-visual:before,.auth-visual:after,.auth-institution div>span,.auth-institution div>span:after,.demo-access-pulse{animation:none;}
  .brandmark{animation:none;}
  .feature-pills span{transition:none;}
}
@keyframes brandmark-glow{0%,100%{box-shadow:0 7px 18px rgba(var(--theme-primary-rgb,101,88,245),.36),0 0 0 0 rgba(var(--theme-primary-rgb,101,88,245),0)}50%{box-shadow:0 8px 23px rgba(var(--theme-primary-rgb,101,88,245),.5),0 0 0 5px rgba(var(--theme-primary-rgb,101,88,245),.1)}}
@keyframes brandmark-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.student-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.student-count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}
.student-count strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--theme-primary-rgb, 101, 88, 245), .1);
  color: var(--purple);
  font-size: 13px;
}
.student-filters {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(110px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.student-filter-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.report-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.question-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.student-count[aria-current="true"] { border-color: var(--purple); }
.assignment-card { margin-bottom: 20px; }
.assignment-filters { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.assignment-cohorts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.assignment-cohorts fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.assignment-cohorts legend { font-size: 12px; font-weight: 700; padding: 0 5px; }
.assignment-filter-values { display: flex; flex-wrap: wrap; gap: 10px; max-height: 150px; overflow: auto; }
.assignment-filter-values label, .assignment-check { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; }
.assignment-check { margin: 12px 0; }
.assignment-card input[type="checkbox"] { width: 16px; height: 16px; padding: 0; flex-shrink: 0; margin: 0; }
.assignment-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; }
.assignment-table { font-size: 12px; }
.assignment-table th { font-size: 10px; padding: 12px 10px; }
.assignment-table td { padding: 12px 10px; }
.assignment-table small { font-size: 11px; }
.assignment-card .btn.compact { font-size: 12px; padding: 7px 10px; }
.assignment-pagination { font-size: 12px; }
@media (max-width: 700px) {
  .assignment-filters, .assignment-cohorts { grid-template-columns: 1fr; }
}
.student-bulk-actions, .student-pagination, .student-pagination nav, .student-page-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.student-pagination { justify-content: space-between; margin-top: 24px; }
.student-page-jump label { display: flex; align-items: center; gap: 8px; margin: 0; }
.student-page-jump input[type="number"] { width: 80px; }
#studentTable input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.student-import { flex-wrap: wrap; }
.student-import form { flex-wrap: wrap; }
.student-bulk-actions button:disabled { opacity: .5; cursor: default; }
@media (max-width: 1100px) {
  .student-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .student-filters { grid-template-columns: 1fr; }
  .student-import form { width: 100%; }
  .student-import input[type="file"] { max-width: 100%; }
}