/* ============================================================
   Tier Theme — per-membership visual themes.
   body.tier-free       → classic green look (default, no overrides)
   body.tier-pro        → Pro look — GOLD/AMBER on light (no violet)
   body.tier-unlimited  → Pro+ look — richer warm gold, still light
   ============================================================ */

/* ── Free badge ──────────────────────────────────────────── */
.membership-badge.tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.membership-badge.tier-badge.free { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.membership-badge.tier-badge.pro,
.membership-badge.tier-badge.unlimited {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border: 1px solid #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .22);
}

/* ============================================================
   PRO — gold/amber accent on light background (no violet)
   ============================================================ */
body.tier-pro {
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-dim: rgba(180, 83, 9, 0.08);
  --primary: #b45309;
  --primary-light: #fffbeb;
  --primary-dark: #92400e;
}
body.tier-pro .topbar,
body.tier-pro .sidebar,
body.tier-pro .dash-header { border-color: rgba(180, 83, 9, 0.18); }
body.tier-pro .topbar-logo .mark,
body.tier-pro .progress-fill,
body.tier-pro .sidebar-quiz-btn,
body.tier-pro .lesson-item.active { background: var(--accent); border-color: var(--accent); }
body.tier-pro .topbar nav a.active,
body.tier-pro .lesson-item.active { background: var(--primary-light); color: var(--accent); }
body.tier-pro .topbar nav a:hover { background: var(--primary-light); }
body.tier-pro .topbar nav a.nav-cta { background: var(--accent); }
body.tier-pro .footer-btn.primary { background-color: var(--accent); }
body.tier-pro .lesson-item.active { border-left-color: var(--accent); }
body.tier-pro .dash-stat-icon.courses,
body.tier-pro .dash-stat-icon.coins { background: var(--primary-light); color: var(--accent); }
body.tier-pro ::selection { background: rgba(180, 83, 9, 0.2); }

/* Gold chrome accent line at the very top */
body.tier-pro .topbar { box-shadow: inset 0 3px 0 var(--accent); }
body.tier-pro .dash-layout { border-top: 3px solid var(--accent); }

/* ============================================================
   UNLIMITED (PRO+) — richer warm gold, still LIGHT (no dark bg)
   ============================================================ */
body.tier-unlimited {
  --accent: #b45309;
  --accent-hover: #92400e;
  --accent-dim: rgba(180, 83, 9, 0.08);
  --primary: #92400e;
  --primary-light: #fef3c7;
  --primary-dark: #92400e;
  --gold: #d97706;
}
body.tier-unlimited .topbar,
body.tier-unlimited .sidebar {
  background: linear-gradient(180deg, #fffbeb 0%, #fef7e0 100%);
  border-color: rgba(217, 119, 6, 0.25);
  color: #92400e;
}
body.tier-unlimited .topbar-logo,
body.tier-unlimited .sidebar-head h3 { color: #92400e; }
body.tier-unlimited .topbar-logo .mark { background: #d97706; color: #fffbeb; }
body.tier-unlimited .topbar nav a { color: #92400e; }
body.tier-unlimited .topbar nav a:hover { color: #92400e; background: rgba(217, 119, 6, 0.12); }
body.tier-unlimited .topbar nav a.active { background: rgba(217, 119, 6, 0.18); color: #92400e; }
body.tier-unlimited .topbar nav a.nav-cta { background: #d97706; color: #fffbeb; }
body.tier-unlimited .topbar-btn { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.3); color: #92400e; }
body.tier-unlimited .sidebar-quiz-btn { background: #d97706; border-color: #d97706; color: #fffbeb; }
body.tier-unlimited .progress-fill { background: #d97706; }
body.tier-unlimited .lesson-item.active { background: rgba(217, 119, 6, 0.1); border-left-color: #d97706; }
body.tier-unlimited .lesson-info h4 { color: #92400e; }
body.tier-unlimited .lesson-meta,
body.tier-unlimited .progress-text,
body.tier-unlimited .sidebar-head .count { color: rgba(146, 64, 14, 0.7); }
body.tier-unlimited .lesson-num { background: rgba(217, 119, 6, 0.15); border-color: rgba(217, 119, 6, 0.3); color: #92400e; }
body.tier-unlimited .lesson-item.completed .lesson-num { background: #d97706; border-color: #d97706; color: #fffbeb; }
body.tier-unlimited .footer-btn.primary,
body.tier-unlimited .sidebar-quiz-btn:hover { background: #b45309; }
body.tier-unlimited ::selection { background: rgba(217, 119, 6, 0.25); }

/* Gold chrome line at the very top */
body.tier-unlimited .topbar { box-shadow: inset 0 3px 0 #d97706; }
body.tier-unlimited .dash-layout { border-top: 3px solid #d97706; }

/* ============================================================
   Playground (VS Code-style dark UI) — logo + accent touches
   (titlebar stays dark there by design; accents are gold now)
   ============================================================ */
body.tier-pro .titlebar-logo { color: #fcd34d; }
body.tier-pro .titlebar-logo .mark { background: #d97706; color: #fffbeb; }
body.tier-pro .titlebar { box-shadow: inset 0 2px 0 #d97706; }
body.tier-unlimited .titlebar-logo { color: #fcd34d; }
body.tier-unlimited .titlebar-logo .mark { background: #d97706; color: #fffbeb; }
body.tier-unlimited .titlebar { box-shadow: inset 0 2px 0 #d97706; }

/* ============================================================
   Shared: membership badge row in the dashboard header
   ============================================================ */
.dash-tier-row { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.dash-tier-row .membership-badge { vertical-align: middle; }

/* Crown inside the Pro badge */
.membership-badge.tier-badge .crown-ic{ display:inline-flex; }
.membership-badge.tier-badge .crown-ic svg{ display:block; }