.charts-section{margin-bottom:var(--space-2xl)}.charts-section__header{margin-bottom:var(--space-lg);text-align:center}.charts-section__title{font-weight:var(--font-weight-bold);color:var(--color-text);margin:0 0 var(--space-lg) 0}.charts-section .genre-filters{justify-content:center;padding-bottom:0;border-bottom:none}.charts-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-2xl)}.charts-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;overflow:hidden;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);--ui-hover-transform: scale(1.02);--ui-active-transform: scale(.95)}.charts-item:hover{background:var(--color-bg-muted);box-shadow:var(--shadow-sm);transform:var(--ui-hover-transform)}.charts-item:active{transform:var(--ui-active-transform)}.charts-item__rank{font-size:2.5rem;font-weight:var(--font-weight-bold);color:var(--color-accent);min-width:50px;text-align:center;flex-shrink:0;line-height:1}.charts-item__image-container{position:relative;width:60px;height:60px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-variant)}.charts-item__image{width:100%;height:100%;object-fit:cover;display:block}.charts-item__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000b3;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast);color:#fff;--ui-hover-transform: translate(-50%, -50%) scale(1.1);--ui-active-transform: translate(-50%, -50%) scale(.92);overflow:hidden}.charts-item:hover .charts-item__play-button{opacity:1}.charts-item__play-button:hover{background:#000000e6;transform:var(--ui-hover-transform)}.charts-item__play-button:active{transform:var(--ui-active-transform)}.charts-item__play-button svg{width:24px;height:24px;fill:currentColor}.charts-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs)}.charts-item__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0;line-height:1.3}.charts-item__artist{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.charts-suggested-radios{margin-top:var(--space-2xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border)}.charts-suggested-radios__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text);margin:0 0 var(--space-lg) 0}.charts-suggested-radios__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-md);padding:5px}@media (max-width: 768px){.charts-item{padding:var(--space-sm);gap:var(--space-sm)}.charts-item__rank{min-width:40px;font-size:2rem}.charts-item__image-container{width:50px;height:50px}.charts-suggested-radios__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-sm)}}