/* =============================================================
   iGURUS STUDENT DASHBOARD — Premium Edition
   Reference: igurus-dashboard-premium.html
   Fonts: Fraunces (display) · Inter (UI)
   ============================================================= */

/* ── 0. Design Tokens ───────────────────────────────────────── */
:root {
  /* Brand palette — flat #A41034 throughout */
  --m900: #A41034;
  --m800: #A41034;
  --m700: #A41034;
  --m600: #A41034;
  --m500: #A41034;
  --m400: #A41034;

  /* Clean neutral backgrounds */
  --c100: #FFFFFF;
  --c200: #F9FAFB;
  --c300: #F3F4F6;

  /* Ink (text) */
  --ink900: #111827;
  --ink700: #374151;
  --ink500: #6B7280;
  --ink300: #9CA3AF;

  /* Gold accent */
  --gold500: #F59E0B;
  --gold300: #FFFFFF;

  /* Rose tint — active nav states */
  --rose50: rgba(164,16,52,.06);

  /* Line / divider */
  --line: #E5E7EB;

  /* Hover state */
  --hover: #D91247;

  /* Semantic aliases (keep old refs working) */
  --brand:       var(--m600);
  --brand-hov:   var(--hover);
  --brand-deep:  var(--m900);
  --bg:          var(--c200);
  --surface:     #FFFFFF;
  --border:      var(--line);
  --border-l:    var(--c300);
  --tx-1:        var(--ink900);
  --tx-2:        var(--ink700);
  --tx-3:        var(--ink500);
  --tx-4:        var(--ink300);

  /* Shadows — neutral */
  --sh-sm: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  --sh-md: 0 4px 10px rgba(17,24,39,.05), 0 2px 4px rgba(17,24,39,.04);
  --sh-lg: 0 12px 32px rgba(164,16,52,.10), 0 4px 12px rgba(164,16,52,.06);

  /* Legacy shadow names mapped */
  --sh-1: var(--sh-sm);
  --sh-2: var(--sh-sm);
  --sh-3: var(--sh-md);
  --sh-4: var(--sh-lg);
  --sh-brand: 0 8px 24px rgba(92,15,36,.28), 0 2px 6px rgba(92,15,36,.14);

  /* Radius */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-pill: 100px;

  /* Legacy radius aliases */
  --r-xs:   6px;
  --r-xl:   var(--r-lg);
  --r-2xl:  var(--r-lg);
  --r-full: var(--r-pill);

  /* Spacing — 8pt grid */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s12:48px;

  /* Motion */
  --ease:        all .15s cubic-bezier(.4,0,.2,1);
  --ease-bounce: all .22s cubic-bezier(.34,1.56,.64,1);
}

/* ── 1. Base — body background + font stack ─────────────────── */
body,
section.dashboard__area,
section.dashboard__area.section-pb-120 {
  background-color: #FDFBF8 !important;
    background: #F5F1EA !important;
  font-family:  'Inter', sans-serif !important;
  color:        var(--ink900) !important;
  -webkit-font-smoothing: antialiased !important;
}

/*section.dashboard__area,
section.dashboard__area.section-pb-120 {
  padding-top:    32px !important;
  padding-bottom: 80px !important;
}*/

/* Fraunces on display elements */
.sdlc-hs__name,
.sdlc-stat__val,
.sdlc-rec-card__price,
.sdlc-lc-card__title,
.sbnew-name {
  font-family: 'Fraunces', serif !important;
}

/* ── 2. SD-FRAME shell ──────────────────────────────────────── */
.sd-frame {
  background:    var(--surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-lg) !important;
  overflow:      hidden !important;
  border:        none !important;
}

/* Top bar */
.sd-frame__top-bar {
  display:       flex !important;
  align-items:   center !important;
  gap:           var(--s4) !important;
  height:        54px !important;
  padding:       0 28px !important;
  background:    var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  border-left:   3px solid var(--m600) !important;
}
.sd-frame__brand {
  display:         flex !important;
  align-items:     center !important;
  gap:             10px !important;
  text-decoration: none !important;
  flex-shrink:     0 !important;
}
.sd-frame__brand-icon {
  width:           32px !important;
  height:          32px !important;
  background:      linear-gradient(135deg, var(--m600), var(--m900)) !important;
  border-radius:   var(--r-sm) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           var(--c100) !important;
  font-size:       .82rem !important;
  box-shadow:      var(--sh-brand) !important;
  flex-shrink:     0 !important;
}
.sd-frame__brand-name {
  font-size:      1rem !important;
  font-weight:    700 !important;
  color:          var(--ink900) !important;
  letter-spacing: -.01em !important;
}
.sd-frame__brand-sep {
  width:       1px !important;
  height:      16px !important;
  background:  var(--line) !important;
  flex-shrink: 0 !important;
}
.sd-frame__brand-sub {
  font-size:   .72rem !important;
  font-weight: 500 !important;
  color:       var(--ink300) !important;
}
.sd-frame__crumb {
  flex:            1 !important;
  display:         flex !important;
  justify-content: center !important;
  align-items:     center !important;
}
.sd-frame__crumb-item {
  display:        flex !important;
  align-items:    center !important;
  gap:            7px !important;
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .13em !important;
  color:          var(--ink300) !important;
}
.sd-frame__crumb-item i { color: var(--m500) !important; font-size: .72rem !important; }
.sd-frame__actions {
  display:     flex !important;
  align-items: center !important;
  gap:         var(--s3) !important;
  flex-shrink: 0 !important;
}
.sd-frame__status {
  display:       flex !important;
  align-items:   center !important;
  gap:           6px !important;
  font-size:     .7rem !important;
  font-weight:   600 !important;
  color:         #2E8049 !important;
  background:    #E7F4EA !important;
  padding:       4px 12px !important;
  border-radius: var(--r-pill) !important;
}
.sd-frame__status-dot {
  width:         7px !important;
  height:        7px !important;
  border-radius: 50% !important;
  background:    #3FA85C !important;
  box-shadow:    0 0 0 3px rgba(63,168,92,.18) !important;
  flex-shrink:   0 !important;
  animation:     live-pulse 2.4s ease-in-out infinite !important;
}
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(63,168,92,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(63,168,92,.0); }
}
.sd-frame__user-chip {
  display:       flex !important;
  align-items:   center !important;
  gap:           8px !important;
  padding:       4px 14px 4px 4px !important;
  background:    var(--c200) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  cursor:        default !important;
}
.sd-frame__user-avatar {
  width:         28px !important;
  height:        28px !important;
  border-radius: 50% !important;
  object-fit:    cover !important;
  border:        2px solid var(--surface) !important;
  box-shadow:    0 0 0 1.5px var(--gold500) !important;
  flex-shrink:   0 !important;
}
.sd-frame__user-name {
  font-size:   .78rem !important;
  font-weight: 700 !important;
  color:       var(--ink700) !important;
}

/* Body grid */
.sd-frame__body {
  display:               grid !important;
  grid-template-columns: 264px 1fr !important;
  min-height:            900px !important;
}
.sd-frame__body > [class*="col-"] {
  width: 100% !important; max-width: 100% !important;
  flex: none !important; min-width: 0 !important;
}
.sd-frame__sidebar-col {
  background:     var(--surface) !important;
  border-right:   1px solid var(--line) !important;
  padding:        0 !important;
  display:        flex !important;
  flex-direction: column !important;
}
.sd-frame__content-col {
  background: var(--c200) !important;
  padding:    28px !important;
  min-width:  0 !important;
}
@media (max-width: 991px) {
  .sd-frame__body { grid-template-columns: 1fr !important; min-height: auto !important; }
  .sd-frame__sidebar-col { border-right: none !important; border-bottom: 1px solid var(--line) !important; }
}


/* ═══════════════════════════════════════════════════════════
   3. SIDEBAR
   ═══════════════════════════════════════════════════════════ */

.sbnew {
  display:         flex !important;
  flex-direction:  column !important;
  height:          100% !important;
  min-height:      900px !important;
  overflow-y:      auto !important;
  overflow-x:      hidden !important;
  background:      var(--surface) !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--line) transparent !important;
}
.sbnew::-webkit-scrollbar       { width: 3px; }
.sbnew::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ── Profile card — dark maroon gradient ── */
.sbnew-profile {
  background:    linear-gradient(165deg, var(--m700) 0%, var(--m900) 100%) !important;
  padding:       28px 20px 24px !important;
  text-align:    center !important;
  color:         var(--c100) !important;
  flex-shrink:   0 !important;
  position:      relative !important;
  overflow:      hidden !important;
}
/* gold orb */
.sbnew-profile::before {
  content:    '' !important;
  position:   absolute !important;
  top: -40%; right: -30%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(230,200,120,.18), transparent 70%) !important;
  pointer-events: none !important;
}
.sbnew-avatar-wrap {
  position:      relative !important;
  display:       inline-block !important;
  margin-bottom: 14px !important;
}
.sbnew-avatar {
  width:         74px !important;
  height:        74px !important;
  border-radius: 50% !important;
  object-fit:    cover !important;
  display:       block !important;
  border:        2px solid var(--m900) !important;
  box-shadow:    0 0 0 4px rgba(230,200,120,.35) !important;
  position:      relative !important;
  z-index:       1 !important;
}
/* avatar ring — gold gradient */
.sbnew-avatar-wrap::before {
  content:       '' !important;
  position:      absolute !important;
  inset:         -4px !important;
  border-radius: 50% !important;
  background:    linear-gradient(135deg, var(--gold300), var(--gold500)) !important;
  z-index:       0 !important;
}
.sbnew-avatar-btn {
  position:        absolute !important;
  bottom:          2px !important;
  right:           2px !important;
  width:           22px !important;
  height:          22px !important;
  border-radius:   50% !important;
  background:      var(--gold500) !important;
  border:          2px solid var(--m900) !important;
  color:           var(--m900) !important;
  font-size:       .55rem !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  z-index:         2 !important;
  transition:      var(--ease) !important;
}
.sbnew-avatar-btn:hover { transform: scale(1.12) !important; }
.sbnew-name {
  font-family:    'Fraunces', serif !important;
  font-size:      1.1rem !important;
  font-weight:    600 !important;
  color:          var(--c100) !important;
  letter-spacing: -.01em !important;
  position:       relative !important;
  z-index:        1 !important;
}
.sbnew-email {
  font-size:      .72rem !important;
  color:          rgba(255,255,255,.55) !important;
  margin-top:     3px !important;
  word-break:     break-word !important;
  position:       relative !important;
  z-index:        1 !important;
}
.sbnew-level {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            5px !important;
  margin-top:     8px !important;
  padding:        5px 14px !important;
  border-radius:  var(--r-pill) !important;
  background:     rgba(230,200,120,.16) !important;
  border:         1px solid rgba(255,255,255,.1) !important;
  color:          var(--gold300) !important;
  font-size:      .68rem !important;
  font-weight:    600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  position:       relative !important;
  z-index:        1 !important;
}

/* Instructor switch */
.sbnew-switch {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  margin:          16px 20px 0 !important;
  padding:         11px var(--s4) !important;
  background:      rgba(255,255,255,.08) !important;
  border:          1px solid rgba(255,255,255,.16) !important;
  color:           var(--c100) !important;
  font-size:       .8rem !important;
  font-weight:     600 !important;
  border-radius:   var(--r-sm) !important;
  text-decoration: none !important;
  transition:      var(--ease) !important;
  flex-shrink:     0 !important;
  /* sits on top of the maroon card gradient */
  background-color: rgba(255,255,255,.08) !important;
  margin-bottom:  -16px !important;
  position:       relative !important;
  z-index:        2 !important;
}
.sbnew-switch:hover { background: rgba(255,255,255,.16) !important; color: var(--c100) !important; }

/* Nav card */
.sbnew-nav {
  
  margin:        20px 16px 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  padding:       10px !important;
  flex:          1 !important;
}
.sbnew-nav-group-label {
  display:        block !important;
  padding:        16px 14px 8px !important;
  font-size:      .66rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color:          var(--ink300) !important;
}
/* First label has less top padding */
.sbnew-nav > .sbnew-nav-group-label:first-child { padding-top: 6px !important; }

.sbnew-item {
  display:         flex !important;
  align-items:     center !important;
  gap:             12px !important;
  padding:         10px 14px !important;
  border-radius:   var(--r-sm) !important;
  margin-bottom:   1px !important;
  color:           var(--ink700) !important;
  font-size:       .875rem !important;
  font-weight:     500 !important;
  text-decoration: none !important;
  transition:      background .15s, color .15s !important;
}
.sbnew-item:hover { background: var(--rose50) !important; color: var(--m600) !important; }
.sbnew-item--active {
  background:  var(--rose50) !important;
  color:       var(--m600) !important;
  font-weight: 600 !important;
}
.sbnew-item__icon {
  width:      22px !important;
  text-align: center !important;
  font-size:  1rem !important;
  color:      var(--ink300) !important;
  flex-shrink: 0 !important;
  transition: color .15s !important;
  line-height: 1 !important;
}
.sbnew-item:hover .sbnew-item__icon,
.sbnew-item--active .sbnew-item__icon { color: var(--m500) !important; }
.sbnew-item__lbl { flex: 1 !important; line-height: 1.2 !important; }
.sbnew-badge {
  background:    var(--m500) !important;
  color:         #fff !important;
  font-size:     .58rem !important;
  font-weight:   800 !important;
  padding:       2px 7px !important;
  border-radius: var(--r-pill) !important;
  line-height:   1.6 !important;
}
.sbnew-item--logout { color: rgba(185,29,73,.55) !important; }
.sbnew-item--logout:hover { background: var(--rose50) !important; color: var(--m500) !important; }
.sbnew-item--logout .sbnew-item__icon { color: rgba(185,29,73,.35) !important; }
.sbnew-item--logout:hover .sbnew-item__icon { color: var(--m500) !important; }
.sbnew-divider { height: 1px !important; background: var(--line) !important; margin: 4px 14px !important; }

/* XP footer card */
.sbnew-xp {
  background:    var(--surface) !important;
  margin:        16px 16px 20px !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  padding:       18px 20px !important;
  flex-shrink:   0 !important;
}
.sbnew-xp__lbl {
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color:          var(--ink300) !important;
  margin-bottom:  10px !important;
  display:        block !important;
}
.sbnew-xp__foot {
  display:         flex !important;
  justify-content: space-between !important;
}
.sbnew-xp__cur {
  font-size:   .78rem !important;
  font-weight: 700 !important;
  color:       var(--ink700) !important;
}
.sbnew-xp__max {
  font-size:   .72rem !important;
  font-weight: 600 !important;
  color:       var(--ink300) !important;
}

/* Streak (inside XP footer, optional) */
.sbnew-streak { display: none !important; } /* streak shown in hero side card instead */


/* ═══════════════════════════════════════════════════════════
   4. HERO STRIP
   ═══════════════════════════════════════════════════════════ */

.sdlc-hero-strip {
  display:       grid !important;
  grid-template-columns: 1fr 260px !important;
  gap:           36px !important;
  align-items:   center !important;
  background:    linear-gradient(125deg, var(--m700) 0%, var(--m800) 60%, var(--m900) 100%) !important;
  border-radius: var(--r-lg) !important;
  padding:       44px 48px !important;
  color:         var(--c100) !important;
  overflow:      hidden !important;
  position:      relative !important;
  box-shadow:    var(--sh-lg) !important;
  margin-bottom: 0 !important;
}
/* gold orbs — wider coverage so right panel also benefits */
.sdlc-hero-strip::before {
  content:    '' !important;
  position:   absolute !important;
  inset:      0 !important;
  background: radial-gradient(circle at 90% 10%, rgba(230,200,120,.22), transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(230,200,120,.12), transparent 55%),
              radial-gradient(circle at 60% 50%, rgba(255,255,255,.04), transparent 60%) !important;
  pointer-events: none !important;
}

/* Left — display text */
.sdlc-hs__main {
  position:       relative !important;
  z-index:        1 !important;
  display:        flex !important;
  flex-direction: column !important;
}
.sdlc-hs__eyebrow {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            8px !important;
  font-size:      .75rem !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color:          var(--gold300) !important;
  margin-bottom:  10px !important;
}
.sdlc-hs__name {
  font-family:    'Fraunces', serif !important;
  font-size:      46px !important;
  font-weight:    600 !important;
  line-height:    1.05 !important;
  color:          var(--c100) !important;
  letter-spacing: -.01em !important;
  margin:         0 0 12px !important;
}
.sdlc-hs__tagline {
  font-size:   .97rem !important;
  color:       rgba(253,249,242,.78) !important;
  line-height: 1.6 !important;
  margin:      0 0 24px !important;
  max-width:   420px !important;
  font-weight: 400 !important;
}
.sdlc-hs__course-name {
  color:       rgba(253,249,242,.92) !important;
  font-weight: 600 !important;
}
/* Mini progress (optional, inside tagline area) */
.sdlc-hs__mini-progress {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  margin-top:  -8px !important;
  margin-bottom: 20px !important;
  max-width:   360px !important;
}
.sdlc-hs__mini-bar {
  flex:          1 !important;
  height:        5px !important;
  background:    rgba(253,249,242,.2) !important;
  border-radius: var(--r-pill) !important;
  overflow:      hidden !important;
}
.sdlc-hs__mini-fill {
  height:        100% !important;
  background:    rgba(253,249,242,.7) !important;
  border-radius: var(--r-pill) !important;
  transition:    width 1.2s ease !important;
}
.sdlc-hs__mini-pct {
  font-size:   .7rem !important;
  font-weight: 700 !important;
  color:       rgba(253,249,242,.6) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* CTA — cream pill */
.sdlc-hs__action { display: flex !important; }
.sdlc-hs__cta {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             10px !important;
  background:      var(--c100) !important;
  color:           var(--m700) !important;
  font-size:       .9rem !important;
  font-weight:     700 !important;
  padding:         13px 26px !important;
  border-radius:   var(--r-pill) !important;
  text-decoration: none !important;
  box-shadow:      0 6px 18px rgba(0,0,0,.18) !important;
  transition:      transform .15s, box-shadow .15s !important;
  width:           auto !important;
}
.sdlc-hs__cta:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  color:      var(--m700) !important;
}

/* Right — glass side cards */
.sdlc-hs__panel {
  display:        flex !important;
  flex-direction: column !important;
  gap:            14px !important;
  position:       relative !important;
  z-index:        1 !important;
  align-self:     stretch !important;
  justify-content: center !important;
}
.sdlc-hs__badges { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.sdlc-hbadge {
  background:      rgba(253,249,242,.12) !important;
  border:          1px solid rgba(253,249,242,.20) !important;
  border-radius:   var(--r-md) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding:         16px 18px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             12px !important;
  transition:      background .15s !important;
}
.sdlc-hbadge:hover { background: rgba(253,249,242,.16) !important; }
.sdlc-hbadge__emoji {
  width:           34px !important;
  height:          34px !important;
  border-radius:   10px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-size:       1.05rem !important;
  flex-shrink:     0 !important;
  line-height:     1 !important;
}
/* Streak flame icon */
.sdlc-hbadge--gold .sdlc-hbadge__emoji {
  background: linear-gradient(135deg, #FF9A4D, #E85D2E) !important;
}
/* XP bolt icon */
.sdlc-hbadge:not(.sdlc-hbadge--gold) .sdlc-hbadge__emoji {
  background: linear-gradient(135deg, var(--gold300), var(--gold500)) !important;
  color:      var(--m900) !important;
}
.sdlc-hbadge__body { min-width: 0 !important; }
.sdlc-hbadge__val {
  font-size:   .94rem !important;
  font-weight: 700 !important;
  color:       var(--c100) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.sdlc-hbadge__sub {
  font-size:   .72rem !important;
  font-weight: 400 !important;
  color:       rgba(253,249,242,.62) !important;
  margin-top:  1px !important;
}

/* Responsive hero */
@media (max-width: 900px) {
  .sdlc-hero-strip { grid-template-columns: 1fr !important; padding: 32px 28px !important; gap: 20px !important; }
  .sdlc-hs__panel  { flex-direction: row !important; flex-wrap: wrap !important; }
  .sdlc-hbadge     { flex: 1 !important; min-width: 140px !important; }
  .sdlc-hs__cta    { width: auto !important; }
}
@media (max-width: 580px) {
  .sdlc-hs__name { font-size: 36px !important; }
  .sdlc-hs__panel { flex-direction: column !important; }
  .sdlc-hbadge { min-width: 0 !important; width: 100% !important; }
}

/* Hide old hero elements */
.sdlc-hs__identity, .sdlc-hs__avatar, .sdlc-hs__greeting,
.sdlc-hs__sub, .sdlc-hs__meta, .sdlc-hs__pills,
.sdlc-hs__pill, .sdlc-hs__metrics { display: none !important; }


/* ═══════════════════════════════════════════════════════════
   5. STAT STRIP — single connected card, hairline dividers
   ═══════════════════════════════════════════════════════════ */

.sdlc-stats-bar {
  display:       grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  background:    var(--surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  margin-top:    22px !important;
  margin-bottom: 0 !important;
  border:        none !important;
  overflow:      visible !important;
}
/* Replace flex separator spans with CSS */
.sdlc-stat-sep { display: none !important; }

.sdlc-stat {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         22px 18px !important;
  text-align:      center !important;
  position:        relative !important;
  gap:             0 !important;
  cursor:          default !important;
  transition:      background .12s !important;
  border-radius:   0 !important;
}
.sdlc-stat:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg) !important; }
.sdlc-stat:last-child  { border-radius: 0 var(--r-lg) var(--r-lg) 0 !important; }
.sdlc-stat:hover       { background: var(--c200) !important; }
/* Hairline dividers via ::after */
.sdlc-stat:not(:last-child)::after {
  content:    '' !important;
  position:   absolute !important;
  right:      0 !important;
  top:        20% !important;
  bottom:     20% !important;
  width:      1px !important;
  background: var(--line) !important;
}
.sdlc-stat__icon { display: none !important; } /* reference design uses no icons */
.sdlc-stat__val {
  font-family:    'Fraunces', serif !important;
  font-size:      30px !important;
  font-weight:    600 !important;
  color:          var(--m700) !important;
  line-height:    1 !important;
  letter-spacing: -.01em !important;
  font-variant-numeric: tabular-nums !important;
}
/* "h" unit suffix on learning hours */
.sdlc-stat__val .unit,
.sdlc-stat__val-unit {
  font-size:   17px !important;
  font-weight: 500 !important;
}
.sdlc-stat__lbl {
  font-size:      .68rem !important;
  font-weight:    600 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color:          var(--ink500) !important;
  margin-top:     8px !important;
  white-space:    nowrap !important;
}
/* Flame/streak cell */
.sdlc-stat--streak .sdlc-stat__val { color: #D9692E !important; }

@media (max-width: 640px) {
  .sdlc-stats-bar { grid-template-columns: repeat(3, 1fr) !important; }
  .sdlc-stat:nth-child(3)  { border-radius: 0 !important; }
  .sdlc-stat:nth-child(4)  { border-radius: 0 !important; }
  .sdlc-stat:nth-child(3)::after { display: none !important; }
  .sdlc-stat:nth-child(4)  { border-top: 1px solid var(--line) !important; }
  .sdlc-stat:nth-child(5)  { border-top: 1px solid var(--line) !important; }
  .sdlc-stat:nth-child(6)  { border-top: 1px solid var(--line) !important; border-radius: 0 var(--r-lg) var(--r-lg) 0 !important; }
}


/* ═══════════════════════════════════════════════════════════
   6. SECTION HEADERS
   ═══════════════════════════════════════════════════════════ */

.sdlc-section-hd {
  display:         flex !important;
  justify-content: space-between !important;
  align-items:     baseline !important;
  margin:          36px 0 16px !important;
  gap:             var(--s3) !important;
}
.sdlc-section-hd::after { display: none !important; } /* override old rule */
/* Section title */
.sdlc-section-hd > *:first-child,
.sdlc-section-hd .sdlc-section-title {
  font-size:      .8rem !important;
  font-weight:    700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--ink500) !important;
}
/* Section link */
.sdlc-section-hd a {
  font-size:       .82rem !important;
  font-weight:     600 !important;
  color:           var(--m500) !important;
  text-decoration: none !important;
  text-transform:  none !important;
  letter-spacing:  0 !important;
  margin-left:     auto !important;
  flex-shrink:     0 !important;
  display:         flex !important;
  align-items:     center !important;
  gap:             4px !important;
  transition:      var(--ease) !important;
}
.sdlc-section-hd a:hover { color: var(--m400) !important; }

/* Grid layout */
.sdlc-grid {
  display:               grid !important;
  grid-template-columns: 1fr 300px !important;
  gap:                   28px !important;
  align-items:           start !important;
  margin-top:            36px !important;
}
@media (max-width: 900px) { .sdlc-grid { grid-template-columns: 1fr !important; } }


/* ═══════════════════════════════════════════════════════════
   7. COURSE CARDS
   ═══════════════════════════════════════════════════════════ */

.sdlc-lc-card {
  display:       grid !important;
  grid-template-columns: 280px 1fr !important;
  background:    var(--surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  overflow:      hidden !important;
  margin-bottom: 0 !important;
  border:        none !important;
  transition:    box-shadow .18s, transform .18s !important;
}
.sdlc-lc-card:hover {
  box-shadow: var(--sh-lg) !important;
  transform:  translateY(-3px) !important;
}
.sdlc-lc-card--featured { grid-template-columns: 280px 1fr !important; }

/* Compact (not-started) card */
.sdlc-lc-card.sdlc-lc-card--compact {
  grid-template-columns: 140px 1fr !important;
  margin-top: 16px !important;
}

/* Thumbnail */
.sdlc-lc-card__thumb {
  position:    relative !important;
  overflow:    hidden !important;
  background:  linear-gradient(150deg, #0C1B3D 0%, #1B2F5E 55%, #2C4A8C 100%) !important;
  flex-shrink: 0 !important;
  min-height:  200px !important;
}
.sdlc-lc-card.sdlc-lc-card--compact .sdlc-lc-card__thumb {
  min-height: 160px !important;
  background: linear-gradient(150deg, #3A2C12 0%, #5E4419 55%, #8C6E2C 100%) !important;
}
.sdlc-lc-card__thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
/* SVG course art */
.sdlc-lc-card__thumb svg {
  position:          absolute !important;
  inset:             0 !important;
  width:             100% !important;
  height:            100% !important;
  opacity:           .9 !important;
}
/* Hide progress bar on thumb — progress shown in body */
.sdlc-lc-thumb-bar { display: none !important; }

/* Card body */
.sdlc-lc-card__body {
  padding:        26px 30px !important;
  display:        flex !important;
  flex-direction: column !important;
  gap:            0 !important;
}
.sdlc-lc-card.sdlc-lc-card--compact .sdlc-lc-card__body { padding: 20px 28px !important; }

/* Status pill */
.sdlc-lc-tag {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            6px !important;
  font-size:      .72rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding:        5px 12px !important;
  border-radius:  var(--r-pill) !important;
  width:          fit-content !important;
  border:         none !important;
}
.sdlc-lc-tag--active {
  background: var(--rose50) !important;
  color:      var(--m600) !important;
}
.sdlc-lc-tag--active::before {
  content:       '' !important;
  width:         6px !important;
  height:        6px !important;
  border-radius: 50% !important;
  background:    var(--m500) !important;
  display:       inline-block !important;
  animation:     blink 1.4s ease-in-out infinite !important;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.sdlc-lc-tag--done { background: #E7F4EA !important; color: #2E8049 !important; }
.sdlc-lc-tag--new  { background: var(--c300) !important; color: var(--ink500) !important; }

/* Course title — Fraunces */
.sdlc-lc-card__title {
  font-family:        'Fraunces', serif !important;
  font-size:          1.44rem !important;
  font-weight:        600 !important;
  color:              var(--ink900) !important;
  line-height:        1.25 !important;
  letter-spacing:     -.01em !important;
  margin-top:         12px !important;
  margin-bottom:      0 !important;
  display:            -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow:           hidden !important;
}
.sdlc-lc-card.sdlc-lc-card--compact .sdlc-lc-card__title {
  font-size: 1.18rem !important;
  margin-top: 8px !important;
}

.sdlc-lc-card__next {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  font-size:   .84rem !important;
  color:       var(--ink500) !important;
  margin-top:  6px !important;
}
.sdlc-lc-card__next i { color: var(--m600) !important; font-size: .8rem !important; }

/* Progress */
.sdlc-lc-progress {
  display:     flex !important;
  align-items: center !important;
  gap:         14px !important;
  margin-top:  18px !important;
}
.sdlc-lc-progress__track {
  flex:          1 !important;
  height:        7px !important;
  background:    var(--c300) !important;
  border-radius: var(--r-pill) !important;
  overflow:      hidden !important;
}
.sdlc-lc-progress__fill {
  height:        100% !important;
  background:    linear-gradient(90deg, var(--m500), var(--m400)) !important;
  border-radius: var(--r-pill) !important;
  transition:    width 1s ease !important;
  box-shadow:    none !important;
}
.sdlc-lc-progress__fill::after { display: none !important; }
.sdlc-lc-progress__pct {
  font-size:   .82rem !important;
  font-weight: 700 !important;
  color:       var(--m600) !important;
  min-width:   32px !important;
  text-align:  right !important;
  flex-shrink: 0 !important;
}

/* Actions */
.sdlc-lc-card__actions {
  display:     flex !important;
  align-items: center !important;
  gap:         18px !important;
  margin-top:  auto !important;
  padding-top: 20px !important;
}
.sdlc-lc-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             8px !important;
  font-size:       .84rem !important;
  font-weight:     700 !important;
  padding:         11px 22px !important;
  border-radius:   var(--r-pill) !important;
  text-decoration: none !important;
  transition:      transform .15s, box-shadow .15s !important;
  white-space:     nowrap !important;
  border:          none !important;
  cursor:          pointer !important;
}
.sdlc-lc-btn--primary {
  background: var(--m600) !important;
  color:      var(--c100) !important;
  box-shadow: 0 4px 12px rgba(122,18,48,.25) !important;
}
.sdlc-lc-btn--primary:hover {
  color:      var(--c100) !important;
  transform:  translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(122,18,48,.32) !important;
}
.sdlc-lc-btn--outline {
  background:  transparent !important;
  border:      1.5px solid var(--m500) !important;
  color:       var(--m600) !important;
  padding:     10px 20px !important;
  box-shadow:  none !important;
  font-weight: 700 !important;
}
.sdlc-lc-btn--outline:hover { background: var(--rose50) !important; }
.sdlc-lc-btn--ghost {
  background:  transparent !important;
  border:      none !important;
  color:       var(--ink500) !important;
  padding:     0 !important;
  box-shadow:  none !important;
  font-size:   .84rem !important;
  font-weight: 600 !important;
}
.sdlc-lc-btn--ghost:hover { color: var(--m600) !important; }

/* Empty state */
.sdlc-lc-empty {
  background:    var(--rose50) !important;
  border:        1.5px dashed rgba(122,18,48,.2) !important;
  border-radius: var(--r-lg) !important;
  padding:       var(--s12) var(--s8) !important;
  text-align:    center !important;
}
.sdlc-lc-empty__icon  { font-size: 2rem; color: rgba(122,18,48,.2); margin-bottom: var(--s3); }
.sdlc-lc-empty__title { font-size: .95rem; font-weight: 700; color: var(--ink700); margin-bottom: var(--s2); }
.sdlc-lc-empty__sub   { font-size: .82rem; color: var(--ink300); margin-bottom: var(--s5); }

@media (max-width: 640px) {
  .sdlc-lc-card,
  .sdlc-lc-card--featured,
  .sdlc-lc-card.sdlc-lc-card--compact { grid-template-columns: 1fr !important; }
  .sdlc-lc-card__thumb { min-height: 180px !important; }
  .sdlc-lc-card__body  { padding: var(--s4) !important; }
}


/* ═══════════════════════════════════════════════════════════
   8. ACHIEVEMENT TILES
   ═══════════════════════════════════════════════════════════ */

.sdlc-achievements-strip {
  display:               grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap:                   14px !important;
}
.sdlc-ach-tile {
  background:    var(--surface) !important;
  border-radius: var(--r-md) !important;
  padding:       20px 12px !important;
  text-align:    center !important;
  box-shadow:    var(--sh-sm) !important;
  border:        1.5px solid transparent !important;
  transition:    transform .18s, box-shadow .18s !important;
}
.sdlc-ach-tile:hover { transform: translateY(-3px) !important; box-shadow: var(--sh-md) !important; }
.sdlc-ach-tile--earned {
  border-color: var(--gold300) !important;
  background:   linear-gradient(165deg, #FFF8E8, var(--surface)) !important;
}
.sdlc-ach-tile--locked {
  opacity: .55 !important;
  filter:  none !important;
  border:  1.5px solid transparent !important;
  background: var(--surface) !important;
}
.sdlc-ach-tile__icon {
  width:           46px !important;
  height:          46px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  margin:          0 auto 10px !important;
  font-size:       1.25rem !important;
}
.sdlc-ach-tile--earned .sdlc-ach-tile__icon {
  background: linear-gradient(135deg, var(--gold300), var(--gold500)) !important;
  color:      var(--m900) !important;
}
.sdlc-ach-tile--locked .sdlc-ach-tile__icon {
  background: var(--c300) !important;
  color:      var(--ink300) !important;
}
.sdlc-ach-tile__lbl {
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color:          var(--ink500) !important;
}
.sdlc-ach-tile--earned .sdlc-ach-tile__lbl { color: var(--m700) !important; }
@media (max-width: 640px) {
  .sdlc-achievements-strip { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════
   9. NEXT BANNER (lesson hint)
   ═══════════════════════════════════════════════════════════ */

.sdlc-milestone-hint {
  background:    var(--rose50) !important;
  border-radius: var(--r-md) !important;
  border:        none !important;
  padding:       14px 20px !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           12px !important;
  font-size:     .84rem !important;
  color:         var(--m700) !important;
  margin-top:    14px !important;
  font-weight:   500 !important;
}
.sdlc-milestone-hint i { color: var(--m500) !important; font-size: 1.05rem !important; flex-shrink: 0 !important; }
.sdlc-milestone-hint b { font-weight: 700 !important; }


/* ═══════════════════════════════════════════════════════════
   10. RECOMMENDED COURSES
   ═══════════════════════════════════════════════════════════ */

.sdlc-rec-grid {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   18px !important;
}
.sdlc-rec-card {
  background:      var(--surface) !important;
  border-radius:   var(--r-md) !important;
  overflow:        hidden !important;
  box-shadow:      var(--sh-sm) !important;
  text-decoration: none !important;
  display:         flex !important;
  flex-direction:  column !important;
  transition:      box-shadow .15s, transform .15s !important;
}
.sdlc-rec-card:hover { box-shadow: var(--sh-md) !important; transform: translateY(-3px) !important; }
.sdlc-rec-card__thumb { height: 130px !important; overflow: hidden !important; position: relative !important; }
.sdlc-rec-card__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.sdlc-rec-card__thumb svg { width: 100% !important; height: 100% !important; }
.sdlc-rec-card__body  { padding: 16px 18px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.sdlc-rec-card__title { font-size: .9rem !important; font-weight: 600 !important; color: var(--ink900) !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.sdlc-rec-card__price {
  font-family:  'Fraunces', serif !important;
  font-size:    1.1rem !important;
  font-weight:  600 !important;
  color:        var(--m600) !important;
  margin-top:   8px !important;
}
.sdlc-rec-card__price--free { color: #2E8049 !important; }
@media (max-width: 640px) { .sdlc-rec-grid { grid-template-columns: 1fr !important; } }


/* ═══════════════════════════════════════════════════════════
   11. RECENT ACTIVITY
   ═══════════════════════════════════════════════════════════ */

.sdlc-activity-row {
  background:    var(--surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  overflow:      hidden !important;
  display:       flex !important;
  flex-direction: column !important;
}
.sdlc-act-card {
  display:       flex !important;
  align-items:   center !important;
  gap:           14px !important;
  padding:       18px 24px !important;
  border-bottom: 1px solid var(--line) !important;
  background:    var(--surface) !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  transform:     none !important;
  transition:    background .12s !important;
}
.sdlc-act-card:last-child { border-bottom: none !important; }
.sdlc-act-card:hover      { background: var(--c200) !important; transform: none !important; }
.sdlc-act-icon {
  width:           30px !important;
  height:          30px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  font-size:       .9rem !important;
  flex-shrink:     0 !important;
}
.sdlc-act-icon--green { background: #E7F4EA !important; color: #2E8049 !important; }
.sdlc-act-icon--amber { background: rgba(217,119,6,.1) !important; color: #92400e !important; }
.sdlc-act-icon--red   { background: var(--rose50) !important; color: var(--m500) !important; }
.sdlc-act-card__body  { flex: 1 !important; min-width: 0 !important; }
.sdlc-act-card__title { font-size: .875rem !important; font-weight: 600 !important; color: var(--ink900) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.sdlc-act-card__meta  { font-size: .75rem !important; color: var(--ink300) !important; margin-top: 2px !important; }
.sdlc-act-badge {
  font-size:      .68rem !important;
  font-weight:    700 !important;
  padding:        5px 12px !important;
  border-radius:  var(--r-pill) !important;
  white-space:    nowrap !important;
  flex-shrink:    0 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.sdlc-act-badge--green { background: #E7F4EA !important; color: #2E8049 !important; }
.sdlc-act-badge--amber { background: rgba(201,152,46,.1) !important; color: var(--gold500) !important; }
.sdlc-act-badge--red   { background: var(--rose50) !important; color: var(--m500) !important; }
.sdlc-act-empty { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: var(--s10) !important; color: var(--ink300) !important; font-size: .84rem !important; gap: var(--s2) !important; }
.sdlc-act-empty i { font-size: 1.5rem !important; opacity: .28 !important; }


/* ═══════════════════════════════════════════════════════════
   12. RIGHT RAIL CARDS (Today / Calendar / Goals / Community)
   ═══════════════════════════════════════════════════════════ */

.sdlc-today-card {
  background:    var(--surface) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  overflow:      hidden !important;
  border:        none !important;
}
.sdlc-today-section { padding: var(--s4) var(--s5) !important; }
.sdlc-today-section__hd {
  display:        flex !important;
  align-items:    center !important;
  justify-content: space-between !important;
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color:          var(--ink300) !important;
  margin-bottom:  var(--s3) !important;
}
.sdlc-today-month { color: var(--ink300) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.sdlc-today-divider { height: 1px !important; background: var(--line) !important; }

.sdlc-dl-item { display: flex !important; align-items: center !important; gap: var(--s3) !important; padding: 8px 0 !important; border-bottom: 1px solid var(--line) !important; }
.sdlc-dl-item:last-child { border-bottom: none !important; }
.sdlc-dl-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sdlc-dl-dot--amber { background: var(--gold500) !important; }
.sdlc-dl-dot--red   { background: var(--m500) !important; }
.sdlc-dl-dot--green { background: #3FA85C !important; }
.sdlc-dl-item__body  { flex: 1 !important; min-width: 0 !important; }
.sdlc-dl-item__title { font-size: .8rem !important; font-weight: 600 !important; color: var(--ink900) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdlc-dl-item__meta  { font-size: .72rem !important; color: var(--ink300) !important; margin-top: 1px; }
.sdlc-dl-pill { display: inline-flex !important; align-items: center !important; font-size: .62rem !important; font-weight: 700 !important; padding: 3px 9px !important; border-radius: var(--r-pill) !important; white-space: nowrap !important; flex-shrink: 0 !important; text-transform: uppercase !important; letter-spacing: .04em !important; }
.sdlc-dl-pill--red  { background: var(--rose50) !important; color: var(--m500) !important; }
.sdlc-dl-pill--gray { background: var(--c300) !important; color: var(--ink500) !important; }
.sdlc-dl-empty { display: flex !important; align-items: center !important; gap: var(--s2) !important; font-size: .82rem !important; color: #2E8049 !important; font-weight: 600 !important; background: #F2F8F2 !important; border-radius: var(--r-sm) !important; padding: 12px 14px !important; }
.sdlc-dl-empty i { color: #3FA85C !important; }

/* Calendar */
.sdlc-cal-dow { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 2px !important; margin-bottom: 4px !important; }
.sdlc-cal-dow span { font-size: .66rem !important; font-weight: 700 !important; color: var(--ink300) !important; text-align: center !important; }
.sdlc-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 6px !important; }
.sdlc-cal__day         { aspect-ratio: 1 !important; border-radius: 6px !important; background: var(--c300) !important; }
.sdlc-cal__day--active { background: var(--m400) !important; opacity: .55 !important; }
.sdlc-cal__day--today  { background: var(--m600) !important; opacity: 1 !important; box-shadow: 0 0 0 2px var(--gold300) !important; }
.sdlc-cal__day--future { background: var(--c300) !important; opacity: .4 !important; }
.sdlc-cal__day--blank  { background: transparent !important; }
.sdlc-cal-legend { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; margin-top: var(--s3) !important; font-size: .68rem !important; color: var(--ink500) !important; }
.sdlc-cal-legend__item { display: flex !important; align-items: center !important; gap: 5px !important; }
.sdlc-cal-legend__swatch { width: 9px !important; height: 9px !important; border-radius: 3px !important; display: inline-block !important; }
.sdlc-cal-legend__swatch--none   { background: var(--c300) !important; }
.sdlc-cal-legend__swatch--active { background: var(--m400) !important; opacity: .55 !important; }
.sdlc-cal-legend__swatch--today  { background: var(--m600) !important; }

/* Weekly goal bar */
.sdlc-cal-goal { margin-top: var(--s3) !important; }
.sdlc-cal-goal__lbl   { font-size: .84rem !important; font-weight: 600 !important; color: var(--ink700) !important; margin-bottom: 8px !important; }
.sdlc-cal-goal__track { height: 6px !important; background: var(--c300) !important; border-radius: var(--r-pill) !important; overflow: hidden !important; }
.sdlc-cal-goal__fill  { height: 100% !important; background: var(--m500) !important; border-radius: var(--r-pill) !important; transition: width .9s !important; }

/* Goal blocks */
.sdlc-goal__lbl   { font-size: .875rem !important; font-weight: 700 !important; color: var(--ink900) !important; margin-bottom: 6px !important; }
.sdlc-goal__track { height: 6px !important; background: var(--c300) !important; border-radius: var(--r-pill) !important; overflow: hidden !important; margin-bottom: 4px !important; }
.sdlc-goal__fill  { height: 100% !important; background: var(--m500) !important; border-radius: var(--r-pill) !important; transition: width .9s !important; box-shadow: none !important; }
.sdlc-goal__meta  { font-size: .75rem !important; color: var(--ink500) !important; }

/* Community */
.sdlc-comm-item { display: flex !important; align-items: flex-start !important; gap: var(--s2) !important; padding: 7px 0 !important; border-bottom: 1px solid var(--line) !important; }
.sdlc-comm-item:last-child { border-bottom: none !important; }
.sdlc-comm-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--m500); flex-shrink: 0; margin-top: 5px; }
.sdlc-comm-item__title { font-size: .78rem !important; color: var(--ink700) !important; line-height: 1.45 !important; }
.sdlc-comm-item__meta  { font-size: .68rem !important; color: var(--ink300) !important; margin-top: 2px !important; }
.sdlc-comm-empty { display: flex !important; align-items: center !important; gap: var(--s2) !important; font-size: .82rem !important; color: var(--ink300) !important; }
.sdlc-comm-empty i { opacity: .4 !important; }
.sdlc-comm-footer { display: flex !important; align-items: center !important; gap: var(--s2) !important; padding-top: var(--s3) !important; font-size: .75rem !important; color: var(--ink500) !important; border-top: 1px solid var(--line) !important; margin-top: var(--s2) !important; }


/* ═══════════════════════════════════════════════════════════
   13. EXPLORE BUTTON + ALERTS
   ═══════════════════════════════════════════════════════════ */

.sdlc-explore-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             8px !important;
  background:      var(--m600) !important;
  color:           var(--c100) !important;
  font-size:       .84rem !important;
  font-weight:     700 !important;
  padding:         11px 22px !important;
  border-radius:   var(--r-pill) !important;
  border:          none !important;
  text-decoration: none !important;
  transition:      transform .15s, box-shadow .15s !important;
  box-shadow:      0 4px 12px rgba(122,18,48,.22) !important;
}
.sdlc-explore-btn:hover { color: var(--c100) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 20px rgba(122,18,48,.30) !important; }

.sdlc-alert { display: flex !important; align-items: flex-start !important; gap: var(--s3) !important; padding: var(--s3) var(--s4) !important; border-radius: var(--r-sm) !important; font-size: .82rem !important; margin-bottom: var(--s4) !important; }
.sdlc-alert--warn  { background: rgba(201,152,46,.08) !important; border: 1px solid rgba(201,152,46,.25) !important; color: #7A5200 !important; }
.sdlc-alert--error { background: var(--rose50) !important; border: 1px solid rgba(185,29,73,.2) !important; color: var(--m600) !important; }


/* ═══════════════════════════════════════════════════════════
   14. ACCESSIBILITY + REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold500) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Star ratings */
.fa-star, .fas.fa-star, [class*="rating"] .fa-star { color: var(--gold500) !important; }

/* Pop animation (count-up) */
@keyframes ig-val-pop { 0%{transform:scale(1);} 40%{transform:scale(1.15);} 100%{transform:scale(1);} }
.ig-val-pop { animation: ig-val-pop .28s ease !important; }


/* ═══════════════════════════════════════════════════════════
   15. 3-COLUMN FLOATING LAYOUT  (replaces sd-frame)
   ═══════════════════════════════════════════════════════════ */


/* Topline */
.dash-topline {
  display:     flex !important;
  align-items: center !important;
  gap:         14px !important;
  margin-bottom: 22px !important;
}
.dash-brand {
  display:         flex !important;
  align-items:     center !important;
  gap:             9px !important;
  text-decoration: none !important;
}
.dash-brand__icon {
  width:           30px !important;
  height:          30px !important;
  background:      linear-gradient(135deg, var(--m600), var(--m900)) !important;
  border-radius:   8px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           var(--c100) !important;
  font-size:       .78rem !important;
  flex-shrink:     0 !important;
}
.dash-brand__name {
  font-size:   .92rem !important;
  font-weight: 700 !important;
  color:       var(--ink900) !important;
}
.dash-topline__sep {
  color:       var(--ink300) !important;
  font-size:   .9rem !important;
  flex-shrink: 0 !important;
}
.dash-topline__title {
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color:          var(--ink300) !important;
}
.dash-topline__right {
  margin-left:  auto !important;
  display:      flex !important;
  align-items:  center !important;
  gap:          12px !important;
  flex-shrink:  0 !important;
}
.dash-live {
  display:       flex !important;
  align-items:   center !important;
  gap:           6px !important;
  font-size:     .72rem !important;
  font-weight:   600 !important;
  color:         #2E8049 !important;
  background:    #E7F4EA !important;
  padding:       4px 12px !important;
  border-radius: var(--r-pill) !important;
}
.dash-live__dot {
  width:         7px !important;
  height:        7px !important;
  border-radius: 50% !important;
  background:    #3FA85C !important;
  box-shadow:    0 0 0 3px rgba(63,168,92,.18) !important;
  flex-shrink:   0 !important;
  animation:     live-pulse 2.4s ease-in-out infinite !important;
}

/* 3-column grid */
.dash-grid {
  display:               grid !important;
  grid-template-columns: 280px 1fr !important;
  gap:                   28px !important;
  align-items:           start !important;
}
.dash-grid--3col {
  grid-template-columns: 280px 1fr 320px !important;
}
.dash-col--sidebar {
  position: sticky !important;
  top:      28px !important;
}
.dash-col--main { min-width: 0 !important; }
.dash-col--rail { min-width: 0 !important; }

/* Sidebar must be transparent in the new frameless layout */
.sbnew {
  background:  transparent !important;
  border:      none !important;
  min-height:  auto !important;
  height:      auto !important;
  overflow:    visible !important;
}

/* Profile card — give full border-radius now that it's standalone */
.sbnew-profile {
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-lg) !important;
}

/* Instructor switch now lives inside profile card */
.sbnew-switch {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px !important;
  margin:          18px 0 0 !important;
  padding:         10px 14px !important;
  width:           100% !important;
  background:      rgba(255,255,255,.10) !important;
  border:          1px solid rgba(255,255,255,.20) !important;
  border-radius:   var(--r-sm) !important;
  color:           var(--c100) !important;
  font-size:       .78rem !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  transition:      background .15s !important;
  position:        static !important;
  z-index:         auto !important;
}
.sbnew-switch:hover {
  background: rgba(255,255,255,.18) !important;
  color:      var(--c100) !important;
}

/* Nav and XP cards now have their own shadow, not the frame's — and,
   since .sbnew itself was made transparent for this frameless layout
   (above), they also need their own background now; neither ever had
   one of its own (custom.css only ever gave them padding/border-top),
   so without this they showed the cream page background through
   instead of reading as white cards. */
.sbnew-nav  { box-shadow: var(--sh-md) !important; background: var(--surface) !important; }
.sbnew-xp   { box-shadow: var(--sh-md) !important; background: var(--surface) !important; }

/* Responsive: stack on small screens */
@media (max-width: 1200px) {
  .dash-grid--3col { grid-template-columns: 280px 1fr !important; }
  .dash-col--rail  { display: none !important; }
}
@media (max-width: 960px) {
  .dash-grid,
  .dash-grid--3col { grid-template-columns: 1fr !important; }
  .dash-col--sidebar { position: static !important; top: auto !important; }
}


/* ═══════════════════════════════════════════════════════════
   16. PHASE 3-6 POLISH
   ═══════════════════════════════════════════════════════════ */

/* ── Phase 3: Stat strip — auto columns so bar fills perfectly
      regardless of whether streak cell appears ──────────────── */
.sdlc-stats-bar {
  grid-template-columns: none !important;
  grid-auto-flow:        column !important;
  grid-auto-columns:     1fr !important;
}
/* When streak is absent (5 stats), last-child is still the XP cell */
.sdlc-stat:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg) !important; }
.sdlc-stat:last-child  { border-radius: 0 var(--r-lg) var(--r-lg) 0 !important; }

/* ── Phase 4: Sidebar — align nav / XP cards flush with profile ── */
.sbnew-nav {
  margin-left:  0 !important;
  margin-right: 0 !important;
}
.sbnew-xp {
  margin-left:  0 !important;
  margin-right: 0 !important;
}
/* Gap between sidebar cards — matches .ig-hero-zone's 20px margin-bottom
   (ig-theme.css) on the main-content side, so the profile-card-to-nav gap
   on the left and the hero-to-table gap on the right read as the same
   rhythm instead of two different values (was 12px). */
.sbnew { display: flex !important; flex-direction: column !important; gap: 20px !important; }
/* Profile card: full-width, no margin needed */
.sbnew-profile { margin: 0 !important; }
/* Nav card: no top margin (gap handles it) */
.sbnew-nav  { margin-top: 0 !important; }
/* XP card: no extra margin */
.sbnew-xp   { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ── Phase 5: Course cards — secondary variant ─────────────── */
.sdlc-lc-card--secondary {
  grid-template-columns: 180px 1fr !important;
  margin-top: 16px !important;
}
.sdlc-lc-card--secondary .sdlc-lc-card__thumb {
  min-height:  160px !important;
  background:  linear-gradient(150deg, #2C1A3E 0%, #4A2D6B 55%, #6E3D94 100%) !important;
}
.sdlc-lc-card--secondary .sdlc-lc-card__body {
  padding: 20px 24px !important;
}
.sdlc-lc-card--secondary .sdlc-lc-card__title {
  font-size:  1.15rem !important;
  margin-top: 8px !important;
}

/* ── Phase 6: Right rail sticky ────────────────────────────── */
.dash-col--rail .sdlc-today-card {
  position: sticky !important;
  top:      28px !important;
}

/* ── Phase 6: Hero badge — dedup backdrop-filter ───────────── */
.sdlc-hbadge {
  backdrop-filter:         blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── Phase 6: Achievements strip — slightly tighter on mid ─── */
@media (max-width: 900px) {
  .sdlc-achievements-strip { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Phase 6: Main col section spacing ─────────────────────── */
.dash-col--main > div:first-child { margin-top: 0 !important; }
.sdlc-section-hd:first-of-type    { margin-top: 28px !important; }

/* ── Phase 6: Topline — tighten on smaller viewports ───────── */
@media (max-width: 960px) {
  .dash-topline { display: none !important; }
}

/* ── Phase 6: Rec card title in Fraunces ────────────────────── */
.sdlc-rec-card__title {
  font-family: 'Fraunces', serif !important;
  font-size:   .95rem !important;
  font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════
   17. FLAT COLOR — #A41034, no gradients
   Tokens above already set all --m* to #A41034.
   These rules strip every remaining inline gradient.
   ═══════════════════════════════════════════════════════════ */

/* Hero strip — flat brand colour */
.sdlc-hero-strip {
  background: #A41034 !important;
}

/* Sidebar profile card — flat */
.sbnew-profile {
  background: #A41034 !important;
}

/* Dashboard brand icon (topline) */
.dash-brand__icon {
  background: #A41034 !important;
}

/* Progress bar fill — flat */
.sdlc-lc-progress__fill {
  background: #A41034 !important;
}

/* Weekly goal + XP bar fills — keep gold, already separate tokens */
/* Calendar active day — flat */
.sdlc-cal__day--active {
  background: #A41034 !important;
  opacity: .45 !important;
}
.sdlc-cal__day--today {
  background: #A41034 !important;
  opacity: 1 !important;
}
.sdlc-cal-legend__swatch--active { background: #A41034 !important; opacity: .45 !important; }
.sdlc-cal-legend__swatch--today  { background: #A41034 !important; }

/* Goal / weekly bar fill */
.sdlc-cal-goal__fill { background: #A41034 !important; }
.sdlc-goal__fill     { background: #A41034 !important; }

/* Primary buttons */
.sdlc-lc-btn--primary,
.sdlc-explore-btn {
  background: #A41034 !important;
  box-shadow: 0 4px 12px rgba(164,16,52,.25) !important;
}
.sdlc-lc-btn--primary:hover,
.sdlc-explore-btn:hover {
  background: #D91247 !important;
  box-shadow: 0 8px 20px rgba(164,16,52,.35) !important;
}

/* CTA on hero */
.sdlc-hs__cta { color: #A41034 !important; }

/* Outline button border */
.sdlc-lc-btn--outline {
  border-color: #A41034 !important;
  color:        #A41034 !important;
}

/* Stat values */
.sdlc-stat__val { color: #A41034 !important; }

/* Active nav item */
.sbnew-item--active,
.sbnew-item:hover { color: #A41034 !important; }
.sbnew-item--active .sbnew-item__icon,
.sbnew-item:hover  .sbnew-item__icon { color: #A41034 !important; }
.sbnew-item--active,
.sbnew-item:hover { background: rgba(164,16,52,.07) !important; }

/* Rose-50 tint */
.sdlc-lc-btn--outline:hover { background: rgba(164,16,52,.06) !important; }

/* Active tag pill */
.sdlc-lc-tag--active {
  background: rgba(164,16,52,.08) !important;
  color:      #A41034 !important;
}
.sdlc-lc-tag--active::before { background: #A41034 !important; }

/* Community dot */
.sdlc-comm-item__dot { background: #A41034 !important; }

/* Section link colour */
.sdlc-section-hd a { color: #A41034 !important; }

/* Achievement earned tile border */
.sdlc-ach-tile--earned { border-color: var(--gold300) !important; }

/* Shadow uses brand colour */
:root {
  --rose50:   rgba(164,16,52,.06);
  --hover:    #D91247;
  --sh-brand: 0 8px 24px rgba(164,16,52,.28), 0 2px 6px rgba(164,16,52,.14);
  --sh-lg:    0 12px 32px rgba(164,16,52,.10), 0 4px 12px rgba(164,16,52,.06);
}


/* ═══════════════════════════════════════════════════════════
   18. INSTRUCTOR DASHBOARD — light-theme overrides for idlc-*
   ═══════════════════════════════════════════════════════════ */

/* Page background (instructor) */
 

/* ── Instructor hero — light cream card matching the Student
   Dashboard's .hero (dashboard.css), instead of a solid flat
   #A41034 block. Same border, dot texture, and dark-ink text on
   cream, so the two dashboards read as one system. ── */
.idlc-hero {
  background:    #F5F1EA !important;
  border:        2px solid #A41034 !important;
  border-radius: var(--r-lg) !important;
  padding:       44px 48px !important;
  box-shadow:    0 4px 24px -8px rgba(164,16,52,.18) !important;
  margin-bottom: 0 !important;
  position:      relative !important;
  overflow:      hidden !important;
  display:       flex !important;
  align-items:   center !important;
  gap:           32px !important;
  flex-wrap:     wrap !important;
}
.idlc-hero::after { display: none !important; }
/* Soft dot texture — same technique as the Student Dashboard hero's
   .hero__dots, in place of the gold radial-orb overlay. */
.idlc-hero::before {
  content:    '' !important;
  position:   absolute !important;
  inset:      0 !important;
  opacity:    .35 !important;
  background-image: radial-gradient(rgba(164,16,52,.18) 1px, transparent 1px) !important;
  background-size:  22px 22px !important;
  -webkit-mask: radial-gradient(80% 100% at 88% 0%, #000, transparent 72%) !important;
  mask:         radial-gradient(80% 100% at 88% 0%, #000, transparent 72%) !important;
  pointer-events: none !important;
}
/* Top-right group — the "Instructor Dashboard" eyebrow (moved off the
   left column, where it duplicated the page title) paired with the
   Live status badge, in the hero card's top-right corner. */
.idlc-hero__top-right {
  position:    absolute !important;
  top:         26px !important;
  right:       30px !important;
  z-index:     1 !important;
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
}
.idlc-hero__top-right .idlc-hero__eyebrow {
  display:       inline-flex !important;
  align-items:   center !important;
  gap:           7px !important;
  margin-bottom: 0 !important;
}
.idlc-hero__live {
  display:       flex !important;
  align-items:   center !important;
  gap:           6px !important;
  font-size:     .72rem !important;
  font-weight:   600 !important;
  color:         #2E8049 !important;
  background:    #E7F4EA !important;
  padding:       4px 12px !important;
  border-radius: var(--r-pill) !important;
}
.idlc-hero__live-dot {
  width:         7px !important;
  height:        7px !important;
  border-radius: 50% !important;
  background:    #3FA85C !important;
  box-shadow:    0 0 0 3px rgba(63,168,92,.18) !important;
}
.idlc-hero__left { position: relative !important; z-index: 1 !important; }
/* Actions moved out of the left column into their own right-aligned
   group (previously stacked under the name/subtitle), filling the
   card's empty right side where the stat chips used to sit. */
.idlc-hero__actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  position:    relative !important;
  z-index:     1 !important;
}
.idlc-hero__eyebrow {
  font-size:      .72rem !important;
  font-weight:    700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color:          #A41034 !important;
  margin-bottom:  10px !important;
}
.idlc-hero__name {
  font-family:    'Fraunces', serif !important;
  font-size:      42px !important;
  font-weight:    600 !important;
  color:          #1C1514 !important;
  line-height:    1.05 !important;
  letter-spacing: -.01em !important;
  margin-bottom:  10px !important;
}
.idlc-hero__sub {
  font-size:   .95rem !important;
  color:       #5C4A3E !important;
  margin-bottom: 22px !important;
}
.idlc-hero__cta {
  background:    #A41034 !important;
  color:         #fff !important;
  font-size:     .88rem !important;
  font-weight:   700 !important;
  padding:       12px 24px !important;
  border-radius: var(--r-pill) !important;
  box-shadow:    0 8px 20px -8px rgba(164,16,52,.5) !important;
  transition:    transform .15s, box-shadow .15s, background .15s !important;
}
.idlc-hero__cta:hover {
  color:      #fff !important;
  background: #8B0D2A !important;
  transform:  translateY(-2px) !important;
  box-shadow: 0 10px 28px -8px rgba(164,16,52,.55) !important;
}
.idlc-hero__cta-secondary {
  background:  rgba(255,255,255,.55) !important;
  color:       #A41034 !important;
  border:      1.5px solid rgba(164,16,52,.28) !important;
  border-radius: var(--r-pill) !important;
  padding:     12px 24px !important;
  font-size:   .88rem !important;
  font-weight: 600 !important;
}
.idlc-hero__cta-secondary:hover {
  background:   #fff !important;
  border-color: #A41034 !important;
  color:        #A41034 !important;
}
.idlc-hero__chips { position: relative !important; z-index: 1 !important; }
.idlc-chip {
  background:      rgba(255,255,255,.55) !important;
  border:          1.5px solid rgba(164,16,52,.22) !important;
  border-radius:   var(--r-md) !important;
  padding:         16px 20px !important;
  text-align:      center !important;
  min-width:       90px !important;
}
.idlc-chip__val {
  font-family: 'Fraunces', serif !important;
  font-size:   1.5rem !important;
  font-weight: 600 !important;
  color:       #1C1514 !important;
  line-height: 1 !important;
  margin-bottom: 4px !important;
}
.idlc-chip__lbl {
  font-size:      .65rem !important;
  font-weight:    700 !important;
  color:          #7C6A5E !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

/* ── Section header — match student style ── */
.idlc-section-hd {
  font-size:      .8rem !important;
  font-weight:    700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--ink500) !important;
  margin:         32px 0 14px !important;
  display:        flex !important;
  align-items:    baseline !important;
  justify-content: space-between !important;
}
.idlc-section-hd::after { display: none !important; }
.idlc-section-hd a {
  font-size:       .82rem !important;
  font-weight:     600 !important;
  color:           #A41034 !important;
  text-decoration: none !important;
  text-transform:  none !important;
  letter-spacing:  0 !important;
}

/* ── Metric cards — light surface, all #A41034 ── */
.idlc-metrics { gap: 16px !important; }
.idlc-metric {
  background:    var(--surface) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  padding:       24px !important;
  transition:    box-shadow .15s, transform .15s !important;
}
.idlc-metric:hover {
  box-shadow:   var(--sh-lg) !important;
  transform:    translateY(-3px) !important;
}
.idlc-metric--1:hover { border-color: rgba(164,16,52,.3) !important; }
.idlc-metric--2:hover { border-color: rgba(5,150,105,.3) !important; }
.idlc-metric--3:hover { border-color: rgba(37,99,235,.3) !important; }
.idlc-metric--4:hover { border-color: rgba(217,119,6,.3) !important; }
.idlc-metric__accent { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
/* Each card its own accent, same rotation as the Quick Actions cards
   below (crimson / green / blue / amber), instead of all four cards
   sharing one flat brand colour. */
.idlc-metric--1 .idlc-metric__accent { background: #A41034 !important; }
.idlc-metric--2 .idlc-metric__accent { background: #059669 !important; }
.idlc-metric--3 .idlc-metric__accent { background: #2563EB !important; }
.idlc-metric--4 .idlc-metric__accent { background: #D97706 !important; }
.idlc-metric__val {
  font-family: 'Fraunces', serif !important;
  font-size:   2rem !important;
  font-weight: 600 !important;
  color:       var(--ink900) !important;
}
.idlc-metric__lbl {
  color:          var(--ink500) !important;
  font-size:      .68rem !important;
  font-weight:    700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}
.idlc-metric__sub { color: var(--ink300) !important; font-size: .76rem !important; margin-top: 4px !important; }
.idlc-metric__icon { font-size: 1.1rem !important; margin-bottom: 10px !important; }
.idlc-metric--1 .idlc-metric__icon { color: #A41034 !important; }
.idlc-metric--2 .idlc-metric__icon { color: #059669 !important; }
.idlc-metric--3 .idlc-metric__icon { color: #2563EB !important; }
.idlc-metric--4 .idlc-metric__icon { color: #D97706 !important; }

/* ── Top course card — light ── */
/* ── Top Performing Courses — horizontal 2-up carousel track ── */
.idlc-tc-hd-right { display: flex !important; align-items: center !important; gap: 14px !important; }
.idlc-tc-nav { display: flex !important; gap: 6px !important; }
.idlc-tc-nav__btn {
  width:           26px !important;
  height:          26px !important;
  border-radius:   50% !important;
  border:          1.5px solid var(--line) !important;
  background:      var(--surface) !important;
  color:           var(--tx-3) !important;
  font-size:       .68rem !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  cursor:          pointer !important;
  transition:      border-color .15s, color .15s !important;
}
.idlc-tc-nav__btn:hover { border-color: #2563EB !important; color: #2563EB !important; }

.idlc-tc-track {
  display:            flex !important;
  gap:                16px !important;
  overflow-x:         auto !important;
  scroll-snap-type:   x mandatory !important;
  scrollbar-width:    none !important;
  -ms-overflow-style: none !important;
}
.idlc-tc-track::-webkit-scrollbar { display: none !important; }
.idlc-tc-track .idlc-top-course {
  flex:             0 0 calc(50% - 8px) !important;
  scroll-snap-align: start !important;
  min-width:        0 !important;
}
@media (max-width: 900px) {
  .idlc-tc-track .idlc-top-course { flex-basis: 100% !important; }
}

/* Card contents re-tuned for the half-width carousel card (was sized
   for one full-width card) — smaller thumb, a fixed 2-line title slot
   so both cards' stats/buttons align on the same row regardless of
   title length, tighter stat row, and buttons forced onto one row
   instead of wrapping into an uneven stack. */
.idlc-tc-track .idlc-top-course__thumb { width: 140px !important; }
.idlc-tc-track .idlc-top-course__body  { padding: 16px 18px !important; gap: 6px !important; }
.idlc-tc-track .idlc-top-course__title {
  font-size:   .96rem !important;
  line-height: 1.32 !important;
  display:     -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow:    hidden !important;
  min-height:  2.64em !important;
}
/* Grid instead of a loosely-wrapped flex row — 4 equal columns keep
   Students/Rating/Status/Price evenly spaced and left-aligned with
   each other instead of drifting apart based on each value's width. */
.idlc-tc-track .idlc-top-course__stats {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   6px !important;
}
.idlc-tc-track .idlc-top-course__stat { min-width: 0 !important; }
.idlc-tc-track .idlc-top-course__stat-val {
  font-size:     .9rem !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
}
.idlc-tc-track .idlc-top-course__stat-lbl { font-size: .58rem !important; letter-spacing: .04em !important; }
.idlc-tc-track .idlc-top-course__actions {
  flex-wrap: nowrap !important;
  gap:       8px !important;
}
.idlc-tc-track .idlc-top-course__btn {
  padding:     7px 12px !important;
  font-size:   .7rem !important;
  white-space: nowrap !important;
  flex:        1 1 0 !important;
  justify-content: center !important;
}

.idlc-top-course {
  background:    var(--surface) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  position:      relative !important;
}
.idlc-top-course:hover {
  box-shadow:   var(--sh-lg) !important;
  border-color: #A41034 !important;
}
.idlc-top-course__eyebrow { color: var(--ink300) !important; }
.idlc-top-course__title   { color: var(--ink900) !important; font-family: 'Fraunces', serif !important; font-size: 1.25rem !important; font-weight: 600 !important; }
.idlc-top-course__stat-val { color: var(--ink900) !important; font-family: 'Fraunces', serif !important; }
.idlc-top-course__stat-lbl { color: var(--ink300) !important; }
.idlc-top-course__btn--primary {
  background:    #A41034 !important;
  color:         #fff !important;
  border-radius: var(--r-pill) !important;
  padding:       10px 20px !important;
}
.idlc-top-course__btn--ghost {
  background:    transparent !important;
  color:         var(--ink500) !important;
  border:        1.5px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  padding:       9px 18px !important;
}
.idlc-top-course__btn--ghost:hover { background: var(--c200) !important; color: var(--ink700) !important; }

/* Empty course state */
.idlc-no-course {
  background:    var(--c200) !important;
  border:        2px dashed rgba(164,16,52,.18) !important;
  border-radius: var(--r-lg) !important;
}
.idlc-no-course__icon  { color: rgba(164,16,52,.2) !important; }
.idlc-no-course__title { color: var(--ink700) !important; }
.idlc-no-course__sub   { color: var(--ink300) !important; }
.idlc-no-course__btn   { background: #A41034 !important; border-radius: var(--r-pill) !important; }

/* ── Quick links — colored top-bar cards (title + description),
   instead of small centered icon tiles. ── */
.idlc-qlinks { gap: 14px !important; }
.idlc-qlink {
  position:      relative !important;
  overflow:      hidden !important;
  background:    var(--surface) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow:    var(--sh-sm) !important;
  padding:       20px 18px !important;
  text-align:    left !important;
  align-items:   flex-start !important;
  text-decoration: none !important;
  transition:    box-shadow .15s, transform .15s, border-color .15s !important;
}
.idlc-qlink:hover {
  box-shadow:   var(--sh-md) !important;
  transform:    translateY(-3px) !important;
  background:   var(--surface) !important;
}
.idlc-qlink__title {
  font-family:   'Fraunces', Georgia, serif !important;
  font-weight:   700 !important;
  font-size:     .95rem !important;
  color:         var(--ink900) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.idlc-qlink__desc {
  font-size:   .78rem !important;
  color:       var(--tx-3) !important;
  line-height: 1.5 !important;
}

/* ── Pending alert ── */
.idlc-pending-alert {
  background:    rgba(201,152,46,.07) !important;
  border:        1px solid rgba(201,152,46,.22) !important;
  color:         #7A5200 !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 20px !important;
}
.idlc-pending-alert a { color: #7A5200 !important; font-weight: 700 !important; }

/* ── Sales / recent activity cards — light ── */
.idlc-sales-card,
[class^="idlc-"][class*="card"]:not(.idlc-top-course):not(.idlc-no-course),
.idlc-act-list {
  background:    var(--surface) !important;
  border:        1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--sh-md) !important;
  color:         var(--ink900) !important;
}
.idlc-sales-card { position: relative !important; }

/* Generic fallback: any remaining dark text-on-dark in idlc */
.idlc-metric__sub[style*="color:#000"],
.idlc-metric__sub[style*="color: #000"] {
  color: var(--ink300) !important;
}

/* Instructor level badge — same gold pill as student */
.sbnew-level--instructor {
  background: rgba(230,200,120,.16) !important;
  border:     1px solid #fff !important;
  color:      var(--gold300) !important;
}

/* Hero eyebrow icon gap */
.idlc-hero__eyebrow i { margin-right: 6px !important; }

/* Top course badge — pill not square */
.idlc-top-course__badge {
  background:    #A41034 !important;
  border-radius: var(--r-pill) !important;
  font-size:     .68rem !important;
  font-weight:   700 !important;
  letter-spacing: .05em !important;
}

/* Sales card header text */
.idlc-sales-card__title,
.idlc-sales-card__head { color: var(--ink700) !important; }

/* Table text inside instructor cards */
.idlc-sales-card table th,
.idlc-sales-card table td { color: var(--ink700) !important; }

/* Section header first one — no extra top margin */
.dash-col--main .idlc-section-hd:first-of-type { margin-top: 28px !important; }


/* ═══════════════════════════════════════════════════════════
   19. CONTENT RE-ARRANGEMENT
   ═══════════════════════════════════════════════════════════ */

/* ── Secondary course cards: side-by-side 2-col grid ── */
.sdlc-lc-secondary-grid {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   16px !important;
  margin-top:            16px !important;
}
/* Flip to vertical card inside the grid */
.sdlc-lc-secondary-grid .sdlc-lc-card--secondary {
  grid-template-columns: 1fr !important;
  margin-top:            0 !important;
}
.sdlc-lc-secondary-grid .sdlc-lc-card--secondary .sdlc-lc-card__thumb {
  height:     160px !important;
  min-height: 160px !important;
}
.sdlc-lc-secondary-grid .sdlc-lc-card--secondary .sdlc-lc-card__body {
  padding: 18px 20px !important;
}
.sdlc-lc-secondary-grid .sdlc-lc-card--secondary .sdlc-lc-card__title {
  font-size:   1.05rem !important;
  line-height: 1.35 !important;
}
@media (max-width: 720px) {
  .sdlc-lc-secondary-grid { grid-template-columns: 1fr !important; }
}

/* ── Achievements + Recommendations dual-column layout ── */
.sdlc-dual-section {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   24px !important;
  margin-top:            24px !important;
  align-items:           start !important;
}
.sdlc-dual-left,
.sdlc-dual-right { min-width: 0 !important; }

/* Section heads flush-top inside dual panels */
.sdlc-dual-section .sdlc-section-hd { margin-top: 0 !important; }

/* Achievements: reflow to 3-col grid (2 rows × 3 tiles) */
.sdlc-dual-left .sdlc-achievements-strip {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Recommended cards: horizontal strip (thumb left, text right) */
.sdlc-dual-right .sdlc-rec-grid {
  grid-template-columns: 1fr !important;
  gap:                   10px !important;
}
.sdlc-dual-right .sdlc-rec-card {
  display:     flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap:         12px !important;
  background:  var(--surface) !important;
  border-radius: var(--r-md) !important;
  box-shadow:  var(--sh-sm) !important;
  padding:     10px !important;
  text-decoration: none !important;
  transition:  box-shadow .15s, transform .15s !important;
}
.sdlc-dual-right .sdlc-rec-card:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px) !important;
}
.sdlc-dual-right .sdlc-rec-card__thumb {
  width:         72px !important;
  height:        56px !important;
  flex-shrink:   0 !important;
  border-radius: var(--r-sm) !important;
  overflow:      hidden !important;
}
.sdlc-dual-right .sdlc-rec-card__thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.sdlc-dual-right .sdlc-rec-card__body {
  flex: 1 !important; min-width: 0 !important; padding: 0 !important;
}
.sdlc-dual-right .sdlc-rec-card__title {
  font-size: .875rem !important;
  font-weight: 600 !important;
  color: var(--ink900) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 4px !important;
}
.sdlc-dual-right .sdlc-rec-card__price {
  font-size:   .82rem !important;
  font-weight: 700 !important;
  color:       var(--m600) !important;
}
.sdlc-dual-right .sdlc-rec-card__price--free {
  color: #2E8049 !important;
}

@media (max-width: 820px) {
  .sdlc-dual-section { grid-template-columns: 1fr !important; }
}

/* ── Recent activity: 3 separate mini-cards in a row ── */
.sdlc-activity-row {
  background:            transparent !important;
  box-shadow:            none !important;
  padding:               0 !important;
  display:               grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap:                   12px !important;
  flex-direction:        unset !important;
}
.sdlc-act-card {
  background:     var(--surface) !important;
  border-radius:  var(--r-md) !important;
  box-shadow:     var(--sh-md) !important;
  padding:        16px !important;
  border-bottom:  none !important;
  flex-direction: column !important;
  align-items:    flex-start !important;
  gap:            10px !important;
}
.sdlc-act-card__body { width: 100% !important; }
.sdlc-act-card__title {
  white-space: normal !important;
  line-height: 1.35 !important;
}
.sdlc-act-badge { margin-top: 4px !important; }
@media (max-width: 720px) {
  .sdlc-activity-row {
    grid-template-columns: 1fr !important;
  }
  .sdlc-act-card {
    flex-direction: row !important;
    align-items:    center !important;
    gap:            14px !important;
  }
  .sdlc-act-card__title { white-space: nowrap !important; }
}

/* ═══════════════════════════════════════════════════════════
   20. INSTRUCTOR DASHBOARD — compact pass
   Tightens the generous spacing/type scale from Section 18 and
   fixes leftover violet (#7A0D27-family) border tints in
   custom.css's idlc- base layer that never got migrated to the
   flat #A41034 brand.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.idlc-hero { padding: 26px 30px !important; gap: 24px !important; }
.idlc-hero__eyebrow { margin-bottom: 6px !important; }
.idlc-hero__name { font-size: 28px !important; margin-bottom: 5px !important; }
.idlc-hero__sub { font-size: .86rem !important; margin-bottom: 14px !important; }
.idlc-hero__actions { display: flex !important; gap: 10px !important; }
.idlc-hero__cta,
.idlc-hero__cta-secondary { padding: 9px 18px !important; font-size: .82rem !important; }
.idlc-hero__chips { display: flex !important; gap: 10px !important; }
.idlc-chip { padding: 9px 14px !important; min-width: 72px !important; }
.idlc-chip__val { font-size: 1.15rem !important; margin-bottom: 2px !important; }
.idlc-chip__lbl { font-size: .6rem !important; }

/* ── Section headers ── */
.idlc-section-hd { margin: 20px 0 10px !important; font-size: .74rem !important; }
.dash-col--main .idlc-section-hd:first-of-type { margin-top: 18px !important; }

/* ── Metric cards ── */
.idlc-metrics { gap: 12px !important; }
/* First block in the main column after the hero card — the "Performance
   Overview" label above it was removed, so this now needs its own
   top spacing instead of inheriting the label's margin. */
.idlc-hero + .idlc-metrics { margin-top: 20px !important; }
.idlc-metric { padding: 16px 18px !important; }
.idlc-metric__icon { margin-bottom: 6px !important; font-size: 1rem !important; }
.idlc-metric__val { font-size: 1.5rem !important; }
.idlc-metric__lbl { font-size: .64rem !important; }
.idlc-metric__sub { margin-top: 2px !important; }

/* ── Top course card ── */
.idlc-top-course { border-color: var(--line) !important; }
.idlc-top-course__thumb { width: 168px !important; min-height: 122px !important; }
@media (max-width: 768px) { .idlc-top-course__thumb { min-height: 150px !important; } }
.idlc-top-course__body { padding: 14px 18px !important; gap: 4px !important; }
.idlc-top-course__title { font-size: 1.05rem !important; }
.idlc-top-course__stats { gap: 16px !important; margin-top: 2px !important; }
.idlc-top-course__stat-lbl { font-size: .64rem !important; letter-spacing: .06em !important; }
.idlc-top-course__actions { padding-top: 4px !important; gap: 8px !important; }
.idlc-top-course__btn { padding: 8px 16px !important; font-size: .8rem !important; }
.idlc-no-course { padding: 28px 20px !important; }

/* ── Quick actions — colored top-bar cards (title + one-line
   description), same technique as the Support Hub's "Popular topics"
   cards: flat white card, 3px accent bar, bold title, muted
   description underneath — instead of small centered icon tiles. ── */
.idlc-qlinks { gap: 12px !important; }
.idlc-qlink { padding: 16px 16px !important; gap: 4px !important; }
.idlc-qlink__title { font-size: .88rem !important; }
.idlc-qlink__desc  { font-size: .74rem !important; }

.idlc-qlink:nth-child(1):hover { border-color: rgba(164,16,52,.3)  !important; }
.idlc-qlink:nth-child(2):hover { border-color: rgba(5,150,105,.3)  !important; }
.idlc-qlink:nth-child(3):hover { border-color: rgba(217,119,6,.3)  !important; }
.idlc-qlink:nth-child(4):hover { border-color: rgba(37,99,235,.3)  !important; }
.idlc-qlink:nth-child(5):hover { border-color: rgba(164,16,52,.3) !important; }
.idlc-qlink:nth-child(6):hover { border-color: rgba(8,145,178,.3)  !important; }
.idlc-qlink:nth-child(7):hover { border-color: rgba(219,39,119,.3) !important; }
.idlc-qlink:nth-child(8):hover { border-color: rgba(71,85,105,.3)  !important; }

/* Instructor Resources strip — 3 links, so 3 columns instead of the
   4-column Quick Actions grid (which would leave an empty trailing
   cell). Fills what was blank space at the bottom of the main column
   below Recent Sales. */
.idlc-qlinks--resources { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 700px) {
  .idlc-qlinks--resources { grid-template-columns: 1fr !important; }
}

/* ── Recent sales table ── */
.idlc-sales-table th { padding: 8px 14px !important; border-bottom-color: var(--line) !important; }
.idlc-sales-table td { padding: 8px 14px !important; border-bottom-color: var(--line) !important; }
.idlc-sales-table tr:hover td { background: var(--rose50) !important; }
.idlc-sales-table tr.d-none { display: none !important; }
.idlc-view-btn { border-color: var(--line) !important; }
.idlc-view-btn:hover { border-color: rgba(164,16,52,.35) !important; }
.idlc-empty { padding: 28px 20px !important; }

/* Cap the table to roughly 6 rows tall and scroll internally beyond
   that, instead of the card growing to fit all 10 loaded rows and
   pushing everything below it down the page. Header stays pinned
   while the body scrolls. */
.idlc-sales-card .table-responsive {
  max-height: 360px !important;
  overflow-y: auto !important;
}
.idlc-sales-table thead th {
  position:   sticky !important;
  top:        0 !important;
  z-index:    1 !important;
  background: var(--surface) !important;
}

/* ── Recent sales — client-side filter bar ── */
.idlc-sf {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      14px 16px;
  border-bottom: 1px solid var(--line) !important;
  flex-wrap:    wrap;
}
.idlc-sf__search {
  position: relative;
  flex:     1;
  min-width: 180px;
}
.idlc-sf__search i {
  position:  absolute;
  left:      11px;
  top:       50%;
  transform: translateY(-50%);
  font-size: .7rem;
  color:     var(--tx-4);
  pointer-events: none;
}
.idlc-sf__search input {
  width:         100%;
  padding:       8px 12px 8px 30px;
  border:        1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size:     .8rem;
  color:         var(--tx-1);
  background:    var(--surface);
  outline:       none;
  transition:    border-color .15s;
}
.idlc-sf__search input:focus { border-color: var(--brand); }
.idlc-sf__search input::placeholder { color: var(--tx-4); }
.idlc-sf__tabs {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}
.idlc-sf__tab {
  padding:       7px 13px;
  border-radius: var(--r-pill);
  border:        1.5px solid var(--line);
  background:    var(--surface);
  color:         var(--tx-3);
  font-size:     .74rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s, border-color .15s, color .15s;
  white-space:   nowrap;
}
.idlc-sf__tab:hover { border-color: var(--brand); color: var(--brand); }
.idlc-sf__tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Recent sales — dropdown filters (course/amount/status/payment) ── */
.idlc-sf__select-wrap {
  position: relative;
  flex-shrink: 0;
}
.idlc-sf__select-wrap i {
  position:  absolute;
  left:      11px;
  top:       50%;
  transform: translateY(-50%);
  font-size: .68rem;
  color:     var(--tx-4);
  pointer-events: none;
}
.idlc-sf__select {
  appearance: none;
  -webkit-appearance: none;
  padding:       8px 26px 8px 30px;
  border:        1.5px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color:         var(--tx-2);
  font-size:     .76rem;
  font-weight:   600;
  cursor:        pointer;
  outline:       none;
  transition:    border-color .15s, color .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A41034' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.idlc-sf__select:hover,
.idlc-sf__select:focus { border-color: var(--brand); color: var(--brand); }

.idlc-sf__clear {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       7px 12px;
  border-radius: var(--r-pill);
  border:        1.5px solid rgba(164,16,52,.22);
  background:    rgba(164,16,52,.06);
  color:         var(--brand);
  font-size:     .74rem;
  font-weight:   700;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background .15s, border-color .15s;
}
.idlc-sf__clear:hover { background: rgba(164,16,52,.13); }

@media (max-width: 700px) {
  .idlc-sf { flex-direction: column; align-items: stretch; }
  .idlc-sf__select-wrap, .idlc-sf__select { width: 100%; }
}

/* ── Recent sales — pagination bar (6 rows/page) ── */
.idlc-sf-pagination {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            14px;
  padding:        12px 16px;
  border-top:     1px solid var(--line);
}
.idlc-sf-page-btn {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          1.5px solid var(--line);
  background:      var(--surface);
  color:           var(--tx-3);
  font-size:       .7rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      border-color .15s, color .15s;
}
.idlc-sf-page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.idlc-sf-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.idlc-sf-page-info { font-size: .78rem; font-weight: 600; color: var(--tx-3); min-width: 88px; text-align: center; }