:root{
  --brand:        #4f46e5;
  --brand-dark:   #4338ca;
  --brand-light:  #eef2ff;
  --brand-grad:   linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  --sidebar-w:    250px;
}

*{ -webkit-tap-highlight-color: transparent; }

body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#f6f7fb;
  color:#1f2937;
  /* iOS: respect the notch / home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Brand utilities ---------- */
.bg-brand{ background:var(--brand) !important; }
.bg-brand-grad{ background:var(--brand-grad) !important; }
.text-brand{ color:var(--brand) !important; }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-brand-outline{ border:1px solid rgba(255,255,255,.4); color:#fff; background:transparent; }
.btn-brand-outline:hover{ background:rgba(255,255,255,.15); color:#fff; }
a{ color:var(--brand); }

/* ---------- Hero ---------- */
.hero{
  background:var(--brand-grad);
  color:#fff;
  padding:5rem 0 6rem;
}
.hero h1{ font-weight:800; letter-spacing:-.5px; }

/* ---------- Cards ---------- */
.course-card{
  border:none;
  border-radius:.9rem;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 1px 3px rgba(16,24,40,.08);
  height:100%;
}
.course-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(16,24,40,.12); }
.course-thumb{
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%;
  background:var(--brand-light);
}
.thumb-placeholder{
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-grad);color:#fff;font-size:2.5rem;
}

.stat-card{ border:none;border-radius:.9rem;box-shadow:0 1px 3px rgba(16,24,40,.08); }
.stat-icon{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;background:var(--brand-light);color:var(--brand);
}

/* ---------- App shell (dashboard) ---------- */
.app-shell{ display:flex; min-height:calc(100vh - 56px); }
.app-sidebar{
  width:var(--sidebar-w);
  background:#fff;
  border-right:1px solid #e9ecef;
}
.app-content{ flex:1 1 auto; min-width:0; }
.app-sidebar .nav-link{
  color:#374151;border-radius:.55rem;font-weight:500;font-size:.94rem;
}
.app-sidebar .nav-link:hover{ background:var(--brand-light); color:var(--brand); }
.app-sidebar .nav-link.active{ background:var(--brand); color:#fff; }

@media (min-width:992px){
  /* keep sidebar visible & sticky on desktop */
  .app-sidebar.offcanvas-lg{ position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
}

/* ---------- Auth pages ---------- */
.auth-wrap{ min-height:calc(100vh - 120px); display:flex; align-items:center; }
.auth-card{ border:none; border-radius:1rem; box-shadow:0 10px 40px rgba(16,24,40,.10); }

/* ---------- Lesson player ---------- */
.player-shell{ display:flex; gap:1.25rem; }
.player-main{ flex:1 1 auto; min-width:0; }
.player-list{ width:320px; flex:0 0 320px; }
.lesson-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem .85rem;border-radius:.6rem;text-decoration:none;color:#374151;
}
.lesson-item:hover{ background:var(--brand-light); }
.lesson-item.active{ background:var(--brand); color:#fff; }
.lesson-item.done .bi-check-circle-fill{ color:#22c55e; }
.lesson-item.active.done .bi-check-circle-fill{ color:#fff; }
.video-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:.75rem; overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:991.98px){
  .player-shell{ flex-direction:column; }
  .player-list{ width:100%; flex:none; }
}

/* ---------- Misc ---------- */
.badge-level-beginner{ background:#dcfce7;color:#166534; }
.badge-level-intermediate{ background:#fef9c3;color:#854d0e; }
.badge-level-advanced{ background:#fee2e2;color:#991b1b; }
.form-control:focus,.form-select:focus{
  border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(79,70,229,.15);
}
.min-vh-100{ min-height:100vh; }

/* Prevent iOS zoom on input focus (font-size >= 16px) */
input,select,textarea{ font-size:16px; }