/* Shared navigation and community controls. */
.header {height:auto;min-height:84px;}
.header .wordmark {flex-shrink:0;}
.header .nav {flex-wrap:wrap;justify-content:flex-end;row-gap:8px;}
.header .nav a {white-space:nowrap;}
@media(max-width:1050px){.header{flex-wrap:wrap;gap:14px}.header .nav{flex:1 1 500px}}
@media(max-width:720px){.header .nav{justify-content:center;flex:initial}}
.loop-like-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:10px 0 6px}
.loop-like-button{border:1px solid #9986ac;border-radius:6px;padding:7px 11px;background:linear-gradient(#f9f5ff,#d9cce9);color:#582979;font:11px var(--sans);cursor:pointer}
.loop-like-button[aria-pressed=true]{background:linear-gradient(#bd86df,#7940a4);color:#fff}
.loop-like-button:disabled{opacity:.65;cursor:default}
.loop-like-button:focus-visible,.leaderboard-tabs button:focus-visible{outline:2px solid #65248c;outline-offset:3px}
.loop-like-status{font:11px/1.5 var(--sans);color:#5b496d}
.loop-like-status a{color:#682a95;text-decoration:underline}
.leaderboard-page{padding:40px 0 65px}
.leaderboard-intro{max-width:760px;margin-bottom:30px}
.leaderboard-intro h1{font:500 clamp(30px,5vw,52px)/1.15 var(--display);letter-spacing:-.045em;margin:14px 0 18px}
.leaderboard-intro h1 span{color:#7b389f}
.leaderboard-intro p{font:14px/1.8 var(--sans);color:#4d4c5e;max-width:650px}
.leaderboard-panel{border:1px solid #969cab;border-radius:18px;padding:28px;background:linear-gradient(145deg,#f8f7fc,#cfd2df);box-shadow:inset 0 1px #fff,0 8px 24px #39294d15}
.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.leaderboard-heading h2{font:500 clamp(20px,3vw,28px)/1.4 var(--display);margin:10px 0 0}
.leaderboard-tabs{display:flex;gap:10px;flex-wrap:wrap}
.leaderboard-tabs button{border:1px solid #9b91ab;border-radius:8px;background:linear-gradient(#fff,#d9dbe5);padding:12px 18px;font:12px var(--sans);color:#4e405d;cursor:pointer}
.leaderboard-tabs button[aria-selected=true]{background:linear-gradient(#bd84df,#7841a3);color:#fff;border-color:#8452aa}
.ranking-description,#leaderboard-status,.leaderboard-note{font:12px/1.8 var(--sans);color:#575168}
.ranking-description{margin:18px 0}.leaderboard-note{margin:22px 0 0;max-width:850px}
.leaderboard-table-wrap{width:100%;overflow-x:auto}
.leaderboard-table{width:100%;border-collapse:collapse;text-align:left}
.leaderboard-table th{padding:12px 16px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#695079;border-bottom:1px solid #aea1ba;white-space:nowrap}
.leaderboard-table td{padding:17px 16px;border-bottom:1px solid #b2aabd80;font:13px var(--sans)}
.leaderboard-table th:nth-child(n+3),.leaderboard-table td:nth-child(n+3){text-align:right}
.leaderboard-table tr[data-rank="1"]{background:#a668d015}
.ranking-place{width:65px;color:#744095;font-weight:600!important}
.ranking-producer{display:flex;align-items:center;gap:13px;min-width:175px}
.ranking-avatar{width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid #aea1bc;border-radius:11px;background:linear-gradient(#fff,#d7cce5);font:12px var(--display);color:#633c7c}
.ranking-producer a,.ranking-producer strong{font-weight:600;color:#342b42}
.ranking-producer small{display:block;font:11px var(--sans);color:#74657e;margin-top:4px}
.ranking-score{font:600 19px var(--display)!important;color:#6d3095}
.ranking-loops{color:#716679}
.leaderboard-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.leaderboard-actions .intro-link{margin:0}
@media(max-width:600px){
 .leaderboard-page{padding-top:24px}.leaderboard-panel{padding:17px}
 .leaderboard-heading{align-items:flex-start;gap:12px}.leaderboard-heading h2{font-size:20px}
 .leaderboard-heading .promo-apply{padding:8px;font-size:10px}
 .leaderboard-tabs{display:grid;grid-template-columns:1fr 1fr}.leaderboard-tabs button{padding:11px 8px}
 .leaderboard-table th,.leaderboard-table td{padding:12px 7px}.ranking-producer{gap:8px;min-width:140px}
 .ranking-avatar{width:29px;height:29px;border-radius:8px;font-size:10px}
 .ranking-score{font-size:16px!important}.ranking-place{width:32px}
}

.ranking-badges{display:flex;margin-top:7px;max-width:480px;gap:5px}.ranking-producer>div{min-width:0}.ranking-badges .member-badge{font-size:10px}.ranking-avatar{overflow:hidden;flex-shrink:0}.ranking-avatar img{display:block;width:100%;height:100%;object-fit:cover}
