body{
  margin:0;
  font-family:'Open Sans',sans-serif;
  background:#07132C;
  color:white;
}

/* LAYOUT */

.student-dashboard{
  display:flex;
  min-height:100vh;
}

/* SIDEBAR */

.student-sidebar{
  width:260px;
  background:#081028;
  border-right:1px solid rgba(255,255,255,0.06);
  padding:35px 20px;
  position:fixed;
  height:100vh;
}

.sidebar-logo{
  font-size:42px;
  font-weight:700;
  margin-bottom:40px;
}

.sidebar-logo span{
  color:#6C63FF;
}

.sidebar-menu{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar-menu li{
  margin-bottom:15px;
}

.sidebar-menu a,
.sidebar-logout-btn{
  width:100%;
  height:55px;
  border:none;
  display:flex;
  align-items:center;
  padding:0 18px;
  border-radius:16px;
  text-decoration:none;
  color:white;
  background:transparent;
  cursor:pointer;
  font-size:15px;
  transition:0.3s;
}

.sidebar-menu a:hover,
.sidebar-menu .active{
  background:#6C63FF;
}

.sidebar-logout-btn:hover{
  background:#EF4444;
}

/* MAIN */

.student-main{
  flex:1;
  margin-left:260px;
  padding:40px;
}

/* TOPBAR */

.student-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:35px;
}

.student-topbar h1{
  font-size:52px;
  margin-bottom:10px;
}

.student-topbar p{
  color:#CBD5E1;
}

.topbar-profile{
  display:flex;
  align-items:center;
  gap:15px;
}

.topbar-profile img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #6C63FF;
}

/* STATS */

.learning-stats{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  margin-bottom:35px;
}

.learning-stat-card{
  background:#13203B;
  border-radius:28px;
  padding:30px;
  border:1px solid rgba(255,255,255,0.06);
}

.learning-stat-card h2{
  font-size:48px;
  margin-bottom:10px;
}

.learning-stat-card p{
  color:#CBD5E1;
}

/* SEARCH */

.courses-filter-bar{
  margin-bottom:35px;
}

.courses-filter-bar input{
  width:100%;
  height:60px;
  border:none;
  outline:none;
  border-radius:18px;
  background:#13203B;
  padding:0 20px;
  color:white;
  font-size:15px;
}

/* GRID */

.my-courses-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(380px,1fr));
  gap:30px;
}

/* CARD */

.course-card{
  background:#13203B;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
}

.course-card:hover{
  transform:translateY(-8px);
}

.course-image{
  width:100%;
  height:240px;
  position:relative;
}

.course-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.course-status{
  position:absolute;
  top:18px;
  right:18px;
  background:#10B981;
  color:white;
  padding:8px 14px;
  border-radius:50px;
  font-size:12px;
  font-weight:600;
}

.course-content{
  padding:28px;
}

.course-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  border-radius:50px;
  background:#6C63FF;
  color:white;
  font-size:13px;
  margin-bottom:18px;
}

.course-content h3{
  font-size:28px;
  margin-bottom:14px;
}

.course-content p{
  color:#CBD5E1;
  line-height:1.8;
  margin-bottom:22px;
}

/* META */

.course-meta{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin-bottom:25px;
}

.meta-box{
  background:#0F172A;
  border-radius:16px;
  padding:12px 16px;
  font-size:13px;
  color:#CBD5E1;
}

/* PROGRESS */

.progress-bar{
  width:100%;
  height:12px;
  border-radius:50px;
  background:#0F172A;
  overflow:hidden;
  margin-bottom:12px;
}

.progress-fill{
  height:100%;
  background:#6C63FF;
  border-radius:50px;
}

.progress-text{
  font-size:14px;
  margin-bottom:24px;
  color:#CBD5E1;
}

/* BUTTONS */

.course-actions{
  display:flex;
  gap:15px;
}

.continue-btn,
.details-btn{
  flex:1;
  height:56px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:0.3s;
}

.continue-btn{
  background:#6C63FF;
  color:white;
}

.details-btn{
  background:#0F172A;
  color:white;
}

.continue-btn:hover,
.details-btn:hover{
  transform:translateY(-3px);
}

/* EMPTY */

.empty-state{
  background:#13203B;
  border-radius:28px;
  padding:60px;
  text-align:center;
  color:#CBD5E1;
}

/* RESPONSIVE */

@media(max-width:768px){

  .student-sidebar{
    display:none;
  }

  .student-main{
    margin-left:0;
    padding:20px;
  }

  .student-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .student-topbar h1{
    font-size:38px;
  }

  .my-courses-grid{
    grid-template-columns:1fr;
  }

}


/* =====================
FEEDBACK
===================== */

.feedback-modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

rgba(
0,
0,
0,
0.75
);

z-index:99999;

align-items:center;

justify-content:center;

}

.feedback-box{

width:550px;

max-width:90%;

background:#13203B;

padding:35px;

border-radius:26px;

}

.feedback-box h2{

margin-bottom:25px;

}

.feedback-box label{

display:block;

margin-top:20px;

margin-bottom:10px;

}

.feedback-box input,

.feedback-box select,

.feedback-box textarea{

width:100%;

padding:16px;

background:#081028;

color:white;

border:none;

border-radius:16px;

}

.feedback-box textarea{

height:140px;

resize:none;

}

.feedback-check{

display:flex;

gap:10px;

align-items:center;

}

.feedback-actions{

display:flex;

gap:15px;

margin-top:25px;

}

.close-feedback,
.submit-feedback{

flex:1;

height:55px;

border:none;

border-radius:16px;

cursor:pointer;

}

.close-feedback{

background:#EF4444;

color:white;

}

.submit-feedback{

background:#6C63FF;

color:white;

}

.feedback-btn{

background:#10B981;

color:white;

}