@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════
   LEADERBOARD.CSS
   Styles for:
   - leaderboard-dashboard.html  (student view, inside dashboard)
   - leaderboard-public.html     (public view, no login required)
   - hall-of-fame.html           (public, all past batch top 3s)
   - certificates.html           (student certificates dashboard page)
   - certificate-view.html       (the actual certificate document)

   Extends the existing academy.css — load AFTER it.
   Tokens reuse --purple, --red, --green, --gold etc from academy.css.
═══════════════════════════════════════════════════════ */

/* ── EXTRA TOKENS ─────────────────────────────────────── */
:root {
  --gold:    #E8B84B;
  --gold-l:  #F5D485;
  --gold-d:  #C89A35;
  --silver:  #C0C0C0;
  --bronze:  #CD7F32;
  --live-red:#ff3532;
}

/* ── COURSE + BATCH SELECTOR BAR ─────────────────────── */
.selector-bar {
  background: var(--d2, #111);
  border-bottom: 1px solid rgba(107,83,163,.18);
  padding: 12px 0;
}
.selector-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.selector-row:last-child { margin-bottom: 0; }
.selector-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #777);
  white-space: nowrap;
  min-width: 86px;
}
.sel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 100px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1.5px solid rgba(107,83,163,.28);
  color: var(--muted, #777); background: transparent;
  font-family: var(--body, 'DM Sans', sans-serif);
  transition: all .2s;
  white-space: nowrap;
}
.sel-pill:hover { border-color: rgba(107,83,163,.55); color: var(--soft, #c8c8c8); }
.sel-pill.active--course {
  background: var(--purple, #6b53a3);
  border-color: var(--purple, #6b53a3);
  color: #fff; font-weight: 600;
}
.sel-pill.active--batch {
  background: var(--live-red);
  border-color: var(--live-red);
  color: #fff; font-weight: 600;
}
.sel-pill.active--batch-ended {
  background: rgba(107,83,163,.18);
  border-color: rgba(107,83,163,.45);
  color: var(--purple-l, #8b6fc7); font-weight: 600;
}
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live-red); animation: blink-dot 1.4s ease-in-out infinite; }
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Context bar */
.context-bar {
  background: rgba(107,83,163,.08);
  border: 1px solid rgba(107,83,163,.22);
  border-radius: 9px; padding: 9px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; flex-wrap: wrap; gap: 8px;
}
.context-bar__label { font-size: 12px; color: var(--purple-l, #8b6fc7); font-weight: 600; }
.context-bar__live {
  font-size: 10px; font-weight: 700; color: var(--live-red);
  background: rgba(255,53,50,.12); border: 1px solid rgba(255,53,50,.35);
  border-radius: 100px; padding: 3px 10px; letter-spacing: .05em;
}

/* ── YOUR POSITION BANNER ─────────────────────────────── */
.your-pos {
  background: rgba(107,83,163,.09);
  border: 1px solid rgba(107,83,163,.3);
  border-radius: 14px; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  position: relative; overflow: hidden;
  margin-bottom: 24px;
}
.your-pos::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--purple-l, #8b6fc7);
}
.your-pos__av {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--purple, #6b53a3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display,'Syne',sans-serif); font-size: 14px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.your-pos__name { font-size: 15px; font-weight: 700; color: #fff; }
.your-pos__meta { font-size: 12px; color: var(--muted, #777); margin-top: 2px; }
.your-pos__rank { font-family: var(--display,'Syne',sans-serif); font-size: 34px; font-weight: 800; color: var(--purple-l, #8b6fc7); line-height: 1; }
.your-pos__rank-lbl { font-size: 11px; color: var(--muted, #777); text-align: center; }
.your-pos__score { font-family: var(--display,'Syne',sans-serif); font-size: 22px; font-weight: 800; color: #fff; }
.your-pos__score-lbl { font-size: 11px; color: var(--muted, #777); }
.your-pos__trend {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 8px;
}
.trend--up   { background: rgba(20,168,0,.15); color: var(--green, #14a800); }
.trend--down { background: rgba(255,53,50,.12); color: var(--live-red); }
.trend--flat { background: rgba(119,119,119,.12); color: var(--muted, #777); }

/* ── PODIUM TOP 3 ─────────────────────────────────────── */
.podium {
  background: rgba(232,184,75,.03);
  border: 1px solid rgba(232,184,75,.15);
  border-radius: 16px; padding: 20px;
  display: flex; align-items: flex-end; gap: 12px;
  margin-bottom: 28px;
}
.podium-card {
  flex: 1; border-radius: 14px; padding: 16px;
  border: 1px solid; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; transition: transform .3s;
}
.podium-card:hover { transform: translateY(-3px); }
.podium-card--gold   { background: rgba(232,184,75,.06); border-color: rgba(232,184,75,.5); }
.podium-card--silver { background: rgba(192,192,192,.04); border-color: rgba(192,192,192,.35); }
.podium-card--bronze { background: rgba(205,127,50,.04); border-color: rgba(205,127,50,.28); }
.podium-card--gold.podium-card--tall { padding-top: 24px; padding-bottom: 24px; }
.podium-card__medal { font-size: 28px; margin-bottom: 4px; }
.podium-card__pos { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.podium-card--gold   .podium-card__pos { color: var(--gold, #E8B84B); }
.podium-card--silver .podium-card__pos { color: var(--silver, #C0C0C0); }
.podium-card--bronze .podium-card__pos { color: var(--bronze, #CD7F32); }
.podium-card__av {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--purple, #6b53a3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display,'Syne',sans-serif); font-size: 16px; font-weight: 800; color: #fff;
  margin: 0 auto 8px; border: 2px solid;
}
.podium-card--gold   .podium-card__av { border-color: rgba(232,184,75,.7); }
.podium-card--silver .podium-card__av { border-color: rgba(192,192,192,.5); }
.podium-card--bronze .podium-card__av { border-color: rgba(205,127,50,.4); }
.podium-card__name { font-size: 14px; font-weight: 700; color: #fff; }
.podium-card__score { font-size: 13px; font-weight: 700; }
.podium-card--gold   .podium-card__score { color: var(--gold, #E8B84B); }
.podium-card--silver .podium-card__score { color: var(--silver, #C0C0C0); }
.podium-card--bronze .podium-card__score { color: var(--bronze, #CD7F32); }
.podium-card__prize { font-size: 11px; font-weight: 600; margin-top: 2px; }
.podium-card--gold   .podium-card__prize { color: var(--gold, #E8B84B); }
.podium-card--silver .podium-card__prize { color: var(--silver, #C0C0C0); }
.podium-card--bronze .podium-card__prize { color: var(--bronze, #CD7F32); }

/* ── LEADERBOARD TABLE ────────────────────────────────── */
.lb-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple-l, #8b6fc7); margin-bottom: 12px;
}
.lb-full {
  background: var(--d3, #1a1a1a);
  border: 1px solid rgba(107,83,163,.18);
  border-radius: 16px; overflow: hidden;
}
.lb-full table { width: 100%; border-collapse: collapse; }
.lb-full thead tr { background: rgba(107,83,163,.12); }
.lb-full th {
  padding: 12px 16px; text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #777);
}
.lb-full td { padding: 14px 16px; font-size: 13px; color: var(--soft, #c8c8c8); border-top: 1px solid rgba(255,255,255,.04); }
.lb-row--gold   td { background: rgba(232,184,75,.04); }
.lb-row--silver td { background: rgba(192,192,192,.03); }
.lb-row--bronze td { background: rgba(205,127,50,.03); }
.lb-row--me     td { background: rgba(107,83,163,.1); }
.lb-row--me td:first-child { border-left: 3px solid var(--purple-l, #8b6fc7); }
.lb-rank   { font-family: var(--display,'Syne',sans-serif); font-weight: 800; font-size: 14px; }
.lb-score  { font-family: var(--display,'Syne',sans-serif); font-weight: 700; }
.lb-gold-score   { color: var(--gold, #E8B84B); }
.lb-silver-score { color: var(--silver, #C0C0C0); }
.lb-bronze-score { color: var(--bronze, #CD7F32); }
.lb-me-score     { color: var(--purple-l, #8b6fc7); }
.lb-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(107,83,163,.3);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display,'Syne',sans-serif); font-size: 12px; font-weight: 800; color: #fff;
  vertical-align: middle; margin-right: 10px; flex-shrink: 0;
}
.lb-me-tag { font-size: 10px; color: var(--purple-l, #8b6fc7); font-weight: 600; display: block; margin-top: 1px; }
.lb-trend { font-size: 13px; font-weight: 700; }
.lb-trend--up   { color: var(--green, #14a800); }
.lb-trend--down { color: var(--live-red); }
.lb-trend--flat { color: var(--muted, #777); }
.lb-prize-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 8px; border: 1px solid;
}
.lb-prize--gold   { background: rgba(232,184,75,.12); border-color: rgba(232,184,75,.4); color: var(--gold, #E8B84B); }
.lb-prize--silver { background: rgba(192,192,192,.1); border-color: rgba(192,192,192,.35); color: var(--silver, #C0C0C0); }
.lb-prize--bronze { background: rgba(205,127,50,.1); border-color: rgba(205,127,50,.3); color: var(--bronze, #CD7F32); }
.lb-lock-row td {
  background: rgba(0,0,0,.7); text-align: center;
  color: var(--muted, #777); font-size: 13px; padding: 14px;
}

/* ── BATCH HISTORY (dashboard) ────────────────────────── */
.batch-hist-card {
  background: var(--d3, #1a1a1a);
  border: 1px solid rgba(107,83,163,.18); border-radius: 14px;
  padding: 18px 20px; display: flex; align-items: center; gap: 16px;
  transition: border-color .3s;
}
.batch-hist-card:hover { border-color: rgba(107,83,163,.35); }
.batch-hist-card__batch {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--purple-l, #8b6fc7); margin-bottom: 3px;
}
.batch-hist-card__title { font-size: 14px; font-weight: 600; color: #fff; }
.batch-hist-card__rank  { font-family: var(--display,'Syne',sans-serif); font-size: 28px; font-weight: 800; color: var(--purple-l, #8b6fc7); }
.batch-hist-card__score { font-size: 17px; font-weight: 700; color: #fff; }
.batch-hist-card__result { font-size: 12px; font-weight: 600; color: var(--bronze, #CD7F32); margin-top: 4px; }

/* Score breakdown cards */
.score-card {
  background: var(--d3, #1a1a1a); border: 1px solid; border-radius: 14px; padding: 18px;
}
.score-card__lbl { font-size: 12px; font-weight: 600; color: var(--muted, #777); margin-bottom: 4px; }
.score-card__note { font-size: 11px; color: var(--muted, #777); }
.score-card__val  { font-family: var(--display,'Syne',sans-serif); font-size: 30px; font-weight: 800; line-height: 1; margin: 8px 0; }
.score-card__bar  { height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.score-card__fill { height: 100%; border-radius: 3px; transition: width .6s var(--ease, cubic-bezier(.16,1,.3,1)); }

/* Prize banner */
.prize-banner {
  background: rgba(232,184,75,.04); border: 1px solid rgba(232,184,75,.2);
  border-radius: 18px; padding: 28px 32px; position: relative; overflow: hidden;
}
.prize-banner::before {
  content: ''; position: absolute; left: 0; top: 0; width: 400px; height: 100%;
  background: radial-gradient(ellipse at left, rgba(232,184,75,.05) 0%, transparent 70%);
  pointer-events: none;
}
.prize-banner__title { font-family: var(--display,'Syne',sans-serif); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.prize-banner__sub   { font-size: 13px; color: var(--muted, #777); margin-bottom: 20px; }
.prize-items { display: flex; gap: 16px; flex-wrap: wrap; }
.prize-item {
  flex: 1; min-width: 200px; border-radius: 12px; padding: 14px 16px; border: 1px solid;
  display: flex; flex-direction: column; gap: 3px;
}
.prize-item--gold   { background: rgba(232,184,75,.08); border-color: rgba(232,184,75,.3); }
.prize-item--silver { background: rgba(192,192,192,.05); border-color: rgba(192,192,192,.28); }
.prize-item--bronze { background: rgba(205,127,50,.05); border-color: rgba(205,127,50,.25); }
.prize-item__pos   { font-size: 12px; font-weight: 600; }
.prize-item__prize { font-family: var(--display,'Syne',sans-serif); font-size: 20px; font-weight: 800; }
.prize-item__cur   { font-size: 11px; }
.prize-item--gold   .prize-item__pos,.prize-item--gold   .prize-item__prize { color: var(--gold, #E8B84B); }
.prize-item--silver .prize-item__pos,.prize-item--silver .prize-item__prize { color: var(--silver, #C0C0C0); }
.prize-item--bronze .prize-item__pos,.prize-item--bronze .prize-item__prize { color: var(--bronze, #CD7F32); }
.prize-item__cur { color: var(--muted, #777); }

/* ── PUBLIC LEADERBOARD HERO ──────────────────────────── */
.lb-public-hero {
  padding: calc(var(--nav-h, 68px) + 48px) 0 36px;
  background: var(--d2, #111); text-align: center; position: relative; overflow: hidden;
}
.lb-public-hero__glow1 {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 800px; height: 400px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(232,184,75,.05) 0%, transparent 70%);
}
.lb-public-hero__glow2 {
  position: absolute; left: 50%; top: 50px; transform: translateX(-50%);
  width: 600px; height: 280px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(107,83,163,.07) 0%, transparent 70%);
}
.lb-public-hero__live {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,53,50,.12); border: 1px solid rgba(255,53,50,.35);
  border-radius: 100px; padding: 5px 14px; margin-bottom: 16px;
  font-size: 11px; font-weight: 700; color: var(--live-red); letter-spacing: .05em;
}
.lb-public-hero__title { font-family: var(--display,'Syne',sans-serif); font-size: clamp(36px,5.5vw,64px); font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 14px; }
.lb-public-hero__sub   { font-size: 15px; color: var(--muted, #777); margin-bottom: 0; max-width: 580px; margin: 0 auto; }

/* Login CTA beside podium */
.login-cta-card {
  background: rgba(107,83,163,.1); border: 1px solid rgba(107,83,163,.3);
  border-radius: 14px; padding: 20px; display: flex; flex-direction: column;
  justify-content: center; gap: 8px; min-width: 160px;
}
.login-cta-card__title { font-size: 14px; font-weight: 700; color: #fff; }
.login-cta-card__sub   { font-size: 12px; color: var(--muted, #777); line-height: 1.5; }

/* ── HALL OF FAME ─────────────────────────────────────── */
.hof-hero {
  padding: calc(var(--nav-h, 68px) + 52px) 0 40px;
  background: var(--d2, #111); text-align: center; position: relative; overflow: hidden;
}
.hof-hero__glow {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 900px; height: 500px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(232,184,75,.06) 0%, transparent 70%);
}
.hof-hero__crown { font-size: 52px; margin-bottom: 8px; }
.hof-hero__title { font-family: var(--display,'Syne',sans-serif); font-size: clamp(40px,6vw,68px); font-weight: 800; color: var(--gold, #E8B84B); letter-spacing: -.04em; line-height: .95; margin-bottom: 16px; }
.hof-hero__sub   { font-size: 16px; color: var(--muted, #777); max-width: 600px; margin: 0 auto 32px; }
.hof-hero__stats { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.hof-stat { text-align: center; }
.hof-stat__val { font-family: var(--display,'Syne',sans-serif); font-size: 24px; font-weight: 800; color: var(--gold, #E8B84B); }
.hof-stat__lbl { font-size: 12px; color: var(--muted, #777); margin-top: 2px; }

/* Course tabs (Hall of Fame navigation) */
.course-tabs-bar {
  background: var(--black, #000);
  border-bottom: 1px solid rgba(107,83,163,.18);
  position: sticky; top: 0; z-index: 90;
  padding: 0;
}
.course-tabs-bar__inner {
  display: flex; align-items: center; gap: 0;
  max-width: 1380px; margin: 0 auto; padding: 0 60px;
  overflow-x: auto;
}
.course-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 20px; font-size: 14px; font-weight: 500;
  color: var(--muted, #777); cursor: pointer; border: none; background: none;
  font-family: var(--body,'DM Sans',sans-serif);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: all .2s;
}
.course-tab:hover { color: var(--soft, #c8c8c8); }
.course-tab.active { color: var(--gold, #E8B84B); border-bottom-color: var(--gold, #E8B84B); font-weight: 600; }

/* Course section in HoF */
.hof-section { padding: 60px 0; border-bottom: 1px solid rgba(107,83,163,.12); }
.hof-section:last-child { border-bottom: none; }
.hof-course-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(107,83,163,.12); border: 1px solid rgba(107,83,163,.35);
  border-radius: 100px; padding: 5px 16px; margin-bottom: 14px;
  font-size: 12px; font-weight: 600; color: var(--purple-l, #8b6fc7);
}
.hof-section__title { font-family: var(--display,'Syne',sans-serif); font-size: clamp(22px,3.5vw,36px); font-weight: 800; color: #fff; margin-bottom: 6px; }
.hof-section__sub   { font-size: 13px; color: var(--muted, #777); margin-bottom: 32px; }

/* Batch divider */
.batch-divider {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.batch-divider__line { flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.batch-divider__tag  {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px; border: 1px solid; white-space: nowrap;
}
.batch-divider__tag--ended { color: var(--muted, #777); border-color: rgba(119,119,119,.25); background: rgba(119,119,119,.07); }
.batch-divider__tag--live  { color: var(--live-red); border-color: rgba(255,53,50,.35); background: rgba(255,53,50,.08); }

/* Gold champion card (hero card for 1st place) */
.champion-card {
  background: rgba(232,184,75,.04); border: 1px solid rgba(232,184,75,.38);
  border-radius: 18px; padding: 28px 32px;
  display: flex; align-items: flex-start; gap: 24px;
  position: relative; overflow: hidden; margin-bottom: 16px;
}
.champion-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--gold, #E8B84B);
}
.champion-card__crown-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  background: rgba(232,184,75,.08);
  display: flex; align-items: center; padding: 0 32px;
  font-size: 10px; font-weight: 700; color: var(--gold, #E8B84B); letter-spacing: .1em;
}
.champion-card__body { padding-top: 20px; flex: 1; }
.champion-card__av {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--purple, #6b53a3); border: 2px solid rgba(232,184,75,.6);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display,'Syne',sans-serif); font-size: 22px; font-weight: 800; color: #fff;
  flex-shrink: 0; margin-top: 20px;
}
.champion-card__name   { font-family: var(--display,'Syne',sans-serif); font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.champion-card__meta   { font-size: 12px; color: var(--muted, #777); margin-bottom: 10px; }
.champion-card__quote  { font-size: 13px; color: var(--soft, #c8c8c8); line-height: 1.65; font-style: italic; margin-bottom: 0; }
.champion-card__scores {
  background: var(--d3, #1a1a1a); border: 1px solid rgba(232,184,75,.25);
  border-radius: 14px; padding: 18px 20px; min-width: 200px;
  display: flex; flex-direction: column; gap: 12px; margin-top: 20px;
}
.champion-card__score-row { display: flex; flex-direction: column; gap: 2px; }
.champion-card__score-lbl { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #777); }
.champion-card__score-val { font-family: var(--display,'Syne',sans-serif); font-size: 24px; font-weight: 800; color: var(--gold, #E8B84B); }
.champion-card__div { height: 1px; background: rgba(232,184,75,.15); }

/* Silver/bronze runner-up card */
.runner-card {
  background: rgba(255,255,255,.02); border-radius: 16px; padding: 22px 24px;
  display: flex; align-items: flex-start; gap: 16px;
  border-left: 3px solid; position: relative;
}
.runner-card--silver { border-color: var(--silver); border-top: 1px solid rgba(192,192,192,.2); border-right: 1px solid rgba(192,192,192,.1); border-bottom: 1px solid rgba(192,192,192,.1); }
.runner-card--bronze { border-color: var(--bronze); border-top: 1px solid rgba(205,127,50,.18); border-right: 1px solid rgba(205,127,50,.1); border-bottom: 1px solid rgba(205,127,50,.1); }
.runner-card__av {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--d3, #1a1a1a);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display,'Syne',sans-serif); font-size: 15px; font-weight: 800; color: #fff;
  flex-shrink: 0; border: 1.5px solid;
}
.runner-card--silver .runner-card__av { border-color: rgba(192,192,192,.45); }
.runner-card--bronze .runner-card__av { border-color: rgba(205,127,50,.35); }
.runner-card__pos  { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.runner-card--silver .runner-card__pos { color: var(--silver); }
.runner-card--bronze .runner-card__pos { color: var(--bronze); }
.runner-card__name  { font-family: var(--display,'Syne',sans-serif); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.runner-card__meta  { font-size: 12px; color: var(--muted, #777); margin-bottom: 8px; }
.runner-card__quote { font-size: 13px; color: var(--soft, #c8c8c8); font-style: italic; line-height: 1.6; }
.runner-card__foot  { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.runner-card__foot-item { font-size: 12px; font-weight: 600; }
.runner-card--silver .runner-card__foot-item { color: var(--silver); }
.runner-card--bronze .runner-card__foot-item { color: var(--bronze); }

/* Live batch placeholder card */
.live-placeholder {
  background: rgba(255,53,50,.04); border: 1px solid rgba(255,53,50,.2);
  border-radius: 14px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.live-placeholder__left { flex: 1; }
.live-placeholder__title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.live-placeholder__sub   { font-size: 13px; color: var(--muted, #777); }

/* Records of Excellence */
.record-card {
  background: var(--d3, #1a1a1a); border: 1px solid; border-radius: 14px; padding: 18px;
  transition: transform .3s;
}
.record-card:hover { transform: translateY(-3px); }
.record-card__icon { font-size: 26px; margin-bottom: 10px; }
.record-card__title { font-size: 12px; font-weight: 600; color: var(--muted, #777); margin-bottom: 4px; }
.record-card__val   { font-family: var(--display,'Syne',sans-serif); font-size: 24px; font-weight: 800; }
.record-card__name  { font-size: 12px; color: var(--soft, #c8c8c8); margin-top: 4px; }
.record-card__batch { font-size: 11px; color: var(--muted, #777); }

/* ── CERTIFICATE DASHBOARD ────────────────────────────── */
.cert-earned-card {
  background: var(--d3, #1a1a1a);
  border: 1px solid rgba(232,184,75,.42);
  border-radius: 18px; overflow: hidden; position: relative;
  transition: all .35s;
}
.cert-earned-card:hover { box-shadow: 0 16px 48px rgba(232,184,75,.1); }
.cert-earned-card__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--gold, #E8B84B); }
.cert-earned-card__body { padding: 24px 24px 24px 28px; }
.cert-earned-card__header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.cert-earned-card__icon-wrap {
  width: 64px; height: 64px; border-radius: 14px;
  background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.3);
  display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0;
}
.cert-earned-card__label  { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #777); margin-bottom: 4px; }
.cert-earned-card__name   { font-family: var(--display,'Syne',sans-serif); font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; }
.cert-earned-card__batch  { font-size: 12px; color: var(--muted, #777); margin-top: 4px; }
.cert-earned-card__divider { height: 1px; background: rgba(232,184,75,.15); margin: 16px 0; }
.cert-earned-card__details { display: flex; gap: 24px; flex-wrap: wrap; }
.cert-detail { display: flex; flex-direction: column; gap: 2px; }
.cert-detail__lbl { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #777); }
.cert-detail__val { font-size: 13px; font-weight: 600; color: var(--soft, #c8c8c8); }
.cert-earned-card__actions { display: flex; gap: 10px; padding: 16px 24px 16px 28px; background: rgba(232,184,75,.04); border-top: 1px solid rgba(232,184,75,.12); }

/* In-progress cert row */
.cert-progress-row {
  background: var(--d3, #1a1a1a); border: 1px solid rgba(107,83,163,.18);
  border-radius: 14px; overflow: hidden; display: flex; transition: border-color .3s;
}
.cert-progress-row:hover { border-color: rgba(107,83,163,.35); }
.cert-progress-row__thumb {
  width: 100px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.cert-progress-row__body { flex: 1; padding: 14px 16px; }
.cert-progress-row__name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.cert-progress-row__sub  { font-size: 12px; color: var(--muted, #777); margin-bottom: 10px; }

/* Achievement badges */
.badge-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.achievement-badge {
  background: var(--d3, #1a1a1a); border-radius: 14px; padding: 18px;
  border: 1px solid; display: flex; gap: 14px; align-items: flex-start;
  transition: all .3s; position: relative; overflow: hidden;
}
.achievement-badge--earned { }
.achievement-badge--locked { opacity: .55; }
.achievement-badge__icon-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.achievement-badge__name   { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.achievement-badge__desc   { font-size: 12px; color: var(--muted, #777); line-height: 1.5; margin-bottom: 8px; }
.achievement-badge__status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.achievement-badge--locked .achievement-badge__status { background: rgba(119,119,119,.12); color: var(--muted, #777); }

/* Verification bar */
.verify-bar {
  background: var(--d3, #1a1a1a); border: 1px solid rgba(107,83,163,.2);
  border-radius: 14px; padding: 20px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.verify-bar__icon { font-size: 28px; flex-shrink: 0; }
.verify-bar__title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.verify-bar__sub   { font-size: 12px; color: var(--muted, #777); }
.verify-bar__url   {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(107,83,163,.22);
  border-radius: 8px; padding: 9px 14px;
  font-size: 12px; color: var(--purple-l, #8b6fc7); font-family: monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── CERTIFICATE DOCUMENT ─────────────────────────────── */
.cert-doc-wrap { padding: 40px 0 80px; background: var(--d2, #111); }
.cert-doc {
  max-width: 1100px; margin: 0 auto;
  background: var(--d1, #0a0a0a);
  border: 3px solid rgba(232,184,75,.5);
  border-radius: 4px; padding: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,.6), 0 0 0 6px rgba(232,184,75,.08), inset 0 0 0 1px rgba(232,184,75,.12);
}
/* Corner ornaments */
.cert-doc::before,.cert-doc::after {
  content: ''; position: absolute; width: 60px; height: 60px;
  border: 1.5px solid rgba(232,184,75,.45);
}
.cert-doc::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.cert-doc::after  { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.cert-corner-tr,.cert-corner-bl {
  position: absolute; width: 60px; height: 60px;
  border: 1.5px solid rgba(232,184,75,.45);
}
.cert-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.cert-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
/* Header band */
.cert-header {
  background: rgba(107,83,163,.1); border-bottom: 1px solid rgba(232,184,75,.2);
  padding: 14px 40px; display: flex; align-items: center; justify-content: space-between;
}
.cert-header__logo { display: flex; align-items: center; gap: 10px; }
.cert-header__mark { width: 36px; height: 36px; background: var(--purple, #6b53a3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--display,'Syne',sans-serif); font-size: 15px; font-weight: 800; color: #fff; }
.cert-header__text { font-family: var(--display,'Syne',sans-serif); font-size: 15px; font-weight: 800; color: #fff; }
.cert-header__sub  { font-size: 9px; color: var(--purple-l, #8b6fc7); display: block; letter-spacing: .06em; }
.cert-header__center { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold, #E8B84B); }
.cert-header__id { font-size: 11px; color: var(--muted, #777); text-align: right; font-family: monospace; }
.cert-header__id strong { color: var(--gold, #E8B84B); display: block; font-family: var(--body,'DM Sans',sans-serif); font-size: 12px; }
/* Gold divider */
.cert-gold-div { height: 2px; background: linear-gradient(90deg, transparent, rgba(232,184,75,.5), transparent); }
/* Body */
.cert-body { padding: 36px 60px 0; text-align: center; }
.cert-body__pre { font-size: 15px; color: var(--muted, #777); margin-bottom: 10px; }
.cert-body__name { font-family: var(--display,'Syne',sans-serif); font-size: clamp(40px,6vw,64px); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1; margin-bottom: 16px; }
.cert-name-line { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.cert-name-line__rule { flex: 1; max-width: 200px; height: 1.5px; background: rgba(232,184,75,.3); }
.cert-name-line__diamond { width: 10px; height: 10px; background: rgba(232,184,75,.5); transform: rotate(45deg); }
.cert-body__completed { font-size: 15px; color: var(--muted, #777); margin-bottom: 10px; }
.cert-body__course { font-family: var(--display,'Syne',sans-serif); font-size: clamp(22px,3vw,32px); font-weight: 800; color: var(--gold, #E8B84B); letter-spacing: -.02em; margin-bottom: 8px; }
.cert-body__detail { font-size: 13px; color: var(--muted, #777); margin-bottom: 18px; }
.cert-ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.35);
  border-radius: 100px; padding: 7px 20px; font-size: 13px; font-weight: 600; color: var(--gold, #E8B84B);
  margin-bottom: 28px;
}
/* Details strip */
.cert-details-strip {
  background: rgba(107,83,163,.06); border-top: 1px solid rgba(107,83,163,.15); border-bottom: 1px solid rgba(107,83,163,.15);
  padding: 16px 60px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px;
  text-align: center;
}
.cert-detail-item__lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #777); margin-bottom: 3px; }
.cert-detail-item__val { font-size: 13px; font-weight: 700; color: var(--soft, #c8c8c8); }
/* Skills */
.cert-skills { padding: 20px 60px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cert-skill { font-size: 12px; color: var(--soft, #c8c8c8); display: flex; align-items: center; gap: 6px; }
.cert-skill::before { content: '✓'; color: var(--green, #14a800); font-weight: 700; }
/* Seal */
.cert-seal-area { padding: 24px 60px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.cert-sig { text-align: center; flex: 1; }
.cert-sig__line { width: 200px; height: 1.5px; background: rgba(232,184,75,.35); margin: 0 auto 8px; }
.cert-sig__name  { font-family: var(--display,'Syne',sans-serif); font-size: 14px; font-weight: 700; color: #fff; }
.cert-sig__role  { font-size: 11px; color: var(--muted, #777); }
.cert-sig__org   { font-size: 11px; color: var(--purple-l, #8b6fc7); font-weight: 600; }
.cert-seal {
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(107,83,163,.15); border: 2px solid rgba(232,184,75,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 36px; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(232,184,75,.1), 0 0 0 8px rgba(232,184,75,.05);
}
.cert-seal__text { font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold, #E8B84B); margin-top: 4px; }
/* Footer */
.cert-footer {
  background: rgba(107,83,163,.08); border-top: 1px solid rgba(232,184,75,.15);
  padding: 14px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.cert-footer__verify { font-size: 11px; color: var(--muted, #777); font-family: monospace; }
.cert-footer__verify a { color: var(--purple-l, #8b6fc7); }
.cert-footer__serial { font-size: 11px; font-weight: 600; color: var(--gold, #E8B84B); font-family: monospace; }

/* ── REVEAL & UTILITIES ───────────────────────────────── */
.rv2 { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.rv2.vis { opacity: 1; transform: none; }
.rv2.d1 { transition-delay: .1s; } .rv2.d2 { transition-delay: .2s; } .rv2.d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .rv2 { opacity: 1; transform: none; transition: none; } }

/* Print styles for certificate */
@media print {
  body * { visibility: hidden; }
  .cert-doc, .cert-doc * { visibility: visible; }
  .cert-doc { position: fixed; top: 0; left: 0; width: 100%; box-shadow: none; border: none; }
  .cert-doc-actions { display: none !important; }
}

/* Responsive */
@media (max-width: 900px) {
  .podium { flex-wrap: wrap; }
  .podium-card { min-width: 120px; }
  .champion-card { flex-direction: column; }
  .champion-card__scores { min-width: unset; margin-top: 0; }
  .cert-details-strip { padding: 14px 24px; }
  .cert-seal-area { flex-direction: column; align-items: center; }
  .cert-body { padding: 28px 28px 0; }
  .cert-skills { padding: 16px 28px; }
  .cert-header { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
  .badge-grid { grid-template-columns: 1fr 1fr; }
  .course-tabs-bar__inner { padding: 0 24px; }
}
@media (max-width: 600px) {
  .badge-grid { grid-template-columns: 1fr; }
  .prize-items { flex-direction: column; }
  .cert-doc { margin: 0 -24px; border-radius: 0; }
  .hof-hero__stats { gap: 16px; }
}