/* === TOPPERS SECTION === */
.toppers-section { background: var(--bg-card); padding: 24px 0; }
.toppers-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
.toppers-grid::-webkit-scrollbar { display: none; }
.topper-card {
    min-width: 220px;
    max-width: 220px;
    background: linear-gradient(135deg, #EFF6FF, #F0FDF4);
    border-radius: var(--radius);
    padding: 16px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    text-align: center;
}
.topper-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 10px;
    border: 3px solid var(--primary);
    display: block;
}
.topper-name { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.topper-rank { font-size: 0.75rem; color: var(--green); font-weight: 600; margin-bottom: 8px; }
.topper-quote { font-size: 0.72rem; color: var(--text-muted); font-style: italic; line-height: 1.4; }

/* Scroll arrows (shared for courses + toppers) */
.scroll-section { position: relative; }
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    z-index: 10;
    transition: opacity 0.2s, background 0.2s;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow);
    color: var(--text);
}
.scroll-section:hover .scroll-arrow { display: flex; }
.scroll-arrow-left { left: 4px; }
.scroll-arrow-right { right: 4px; }
.scroll-arrow:hover { background: rgba(255,255,255,0.95); }

@media (min-width: 1024px) {
    .topper-card { min-width: 200px; max-width: 220px; }
    .topper-img { width: 72px; height: 72px; }
}