/* --- 7. RANKING --- */
.rank-page { background-color: var(--bg-app); display: flex; flex-direction: column; height: 100%; }
.rank-tabs { display: flex; gap: 24px; padding: 4px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.rank-tab { font-size: 15px; color: var(--text-muted); padding-bottom: 8px; position: relative; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.rank-tab.active { color: var(--text); font-weight: 700; transform: scale(1.05); }
.rank-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--primary-gradient); border-radius: 2px; box-shadow: 0 -2px 8px rgba(255,102,0,0.4); }

.rank-list { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-bottom: 100px; }
.rank-item { display: flex; align-items: center; gap: 14px; }
.rank-num { width: 24px; font-size: 16px; font-weight: 800; color: var(--text-muted); font-style: italic; text-align: center; flex-shrink: 0; }
.rank-num.rank-1 { color: #FF4B2B; font-size: 22px; text-shadow: 0 2px 8px rgba(255,75,43,0.4); }
.rank-num.rank-2 { color: #FF8C00; font-size: 20px; text-shadow: 0 2px 8px rgba(255,140,0,0.4); }
.rank-num.rank-3 { color: #F3D5A5; font-size: 18px; text-shadow: 0 2px 8px rgba(243,213,165,0.4); }
.rank-item img { width: 54px; height: 72px; border-radius: 6px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

.rank-info { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.rank-info h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }
.rank-info .tags { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 4px; margin: 0; }
.rank-item .heat { font-size: 11px; color: #FF6600; display: flex; align-items: center; gap: 4px; font-weight: 500; flex-shrink: 0; }
.rank-item.top-3 .heat { color: #FF4B2B; font-weight: 600; text-shadow: 0 0 8px rgba(255,75,43,0.3); }

.btn-play-small { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; flex-shrink: 0; transition: all 0.2s; }
.rank-item.top-3 .btn-play-small { background: var(--primary-gradient); box-shadow: 0 4px 12px rgba(255,102,0,0.3); color: #fff; }