:root{
  --brand:#7c3aed;
  --dark:#0f172a;
  --muted:#6b7280;
  --bg:#f5f5f8;
}
body{background:var(--bg);}
.navbar-brand{font-weight:800; letter-spacing:.2px;}
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn-brand:hover{filter:brightness(.95); color:#fff;}
.badge-brand{background:rgba(124,58,237,.15); color:var(--brand);}
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  background:var(--dark);
}
.hero video{
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  object-fit:cover;
  opacity:.45;
}
.hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(15,23,42,.85), rgba(124,58,237,.25));
}
.hero .content{
  position:relative;
  z-index:2;
  padding-top:120px;
}
.card-course{
  border:0;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
  overflow:hidden;
}
.card-course img{height:160px; object-fit:cover;}
.section{padding:80px 0;}
.section-title{font-weight:800; color:var(--dark);}
.footer{
  background:#0b1022;
  color:#cbd5e1;
  padding:50px 0;
}
.footer a{color:#cbd5e1; text-decoration:none;}
.footer a:hover{color:#fff;}
.dashboard-shell{
  background:#fff;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
}
.chat-box{height:420px; overflow:auto; background:#0b1022; border-radius:18px; padding:14px; color:#fff;}
.msg{padding:10px 12px; border-radius:14px; margin:8px 0; max-width:85%;}
.msg.student{background:rgba(124,58,237,.25); margin-left:auto;}
.msg.teacher{background:rgba(59,130,246,.25);}
.small-muted{color:var(--muted); font-size:.92rem;}