.community-index #view-songs {
    --songs-pink: #f72585;
    --songs-violet: #8c52ff;
    --songs-cyan: #42dff3;
    --songs-yellow: #ffd34e;
    --songs-line: rgba(192,201,232,.13);
}

.community-index #view-songs .songs-public-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 220px;
    margin-bottom: 14px;
    padding: clamp(30px,5vw,54px);
    overflow: hidden;
    border: 1px solid rgba(247,37,133,.2);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 20%, rgba(66,223,243,.14), transparent 27%),
        linear-gradient(112deg, rgba(80,13,62,.94), rgba(25,18,49,.97) 52%, rgba(10,42,55,.92));
}
.community-index #view-songs .songs-public-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 29px 29px; mask-image: linear-gradient(90deg,#000,transparent 76%); }
.community-index #view-songs .songs-public-hero > div:first-child { max-width: 820px; }
.community-index #view-songs .songs-public-hero h1 { max-width: 760px; margin: 9px 0; font-size: clamp(2.6rem,6vw,5.5rem); line-height: .9; letter-spacing: -.065em; }
.community-index #view-songs .songs-public-hero p { max-width: 690px; margin: 0; color: #b0b7cc; font-size: clamp(.95rem,1.5vw,1.08rem); line-height: 1.55; }
.community-index #view-songs .songs-hero-mark { display: flex; align-items: flex-end; gap: 7px; flex: 0 0 170px; height: 110px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: rgba(6,8,18,.22); transform: rotate(-3deg); }
.community-index #view-songs .songs-hero-mark i { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(0deg,var(--songs-pink),var(--songs-violet)); box-shadow: 0 0 20px rgba(247,37,133,.18); }
.community-index #view-songs .songs-hero-mark i:nth-child(1){height:38%}.community-index #view-songs .songs-hero-mark i:nth-child(2){height:72%}.community-index #view-songs .songs-hero-mark i:nth-child(3){height:52%}.community-index #view-songs .songs-hero-mark i:nth-child(4){height:88%}.community-index #view-songs .songs-hero-mark i:nth-child(5){height:61%}

.community-index #view-songs .song-catalog-shell { overflow: visible; border: 1px solid var(--songs-line); border-radius: 22px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(13,16,29,.74); }
.community-index #view-songs .search-container { position: sticky; z-index: 8; top: 78px; margin: 0; padding: 14px 5%; border-bottom: 1px solid var(--songs-line); background: rgba(13,16,29,.9); backdrop-filter: blur(18px); }
.community-index #view-songs .search-bar { height: 58px; border-radius: 17px; }
.community-index #view-songs .search-icon-fixed { left: calc(5% + 16px); }
.community-index #view-songs .song-filter-toggle { height: 58px; border-radius: 17px; }
.community-index #view-songs .song-filter-panel { margin: 12px 5% 16px; border-color: rgba(247,37,133,.18); border-radius: 17px; background: rgba(8,10,21,.7); }
.community-index #view-songs .game-chips { padding-block: 13px 10px; border-bottom: 1px solid rgba(255,255,255,.055); }
.community-index #view-songs .game-chip { min-height: 38px; padding-inline: 15px; border-radius: 11px; }
.community-index #view-songs .game-chip.active,
.community-index #view-songs .game-chip.is-active { color: #ff91c5; background: linear-gradient(135deg,rgba(247,37,133,.17),rgba(140,82,255,.14)); }

.community-index #view-songs .favorites-strip { margin: 16px 5%; }
.community-index #view-songs .favorites-title { font-size: 1.25rem; letter-spacing: -.03em; }
.community-index #view-songs .new-songs-strip { padding: 17px; border-radius: 17px; }
.community-index #view-songs .jd-section-label { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 7px; border-top: 1px solid rgba(255,255,255,.055); }
.community-index #view-songs .jd-song-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; padding-bottom: 26px; }
.community-index #view-songs .jd-song-card { overflow: hidden; border: 1px solid var(--songs-line); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.016)),#121522; box-shadow: 0 12px 28px rgba(0,0,0,.12); transition: transform .28s cubic-bezier(.16,1,.3,1),border-color .22s ease,box-shadow .22s ease; }
.community-index #view-songs .jd-song-card:hover,
.community-index #view-songs .jd-song-card:focus-visible { transform: translateY(-5px); border-color: rgba(247,37,133,.4); box-shadow: 0 20px 42px rgba(0,0,0,.24),0 0 0 1px rgba(247,37,133,.08); }
.community-index #view-songs .jd-song-card:active { transform: translateY(-1px) scale(.98); }
.community-index #view-songs .jd-song-card > img,
.community-index #view-songs .jd-no-thumb { aspect-ratio: 16/9; }
.community-index #view-songs .jd-song-card > img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.community-index #view-songs .jd-song-card:hover > img { transform: scale(1.035); }
.community-index #view-songs .jd-card-flags { position: absolute; z-index: 2; top: 9px; right: 9px; left: 9px; display: flex; align-items: center; gap: 5px; pointer-events: none; }
.community-index #view-songs .jd-card-flags span { padding: 4px 7px; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; background: rgba(7,9,17,.75); color: #fff; font-size: .55rem; font-weight: 900; letter-spacing: .05em; backdrop-filter: blur(9px); }
.community-index #view-songs .jd-card-flags .is-new { background: rgba(247,37,133,.82); }
.community-index #view-songs .jd-card-flags .is-plus { display: grid; width: 28px; height: 28px; padding: 3px; border-color: rgba(255,255,255,.3); background: rgba(7,9,17,.72); place-items: center; }
.community-index #view-songs .jd-card-flags .is-plus img { display: block; width: 100%; height: 100%; object-fit: contain; }
.community-index #view-songs .jd-card-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 12px 12px 4px; }
.community-index #view-songs .jd-card-name { flex: 1 1 auto; min-width: 0; padding: 0; font-size: .86rem; font-weight: 850; }
.community-index #view-songs .jd-card-artist { padding: 0 13px 11px; font-size: .69rem; }
.community-index #view-songs .jd-card-stars { min-height: 34px; padding: 0 13px 13px; }
.community-index #view-songs .jd-card-difficulty { justify-content: space-between; width: 100%; }
.community-index #view-songs .jd-card-score > strong { max-width: 76%; }

@media(max-width:1050px){.community-index #view-songs .jd-song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
    .community-index #view-songs .songs-public-hero { min-height: 0; padding: 25px 20px; border-radius: 22px; }
    .community-index #view-songs .songs-public-hero h1 { font-size: clamp(2.4rem,12vw,3.7rem); }
    .community-index #view-songs .songs-hero-mark { display: none; }
    .community-index #view-songs .song-catalog-shell { border-radius: 18px; }
    .community-index #view-songs .search-container { position: static; padding: 12px; }
    .community-index #view-songs .search-icon-fixed { left: 28px; }
    .community-index #view-songs .song-filter-panel { margin-inline: 12px; }
    .community-index #view-songs .game-chips { padding-inline: 12px; }
    .community-index #view-songs .favorites-strip { margin-inline: 12px; }
    .community-index #view-songs .jd-section-label { padding-inline: 12px; }
    .community-index #view-songs .jd-song-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding-inline: 12px; }
    .community-index #view-songs .jd-card-title-row { gap: 5px; padding: 10px 9px 3px; }
    .community-index #view-songs .jd-card-name { font-size: .76rem; }
    .community-index #view-songs .jd-card-artist { padding: 0 9px 8px; }
    .community-index #view-songs .jd-card-stars { padding: 0 9px 10px; }
}
@media(prefers-reduced-motion:reduce){.community-index #view-songs .jd-song-card,.community-index #view-songs .jd-song-card>img{transition:none}}