:root {

  --bg: #0b1020;
  --surface: #111827;
  --card: #182235;

  --primary: #6366f1;
  --primary-hover: #818cf8;

  --text: #f8fafc;
  --muted: #94a3b8;

  --border: rgba(255,255,255,0.08);

  --success: #22c55e;
  --danger: #ef4444;

}


* {
  box-sizing: border-box;
}


body {

  margin:0;

  background:
  radial-gradient(
    circle at top,
    #1e1b4b,
    #0b1020 50%
  );

  color:var(--text);

  font-family:
  "Cairo",
  Arial,
  sans-serif;

  min-height:100vh;

}


a {

  color:inherit;

  text-decoration:none;

}


.container {

  width:90%;

  max-width:1200px;

  margin:auto;

}


/* ======================
   Cards
====================== */


.panel,
.card,
.stat-card,
.student-card {

  background:
  rgba(24,34,53,.85);

  border:

  1px solid var(--border);


  border-radius:20px;


  box-shadow:

  0 20px 50px

  rgba(0,0,0,.35);


  backdrop-filter:

  blur(10px);

}


/* ======================
   Headings
====================== */


h1,h2,h3 {

  color:

  var(--text);

}


p {

  color:

  var(--muted);

}



/* ======================
   Buttons
====================== */


.btn {

  border:none;

  cursor:pointer;

  padding:

  12px 22px;


  border-radius:14px;


  font-weight:700;

  transition:.25s;

}



.btn.primary {


  background:

  linear-gradient(
  135deg,
  #6366f1,
  #8b5cf6
  );


  color:white;


  box-shadow:

  0 10px 30px

  rgba(99,102,241,.35);

}



.btn.primary:hover {


  transform:

  translateY(-3px);


  background:

  linear-gradient(
  135deg,
  #818cf8,
  #a78bfa
  );

}



.btn.success-btn {


  background:

  var(--success);

  color:white;

}



.btn.danger {


  background:

  var(--danger);

  color:white;

}



.btn.ghost {


  background:

  transparent;


  border:

  1px solid var(--border);


  color:

  var(--text);

}



/* ======================
   Inputs
====================== */


input,
select,
textarea {


  width:100%;


  padding:

  14px;


  border-radius:

  14px;


  border:

  1px solid var(--border);


  background:

  #111827;


  color:white;


  outline:none;


}



input:focus,
select:focus {


  border-color:

  var(--primary);


}



/* ======================
   Navbar
====================== */


.topbar {


  background:

  rgba(17,24,39,.8);


  border-bottom:

  1px solid var(--border);


  padding:

  20px;


  backdrop-filter:

  blur(12px);


}



/* ======================
   Stats
====================== */


.stats-grid {


  display:grid;


  grid-template-columns:

  repeat(auto-fit,minmax(220px,1fr));


  gap:20px;


}



.stat-card {


  padding:

  25px;


}



.stat-card strong {


  font-size:

  32px;


  color:white;


}



/* ======================
   Student Cards
====================== */


.student-card {


  padding:

  20px;


  margin-bottom:

  20px;


}



/* ======================
   Progress
====================== */


progress {


  width:100%;

  height:12px;

}



/* scrollbar */


::-webkit-scrollbar {

 width:10px;

}


::-webkit-scrollbar-track {

 background:#0b1020;

}


::-webkit-scrollbar-thumb {

 background:#6366f1;

 border-radius:10px;

}
/* ==========================
   Student Course Accordion
========================== */


.course-card,
.chapter-item,
.lesson-item {

    background: rgba(24,34,53,.85);

    border:1px solid var(--border);

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

}



.chapter-item summary,
.lesson-item summary {

    list-style:none;

    cursor:pointer;

    padding:22px;

    font-size:20px;

    font-weight:700;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:white;

}



.chapter-item summary::-webkit-details-marker,
.lesson-item summary::-webkit-details-marker {

    display:none;

}



.chapter-item summary:hover,
.lesson-item summary:hover {

    background:rgba(99,102,241,.15);

}



.chapter-item[open] > summary {

    border-bottom:1px solid var(--border);

    background:rgba(99,102,241,.12);

}



.lessons-box {

    padding:20px;

}



.lesson-item {

    margin-bottom:15px;

    background:rgba(15,23,42,.8);

}



.lesson-item summary {

    font-size:17px;

    padding:18px;

}



.lesson-content {

    padding:20px;

    border-top:1px solid var(--border);

}



.lesson-content p {

    margin-bottom:20px;

    font-size:16px;

}



.progress-box {

    margin-top:25px;

    padding:25px;

}



.progress-track {

    height:12px;

    background:#020617;

    border-radius:20px;

    overflow:hidden;

    margin:20px 0;

}



.progress-fill {

    height:100%;

    background:linear-gradient(
        90deg,
        #6366f1,
        #a855f7
    );

    border-radius:20px;

}





/* ==========================
      Mobile
========================== */


@media(max-width:600px){


.container {

    width:94%;

}



.topbar {

    padding:14px;

}



.hero {

    padding:20px;

    flex-direction:column;

    gap:20px;

}



.hero h1 {

    font-size:25px;

}



.stats-grid {

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}



.stat-card {

    padding:16px;

    text-align:center;

}



.stat-card strong {

    font-size:24px;

}



.panel {

    padding:18px;

    margin-top:20px;

}



.chapter-item summary {

    font-size:17px;

    padding:18px;

}



.lesson-item summary {

    font-size:15px;

}



.lessons-box {

    padding:12px;

}


.btn {

    width:100%;

    text-align:center;

}


}