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

#slb-root {
  --navy:       #131e3b;
  --navy-mid:   #1c2d57;
  --navy-light: #dde3f0;
  --blue-soft:  #f0f4fb;
  --green:      #16a34a;
  --green-bg:   #f0fdf4;
  --amber:      #d97706;
  --red:        #dc2626;
  --gold:       #f59e0b;
  --silver:     #94a3b8;
  --bronze:     #b45309;
  --border:     #d1d5db;
  --text:       #111827;
  --muted:      #6b7280;
  --white:      #ffffff;
  --radius:     10px;
  --shadow:     0 4px 24px rgba(19,30,59,.10), 0 1px 4px rgba(19,30,59,.06);
  font-family:  'Kumbh Sans', 'Roboto', sans-serif;
  color:        var(--text);
  max-width:    1200px;
  margin:       0 auto;
  padding:      28px 20px;
  box-sizing:   border-box;
}
#slb-root * { box-sizing: border-box;}
.slb-podium-location {
    color: #fff;
}
.slb-podium-avatar.rank-1 img {
    border-radius: 50%;
}
.slb-row-avatar img {
    border-radius: 50px;
}
/* ── Card ── */
.slb-card { margin-top:-35px;
  background:    var(--white);
  border-radius: 18px;
  box-shadow:    var(--shadow);
  border:        1px solid var(--navy-light);
  overflow:      hidden;
}
.slb-podium-block {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: grey;
  border-top: 2px solid rgba(255, 255, 255, .15);
}
/* ════════════════════════════════
   HEADER
════════════════════════════════ */
.slb-header {
  background: var(--navy);
  padding:    26px 30px 22px;
}

.slb-header-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
  margin-bottom:   18px;
}
img.img-avatar {
  border-radius: 50% !important;
}

.slb-header-eyebrow {
  font-size:      .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.45);
  font-weight:    700;
  margin-bottom:  4px;
}

.slb-header-title {
  font-size:   1.4rem;
  font-weight: 700;
  color:       #fff;
  line-height: 1.2;
}

.slb-month-pill {
  background:    rgba(255,255,255,.1);
  border:        1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding:       5px 14px;
  font-size:     .78rem;
  color:         rgba(255,255,255,.75);
  font-weight:   600;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ── Podium (top 3) ── */
.slb-podium {
  display:     flex;
  align-items: flex-end;
  justify-content: center;
  gap:         12px;
  padding-top: 4px;
}

.slb-podium-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  flex:           1;
  max-width:      140px;
}

/* Avatar circle */
.slb-avatar {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.1rem;
  font-weight:   900;
  color:         #fff;
  font-family:   'Roboto', sans-serif;
  flex-shrink:   0;
  position:      relative;
  border:        3px solid transparent;
}
.slb-avatar.rank-1 { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: rgba(255,255,255,.3); width: 60px; height: 60px; font-size: 1.3rem; }
.slb-avatar.rank-2 { background: linear-gradient(135deg,#94a3b8,#64748b); border-color: rgba(255,255,255,.2); }
.slb-avatar.rank-3 { background: linear-gradient(135deg,#b45309,#92400e); border-color: rgba(255,255,255,.2); }
.slb-avatar.is-you { box-shadow: 0 0 0 3px #22c55e; }

/* Crown on #1 */
.slb-avatar.rank-1::before {
  content:   '👑';
  position:  absolute;
  top:       -18px;
  font-size: .9rem;
}

.slb-podium-name {
  font-size:   .78rem;
  font-weight: 700;
  color:       rgba(255,255,255,.9);
  text-align:  center;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   120px;
}
.slb-podium-name.is-you { color: #86efac; }

.slb-podium-deals {
  font-size:   1.4rem;
  font-weight: 900;
  color:       #fff;
  font-family: 'Roboto', sans-serif;
  line-height: 1;
}
.slb-podium-item.rank-1 .slb-podium-deals { font-size: 1.8rem; color: #fcd34d; }

.slb-podium-sub {
  font-size: .65rem;
  color:     rgba(255,255,255,.45);
  text-align:center;
}

/* Podium block */
.slb-podium-block {
    width: 100%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(135deg, #c7c7c7, #8f8f8f);
    border-top: 2px solid rgba(255, 255, 255, .15);
}
.slb-podium-item.rank-1 .slb-podium-block {
    height: 44px;
    background: linear-gradient(135deg, #c9b400, #fff800);
    border-color: rgba(245, 158, 11, .4);
}
.slb-podium-item.rank-2 .slb-podium-block { height: 30px; }
.slb-podium-item.rank-3 .slb-podium-block { height: 20px; }
.slb-podium img {
    border-radius: 50%;
}
/* ════════════════════════════════
   TABS
════════════════════════════════ */
.slb-tabs {
  display:       flex;
  border-bottom: 2px solid var(--navy-light);
  padding:       0 24px;
}

.slb-tab {
  padding:       12px 18px;
  font-size:     .85rem;
  font-weight:   600;
  color:         var(--muted);
  cursor:        pointer;
  border:        none;
  background:    none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition:    color .2s, border-color .2s;
  font-family:   'Kumbh Sans', 'Roboto', sans-serif;
  white-space:   nowrap;
}
.slb-tab:hover  { color: var(--navy); }
.slb-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* ════════════════════════════════
   PANEL
════════════════════════════════ */
.slb-panel        { display: none; }
.slb-panel.active { display: block; }

/* ════════════════════════════════
   LEADERBOARD LIST
════════════════════════════════ */
.slb-list { padding: 8px 0 16px; }

.slb-row {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     12px 24px;
  border-bottom: 1px solid #f0f2f7;
  transition:  background .15s;
  position:    relative;
}
.slb-row:last-child  { border-bottom: none; }
.slb-row:hover       { background: var(--blue-soft); }
.slb-row.is-you      { background: #f0fdf4; }
.slb-row.is-you::before {
  content:  '';
  position: absolute;
  left:     0; top: 0; bottom: 0;
  width:    3px;
  background: #22c55e;
  border-radius: 0 2px 2px 0;
}

/* Rank number / medal */
.slb-rank {
  width:       34px;
  text-align:  center;
  flex-shrink: 0;
}
.slb-rank-num {
  font-size:   1rem;
  font-weight: 900;
  color:       var(--muted);
  font-family: 'Roboto', sans-serif;
}
.slb-rank-num.r1 { color: var(--gold); font-size: 1.1rem; }
.slb-rank-num.r2 { color: var(--silver); }
.slb-rank-num.r3 { color: var(--bronze); }

.slb-medal { font-size: 1.3rem; line-height: 1; }

/* Row avatar */
.slb-row-avatar {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     .9rem;
  font-weight:   900;
  color:         #fff;
  background:    var(--navy);
  flex-shrink:   0;
  font-family:   'Roboto', sans-serif;
}
.slb-row.is-you .slb-row-avatar { background: var(--green); }
.slb-podium {
  display: none !important;
}
.slb-header {
  display: none !important;
}
/* Name + bar */
.slb-row-info { flex: 1; min-width: 0; }

.slb-row-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   5px;
}

.slb-row-name {
  font-size:   .9rem;
  font-weight: 700;
  color:       var(--navy);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.slb-row.is-you .slb-row-name::after {
  content:      ' (You)';
  font-weight:  600;
  color:        var(--green);
  font-size:    .78rem;
}

.slb-row-deals {
  font-size:   1.05rem;
  font-weight: 900;
  color:       var(--navy);
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

.slb-row-bar-track {
  height:        6px;
  background:    var(--navy-light);
  border-radius: 99px;
  overflow:      hidden;
}
.slb-row-bar-fill {
  height:        100%;
  border-radius: 99px;
  background:    var(--navy);
  transition:    width .6s cubic-bezier(.4,0,.2,1);
}
.slb-row.is-you .slb-row-bar-fill { background: var(--green); }

/* Goal hit badge */
.slb-goal-badge {
  font-size:     .65rem;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: 20px;
  background:    var(--green-bg);
  color:         var(--green);
  white-space:   nowrap;
  flex-shrink:   0;
  letter-spacing:.04em;
}

/* ── Empty state ── */
.slb-empty {
  text-align:  center;
  padding:     48px 20px;
  color:       var(--muted);
  font-size:   .9rem;
  line-height: 1.6;
}
.slb-empty strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }

/* ── Footer note ── */
.slb-footer {
  padding:     12px 24px;
  border-top:  1px solid #f0f2f7;
  background:  #fafbff;
  font-size:   .72rem;
  color:       #c0c8d8;
  text-align:  center;
  font-weight: 500;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 520px) {
  #slb-root     { padding: 12px 8px; }
  .slb-header   { padding: 20px 18px 18px; }
  .slb-tabs     { padding: 0 16px; }
  .slb-row      { padding: 11px 16px; gap: 10px; }
  .slb-podium   { gap: 8px; }
  .slb-footer   { padding: 10px 16px; }

  .slb-podium-item { max-width: 100px; }
  .slb-avatar.rank-1 { width: 52px; height: 52px; font-size: 1.1rem; }
  .slb-podium-deals  { font-size: 1.2rem; }
  .slb-podium-item.rank-1 .slb-podium-deals { font-size: 1.5rem; }
}