/* pages/charts.css — droploud-style chart rows (centered, flat, border-separated) */
.page-main{max-width:960px;margin:0 auto;padding:26px 20px 70px}
.page-main-wide{max-width:1100px;margin:0 auto;padding:26px 20px 70px}
.crumbs{display:flex;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent2)}
.crumbs span:last-child{color:var(--text)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;flex-wrap:wrap}
.sec-head h1,.sec-head h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;letter-spacing:-.02em}
.sec-head h1 .st-ic,.sec-head h2 .st-ic{color:var(--accent);vertical-align:-2px}
.sec-head p{color:var(--muted);font-size:.8rem}
.sec-sub{color:var(--muted);font-size:.82rem;margin-bottom:22px}
.sec-divider{border:none;border-top:1px solid var(--border);margin:38px 0 30px}

/* droploud-style flat rows */
.tk-list{display:flex;flex-direction:column}
.tk-card{display:flex;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid var(--border);transition:background .15s}
.tk-card:hover{background:rgba(108,92,231,.05)}
.tk-rank{width:34px;text-align:center;font-weight:700;font-size:.95rem;color:var(--muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.tk-rank.top{color:var(--accent2)}
.tk-art{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.tk-art-ph{display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--muted)}
.tk-body{flex:1;min-width:0;display:flex;align-items:center;gap:14px}
.tk-meta{flex:0 1 300px;min-width:0}
.tk-title{font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-artist{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-genre{margin-left:6px;font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(108,92,231,.14);color:var(--accent2);text-transform:uppercase;letter-spacing:.04em}
.tk-card .st-player{flex:1;min-width:160px;background:transparent;border:none;padding:2px 0;gap:10px}
.tk-card .stp-btn{width:34px;height:34px}
.tk-card .stp-track{height:22px}
.tk-card .stp-time{min-width:66px;font-size:.62rem}
.tk-side{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tk-metric{font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap}
.tk-get{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;transition:all .15s}
.tk-get:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(108,92,231,.45)}
.empty-note{color:var(--muted);padding:30px 0;text-align:center}

/* load more (droploud style) */
.load-more{display:flex;justify-content:center;margin-top:26px}
.load-more a{padding:12px 30px;border-radius:12px;border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:.82rem;transition:all .15s}
.load-more a:hover{color:var(--text);border-color:rgba(108,92,231,.5);background:rgba(108,92,231,.08)}

/* numbered pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.pager-btn,.pager-num{padding:7px 13px;border-radius:9px;border:1px solid var(--border);color:var(--muted);font-size:.78rem;font-weight:600;transition:all .15s}
.pager-btn:hover,.pager-num:hover{color:var(--text);border-color:rgba(108,92,231,.45)}
.pager-num.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pager-dots{color:var(--muted);padding:0 3px}

/* play-all button */
.play-all{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:.78rem;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all .15s}
.play-all:hover{border-color:var(--accent);background:rgba(108,92,231,.1)}

/* genre grid */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.genre-card{position:relative;overflow:hidden;border-radius:16px;padding:24px;transition:transform .2s}
.genre-card:hover{transform:scale(1.02)}
.genre-card h3{font-size:1.05rem;font-weight:800;margin-bottom:4px}
.genre-card p{font-size:.8rem;color:var(--muted)}
.genre-orb{position:absolute;top:-24px;right:-24px;width:90px;height:90px;border-radius:50%;opacity:.1;transition:opacity .2s}
.genre-card:hover .genre-orb{opacity:.2}

@media (max-width:760px){
  .page-main,.page-main-wide{padding:20px 14px 60px}
  .tk-card{flex-wrap:wrap;gap:10px}
  .tk-body{flex-wrap:wrap}
  .tk-meta{flex:1 1 100%;order:-1}
  .tk-card .st-player{flex:1 1 100%;order:3}
  .tk-side{margin-left:auto}
  .tk-metric{display:none}
}