:root {
  --rio-primary: #2b40ea;      /* vibrant purple */
  --rio-primary-dark: #1424a6;
  --rio-accent: #FFB100;       /* warm gold */
  --rio-teal: #00C2A8;
  --rio-pink: #4dfffc;
  --rio-bg: #F7F6FC;
  --rio-dark: #191033;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--rio-bg);
  color: #2b2340;
}

/* ---------- Navbar ---------- */
.rio-navbar {
  background: linear-gradient(90deg, var(--rio-primary), var(--rio-primary-dark));
}
.rio-navbar .nav-link { color: #ece6ff; font-weight: 500; }
.rio-navbar .nav-link:hover { color: #fff; }

/* ---------- Hero ---------- */
.rio-hero {
  background: linear-gradient(135deg, var(--rio-primary) 0%, #3340EA 45%, var(--rio-pink) 100%);
  color: #fff;
  border-radius: 0 0 40px 40px;
  padding: 70px 0 90px;
}
.rio-hero h1 { font-weight: 800; }
.rio-hero .btn-cta {
  background: var(--rio-accent);
  color: #2b1a00;
  font-weight: 700;
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(255,177,0,.35);
}
.rio-hero .btn-cta:hover { filter: brightness(1.05); color:#2b1a00; }

/* ---------- Section titles ---------- */
.section-title {
  font-weight: 800;
  color: var(--rio-dark);
}
.section-title .accent { color: var(--rio-primary); }

/* ---------- Category chips ---------- */
.chip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  background: #fff;
  border: 2px solid #eee2ff;
  font-weight: 600;
  font-size: .85rem;
  color: var(--rio-primary-dark);
  margin: 0 6px 10px 0;
}

/* ---------- Course cards ---------- */
.course-card {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(108,43,217,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(108,43,217,.18);
}
.course-card .thumb {
  height: 160px;
  background: linear-gradient(135deg, var(--rio-teal), var(--rio-primary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.5rem;
}
.badge-diff {
  font-weight: 600;
  border-radius: 50px;
  padding: 5px 12px;
}
.badge-Beginner { background: #E7F9F0; color: #0F9D58; }
.badge-Intermediate { background: #FFF4E0; color: #B8860B; }
.badge-Advanced { background: #FFE9EC; color: #D6336C; }
.badge-Professional { background: #EDE7FF; color: var(--rio-primary-dark); }

.price-old { text-decoration: line-through; color: #999; font-size: .9rem; }
.price-new { color: var(--rio-pink); font-weight: 800; font-size: 1.25rem; }

/* ---------- Buttons ---------- */
.btn-rio {
  background: var(--rio-primary);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 10px;
}
.btn-rio:hover { background: var(--rio-primary-dark); color: #fff; }
.btn-rio-outline {
  border: 2px solid var(--rio-primary);
  color: var(--rio-primary);
  font-weight: 600;
  border-radius: 10px;
  background: #fff;
}
.btn-rio-outline:hover { background: var(--rio-primary); color: #fff; }

/* ---------- Auth cards ---------- */
.auth-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 15px;
}
.auth-card {
  max-width: 440px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 16px 40px rgba(108,43,217,.14);
}

/* ---------- Dashboard ---------- */
.stat-card {
  border-radius: 16px;
  padding: 22px;
  color: #fff;
  font-weight: 600;
}
.stat-1 { background: linear-gradient(135deg, var(--rio-primary), #9333EA); }
.stat-2 { background: linear-gradient(135deg, var(--rio-teal), #00A88F); }
.stat-3 { background: linear-gradient(135deg, var(--rio-pink), #E0367A); }
.stat-4 { background: linear-gradient(135deg, var(--rio-accent), #E69500); color:#2b1a00; }

/* ---------- Lesson sidebar (learn.php) ---------- */
.lesson-list .list-group-item {
  border: none;
  border-left: 4px solid transparent;
  border-radius: 0;
}
.lesson-list .list-group-item.active {
  background: #F1EBFF;
  border-left-color: var(--rio-primary);
  color: var(--rio-primary-dark);
  font-weight: 600;
}
.lesson-list .list-group-item.completed .bi-check-circle-fill { color: var(--rio-teal); }

/* ---------- Footer ---------- */
.rio-footer { background: var(--rio-dark); }
.footer-link { color: #cfc4ec; text-decoration: none; }
.footer-link:hover { color: #fff; }

/* ---------- Misc ---------- */
.rounded-4x { border-radius: 20px; }
.video-ratio { border-radius: 14px; overflow: hidden; background:#000; }