:root{
 --bg:#0b0b0d;
 --panel:#15161a;
 --panel2:#1d1f24;
 --accent:#1db954;
 --text:#fff;
 --muted:#9da3ae;
 --radius:18px;
 --border:rgba(255,255,255,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:Arial,Helvetica,sans-serif;
    background:linear-gradient(180deg,#090909,#111318);
    color:var(--text);
    overflow-x:hidden;
    overflow-y:auto;
}
.app{
 display:grid;
 grid-template-columns:260px 1fr;
 height:calc(100vh - 90px);
}
.sidebar{
 background:#0f1014;
 border-right:1px solid var(--border);
 padding:24px;
 overflow:auto;
}
.logo{
 display:flex;
 align-items:center;
 gap:12px;
 font-size:26px;
 font-weight:bold;
 color:var(--accent);
 margin-bottom:35px;
}
.sidebar nav{
 display:flex;
 flex-direction:column;
 gap:8px;
}
.nav-link{
 display:flex;
 gap:12px;
 align-items:center;
 color:#d7d7d7;
 text-decoration:none;
 padding:14px 16px;
 border-radius:14px;
 cursor:pointer;
 transition:.25s;
}
.nav-link:hover,.nav-link.active{
 background:var(--panel2);
 color:#fff;
 transform:translateX(5px);
}
.main{
 display:flex;
 flex-direction:column;
 overflow:hidden;
}
.topbar{
 display:flex;
 align-items:center;
 gap:20px;
 padding:18px 24px;
 border-bottom:1px solid var(--border);
 background:rgba(15,16,20,.75);
 backdrop-filter:blur(20px);
}
.menu-btn{
 display:none;
 background:none;
 border:none;
 color:#fff;
 font-size:24px;
}
#globalSearch{
 flex:1;
 padding:14px 18px;
 border:none;
 border-radius:30px;
 background:#1d2027;
 color:#fff;
}
.profile{
 min-width:180px;
 text-align:right;
}
#content{
 flex:1;
 overflow:auto;
 padding:30px;
}
.view{display:none}
.view.active{display:block}
.hero{
 border-radius:28px;
 min-height:320px;
 background:linear-gradient(135deg,#1db954,#14532d);
 display:flex;
 align-items:center;
 padding:50px;
 margin-bottom:35px;
 box-shadow:0 15px 40px rgba(0,0,0,.4);
}
.hero h1{
 font-size:52px;
 margin-bottom:12px;
}
.hero p{
 color:#eef;
 max-width:600px;
 margin-bottom:25px;
}
.primary-btn,.secondary-btn{
 border:none;
 border-radius:30px;
 padding:15px 26px;
 cursor:pointer;
 font-weight:bold;
 margin-right:10px;
}
.primary-btn{background:#fff;color:#000}
.secondary-btn{background:transparent;border:2px solid #fff;color:#fff}
.home-section{margin:40px 0}
.section-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:18px;
}
.show-all{
 color:var(--accent);
 cursor:pointer;
}
.card-row,
.album-grid,
.artist-grid,
.song-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:24px;
}
.card{
 background:var(--panel);
 border:1px solid var(--border);
 border-radius:18px;
 padding:18px;
 transition:.25s;
}
.card:hover{
 transform:translateY(-6px);
 background:#20242c;
}
#player{
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 height:90px;
 background:#111318;
 border-top:1px solid var(--border);
 display:grid;
 grid-template-columns:320px 1fr 240px;
 align-items:center;
 padding:0 20px;
 z-index:999;
}
.player-left{
 display:flex;
 align-items:center;
 gap:15px;
}
.player-left img{
 width:64px;
 height:64px;
 object-fit:cover;
 border-radius:10px;
 background:#222;
}
.player-center{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:10px;
}
.player-center button,.icon-btn{
 background:none;
 border:none;
 color:#fff;
 cursor:pointer;
 font-size:18px;
}
#seekBar,#volumeSlider{
 width:100%;
}
.player-right{
 display:flex;
 align-items:center;
 gap:12px;
}
.mobile-nav{
 display:none;
}
@media(max-width:900px){
 .app{
  grid-template-columns:1fr;
  height:calc(100vh - 150px);
 }
.sidebar{
    display:none;
}
 .sidebar.open{left:0}
.menu-btn{
    display:none;
}
 .hero{
  padding:30px;
  min-height:220px;
 }
 .hero h1{font-size:34px}
 #player{
  grid-template-columns:1fr;
  height:90px;
 }
 .player-right{display:none}
 .mobile-nav{
  display:flex;
  position:fixed;
  bottom:90px;
  left:0;
  right:0;
  background:#14161b;
  border-top:1px solid var(--border);
 }
 .mobile-nav button{
  flex:1;
  padding:14px;
  background:none;
  border:none;
  color:#fff;
 }
}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:900}.overlay.show{display:block}#closeMenu{display:none;background:none;border:none;color:#fff;font-size:30px;cursor:pointer}.logo{justify-content:space-between}@media(max-width:900px){#closeMenu{display:block}}
/* ==========================================
   SONG CARDS
========================================== */

.song-grid,
#latestSongs{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:20px;
}

.song-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.25s;
}

.song-card:hover{
    transform:translateY(-5px);
    background:#20242c;
}

.song-cover{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#222;
}

.song-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.song-info{
    padding:14px;
}

.song-info h3{
    font-size:17px;
    margin-bottom:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.song-info p,
.song-info small{
    color:var(--muted);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* ==========================================
   ALLE SONGS
========================================== */

#songsGrid{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.song-list-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    transition:.2s;
}

.song-list-item:hover{
    background:rgba(255,255,255,.07);
}
.song-list-item.active{

    background:rgba(29,185,84,.18);
    border-left:4px solid var(--accent);

}

.song-list-item.active .song-list-title{

    color:var(--accent);

}
.song-list-cover{
    width:58px;
    height:58px;
    border-radius:8px;
    object-fit:cover;
    background:#222;
    flex-shrink:0;
}

.song-list-info{
    flex:1;
    min-width:0;
}

.song-list-title{
    font-size:16px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.song-list-artist{
    font-size:14px;
    color:var(--muted);
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.song-list-meta{
    font-size:12px;
    color:rgba(255,255,255,.45);
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.song-list-menu{
    width:38px;
    height:38px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:18px;
    cursor:pointer;
    border-radius:50%;
}

.song-list-menu:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.modal.show{
    display:flex;
}

.modal-content{
    width:420px;
    max-width:95%;
    background:#1b1d22;
    padding:35px;
    border-radius:20px;
    position:relative;
}

.modal-content h2{
    margin-bottom:25px;
    text-align:center;
}

.modal-content input{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:none;
    border-radius:10px;
    background:#2a2d33;
    color:#fff;
}

.closeModal{
    position:absolute;
    right:15px;
    top:10px;
    background:none;
    border:none;
    color:#fff;
    font-size:30px;
    cursor:pointer;
}
/* ==========================================
   AUTH POPUP
========================================== */

.auth-tabs{

    display:flex;
    margin-bottom:25px;
    border-radius:12px;
    overflow:hidden;

}

.auth-tabs button{

    flex:1;
    padding:14px;
    border:none;
    cursor:pointer;
    background:#2a2d33;
    color:#fff;
    transition:.25s;

}

.auth-tabs button.active{

    background:var(--accent);
    color:#fff;

}

.accountType{

    display:flex;
    gap:20px;
    margin:20px 0;

}

.accountType label{

    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;

}

.check{

    display:flex;
    align-items:center;
    gap:10px;
    margin:20px 0;

}

#artistFields{

    margin-top:20px;
    animation:fadeArtist .3s;

}

@keyframes fadeArtist{

    from{

        opacity:0;
        transform:translateY(-10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
#playlistGrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:24px;
}

.playlist-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:25px;
    min-height:220px;
    cursor:pointer;
    transition:.25s;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.playlist-card:hover{
    background:#20242c;
    transform:translateY(-6px);
}

.playlist-card h3{
    font-size:22px;
    margin-bottom:8px;
}

.playlist-card p{
    color:var(--muted);
}
.playlist-icon{
    font-size:70px;
    color:var(--accent);
    margin-bottom:25px;
}
/* ===========================
   PROFILE
=========================== */

.profile-header{

    background:#181818;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:30px;

}

.profile-banner{

    height:220px;

    background:linear-gradient(135deg,#d4af37,#5f4511);

}

.profile-user{

    display:flex;

    align-items:center;

    gap:25px;

    padding:0 35px 30px;

    margin-top:-60px;

}

.profile-avatar{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #181818;

    background:#2b2b2b;

}

.profile-user h2{

    font-size:34px;

    margin-bottom:8px;

}

.profile-user p{

    color:#9b9b9b;

    font-size:15px;

}

.profile-nav{

    display:flex;

    gap:12px;

    margin-bottom:30px;

    flex-wrap:wrap;

}

.profile-menu{

    background:#202020;

    color:#fff;

    border:none;

    padding:12px 22px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    font-size:15px;

}

.profile-menu:hover{

    background:#2c2c2c;

}

.profile-menu.active{

    background:#d4af37;

    color:#000;

}

.profile-body{

    background:#181818;

    border-radius:18px;

    padding:30px;

    min-height:450px;

}

.profile-body h3{

    margin-bottom:15px;

    font-size:28px;

}

.profile-body p{

    color:#b5b5b5;

}
.profile-wrapper{

    display:flex;

    gap:25px;

}

.profile-sidebar{

    width:250px;
    flex-shrink:0;

    background:#181818;

    border-radius:18px;

    padding:15px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.profile-item{

    background:none;

    color:#ddd;

    border:none;

    text-align:left;

    padding:15px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    font-size:15px;

}

.profile-item i{

    width:28px;

}

.profile-item:hover{

    background:#242424;

}

.profile-item.active{

    background:#d4af37;

    color:#000;

}

.profile-body{

    flex:1;

}
.creator-subtitle{

    color:#9f9f9f;

    margin-bottom:30px;

}

.creator-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

}

.creator-card{

    background:#1d1d1d;

    border-radius:18px;

    padding:30px;

    cursor:pointer;

    transition:.25s;

    border:1px solid transparent;

}

.creator-card:hover{

    transform:translateY(-6px);

    border-color:#d4af37;

}

.creator-card i{

    font-size:42px;

    color:#d4af37;

    margin-bottom:20px;

}

.creator-card h3{

    margin-bottom:10px;

}

.creator-card p{

    color:#9c9c9c;

    line-height:1.5;

}
@media (max-width:900px){

    .profile-wrapper{
        flex-direction:column;
    }

    .profile-sidebar{
        width:100%;
    }

    .profile-body{
        width:100%;
        min-width:0;
        padding:20px;
    }

    .creator-grid{
        grid-template-columns:1fr;
    }

    .creator-card{
        padding:20px;
    }

}

/* ==========================================
   SOUNDNATION SONG OVERLAY
========================================== */

body.sn-modal-open{
    overflow:hidden;
}

#playerCover{
    cursor:pointer;
}

.sn-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
}

.sn-modal.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.sn-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(14px);
}

.sn-container{
    position:relative;
    z-index:2;
    width:min(1000px,92vw);
    max-height:90vh;
    overflow:auto;
    background:#17191f;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    box-shadow:0 30px 90px rgba(0,0,0,.6);
    transform:scale(.94);
    transition:.25s ease;
}

.sn-modal.show .sn-container{
    transform:scale(1);
}

#snClose{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:#24262d;
    color:#fff;
    cursor:pointer;
    font-size:18px;
    z-index:5;
}

#snClose:hover{
    background:#30333b;
}

#snModalContent{
    padding:36px;
}

.sn-song{
    display:flex;
    gap:38px;
    align-items:flex-start;
}

.sn-song-left{
    width:340px;
    max-width:100%;
    flex-shrink:0;
}

.sn-song-cover{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:22px;
    background:#222;
    box-shadow:0 20px 55px rgba(0,0,0,.45);
}

.sn-song-info{
    flex:1;
    min-width:0;
    padding-top:8px;
}

.sn-kicker{
    color:var(--accent);
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.sn-song-info h1{
    font-size:44px;
    line-height:1.08;
    margin:12px 0 10px;
}

.sn-artist{
    display:inline-flex;
    border:none;
    background:none;
    color:var(--accent);
    font-size:18px;
    font-weight:700;
    padding:0;
    margin-bottom:20px;
    cursor:pointer;
}

.sn-artist:hover{
    text-decoration:underline;
}

.sn-description{
    color:#c5c8d0;
    line-height:1.7;
    margin-bottom:24px;
}

.sn-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:22px 0 28px;
}

.sn-action{
    border:none;
    border-radius:999px;
    background:#252832;
    color:#fff;
    padding:12px 17px;
    cursor:pointer;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:9px;
}

.sn-action:hover{
    background:#303541;
}

.sn-list-block{
    margin-top:28px;
}

.sn-list-block h3{
    margin-bottom:14px;
}

.sn-mini-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sn-mini-song{
    width:100%;
    border:none;
    border-radius:14px;
    background:rgba(255,255,255,.045);
    color:#fff;
    padding:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
}

.sn-mini-song:hover{
    background:rgba(255,255,255,.09);
}

.sn-mini-song img{
    width:52px;
    height:52px;
    border-radius:10px;
    object-fit:cover;
    background:#222;
    flex-shrink:0;
}

.sn-mini-song span{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.sn-mini-song strong,
.sn-mini-song small{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sn-mini-song small{
    color:var(--muted);
}

@media(max-width:900px){

    .sn-modal{
        align-items:flex-end;
    }

    .sn-container{
        width:100vw;
        max-height:88vh;
        border-radius:26px 26px 0 0;
        transform:translateY(100%);
    }

    .sn-modal.show .sn-container{
        transform:translateY(0);
    }

    #snModalContent{
        padding:28px 20px 34px;
    }

    .sn-song{
        flex-direction:column;
        gap:24px;
    }

    .sn-song-left{
        width:100%;
    }

    .sn-song-cover{
        max-height:48vh;
    }

    .sn-song-info h1{
        font-size:32px;
    }

    .sn-actions{
        gap:10px;
    }

    .sn-action{
        flex:1;
        justify-content:center;
        min-width:135px;
    }

}


/* ==========================================
   MOBILE FIX: SONG OVERLAY / PLAYER TAP
========================================== */

.player-left{
    min-width:0;
}

.player-meta{
    min-width:0;
}

#playerTitle,
#playerArtist{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:900px){

    body.sn-modal-open #player,
    body.sn-modal-open .mobile-nav{
        pointer-events:none;
    }

    #player{
        height:96px;
        padding:10px 14px;
        grid-template-columns:1fr;
    }

    .player-left{
        width:100%;
        min-width:0;
        padding-right:4px;
    }

    .player-left img{
        width:62px;
        height:62px;
        flex-shrink:0;
    }

    .player-meta{
        min-width:0;
        flex:1;
    }

    .player-center{
        display:none;
    }

    .sn-modal{
        align-items:flex-end;
        justify-content:center;
    }

    .sn-overlay{
        background:rgba(0,0,0,.72);
        backdrop-filter:blur(10px);
    }

    .sn-container{
        width:100vw;
        height:auto;
        max-height:calc(100dvh - 12px);
        border-radius:28px 28px 0 0;
        border-left:none;
        border-right:none;
        border-bottom:none;
        transform:translateY(105%);
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .sn-container::before{
        content:"";
        display:block;
        width:46px;
        height:5px;
        border-radius:999px;
        background:rgba(255,255,255,.28);
        margin:10px auto 0;
    }

    .sn-modal.show .sn-container{
        transform:translateY(0);
    }

    #snClose{
        position:sticky;
        top:12px;
        margin-left:auto;
        margin-right:14px;
        margin-top:2px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    #snModalContent{
        padding:10px 18px 32px;
    }

    .sn-song{
        flex-direction:column;
        gap:18px;
    }

    .sn-song-left{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .sn-song-cover{
        width:min(100%, 360px);
        max-height:42dvh;
        object-fit:cover;
        border-radius:20px;
    }

    .sn-song-info{
        width:100%;
        padding-top:0;
    }

    .sn-song-info h1{
        font-size:30px;
        line-height:1.12;
    }

    .sn-description{
        font-size:15px;
        line-height:1.6;
    }

    .sn-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .sn-action{
        width:100%;
        justify-content:center;
        padding:13px 16px;
    }

    .sn-mini-song{
        padding:12px;
    }

}

@supports not (height:100dvh){
    @media(max-width:900px){
        .sn-container{
            max-height:calc(100vh - 12px);
        }
    }
}


/* ==========================================
   MOBILE TAP FIX 2
========================================== */

#player{
    z-index:10000;
}

.mobile-nav{
    z-index:9999;
}

.sn-modal{
    z-index:2147483000;
}

.player-left,
#playerCover{
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

@media(max-width:900px){

    #player{
        z-index:10000;
        touch-action:manipulation;
    }

    .player-left{
        position:relative;
        z-index:2;
        cursor:pointer;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    #playerCover{
        pointer-events:auto;
        cursor:pointer;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .sn-modal{
        z-index:2147483000;
    }

    .sn-container{
        max-height:calc(100vh - 12px);
        max-height:calc(100dvh - 12px);
    }

    body.sn-modal-open{
        overflow:hidden;
        touch-action:none;
    }

    body.sn-modal-open .sn-container{
        touch-action:auto;
    }

}


/* ==========================================
   MOBILE PLAYER CONTROLS + CACHE FIX
========================================== */

@media(max-width:900px){

    #player{
        height:104px;
        padding:8px 12px;
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        gap:10px;
        align-items:center;
    }

    .player-left{
        min-width:0;
        width:100%;
        overflow:hidden;
    }

    .player-left img{
        width:58px;
        height:58px;
        flex-shrink:0;
    }

    .player-meta{
        min-width:0;
        overflow:hidden;
    }

    .player-center{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        width:auto;
        min-width:120px;
    }

    .player-controls{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:14px;
    }

    .player-controls button{
        width:36px;
        height:36px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        color:#fff;
        border:none;
        cursor:pointer;
        touch-action:manipulation;
    }

    #playBtn{
        width:42px;
        height:42px;
        background:#fff;
        color:#000;
    }

    .player-progress{
        display:none;
    }

    .player-right{
        display:none !important;
    }

    .mobile-nav{
        bottom:104px;
    }

    .app{
        height:calc(100vh - 164px);
    }

}

/* ==========================================
   ARTIST OVERLAY
========================================== */

.sn-artist-profile{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.sn-artist-hero{
    min-height:260px;
    border-radius:22px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-start;
    padding:18px;
}

.sn-back-btn{
    border:none;
    border-radius:999px;
    background:rgba(0,0,0,.48);
    color:#fff;
    padding:11px 16px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:700;
    backdrop-filter:blur(10px);
}

.sn-back-btn:hover{
    background:rgba(0,0,0,.7);
}

.sn-artist-head{
    display:flex;
    align-items:flex-end;
    gap:24px;
    margin-top:-86px;
    padding:0 22px;
    position:relative;
    z-index:2;
}

.sn-artist-avatar{
    width:150px;
    height:150px;
    border-radius:50%;
    object-fit:cover;
    background:#222;
    border:7px solid #17191f;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    flex-shrink:0;
}

.sn-artist-main{
    min-width:0;
    flex:1;
    padding-bottom:8px;
}

.sn-artist-main h1{
    font-size:48px;
    line-height:1.05;
    margin:9px 0 8px;
}

.sn-artist-stats{
    color:var(--muted);
    margin-bottom:8px;
}

.sn-artist-bio{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:22px;
}

.sn-artist-bio h3{
    margin-bottom:10px;
}

.sn-artist-bio p{
    color:#c5c8d0;
    line-height:1.7;
}

.sn-artist-chip-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.sn-artist-chip{
    border:none;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#fff;
    padding:12px 15px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:700;
}

.sn-artist-chip:hover{
    background:rgba(255,255,255,.12);
}

@media(max-width:900px){

    .sn-artist-hero{
        min-height:180px;
        border-radius:20px;
    }

    .sn-artist-head{
        align-items:center;
        gap:16px;
        margin-top:-58px;
        padding:0 4px;
    }

    .sn-artist-avatar{
        width:104px;
        height:104px;
        border-width:5px;
    }

    .sn-artist-main h1{
        font-size:32px;
    }

    .sn-artist-main .sn-actions{
        display:flex;
        flex-direction:column;
    }

    .sn-artist-bio{
        padding:18px;
    }

    .sn-artist-chip{
        width:100%;
        justify-content:center;
    }

}


/* ==========================================
   ARTIST GRID
========================================== */

#artistsGrid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:22px;
}

.artist-card{
    border:none;
    text-align:left;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    cursor:pointer;
    color:#fff;
    transition:.25s;
}

.artist-card:hover{
    transform:translateY(-5px);
    background:#20242c;
}

.artist-card-image{
    width:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden;
    background:#222;
    margin-bottom:16px;
}

.artist-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.artist-card-info h3{
    font-size:19px;
    margin-bottom:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.artist-card-info p{
    color:var(--muted);
    margin-bottom:5px;
}

.artist-card-info small{
    color:rgba(255,255,255,.5);
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

@media(max-width:900px){

    #artistsGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .artist-card{
        padding:14px;
        border-radius:18px;
    }

    .artist-card-info h3{
        font-size:16px;
    }

    .artist-card-info p,
    .artist-card-info small{
        font-size:12px;
    }

}

/* ==========================================
   MENU 2.0
========================================== */

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.nav-group{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.nav-label{
    padding:0 16px 4px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.36);
}

.nav-link[href]{
    cursor:pointer;
}

.menu-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px;
    transition:.25s;
}

.menu-card:hover{
    transform:translateY(-4px);
    background:#20242c;
}

.menu-card img{
    width:72px;
    height:72px;
    border-radius:12px;
    object-fit:cover;
    background:#222;
}

.menu-card h3{
    font-size:18px;
    margin-bottom:6px;
}

.menu-card p{
    color:var(--muted);
    font-size:14px;
}

.chart-rank{
    width:42px;
    color:var(--accent);
    text-align:center;
    flex-shrink:0;
}

.mobile-menu-sheet{
    position:fixed;
    inset:0;
    z-index:2147482500;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.22s ease;
}

.mobile-menu-sheet.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mobile-menu-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.66);
    backdrop-filter:blur(10px);
}

.mobile-menu-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:82vh;
    overflow:auto;
    background:#14161b;
    border-radius:24px 24px 0 0;
    border:1px solid rgba(255,255,255,.08);
    padding:10px 16px 24px;
    transform:translateY(100%);
    transition:.25s ease;
}

.mobile-menu-sheet.show .mobile-menu-panel{
    transform:translateY(0);
}

.mobile-menu-handle{
    width:48px;
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,.22);
    margin:2px auto 14px;
}

.mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.mobile-menu-head strong{
    font-size:18px;
}

#mobileMenuClose{
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
}

.mobile-menu-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.mobile-menu-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.38);
    padding:0 4px;
}

.mobile-menu-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:48px;
    border:none;
    border-radius:14px;
    padding:0 14px;
    background:#1d2027;
    color:#fff;
    text-decoration:none;
    font:inherit;
    cursor:pointer;
    text-align:left;
}

.mobile-menu-item i{
    width:24px;
    color:var(--accent);
}

.mobile-menu-item.active{
    background:rgba(29,185,84,.18);
}

body.mobile-menu-open{
    overflow:hidden;
}

@media(max-width:900px){

    .mobile-nav{
        display:grid !important;
        grid-template-columns:repeat(5,1fr);
        position:fixed;
        left:0;
        right:0;
        bottom:104px;
        height:60px;
        background:#14161b;
        border-top:1px solid var(--border);
        z-index:9999;
    }

    .mobile-nav button{
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        padding:6px 2px;
        border:none;
        background:transparent;
        color:rgba(255,255,255,.68);
        font-size:18px;
        cursor:pointer;
        touch-action:manipulation;
    }

    .mobile-nav button span{
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:10px;
        line-height:1;
    }

    .mobile-nav button.active{
        color:#fff;
    }

    .mobile-nav button.active i{
        color:var(--accent);
    }

    #content{
        padding:22px 16px 190px;
    }

    .app{
        height:calc(100vh - 164px);
    }

    .menu-card{
        padding:12px;
    }

    .menu-card img{
        width:58px;
        height:58px;
    }

}

@media(min-width:901px){
    .mobile-menu-sheet{
        display:none;
    }
}

/* ==========================================
   DISCOVERY 2.0
========================================== */

.discovery-section{
    margin-top:10px;
}

.discover-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:16px;
}

.discover-action{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    min-height:92px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:20px;
    background:linear-gradient(135deg,#17191f,#111318);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:.25s;
}

.discover-action:hover{
    transform:translateY(-4px);
    background:#20242c;
}

.discover-action i{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(29,185,84,.16);
    color:var(--accent);
    font-size:20px;
    flex-shrink:0;
}

.discover-action strong,
.discover-action small{
    display:block;
}

.discover-action strong{
    font-size:17px;
    margin-bottom:4px;
}

.discover-action small{
    color:var(--muted);
}

.genre-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:14px;
}

.genre-pill{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--panel);
    color:#fff;
    cursor:pointer;
    transition:.25s;
}

.genre-pill:hover{
    transform:translateY(-4px);
    background:#20242c;
}

.genre-pill small{
    color:var(--muted);
}

.album-card{
    width:100%;
    text-align:left;
    border:none;
    cursor:pointer;
}

.login-required-card{
    width:100%;
    max-width:520px;
    margin:20px auto;
    padding:34px;
    border:1px solid var(--border);
    border-radius:24px;
    background:linear-gradient(135deg,#17191f,#101116);
    text-align:center;
}

.login-required-card i{
    width:58px;
    height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(29,185,84,.14);
    color:var(--accent);
    font-size:24px;
    margin-bottom:16px;
}

.login-required-card h3{
    font-size:24px;
    margin-bottom:10px;
}

.login-required-card p{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:24px;
}

@media(max-width:900px){

    .discover-actions{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .discover-action{
        min-height:116px;
        flex-direction:column;
        align-items:flex-start;
        justify-content:space-between;
        padding:16px;
    }

    .discover-action i{
        width:42px;
        height:42px;
        border-radius:14px;
        font-size:18px;
    }

    .discover-action strong{
        font-size:15px;
    }

    .discover-action small{
        font-size:12px;
    }

    .genre-grid{
        grid-template-columns:1fr 1fr;
    }

    .login-required-card{
        margin:10px 0;
        padding:26px 18px;
    }

}

/* ==========================================
   BIBLIOTHEK 2.0
========================================== */

.library-view{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.library-hero{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    padding:30px;
    border-radius:26px;
    border:1px solid var(--border);
    background:linear-gradient(135deg,rgba(29,185,84,.18),rgba(21,22,26,.95));
}

.library-hero h2{
    font-size:42px;
    margin:8px 0 10px;
}

.library-hero p{
    color:var(--muted);
    line-height:1.6;
}

.library-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(90px,1fr));
    gap:12px;
    min-width:320px;
}

.library-stats div{
    background:rgba(255,255,255,.07);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    text-align:center;
}

.library-stats strong{
    display:block;
    font-size:28px;
    color:#fff;
}

.library-stats small{
    color:var(--muted);
}

.library-create{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:22px;
    border-radius:22px;
    background:var(--panel);
    border:1px solid var(--border);
}

.library-create h3{
    margin-bottom:6px;
}

.library-create p{
    color:var(--muted);
}

.library-create-form{
    display:flex;
    gap:12px;
    align-items:center;
    min-width:min(520px,100%);
}

.library-create-form input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    border-radius:999px;
    background:#23262d;
    color:#fff;
    padding:15px 18px;
}

.library-section{
    padding:24px;
    border-radius:22px;
    background:var(--panel);
    border:1px solid var(--border);
}

.library-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.library-section-head h3{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
}

.library-section-head i{
    color:var(--accent);
}

.library-song-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.library-song-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

.library-song-row:hover{
    background:rgba(255,255,255,.07);
}

.library-song-row img{
    width:54px;
    height:54px;
    object-fit:cover;
    border-radius:10px;
    background:#222;
}

.library-song-row span{
    flex:1;
    min-width:0;
}

.library-song-row strong,
.library-song-row small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.library-song-row small{
    color:var(--muted);
    margin-top:4px;
}

.library-song-row > i{
    color:var(--muted);
}

.library-playlist-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:18px;
}

.library-playlist-card{
    text-align:left;
    width:100%;
    border:none;
}

.library-empty-small{
    padding:20px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    color:var(--muted);
    border:1px dashed var(--border);
}

.library-detail-head{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
    border-radius:22px;
    background:var(--panel);
    border:1px solid var(--border);
}

.library-detail-head h2{
    font-size:34px;
    margin-top:5px;
}

.library-song-list-wide{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:22px;
    padding:12px;
}

.sn-action.active{
    background:rgba(29,185,84,.22);
    color:#fff;
    border-color:rgba(29,185,84,.45);
}

@media(max-width:900px){

    .library-hero{
        flex-direction:column;
        align-items:stretch;
        padding:22px;
    }

    .library-hero h2{
        font-size:32px;
    }

    .library-stats{
        min-width:0;
        grid-template-columns:repeat(3,1fr);
    }

    .library-stats div{
        padding:14px 8px;
    }

    .library-stats strong{
        font-size:22px;
    }

    .library-stats small{
        font-size:11px;
    }

    .library-create{
        flex-direction:column;
        align-items:stretch;
    }

    .library-create-form{
        min-width:0;
        flex-direction:column;
        align-items:stretch;
    }

    .library-create-form .primary-btn{
        width:100%;
    }

    .library-section{
        padding:18px;
    }

    .library-playlist-grid{
        grid-template-columns:1fr;
    }

    .library-detail-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .library-detail-head h2{
        font-size:28px;
    }

}


/* ==========================================
   PLAYER MODES: SHUFFLE / REPEAT
========================================== */

.player-controls{
    gap:12px;
}

.player-controls button{
    position:relative;
}

.player-mode-btn{
    color:var(--muted) !important;
    opacity:.85;
    transition:.2s;
}

.player-mode-btn:hover{
    color:#fff !important;
    opacity:1;
}

.player-mode-btn.active{
    color:var(--accent) !important;
    opacity:1;
}

.repeat-one-badge{
    position:absolute;
    right:2px;
    bottom:1px;
    width:13px;
    height:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--accent);
    color:#06140b;
    font-size:9px;
    font-weight:900;
    line-height:1;
}

@media(max-width:900px){

    .player-center{
        min-width:176px;
    }

    .player-controls{
        gap:8px;
    }

    .player-controls button{
        width:32px;
        height:32px;
        font-size:13px;
    }

    #playBtn{
        width:40px;
        height:40px;
        font-size:15px;
    }

    .player-mode-btn{
        background:transparent !important;
    }

    .player-mode-btn.active{
        background:rgba(29,185,84,.16) !important;
    }

}

/* ==========================================
   SOUNDNATION OPTIK 2.0 - PLAYER / CARDS POLISH
========================================== */

:root{
    --sn-glow:rgba(29,185,84,.26);
    --sn-soft:rgba(255,255,255,.055);
    --sn-soft-2:rgba(255,255,255,.09);
}

#player{
    height:98px;
    padding:0 24px;
    background:
        radial-gradient(circle at 12% 50%, rgba(29,185,84,.12), transparent 34%),
        linear-gradient(180deg, rgba(25,27,34,.96), rgba(12,13,17,.98));
    border-top:1px solid rgba(255,255,255,.11);
    box-shadow:0 -16px 48px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
}

#player.has-song #playerCover{
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.48), 0 0 28px var(--sn-glow);
}

#player.is-playing #playerCover{
    transform:scale(1.035);
}

.player-left{
    min-width:0;
    padding:8px;
    border-radius:18px;
    transition:.22s ease;
}

.player-left:hover{
    background:var(--sn-soft);
}

.player-left img,
#playerCover{
    border-radius:14px;
    transition:.22s ease;
}

.player-meta{
    min-width:0;
}

#playerTitle{
    font-weight:800;
    letter-spacing:-.01em;
}

#playerArtist{
    color:var(--muted);
    margin-top:4px;
    font-size:13px;
}

.player-controls{
    display:flex;
    align-items:center;
    justify-content:center;
}

.player-controls button,
.player-right button,
.icon-btn{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.055);
    color:#f5f7fb;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.player-controls button:hover,
.player-right button:hover,
.icon-btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.095);
    border-color:rgba(255,255,255,.12);
}

#playBtn{
    width:48px;
    height:48px;
    background:#fff;
    color:#050505;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
}

#playBtn:hover{
    background:var(--accent);
    color:#06140b;
    transform:translateY(-1px) scale(1.04);
}

.player-mode-btn.active{
    background:rgba(29,185,84,.17) !important;
    border-color:rgba(29,185,84,.38) !important;
    box-shadow:0 0 22px rgba(29,185,84,.14);
}

.player-progress{
    width:min(620px,100%);
    display:grid;
    grid-template-columns:44px 1fr 44px;
    gap:10px;
    align-items:center;
    color:rgba(255,255,255,.55);
    font-size:12px;
}

#progress,
#volumeSlider{
    accent-color:var(--accent);
    cursor:pointer;
}

#progress{
    height:5px;
}

.player-right{
    justify-content:flex-end;
    color:rgba(255,255,255,.72);
}

/* Song cards */
.song-card,
.artist-card,
.playlist-card,
.library-playlist-card,
.creator-card,
.card{
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.song-card::before,
.artist-card::before,
.playlist-card::before,
.library-playlist-card::before,
.creator-card::before,
.card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 38%);
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
}

.song-card:hover::before,
.artist-card:hover::before,
.playlist-card:hover::before,
.library-playlist-card:hover::before,
.creator-card:hover::before,
.card:hover::before{
    opacity:1;
}

.song-cover,
.artist-card-image{
    position:relative;
}

.song-cover::after{
    content:"\f04b";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    right:14px;
    bottom:14px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--accent);
    color:#06140b;
    box-shadow:0 10px 26px rgba(0,0,0,.34);
    opacity:0;
    transform:translateY(10px) scale(.92);
    transition:.22s ease;
}

.song-card:hover .song-cover::after{
    opacity:1;
    transform:translateY(0) scale(1);
}

.song-cover img,
.artist-card-image img,
.song-list-cover,
.library-song-row img{
    transition:transform .28s ease, filter .28s ease;
}

.song-card:hover .song-cover img,
.artist-card:hover .artist-card-image img{
    transform:scale(1.045);
    filter:saturate(1.08) contrast(1.04);
}

.song-list-item,
.library-song-row{
    border:1px solid transparent;
}

.song-list-item:hover,
.library-song-row:hover{
    border-color:rgba(255,255,255,.07);
    background:linear-gradient(90deg, rgba(29,185,84,.10), rgba(255,255,255,.045));
}

.song-list-item.active{
    box-shadow:inset 0 0 0 1px rgba(29,185,84,.18);
}

/* Overlay polish */
.sn-overlay{
    background:radial-gradient(circle at 50% 18%, rgba(29,185,84,.16), transparent 28%), rgba(0,0,0,.84);
}

.sn-container{
    background:linear-gradient(180deg, #20232b, #14161b 42%, #101116);
    box-shadow:0 34px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.06);
}

.sn-song-cover,
.sn-artist-avatar{
    box-shadow:0 20px 60px rgba(0,0,0,.48), 0 0 38px rgba(29,185,84,.10);
}

.sn-action,
.sn-small-btn,
.mobile-menu-item,
.primary-btn,
.secondary-btn{
    transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.sn-action:hover,
.sn-small-btn:hover,
.mobile-menu-item:hover,
.primary-btn:hover,
.secondary-btn:hover{
    transform:translateY(-1px);
}

/* Empty states */
.empty,
.library-empty-small{
    border:1px dashed rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
    border-radius:18px;
    color:rgba(255,255,255,.64);
}

/* Mobile app polish */
@media(max-width:900px){

    .app{
        height:calc(100vh - 174px);
    }

    #content{
        padding:18px;
        padding-bottom:28px;
    }

    #player{
        height:104px;
        grid-template-columns:minmax(0,1fr) auto;
        gap:10px;
        padding:10px 12px;
        align-items:center;
    }

    .player-left{
        padding:6px;
        gap:10px;
        min-width:0;
    }

    .player-left img,
    #playerCover{
        width:56px;
        height:56px;
        border-radius:13px;
        flex-shrink:0;
    }

    .player-meta{
        min-width:0;
        max-width:100%;
    }

    #playerTitle,
    #playerArtist{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:44vw;
    }

    #playerTitle{
        font-size:14px;
    }

    #playerArtist{
        font-size:12px;
    }

    .player-center{
        min-width:auto;
        align-items:flex-end;
    }

    .player-controls{
        gap:6px;
        justify-content:flex-end;
    }

    .player-controls button{
        width:31px;
        height:31px;
        font-size:12px;
        background:rgba(255,255,255,.055);
    }

    #playBtn{
        width:42px;
        height:42px;
        font-size:15px;
    }

    .player-progress,
    .player-right{
        display:none !important;
    }

    .mobile-nav{
        bottom:104px;
        background:linear-gradient(180deg, rgba(25,27,34,.96), rgba(13,14,18,.98));
        box-shadow:0 -10px 34px rgba(0,0,0,.34);
    }

    .mobile-nav button{
        min-height:58px;
    }

    .mobile-nav button.active{
        background:rgba(29,185,84,.12);
    }

    .sn-container{
        border-radius:28px 28px 0 0;
    }

    .song-card::before,
    .song-cover::after{
        display:none;
    }

    .song-card:active,
    .artist-card:active,
    .library-song-row:active{
        transform:scale(.985);
    }
}


/* ==========================================
   PUBLIC PROFILE INSIDE APP
========================================== */
.sn-public-profile-view{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-height:76vh;
}

.sn-public-profile-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:6px 4px 0;
}

.sn-public-profile-bar h2{
    margin:4px 0 0;
    font-size:26px;
}

.sn-public-profile-frame{
    width:100%;
    height:72vh;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:#090909;
}

@media(max-width:900px){
    .sn-public-profile-view{
        min-height:calc(100dvh - 70px);
        gap:12px;
    }

    .sn-public-profile-bar{
        align-items:flex-start;
        flex-wrap:wrap;
        padding:0;
    }

    .sn-public-profile-bar h2{
        font-size:20px;
    }

    .sn-public-profile-bar .sn-action{
        padding:10px 12px;
        font-size:13px;
    }

    .sn-public-profile-frame{
        height:calc(100dvh - 150px);
        border-radius:18px;
    }
}

/* ==========================================
   DATABASE LIKES
========================================== */

.player-like-btn.active{
    color:#ff4f7b !important;
    background:rgba(255,79,123,.14) !important;
    border-color:rgba(255,79,123,.35) !important;
}

.sn-action.active .fa-heart,
.sn-action.active{
    color:#ff4f7b;
}

.library-view .song-list-item .fa-heart{
    color:#ff4f7b;
}


/* ==========================================
   FOLLOW SYSTEM
========================================== */
.sn-action.active,
.artist-card.artist-followed{
    border-color:rgba(29,185,84,.55);
    background:rgba(29,185,84,.14);
}

.artist-card.artist-followed::after{
    content:"Folge ich";
    position:absolute;
    top:14px;
    right:14px;
    font-size:11px;
    font-weight:800;
    color:#0b0b0d;
    background:var(--accent);
    padding:5px 9px;
    border-radius:999px;
}

.artist-card{
    position:relative;
}

.library-artist-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:14px;
}

.library-artist-card{
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    border:1px solid var(--border);
    background:rgba(255,255,255,.045);
    color:#fff;
    border-radius:16px;
    padding:13px;
    cursor:pointer;
    text-align:left;
    transition:.2s;
}

.library-artist-card:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-2px);
}

.library-artist-card img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
    background:#222;
}

.library-artist-card span{
    flex:1;
    min-width:0;
}

.library-artist-card strong,
.library-artist-card small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.library-artist-card small{
    color:var(--muted);
    margin-top:4px;
}

@media(max-width:900px){
    .library-artist-grid{
        grid-template-columns:1fr;
    }
}


/* ==========================================
   FOLLOW FEED
========================================== */

.follow-feed-section{
    margin-top:34px;
}

.follow-feed-row .feed-empty-card{
    grid-column:1/-1;
}

.feed-empty-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(29,185,84,.18),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
}

.feed-empty-card i{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(29,185,84,.18);
    color:var(--accent);
    font-size:22px;
    flex-shrink:0;
}

.feed-empty-card div{
    flex:1;
    min-width:0;
}

.feed-empty-card h3{
    margin:0 0 6px;
    font-size:20px;
}

.feed-empty-card p{
    color:var(--muted);
    line-height:1.5;
    margin:0;
}

.feed-empty-card button{
    border:none;
    border-radius:999px;
    padding:12px 18px;
    font-weight:800;
    cursor:pointer;
    background:#fff;
    color:#000;
    white-space:nowrap;
}

@media(max-width:900px){
    .feed-empty-card{
        align-items:flex-start;
        flex-direction:column;
        padding:18px;
    }

    .feed-empty-card button{
        width:100%;
    }
}

/* ==========================================
   LEGAL / AUTH LINKS
========================================== */
.auth-small-link,
.legal-auth-links{
    margin-top:14px;
    text-align:center;
    font-size:13px;
    color:var(--muted);
}

.auth-small-link a,
.legal-auth-links a,
.check a{
    color:var(--accent);
    text-decoration:none;
}

.auth-small-link a:hover,
.legal-auth-links a:hover,
.check a:hover{
    text-decoration:underline;
}

.legal-auth-links{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.check span{
    line-height:1.45;
}

/* ==========================================
   MOBILE SAFE AREA / FIXED PLAYER CUT-OFF FIX
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-bottom-space:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 56px + env(safe-area-inset-bottom));
    }

    html,
    body{
        min-height:100%;
        min-height:100dvh;
    }

    body{
        overscroll-behavior-y:none;
    }

    .app{
        height:auto !important;
        min-height:calc(100dvh - var(--sn-mobile-player) - var(--sn-mobile-nav)) !important;
    }

    #content{
        min-height:calc(100dvh - var(--sn-mobile-player) - var(--sn-mobile-nav)) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        padding-bottom:var(--sn-mobile-bottom-space) !important;
        scroll-padding-bottom:var(--sn-mobile-bottom-space) !important;
    }

    .view,
    .profile-wrapper,
    .profile-body,
    .profile-panel,
    #creatorContent,
    #creatorHome,
    .creator-settings,
    .creator-form,
    .creator-form-card,
    .creator-dashboard,
    .artist-profile-editor{
        padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
    }

    #player{
        bottom:0 !important;
        min-height:var(--sn-mobile-player);
        padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
        z-index:10000;
    }

    .mobile-nav{
        bottom:var(--sn-mobile-player) !important;
        z-index:9999;
    }

    .modal{
        align-items:flex-end !important;
        padding:10px !important;
        padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    }

    .modal-content,
    .settings-window{
        width:100% !important;
        max-width:100% !important;
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        border-radius:24px 24px 0 0 !important;
        padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .modal-content form,
    .settings-window-body,
    .creator-form-card form,
    .artist-profile-editor form{
        padding-bottom:calc(36px + env(safe-area-inset-bottom)) !important;
    }

    .settings-window-body .primary-btn,
    .creator-form-actions,
    .big-submit-btn,
    .primary-btn[type="submit"]{
        margin-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .sn-container{
        max-height:calc(100dvh - 8px) !important;
        padding-bottom:env(safe-area-inset-bottom) !important;
    }

    body.sn-modal-open #player,
    body.sn-modal-open .mobile-nav,
    body.mobile-menu-open #player{
        pointer-events:none;
    }
}

/* ==========================================
   MOBILE GLOBAL FORM BUTTON FIX
   Prevent fixed player/mobile nav from covering save buttons
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-form-safe:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 96px + env(safe-area-inset-bottom));
    }

    html,
    body{
        min-height:100dvh;
        overflow-x:hidden;
    }

    .main{
        overflow:visible !important;
    }

    #content{
        height:auto !important;
        min-height:100dvh !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        padding-bottom:var(--sn-mobile-form-safe) !important;
        scroll-padding-bottom:var(--sn-mobile-form-safe) !important;
    }

    .view.active,
    #profileView,
    .profile-wrapper,
    .profile-body,
    .profile-panel,
    #settingsProfile,
    #creatorProfile,
    #creatorContent,
    #creatorHome,
    .creator-grid,
    .creator-card,
    .creator-form,
    .creator-form-card,
    .creator-dashboard,
    .artist-profile-editor,
    .settings-window,
    .settings-window-body{
        overflow:visible !important;
        max-height:none !important;
        padding-bottom:calc(var(--sn-mobile-form-safe) + 20px) !important;
    }

    .profile-body,
    #settingsProfile,
    #creatorProfile,
    #creatorContent{
        margin-bottom:var(--sn-mobile-form-safe) !important;
    }

    #player{
        height:auto !important;
        min-height:var(--sn-mobile-player) !important;
    }

    .mobile-nav{
        bottom:var(--sn-mobile-player) !important;
    }

    .primary-btn,
    .secondary-btn,
    .danger-btn,
    .big-submit-btn,
    button[type="submit"]{
        min-height:46px;
    }

    .profile-panel .settings-actions,
    #settingsProfile .settings-actions,
    .profile-panel .creator-form-actions,
    #creatorProfile .creator-form-actions,
    .artist-profile-editor .creator-form-actions,
    .creator-form-card .creator-form-actions{
        position:sticky !important;
        bottom:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 14px + env(safe-area-inset-bottom)) !important;
        z-index:80 !important;
        padding:14px 0 18px !important;
        margin-top:20px !important;
        background:linear-gradient(180deg, rgba(24,24,24,0), #181818 30%, #181818 100%) !important;
        border-radius:0 0 18px 18px;
    }

    .modal .settings-actions,
    .modal .creator-form-actions{
        bottom:calc(12px + env(safe-area-inset-bottom)) !important;
        background:linear-gradient(180deg, rgba(27,29,34,0), #1b1d22 30%, #1b1d22 100%) !important;
    }
}

/* ==========================================
   MOBILE SCROLL RESTORE FIX
   Keeps normal scrolling and only adds safe bottom space.
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-safe-bottom:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 92px + env(safe-area-inset-bottom));
    }

    html,
    body{
        height:auto !important;
        min-height:100% !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        overscroll-behavior-y:auto !important;
        touch-action:auto !important;
    }

    .app{
        height:calc(100dvh - var(--sn-mobile-player) - var(--sn-mobile-nav)) !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    .main{
        height:100% !important;
        min-height:0 !important;
        overflow:hidden !important;
    }

    #content{
        height:100% !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        padding-bottom:var(--sn-mobile-safe-bottom) !important;
        scroll-padding-bottom:var(--sn-mobile-safe-bottom) !important;
    }

    .view.active,
    #profileView,
    .profile-wrapper,
    .profile-body,
    .profile-panel,
    #settingsProfile,
    #creatorProfile,
    #creatorContent,
    #creatorHome,
    .creator-dashboard,
    .creator-form,
    .creator-form-card,
    .artist-profile-editor,
    .settings-window-body{
        max-height:none !important;
        margin-bottom:0 !important;
        padding-bottom:var(--sn-mobile-safe-bottom) !important;
    }

    .settings-actions,
    .creator-form-actions,
    .artist-profile-editor .creator-form-actions,
    .profile-panel .settings-actions,
    #settingsProfile .settings-actions,
    .profile-panel .creator-form-actions,
    #creatorProfile .creator-form-actions,
    .creator-form-card .creator-form-actions{
        position:static !important;
        bottom:auto !important;
        z-index:auto !important;
        background:transparent !important;
        padding:16px 0 calc(34px + env(safe-area-inset-bottom)) !important;
        margin-top:22px !important;
        margin-bottom:0 !important;
        border-radius:0 !important;
    }

    .settings-actions button,
    .settings-actions .primary-btn,
    .creator-form-actions .primary-btn,
    .creator-form-actions .secondary-btn,
    .creator-form-actions .danger-btn,
    .big-submit-btn,
    button[type="submit"]{
        width:100% !important;
        min-height:48px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    .modal-content,
    .settings-window{
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
    }
}

/* ==========================================
   MOBILE FINAL SCROLL FIX
   One scroll area: the page. No sticky save bars.
========================================== */
@media(max-width:900px){
    :root{
        --sn-mobile-player:104px;
        --sn-mobile-nav:60px;
        --sn-mobile-bottom-space:calc(var(--sn-mobile-player) + var(--sn-mobile-nav) + 90px + env(safe-area-inset-bottom));
    }

    html,
    body{
        height:auto !important;
        min-height:100% !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
        position:static !important;
        touch-action:auto !important;
        overscroll-behavior-y:auto !important;
    }

    body{
        padding-bottom:var(--sn-mobile-bottom-space) !important;
    }

    .app{
        height:auto !important;
        min-height:100dvh !important;
        overflow:visible !important;
    }

    .main{
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    #content{
        height:auto !important;
        min-height:auto !important;
        overflow:visible !important;
        -webkit-overflow-scrolling:auto !important;
        padding:20px 16px var(--sn-mobile-bottom-space) !important;
        scroll-padding-bottom:var(--sn-mobile-bottom-space) !important;
    }

    .view,
    .view.active,
    #profileView,
    .profile-wrapper,
    .profile-body,
    .profile-panel,
    #settingsProfile,
    #creatorProfile,
    #creatorContent,
    #creatorHome,
    .creator-dashboard,
    .creator-grid,
    .creator-card,
    .creator-form,
    .creator-form-card,
    .artist-profile-editor,
    .settings-window,
    .settings-window-body{
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        overflow:visible !important;
        margin-bottom:0 !important;
    }

    .profile-body,
    #settingsProfile,
    #creatorProfile,
    #creatorContent,
    .creator-form,
    .creator-form-card,
    .artist-profile-editor,
    .settings-window-body{
        padding-bottom:var(--sn-mobile-bottom-space) !important;
    }

    .settings-actions,
    .creator-form-actions,
    .artist-profile-editor .creator-form-actions,
    .profile-panel .settings-actions,
    #settingsProfile .settings-actions,
    .profile-panel .creator-form-actions,
    #creatorProfile .creator-form-actions,
    .creator-form-card .creator-form-actions,
    .account-avatar-actions{
        position:static !important;
        top:auto !important;
        bottom:auto !important;
        left:auto !important;
        right:auto !important;
        z-index:auto !important;
        transform:none !important;
        background:transparent !important;
        padding:16px 0 22px !important;
        margin:18px 0 0 !important;
        width:100% !important;
    }

    .settings-actions button,
    .settings-actions .primary-btn,
    .creator-form-actions .primary-btn,
    .creator-form-actions .secondary-btn,
    .creator-form-actions .danger-btn,
    .account-avatar-actions .primary-btn,
    .account-avatar-actions .secondary-btn,
    .big-submit-btn,
    button[type="submit"]{
        width:100% !important;
        min-height:48px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        margin-bottom:10px !important;
    }

    /* Existing modals may keep their own scroll, but not profile/creator pages. */
    .modal.show .modal-content,
    .modal.show .settings-window{
        max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }
}


/* ==========================================
   PROFILE MENU CONTENT FIX
========================================== */
.profile-dashboard-hero,
.profile-panel-head{
    margin-bottom:22px;
}
.profile-dashboard-hero{
    padding:28px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(29,185,84,.18),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.08);
}
.profile-dashboard-hero h2,
.profile-panel-head h2{
    margin:6px 0 8px;
}
.profile-dashboard-hero p,
.profile-panel-head p{
    color:var(--muted);
    line-height:1.6;
}
.profile-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px;
    margin:22px 0;
}
.profile-stat-card{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:18px;
}
.profile-stat-card span{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:10px;
}
.profile-stat-card strong{
    font-size:28px;
}
.profile-action-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-top:20px;
}
.profile-action-grid-small{
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.profile-action-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
    text-decoration:none;
    color:#fff;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:20px;
    cursor:pointer;
    transition:.2s;
}
.profile-action-card:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.075);
    border-color:rgba(29,185,84,.45);
}
.profile-action-card i{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(29,185,84,.15);
    color:var(--accent);
    font-size:18px;
}
.profile-action-card strong{
    font-size:17px;
}
.profile-action-card span{
    color:var(--muted);
    line-height:1.5;
    font-size:14px;
}
.profile-account-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    margin-bottom:22px;
}
.profile-account-card img{
    width:86px;
    height:86px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.1);
}
.profile-account-card h3{
    margin-bottom:4px;
}
.profile-account-card p,
.profile-account-card small{
    display:block;
    color:var(--muted);
    margin-top:4px;
}
.profile-panel-toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 18px;
}
.profile-mini-list{
    display:grid;
    gap:10px;
}
.profile-mini-item,
.profile-mini-song{
    width:100%;
    border:none;
    border-radius:16px;
    background:rgba(255,255,255,.045);
    color:#fff;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}
.profile-mini-item:hover,
.profile-mini-song:hover{
    background:rgba(255,255,255,.08);
}
.profile-mini-item i{
    color:var(--accent);
}
.profile-mini-song img{
    width:54px;
    height:54px;
    object-fit:cover;
    border-radius:12px;
    background:#222;
}
.profile-mini-song span{
    flex:1;
    min-width:0;
}
.profile-mini-song strong,
.profile-mini-song small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.profile-mini-song small{
    color:var(--muted);
    margin-top:4px;
}
.profile-empty-box,
.menu-empty-state{
    padding:28px;
    border-radius:20px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}
.profile-empty-box i,
.menu-empty-state i{
    font-size:34px;
    color:var(--accent);
    margin-bottom:14px;
}
.menu-empty-state h3,
.profile-empty-box h3{
    margin-bottom:8px;
}
.menu-empty-state p,
.profile-empty-box p{
    color:var(--muted);
    line-height:1.6;
    margin-bottom:18px;
}
@media(max-width:900px){
    .profile-dashboard-hero,
    .profile-panel-head{
        padding:18px 0 0;
    }
    .profile-dashboard-hero{
        padding:20px;
    }
    .profile-stat-grid,
    .profile-action-grid{
        grid-template-columns:1fr;
    }
    .profile-account-card{
        align-items:flex-start;
    }
    .profile-account-card img{
        width:70px;
        height:70px;
    }
}