.leaderboard-page{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:42px 0 72px;
}

.leaderboard-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:34px;
  border-radius:26px;
  background:linear-gradient(135deg,#eff6ff 0%,#ffffff 55%,#f5f3ff 100%);
  border:1px solid #dbeafe;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.leaderboard-kicker{
  display:inline-flex;
  padding:7px 12px;
  margin-bottom:10px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:13px;
  font-weight:800;
}

.leaderboard-hero h1{
  margin:0 0 10px;
  font-size:clamp(30px,4vw,48px);
  color:#0f172a;
}

.leaderboard-hero p{
  max-width:720px;
  margin:0;
  color:#475569;
  line-height:1.7;
}

.leaderboard-refresh,
.leaderboard-load-more,
.leaderboard-empty button{
  border:0;
  border-radius:13px;
  background:#2563eb;
  color:#fff;
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.leaderboard-refresh:hover,
.leaderboard-load-more:hover,
.leaderboard-empty button:hover{
  transform:translateY(-2px);
  background:#1d4ed8;
}

.leaderboard-refresh:disabled{
  opacity:.6;
  cursor:wait;
  transform:none;
}

.leaderboard-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:22px 0;
}

.leaderboard-summary article{
  padding:20px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 25px rgba(15,23,42,.06);
}

.leaderboard-summary span{
  display:block;
  color:#64748b;
  font-weight:700;
}

.leaderboard-summary strong{
  display:block;
  margin-top:7px;
  font-size:28px;
  color:#0f172a;
}

.leaderboard-panel{
  padding:24px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#f8fafc;
}

.leaderboard-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}

.leaderboard-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
}

.leaderboard-tab{
  padding:11px 16px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#fff;
  color:#334155;
  font-weight:800;
  cursor:pointer;
}

.leaderboard-tab.active,
.leaderboard-tab:hover{
  border-color:#2563eb;
  background:#2563eb;
  color:#fff;
}

.leaderboard-search-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:min(340px,100%);
  padding:0 14px;
  border:1px solid #dbe3ef;
  border-radius:13px;
  background:#fff;
}

.leaderboard-search{
  width:100%;
  max-width:none;
  margin:0;
  padding:12px 0;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
}

.leaderboard-search:focus{
  border:0;
  box-shadow:none;
}

.leaderboard-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:10px 0 20px;
  color:#64748b;
  font-size:14px;
}

.leaderboard-meta p{margin:0;}

.leaderboard-podium{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:end;
  margin-bottom:24px;
}

.podium-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:250px;
  padding:24px 18px;
  border:1px solid #e2e8f0;
  border-radius:22px;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  text-align:center;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  transition:.2s ease;
}

.podium-card:hover{transform:translateY(-5px);}
.podium-1{min-height:278px;border-color:#facc15;background:linear-gradient(180deg,#fffbea,#fff);}
.podium-2{border-color:#cbd5e1;background:linear-gradient(180deg,#f8fafc,#fff);}
.podium-3{border-color:#fdba74;background:linear-gradient(180deg,#fff7ed,#fff);}
.podium-medal{font-size:32px;margin-bottom:10px;}
.podium-card img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 20px rgba(15,23,42,.15);}
.podium-card h2{max-width:100%;margin:12px 0 5px;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-card p{margin:0 0 10px;color:#64748b;font-size:14px;}
.podium-card strong{color:#1d4ed8;font-size:19px;}
.podium-card span{margin-top:5px;color:#64748b;font-size:13px;}

.leaderboard-list{display:grid;gap:12px;}

.leaderboard-item{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
  padding:16px 18px;
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  box-shadow:none;
}

.leaderboard-item:hover{
  transform:translateY(-2px);
  border-color:#93c5fd;
  box-shadow:0 10px 25px rgba(15,23,42,.08);
}

.leaderboard-item.rank-1,
.leaderboard-item.rank-2,
.leaderboard-item.rank-3{
  background:#fff;
  border-width:1px;
}

.leaderboard-item.current-user{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

.leaderboard-rank{
  width:48px;
  flex:0 0 48px;
  font-size:24px;
  font-weight:900;
  text-align:center;
}

.leaderboard-avatar{
  width:64px!important;
  height:64px!important;
  flex:0 0 64px;
  border-radius:50%;
  object-fit:cover;
}

.leaderboard-user-info{min-width:0;flex:1;}
.leaderboard-name-row{display:flex;align-items:center;gap:8px;}
.leaderboard-name-row h3{margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.current-user-label{padding:3px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:900;}
.leaderboard-user-info>p{margin:5px 0;color:#64748b;font-size:14px;}
.leaderboard-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px;color:#64748b;font-size:13px;}
.leaderboard-primary-stat{color:#1d4ed8!important;font-weight:900;}
.leaderboard-open{font-size:32px;color:#94a3b8;}

.leaderboard-loading,
.leaderboard-empty{
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:30px;
  text-align:center;
  color:#64748b;
}

.leaderboard-empty>span{font-size:44px;}
.leaderboard-empty h2{margin:0;color:#0f172a;}
.leaderboard-empty p{margin:0 0 8px;}
.leaderboard-error button{background:#dc2626;}

.leaderboard-spinner{
  width:38px;
  height:38px;
  border:4px solid #dbeafe;
  border-top-color:#2563eb;
  border-radius:50%;
  animation:leaderboard-spin .75s linear infinite;
}

@keyframes leaderboard-spin{to{transform:rotate(360deg);}}

.leaderboard-load-more-wrap{text-align:center;margin-top:22px;}

@media (max-width:900px){
  .leaderboard-summary{grid-template-columns:repeat(2,1fr);}
  .leaderboard-toolbar{align-items:stretch;flex-direction:column;}
  .leaderboard-search-wrap{width:100%;}
}

@media (max-width:680px){
  .leaderboard-page{width:min(100% - 20px,1180px);padding:22px 0 50px;}
  .leaderboard-hero{align-items:flex-start;flex-direction:column;padding:24px 20px;}
  .leaderboard-refresh{width:100%;}
  .leaderboard-summary{gap:10px;}
  .leaderboard-summary article{padding:15px;}
  .leaderboard-summary strong{font-size:23px;}
  .leaderboard-panel{padding:14px;border-radius:18px;}
  .leaderboard-tabs{display:grid;grid-template-columns:repeat(2,1fr);width:100%;}
  .leaderboard-tab{padding:10px 8px;font-size:13px;}
  .leaderboard-meta{flex-direction:column;gap:4px;}
  .leaderboard-podium{grid-template-columns:1fr;align-items:stretch;}
  .podium-card,.podium-1{min-height:auto;}
  .leaderboard-item{gap:10px;padding:13px 10px;}
  .leaderboard-rank{width:34px;flex-basis:34px;font-size:19px;}
  .leaderboard-avatar{width:50px!important;height:50px!important;flex-basis:50px;}
  .leaderboard-name-row h3{font-size:15px;}
  .leaderboard-user-info>p{font-size:12px;}
  .leaderboard-stats{gap:5px 10px;font-size:12px;}
  .leaderboard-open{display:none;}
}