.tops-page{color:#fff;max-width:1200px;margin:0 auto;padding:32px 16px}.tops-page h1{margin-bottom:32px;font-size:32px}.top-section{margin-bottom:48px}.top-section h2{align-items:center;gap:8px;margin-bottom:16px;font-size:22px;display:flex}.icon{font-size:24px}.top-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.top-card{cursor:pointer;background:#111;border-radius:12px;padding:16px;transition:transform .2s,box-shadow .2s;position:relative}.rank{color:#000;background:#f5a623;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-weight:700;display:flex;position:absolute;top:12px;right:12px}.top-card h3{margin-top:8px;font-size:16px}.top-card p{opacity:.8;margin-top:6px;font-size:14px}@media (max-width:600px){.tops-page h1{font-size:24px}.top-section h2{font-size:18px}}.top-card{background:#111;border-radius:14px;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.top-card:hover{transform:translateY(-6px)scale(1.02);box-shadow:0 15px 35px #000000b3}.rank{color:#000;z-index:2;background:#f5a623;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-weight:700;display:flex;position:absolute;top:10px;left:10px}.top-image{background:#000;width:100%;height:270px;overflow:hidden}.top-image img{border-radius:4px;width:100%;height:100%;transition:transform .35s}.top-card:hover .top-image img{transform:scale(1.08)}.top-info{padding:12px}.top-info h3{margin-bottom:6px;font-size:15px;line-height:1.2}.top-info p{opacity:.8;font-size:13px}@media (max-width:600px){.top-image{height:auto}.top-info h3{font-size:14px}.top-info p{font-size:12px}}.top-one{border:2px solid #f5a623;box-shadow:0 0 0 2px #f5a62333}.badge.airing{color:#fff;z-index:3;background:#e50914;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700;position:absolute;top:12px;right:12px}@media (max-width:768px){.top-grid{scroll-snap-type:x mandatory;gap:12px;padding-bottom:12px;display:flex;overflow-x:auto}.top-card{scroll-snap-align:start;min-width:160px}}.skeleton{animation:1.5s infinite pulse}.skeleton .top-image{background:#222}.skeleton-line{background:#222;border-radius:4px;height:14px;margin-top:8px}.skeleton-line.small{width:60%}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.top-month{border-radius:18px;height:360px;margin-bottom:48px;position:relative;overflow:hidden}.top-month-bg img{object-fit:cover;filter:brightness(.4);width:100%;height:100%}.top-month-info{color:#fff;z-index:2;position:absolute;bottom:24px;left:24px}.badge.gold{color:#000;background:linear-gradient(45deg,gold,orange);border-radius:8px;margin-bottom:12px;padding:6px 12px;font-weight:700;display:inline-block}.top-card{opacity:0;animation:.4s forwards fadeUp}.top-card:first-child{animation-delay:50ms}.top-card:nth-child(2){animation-delay:.1s}.top-card:nth-child(3){animation-delay:.15s}.top-card:nth-child(4){animation-delay:.2s}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.recommended-section{margin:64px 0}.recommended-section h2{margin-bottom:16px;font-size:22px}.recommended-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;display:grid}.recommended-card{color:#fff;flex-direction:column;gap:8px;display:flex}.recommended-card:hover img{filter:brightness(.5);outline:1px solid #f5a623}.recommended-card img{aspect-ratio:2/3;border-radius:12px;width:100%}.recommended-card span{opacity:.9;text-transform:capitalize;background:linear-gradient(#0000,#000);padding:10px;font-size:14px;font-weight:500;position:absolute;bottom:0}