/* LMS B2C — Marketplace-specific styles on top of main.css */

/* Top bar — fixed so it's always visible (sticky relied on no overflow:hidden
   ancestors and broke on a few pages). Body gets a matching top padding via
   the .lms-body class so content doesn't slide under the bar on load. */
.lms-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid #e2e8f0; }
.lms-topbar-inner { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; min-height: 60px; }
.lms-body { padding-top: 64px; }   /* offset for the fixed topbar */
.lms-body.no-topbar { padding-top: 0; }
.lms-brand { font-weight: 800; font-size: 1.1rem; color: #0f172a; text-decoration: none; }
.lms-topnav { display: flex; gap: 1rem; }
.lms-topnav a { color: #475569; text-decoration: none; font-weight: 500; font-size: .92rem; padding: .4rem .6rem; border-radius: .4rem; }
.lms-topnav a:hover, .lms-topnav a.is-active { background: #f1f5f9; color: #0f172a; }
.lms-topsearch { flex: 1; max-width: 400px; }
.lms-topsearch input { width: 100%; padding: .5rem .9rem; border: 1px solid #cbd5e1; border-radius: 999px; font-size: .9rem; }
.lms-topbar-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.lms-cur-form select { padding: .35rem .6rem; font-size: .85rem; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.lms-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #475569; }
.lms-icon-btn:hover { background: #f1f5f9; }
/* Studio Dashboard CTA — surfaced for educators so they can hop back to the
   studio from any page. Pill-shaped, brand purple, icon + label. */
.lms-studio-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem;
  letter-spacing: -.005em; box-shadow: 0 4px 12px rgba(124,58,237,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.lms-studio-btn i { font-size: 1.05rem; }
.lms-studio-btn:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(124,58,237,.35);
}
@media (max-width: 991.98px) {
  .lms-studio-btn span { display: none; }
  .lms-studio-btn { padding: .45rem .65rem; }
}

/* Student variant of the dashboard pill — blue instead of brand purple. */
.lms-student-dash-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.lms-student-dash-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .35);
}

/* ── Mobile topbar overhaul (<992px) ─────────────────────────
   The desktop topbar tries to fit brand + 3 links + search +
   studio btn + cart + bell + avatar. That overflows on phones,
   which is what was making the Studio button overlap the cart
   icon in the user's screenshot.

   On mobile we:
   - hide the 3 nav links + search (they move into the hamburger)
   - shrink the brand
   - show a hamburger button on the left that toggles an offcanvas
     drawer with the full nav + search
   - tighten action spacing
*/
.lms-mobile-burger {
  display: none;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  border-radius: 999px;
  color: #475569;
  align-items: center; justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.lms-mobile-burger:hover { background: #f1f5f9; }

/* Mobile drawer container — hidden completely on desktop via display:none.
   Only revealed inside the <992px media query, where it lives off-screen
   (transform: translateX(-100%)) until body gets .lms-mobile-drawer-open.
   The display:none is critical — without it, the drawer markup falls into
   document flow on desktop because some host pages override position. */
.lms-mobile-drawer,
.lms-mobile-drawer-scrim { display: none !important; }

.lms-mobile-drawer-head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #eef0f4;
  display: flex; align-items: center; gap: .65rem;
}
.lms-mobile-drawer-head strong { color: #0f172a; font-size: 1.05rem; flex: 1 1 auto; }
.lms-mobile-drawer-head button {
  width: 36px; height: 36px;
  border: 0; background: transparent;
  border-radius: 999px;
  color: #6b7280;
  font-size: 1.2rem;
  cursor: pointer;
}
.lms-mobile-drawer-head button:hover { background: #f3f4f6; }

.lms-mobile-drawer-search {
  padding: 1rem 1.25rem .5rem;
}
.lms-mobile-drawer-search input {
  width: 100%;
  padding: .65rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: .95rem;
  background: #f8fafc;
}
.lms-mobile-drawer-search input:focus {
  background: #fff; border-color: #c4b5fd; outline: none;
  box-shadow: 0 0 0 4px rgba(124,58,237,.10);
}

.lms-mobile-drawer-nav { padding: .5rem; flex: 1 1 auto; overflow-y: auto; }
.lms-mobile-drawer-nav a {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  color: #1f2937;
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
}
.lms-mobile-drawer-nav a:hover, .lms-mobile-drawer-nav a.is-active {
  background: #f5f3ff; color: #6d28d9;
}
.lms-mobile-drawer-nav a i { font-size: 1.1rem; color: #9ca3af; }
.lms-mobile-drawer-nav a:hover i, .lms-mobile-drawer-nav a.is-active i { color: #7c3aed; }

.lms-mobile-drawer-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid #eef0f4;
  display: flex; gap: .5rem;
}
.lms-mobile-drawer-foot .btn { flex: 1; }

@media (max-width: 991.98px) {
  .lms-mobile-burger { display: inline-flex; }
  .lms-topnav { display: none; }
  .lms-topsearch { display: none; }
  .lms-topbar-inner { padding: .55rem .25rem; gap: .35rem; min-height: 58px; }
  .lms-topbar-actions { gap: .25rem; margin-left: auto; }
  .lms-icon-btn { width: 36px; height: 36px; }
  .lms-brand { font-size: 1rem; }
  /* Reduce body top padding so the (shorter) topbar still fits */
  .lms-body { padding-top: 60px; }

  /* Drawer + scrim become visible on mobile (still hidden off-screen
     until body gets .lms-mobile-drawer-open) */
  .lms-mobile-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 88%; max-width: 340px;
    background: #fff;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 12px 0 28px rgba(15,23,42,.18);
  }
  .lms-mobile-drawer-scrim {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 1090;
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  body.lms-mobile-drawer-open .lms-mobile-drawer { transform: translateX(0); }
  body.lms-mobile-drawer-open .lms-mobile-drawer-scrim { opacity: 1; pointer-events: auto; }
  body.lms-mobile-drawer-open { overflow: hidden; }
}
@media (max-width: 380px) {
  .lms-brand { font-size: .92rem; }
  .lms-topbar-actions { gap: .15rem; }
  .lms-icon-btn { width: 34px; height: 34px; }
}

/* ── Site-wide mobile polish ──────────────────────────────── */
@media (max-width: 768px) {
  /* Cards never overflow viewport on small screens */
  .card, .lms-card { border-radius: 12px; }

  /* Tighter container padding on mobile */
  .lms-container { padding-left: 1rem; padding-right: 1rem; }

  /* Touch-friendly buttons */
  .btn { min-height: 40px; }
  .btn-lg { min-height: 48px; }

  /* Forms — bigger text, less iOS auto-zoom on focus */
  input.form-control,
  textarea.form-control,
  select.form-select { font-size: 16px; }

  /* Bootstrap modals scroll properly on mobile */
  .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }
  .modal-content { border-radius: 14px; }

  /* Tables that don't fit get horizontal scroll instead of breaking layout */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sticky footer doesn't crowd content */
  .lms-footer-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .lms-footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
}
@media (max-width: 480px) {
  .lms-footer-cols { grid-template-columns: 1fr; }
}
.lms-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; text-decoration: none; font-weight: 600; }
.lms-pill-admin { background: #fef3c7; color: #92400e; }
.lms-pill-educator { background: #ddd6fe; color: #5b21b6; }
.lms-user-btn { background: none; border: none; padding: 0; cursor: pointer; }
/* Topbar user-menu dropdown — fixed width so the column doesn't wrap
   and stays visually consistent across all roles (student / educator /
   admin). 245px fits the longest label ("My enrolled courses") nicely. */
.lms-user-menu .dropdown-menu { width: 245px; min-width: 245px; }
.lms-user-menu .dropdown-menu .dropdown-item { white-space: normal; }
.lms-avatar { width: 36px; height: 36px; border-radius: 50%; background: #7c3aed; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; }
.lms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lms-avatar-lg { width: 96px; height: 96px; font-size: 2rem; }
.lms-avatar-xl { width: 140px; height: 140px; font-size: 3rem; }

.lms-main { min-height: calc(100vh - 200px); }
.lms-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 576px)  { .lms-container { max-width: 540px; } }
@media (min-width: 768px)  { .lms-container { max-width: 720px; } }
@media (min-width: 992px)  { .lms-container { max-width: 960px; } }
@media (min-width: 1200px) { .lms-container { max-width: 1140px; } }
@media (min-width: 1400px) { .lms-container { max-width: 1320px; } }
.lms-section { padding: 3rem 0; }
.lms-section-alt { background: #f8fafc; }
.lms-section-title { font-size: 1.5rem; margin-bottom: 1.25rem; font-weight: 700; }

/* Hero */
.lms-hero { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; padding: 4rem 0; }
.lms-hero-inner {
  width: 100%; margin-right: auto; margin-left: auto; text-align: center;
  padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem);
}
@media (min-width: 576px)  { .lms-hero-inner { max-width: 540px; } }
@media (min-width: 768px)  { .lms-hero-inner { max-width: 720px; } }
@media (min-width: 992px)  { .lms-hero-inner { max-width: 960px; } }
@media (min-width: 1200px) { .lms-hero-inner { max-width: 1140px; } }
@media (min-width: 1400px) { .lms-hero-inner { max-width: 1320px; } }
.lms-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; margin-bottom: 1rem; }
.lms-hero .lead { font-size: 1.15rem; opacity: .92; margin-bottom: 2rem; }
.lms-hero-search { display: flex; gap: .5rem; max-width: 600px; margin: auto; }
.lms-hero-search input { flex: 1; padding: .9rem 1.2rem; font-size: 1rem; border: none; border-radius: 999px; }
.lms-hero-search button { padding: 0 1.5rem; border-radius: 999px; }
.lms-hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.lms-hero-pills a { background: rgba(255,255,255,.18); padding: .35rem 1rem; border-radius: 999px; color: #fff; font-size: .88rem; text-decoration: none; }
.lms-hero-pills a:hover { background: rgba(255,255,255,.3); }

/* Course grid */
.lms-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.lms-course-card { position: relative; display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.lms-course-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.08); text-decoration: none; }
/* When the card is a <div> (not an <a>) we use the stretched-link pattern so
   the title's <a> still covers the whole tile, leaving room for inline links
   (instructor profile etc.) to sit above it. */
.lms-course-card .stretched-link { color: inherit; text-decoration: none; }
.lms-course-card .stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: auto; }
.lms-course-card .lms-inline-link { position: relative; z-index: 2; color: #6d28d9; text-decoration: none; }
.lms-course-card .lms-inline-link:hover { text-decoration: underline; }
.lms-course-thumb { aspect-ratio: 16/9; background: #f1f5f9; overflow: hidden; }
.lms-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lms-course-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 2rem; }
.lms-course-card-body { padding: 1rem; }
.lms-course-card-body h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lms-course-price { margin-top: .5rem; font-size: 1rem; }
.lms-course-price s { font-weight: 400; font-size: .85rem; margin-left: .35rem; }
.lms-rating { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; }
.lms-rating-stars { color: #f59e0b; }

/* Categories */
.lms-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.lms-cat-card { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: #0f172a; }
.lms-cat-card:hover { border-color: #7c3aed; text-decoration: none; }
.lms-cat-card i { font-size: 2rem; color: #7c3aed; }

/* CTA blocks */
.lms-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.lms-cta-card { padding: 2rem; border-radius: 16px; background: #f1f5f9; }
.lms-cta-card.lms-cta-alt { background: linear-gradient(135deg, #fde68a, #fbbf24); }
.lms-cta-card h3 { font-weight: 700; margin-bottom: .75rem; }

/* Auth pages */
.lms-auth-page { background: #f8fafc; }
.lms-auth-shell { min-height: calc(100vh - 100px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.lms-auth-card { background: #fff; border-radius: 16px; padding: 2.5rem; max-width: 480px; width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.lms-auth-card h1 { font-size: 1.7rem; margin-bottom: .25rem; }
.lms-auth-back { color: #64748b; font-size: .85rem; text-decoration: none; }
.lms-check { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }

/* Course detail */
.lms-course-hero { background: #1e293b; color: #fff; padding: 3rem 0; }
.lms-course-hero-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;
  width: 100%; margin-right: auto; margin-left: auto;
  padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem);
}
@media (min-width: 576px)  { .lms-course-hero-grid { max-width: 540px; } }
@media (min-width: 768px)  { .lms-course-hero-grid { max-width: 720px; } }
@media (min-width: 992px)  { .lms-course-hero-grid { max-width: 960px; } }
@media (min-width: 1200px) { .lms-course-hero-grid { max-width: 1140px; } }
@media (min-width: 1400px) { .lms-course-hero-grid { max-width: 1320px; } }
@media (max-width: 768px) { .lms-course-hero-grid { grid-template-columns: 1fr; } }
.lms-course-hero h1 { font-size: 2rem; font-weight: 800; }
.lms-course-hero a { color: #c4b5fd; }
.lms-course-promo-video, .lms-course-promo-img { width: 100%; border-radius: 12px; }
.lms-course-buy-card { background: #fff; color: #0f172a; padding: 1.25rem; border-radius: 12px; }
.lms-course-buy-card .lms-price { font-size: 1.7rem; font-weight: 700; margin-bottom: 1rem; }
.lms-course-body { display: flex; flex-direction: column; gap: 2rem; padding: 2rem 1rem 4rem; }
.lms-course-body section h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .75rem; }
.lms-curriculum details { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: .5rem; padding: .85rem 1rem; }
.lms-curriculum summary { cursor: pointer; }

.lms-instructor-card { display: flex; gap: 1.5rem; padding: 1.5rem; background: #f8fafc; border-radius: 12px; align-items: flex-start; }
.lms-review { padding: 1rem 0; border-bottom: 1px solid #e2e8f0; }
.lms-review-head { display: flex; gap: .75rem; margin-bottom: .5rem; }

/* Instructor profile */
.lms-instructor-hero { background: #f8fafc; padding: 3rem 0; }
.lms-instructor-hero-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center;
  width: 100%; margin-right: auto; margin-left: auto;
  padding-right: var(--bs-gutter-x, .75rem); padding-left: var(--bs-gutter-x, .75rem);
}
@media (min-width: 576px)  { .lms-instructor-hero-grid { max-width: 540px; } }
@media (min-width: 768px)  { .lms-instructor-hero-grid { max-width: 720px; } }
@media (min-width: 992px)  { .lms-instructor-hero-grid { max-width: 960px; } }
@media (min-width: 1200px) { .lms-instructor-hero-grid { max-width: 1140px; } }
@media (min-width: 1400px) { .lms-instructor-hero-grid { max-width: 1320px; } }
.lms-instructor-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0; }
.lms-instructor-stats span { color: #64748b; }
.lms-instructor-socials { display: flex; gap: .5rem; }
.lms-social-link { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #cbd5e1; color: #475569; }
.lms-social-link:hover { color: #7c3aed; border-color: #7c3aed; }
.lms-instructor-body { padding: 2rem 1rem 4rem; display: flex; flex-direction: column; gap: 2.5rem; }
.lms-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.lms-tag { background: #ddd6fe; color: #5b21b6; padding: .25rem .7rem; border-radius: 999px; font-size: .82rem; }

/* Cart + checkout */
.lms-cart-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: flex-start; }
@media (max-width: 768px) { .lms-cart-grid { grid-template-columns: 1fr; } }
.lms-cart-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #e2e8f0; }
.lms-cart-row img { width: 100px; height: 60px; object-fit: cover; border-radius: 6px; }
.lms-cart-summary, .lms-checkout-summary { background: #f8fafc; padding: 1.25rem; border-radius: 12px; position: sticky; top: 80px; }
.lms-checkout-grid { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: flex-start; }
@media (max-width: 768px) { .lms-checkout-grid { grid-template-columns: 1fr; } }
.lms-pay-methods { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.lms-pay-method { display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; }
.lms-pay-method-name { font-weight: 600; }

/* Stat / action cards */
.lms-stat-card { background: #fff; padding: 1.25rem; border-radius: 12px; border: 1px solid #e2e8f0; text-align: center; text-decoration: none; color: inherit; display: block; }
.lms-stat-card span { display: block; font-size: 1.8rem; font-weight: 800; color: #0f172a; }
.lms-stat-card label { display: block; color: #64748b; font-size: .85rem; }
.lms-stat-link:hover { border-color: #7c3aed; text-decoration: none; }
.lms-stat-link.is-attention { border-color: #f59e0b; background: #fffbeb; }
.lms-action-card { display: flex; align-items: center; gap: .75rem; padding: 1.25rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: #0f172a; font-weight: 600; }
.lms-action-card:hover { border-color: #7c3aed; text-decoration: none; }
.lms-action-card i { font-size: 1.5rem; color: #7c3aed; }

/* Progress bar */
.lms-progress { background: #e2e8f0; height: 6px; border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.lms-progress-bar { background: #7c3aed; height: 100%; transition: width .3s; }

/* Empty state */
.lms-empty { padding: 3rem 1rem; text-align: center; color: #64748b; }
.lms-empty i { font-size: 3rem; color: #cbd5e1; margin-bottom: .75rem; display: inline-block; }
.lms-empty h3 { color: #0f172a; }

/* Footer */
.lms-footer { background: #0f172a; color: #94a3b8; padding: 3rem 0 2rem; margin-top: 4rem; }
.lms-footer-inner { width: 100%; }
.lms-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.lms-footer-cols a { display: block; color: #cbd5e1; text-decoration: none; padding: .25rem 0; font-size: .9rem; }
.lms-footer-cols a:hover { color: #fff; }
.lms-footer-cols h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.lms-footer-bottom { padding-top: 1.5rem; border-top: 1px solid #1e293b; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lms-footer-bottom .muted { color: #94a3b8; }
.lms-footer-currency { display: inline-flex; align-items: center; gap: .4rem; }
.lms-footer-currency .lms-cur-form select { background: #1e293b; color: #fff; border: 1px solid #334155; padding: .35rem .7rem; font-size: .85rem; border-radius: 6px; }
.lms-footer-currency .lms-cur-form select:focus { outline: none; border-color: #7c3aed; }
@media (max-width: 640px) { .lms-footer-bottom { justify-content: center; text-align: center; } }

/* Filter bar */
.lms-filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.lms-filter-bar > * { flex: 1; min-width: 180px; }

/* Generic table styling */
.lms-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.lms-table thead { background: #f8fafc; }
.lms-table th, .lms-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.lms-table tr:last-child td { border-bottom: none; }

.lms-card { background: #fff; padding: 1.5rem; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 1rem; }

.lms-notif { padding: 1rem; border-bottom: 1px solid #e2e8f0; }
.lms-notif.is-unread { background: #f5f3ff; }

.lms-static-page h1 { margin-bottom: 1.5rem; }
.lms-static-body { line-height: 1.7; max-width: 60rem; }
.lms-static-body h2 { margin: 2rem 0 .75rem; }
.lms-static-body p { margin: .75rem 0; }

.lms-blog-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.lms-blog-cats a { padding: .35rem .9rem; border-radius: 999px; background: #f1f5f9; color: #475569; text-decoration: none; font-size: .88rem; }
.lms-blog-cats a.is-active, .lms-blog-cats a:hover { background: #7c3aed; color: #fff; }
.lms-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.lms-blog-card { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; }
.lms-blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.lms-blog-card > div { padding: 1.25rem; }
.lms-blog-post { max-width: 60rem; margin: 0 auto; padding: 2rem 1rem; }
.lms-blog-cover { width: 100%; border-radius: 12px; margin: 1.5rem 0; }
.lms-blog-share { padding: 1.5rem 0; border-top: 1px solid #e2e8f0; margin-top: 2rem; display: flex; gap: .75rem; align-items: center; }

.lms-role-pick { display: flex; gap: .5rem; }
.lms-role-pick label { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .8rem; border: 1px solid #cbd5e1; border-radius: 8px; cursor: pointer; }

.lms-api-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
@media (max-width: 768px) { .lms-api-grid { grid-template-columns: 1fr; } }
.lms-api-side { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem; }
.lms-api-side h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 1rem 0 .5rem; }
.lms-api-side ul { list-style: none; padding: 0; margin: 0; }
.lms-api-side li a { display: flex; justify-content: space-between; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; color: #0f172a; font-size: .9rem; }
.lms-api-side li a:hover, .lms-api-side li a.is-active { background: #f5f3ff; color: #7c3aed; }
.lms-api-main { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem; }

.lms-resume { line-height: 1.7; }
.lms-resume h2, .lms-resume h3 { margin-top: 1.5rem; }

.lms-checkout-success { padding: 4rem 1rem; }

/* ── Lesson runner + auto-progress UI ─────────────────────────────── */
.lms-lesson-shell {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem;
  width: 100%; margin-right: auto; margin-left: auto;
  padding: 1rem var(--bs-gutter-x, .75rem);
}
@media (min-width: 576px)  { .lms-lesson-shell { max-width: 540px; } }
@media (min-width: 768px)  { .lms-lesson-shell { max-width: 720px; } }
@media (min-width: 992px)  { .lms-lesson-shell { max-width: 960px; } }
@media (min-width: 1200px) { .lms-lesson-shell { max-width: 1140px; } }
@media (min-width: 1400px) { .lms-lesson-shell { max-width: 1320px; } }
@media (max-width: 900px) { .lms-lesson-shell { grid-template-columns: 1fr; } }
.lms-lesson-sidebar { background: #f8fafc; border-radius: 10px; padding: 1rem; max-height: calc(100vh - 6rem); overflow-y: auto; position: sticky; top: 5rem; }
.lms-lesson-sidebar h4 { margin: 0 0 .5rem; font-size: .85rem; color: #475569; text-transform: uppercase; letter-spacing: .05em; }
.lms-lesson-toc { list-style: none; padding: 0; margin: 0 0 1rem; }
.lms-lesson-toc li { padding: .35rem .5rem; border-radius: 4px; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.lms-lesson-toc li a { color: #334155; text-decoration: none; flex: 1; }
.lms-lesson-toc li.is-active { background: #ddd6fe; }
.lms-lesson-toc li.is-active a { color: #4c1d95; font-weight: 600; }
.lms-lesson-toc li.is-completed a::before { content:"✓ "; color: #16a34a; }
.lms-lesson-toc li.is-locked a { color: #94a3b8; pointer-events: none; }
.lms-lesson-toc li.is-locked::before { content: "🔒 "; }
.lms-lesson-main article.lms-lesson-content { line-height: 1.7; font-size: 1.05rem; }
.lms-lesson-progress-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin: .25rem 0 .75rem; }
.lms-lesson-progress-bar > div { height: 100%; background: linear-gradient(90deg,#7c3aed,#22d3ee); transition: width .4s; }
.lms-lesson-video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }
/* Theater mode: drop the sidebar TOC's flex sizing so the player area
   spans the available width. Activated by JS toggling .lms-theater-mode
   on <body>. Outside of fullscreen it just gives the video room to breathe. */
body.lms-theater-mode .lms-lesson-toc { display: none !important; }
body.lms-theater-mode .lms-lesson-main { max-width: 100% !important; }
body.lms-theater-mode .lms-lesson-video { max-height: 85vh; }
/* Inside browser fullscreen we want the video centred + a black backdrop
   so bookmarks / toolbar are still legible against the dark UI. */
.lms-lesson-video-wrap:fullscreen,
.lms-lesson-video-wrap:-webkit-full-screen {
    background: #000;
    padding: 1rem;
    display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.lms-lesson-video-wrap:fullscreen .lms-lesson-video,
.lms-lesson-video-wrap:-webkit-full-screen .lms-lesson-video { max-height: 80vh; }
.lms-video-toolbar .btn:focus { box-shadow: none; }
.lms-lesson-nav { display: flex; gap: .75rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.lms-skip-pill { background: #fef3c7; color: #92400e; border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; }
.lms-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: .8rem 1.2rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); color: #fff; transform: translateY(20px); opacity: 0; transition: .3s; z-index: 9999; font-size: .92rem; }
.lms-toast.is-show { transform: translateY(0); opacity: 1; }
.lms-toast-success { background: #16a34a; }
.lms-toast-info    { background: #2563eb; }
.lms-toast-cert    { background: linear-gradient(90deg,#a855f7,#ec4899); padding-right: 1.4rem; }

/* =========================================================
   POLISH PASS — global UI refinements
   ========================================================= */

/* Buttons — primary gets a soft hover lift + stronger focus ring */
.lms-body .btn { font-weight: 600; letter-spacing: -.005em; transition: transform .12s ease, box-shadow .15s ease, background .15s, border-color .15s; }
.lms-body .btn-primary { background: #7c3aed; border-color: #7c3aed; box-shadow: 0 1px 2px rgba(124,58,237,.15); }
.lms-body .btn-primary:hover { background: #6d28d9; border-color: #6d28d9; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124,58,237,.28); }
.lms-body .btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(124,58,237,.15); }
.lms-body .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(124,58,237,.32); }
.lms-body .btn-outline-primary { color:#7c3aed; border-color:#c4b5fd; background:#fff; }
.lms-body .btn-outline-primary:hover { background:#f5f3ff; color:#6d28d9; border-color:#a78bfa; }
.lms-body .btn-light { background:#f7f7fb; border-color:#e2e8f0; color:#0f172a; }
.lms-body .btn-light:hover { background:#fff; border-color:#cbd5e1; }
.lms-body .btn-lg { padding: .7rem 1.1rem; font-size: 1rem; border-radius: 12px; }

/* Form inputs — purple focus, friendlier border, consistent size */
.lms-body .form-control, .lms-body .form-select {
  border-color: #e2e8f0; background: #f7f7fb; transition: border-color .15s, background .15s, box-shadow .15s;
  border-radius: 10px;
}
.lms-body .form-control:focus, .lms-body .form-select:focus {
  background: #fff; border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}
.lms-body .form-control[readonly] { background:#f1f5f9; color:#475569; }
.lms-body .form-label { font-weight: 600; font-size: .82rem; color:#334155; margin-bottom:.3rem; }
.lms-body .form-control.is-invalid { border-color:#ef4444; background:#fef2f2; }

/* Course card — refined hover + crispier price typography */
.lms-course-card { box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .18s ease, box-shadow .2s ease, border-color .2s; }
.lms-course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(15,23,42,.10); border-color: #ddd6fe; }
.lms-course-card-body h3 { letter-spacing: -.01em; }
.lms-course-card-body { padding: 1rem 1rem 1.15rem; }
.lms-course-price strong { letter-spacing: -.015em; font-size: 1.05rem; color: #0f172a; }
.lms-course-thumb { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); }

/* Tables — zebra + hover + slightly looser cells, sticky header for long lists */
.lms-table { font-size: .92rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.lms-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; background: #f8fafc; }
.lms-table tbody tr { transition: background .12s; }
.lms-table tbody tr:nth-child(even) { background: #fafbfc; }
.lms-table tbody tr:hover { background: #f5f3ff; }
.lms-table th, .lms-table td { padding: .85rem 1rem; vertical-align: middle; }

/* Stat card — larger headline number, subtle gradient strip on top */
.lms-stat-card { background:#fff; border:1px solid #e2e8f0; border-radius: 14px; padding: 1.1rem 1.2rem; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lms-stat-card::before { content:''; position:absolute; left:0; top:0; right:0; height:3px; background: linear-gradient(90deg,#7c3aed,#a855f7); opacity:0; transition: opacity .2s; }
.lms-stat-card:hover::before { opacity:1; }
.lms-stat-card span { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color:#0f172a; }
.lms-stat-card label { font-size: .78rem; color:#64748b; text-transform: uppercase; letter-spacing: .05em; margin-top:.15rem; }
a.lms-stat-card.lms-stat-link:hover { border-color:#c4b5fd; box-shadow: 0 6px 18px rgba(124,58,237,.10); }

/* Action card (admin nav grid) — softer shadow, hover lift */
.lms-action-card { padding: 1.05rem 1.15rem; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .15s ease, box-shadow .2s, border-color .15s; }
.lms-action-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.08); border-color: #c4b5fd; }
.lms-action-card i { font-size: 1.35rem; }

/* Trust strip — small icon row used on cart / checkout for buyer reassurance */
.lms-trust-strip { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; padding: 1rem 1.25rem; margin: .5rem 0 1.5rem; background:#f8fafc; border:1px solid #e2e8f0; border-radius: 14px; }
.lms-trust-item { display:inline-flex; align-items:center; gap:.45rem; color:#475569; font-size:.85rem; font-weight: 500; }
.lms-trust-item i { color:#16a34a; font-size: 1rem; }

/* Section divider — sectioned page dividers (used in checkout / admin) */
.lms-divider-h { height: 1px; background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent); margin: 2rem 0; border: 0; }

/* Pay method card */
.lms-pay-method { padding: .85rem 1rem; transition: border-color .15s, background .15s, box-shadow .15s; gap: .85rem; }
.lms-pay-method:has(input[type=radio]:checked) { border-color: #7c3aed; background: #f5f3ff; box-shadow: 0 0 0 3px rgba(124,58,237,.10); }
.lms-pay-method input[type=radio] { accent-color: #7c3aed; }

/* Cart row polish */
.lms-cart-row { padding: 1.1rem 0; }
.lms-cart-row img { box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.lms-cart-row h3 { font-size: 1rem; margin: 0 0 .25rem; }
.lms-cart-row a { color: #0f172a; text-decoration: none; }
.lms-cart-row a:hover { color: #6d28d9; text-decoration: none; }

/* Checkout/cart sidebar (sticky on wide) */
.lms-cart-summary, .lms-checkout-summary { box-shadow: 0 4px 16px rgba(15,23,42,.05); border:1px solid #e2e8f0; border-radius: 14px; }
.lms-cart-summary h4, .lms-checkout-summary h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .85rem; letter-spacing: -.01em; }

/* Empty state — bigger, friendlier */
.lms-empty { padding: 4rem 1.5rem; }
.lms-empty i { font-size: 3.5rem; opacity: .5; }
.lms-empty h3 { margin: .5rem 0 .35rem; font-weight: 700; }

/* Section heading — h2 used on detail pages */
.lms-container > section > h2,
.lms-course-body > section > h2 {
  font-size: 1.35rem; letter-spacing: -.015em; font-weight: 700; margin-top: 0;
}

/* Filter chip row used on admin reports */
.lms-chip-row { display: inline-flex; gap: .35rem; padding: .25rem; background: #f1f5f9; border-radius: 999px; }
.lms-chip-row .btn { border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; border: 0; background: transparent; color: #475569; }
.lms-chip-row .btn:hover { background: #fff; color: #0f172a; }
.lms-chip-row .btn.btn-primary { background: #7c3aed; color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.25); }

/* KPI row used on admin reports */
.lms-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }

/* Page hero (e.g. admin pages) */
.lms-page-hero { padding: 1.25rem 0 .75rem; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.75rem; }
.lms-page-hero h1 { font-size: 1.75rem; letter-spacing: -.02em; font-weight: 800; margin: 0 0 .35rem; }
.lms-page-hero p.muted { font-size: .92rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE H — SITEWIDE SOFT-CORNER CARD POLISH
   ───────────────────────────────────────────────────────────────────────────
   Replaces the harsh 1px slate borders on every card surface with a soft
   layered shadow that gives depth without a stark outline. Pulled forward
   from the educator-course-edit refactor — same vibe across every page.

   Touched: .lms-card, Bootstrap .card / .modal-content / .dropdown-menu /
   .list-group, plus a few stray panels that copied the legacy 1px border.
   Light-mode only — if a future dark mode lands, keep the shadow but flip
   background to #0f172a-ish.
   ─────────────────────────────────────────────────────────────────────────── */
.lms-card,
.card,
.modal-content,
.dropdown-menu {
  background: #fff;
  border: 0 !important;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 4px 12px rgba(15, 23, 42, .06);
  transition: box-shadow .2s ease;
}
.lms-card { padding: 1.5rem; margin-bottom: 1rem; }

/* Subtle lift on hover for interactive cards (lists, course cards, etc.). */
.lms-card.is-interactive:hover,
.card.is-interactive:hover,
a.lms-card:hover,
a.card:hover {
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .05),
    0 12px 24px rgba(15, 23, 42, .10);
  transform: translateY(-1px);
}

/* Nested cards (e.g., a card inside a tab pane) — softer shadow so the
   inner surface doesn't compete with the outer surface for emphasis. */
.lms-card .lms-card,
.lms-card .card,
.card .lms-card,
.card .card {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .03),
    0 2px 6px rgba(15, 23, 42, .04);
}

/* Headers / footers inside Bootstrap .card need the border softened too. */
.card-header,
.card-footer {
  background: transparent;
  border: 0;
}

/* List groups inside cards lose their box-edge border for a seamless look. */
.list-group {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.list-group-item { border-left: 0; border-right: 0; border-color: #f1f5f9; }
.list-group-item:first-child { border-top: 0; }
.list-group-item:last-child  { border-bottom: 0; }

/* Inputs in cards: soften the slate border to a near-white outline that
   only darkens on focus. Keeps the cards feeling like one continuous
   surface instead of a grid of bordered boxes. */
.lms-card .form-control,
.lms-card .form-select,
.card .form-control,
.card .form-select {
  border-color: #eef0f4;
  background: #fafbfc;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.lms-card .form-control:focus,
.lms-card .form-select:focus,
.card .form-control:focus,
.card .form-select:focus {
  border-color: #a78bfa;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .15);
}

/* Tables inside cards: kill the outer border, keep the row hairlines. */
.lms-card .table,
.card .table { margin-bottom: 0; }
.lms-card .table > :not(caption) > * > *,
.card .table > :not(caption) > * > * { border-color: #f1f5f9; }

/* Modals: header/footer dividers become ultra-light so the modal feels
   like one card with a tinted header band, not three stacked rectangles. */
.modal-header, .modal-footer { border-color: #f1f5f9; }
.modal-content { box-shadow: 0 20px 60px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08); }

/* Buttons: softer outline variant. The Bootstrap default outline-* uses a
   solid 1px which fights the seamless feel — bump to a gentler tone. */
.btn-outline-secondary { border-color: #e2e8f0; color: #475569; }
.btn-outline-secondary:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.btn-outline-primary { border-color: #ddd6fe; color: #5b21b6; }
.btn-outline-primary:hover { background: #ede9fe; color: #4c1d95; border-color: #c4b5fd; }

/* Nav-tabs: kill the bottom underline globally (we use pill-tabs now). */
.nav-tabs { border-bottom: 0; gap: .25rem; }
.nav-tabs .nav-link {
  border: 0; color: #475569; border-radius: 10px; padding: .5rem 1rem;
  font-weight: 500; background: transparent;
}
.nav-tabs .nav-link:hover { background: #f1f5f9; color: #0f172a; }
.nav-tabs .nav-link.active { background: #ede9fe; color: #5b21b6; border: 0; }

/* Underline-style tab strips (admin queue pages / .lms-status-tabs) draw a
   2px bottom border on the active link — the 10px pill radius above makes
   that line curl up at both ends. Square these off so the underline is a
   straight rule, and keep the hover tint from looking like a pill. */
.lms-status-tabs .nav-link,
body[data-lms-route="admin"] .nav-tabs .nav-link {
  border-radius: 0;
}

/* Alerts: lose the harsh border, lean into soft-tinted backgrounds. */
.alert { border: 0; border-radius: 12px; padding: .85rem 1.1rem; }
.alert-info    { background: #eff6ff; color: #1e40af; }
.alert-success { background: #ecfdf5; color: #065f46; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-danger  { background: #fef2f2; color: #991b1b; }

/* Status pills (Bootstrap .badge with semantic bg-*): swap the saturated
   solid backgrounds for soft pastel tints with #000 text. The dark-green
   `bg-success` + white text combo was washing out against the off-white
   card surfaces from the Phase H polish — black on a pale tint reads
   cleanly at any zoom. Applies sitewide so every status pill matches. */
.badge.bg-success   { background-color: #dcfce7 !important; color: #000 !important; }
.badge.bg-info      { background-color: #e0f2fe !important; color: #000 !important; }
.badge.bg-warning   { background-color: #fef3c7 !important; color: #000 !important; }
.badge.bg-danger    { background-color: #fee2e2 !important; color: #000 !important; }
.badge.bg-secondary { background-color: #f1f5f9 !important; color: #000 !important; }
.badge.bg-dark      { background-color: #334155 !important; color: #fff !important; }

/* Page hero on modern pages: drop the bottom border line for a cleaner head. */
.lms-page-head { border-bottom: 0; padding-bottom: .5rem; margin-bottom: 1.25rem; }

/* Empty-state common pattern — soft and centered. */
.lms-empty {
  text-align: center; color: #64748b; padding: 3rem 1rem;
  border-radius: 14px; background: #fafbfc;
}
.lms-empty .bi { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .75rem; }

/* Reduce visual noise from the body background — a near-white off-white
   reads gentler than pure #fff under the soft cards. */
body.lms-body { background: #f8fafc; }