: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-create-first{
    order:0;
    border-color:rgba(29,185,84,.35);
    background:linear-gradient(135deg,rgba(29,185,84,.13),var(--panel));
}

.library-create-first .sn-kicker{
    display:block;
    margin-bottom:7px;
}

.library-last-playlist-section{
    order:2;
}

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

.library-last-playlist-card:hover{
    transform:translateY(-2px);
    border-color:rgba(29,185,84,.4);
    background:rgba(255,255,255,.075);
}

.library-last-playlist-card img{
    width:76px;
    height:76px;
    object-fit:cover;
    border-radius:14px;
    background:#222;
}

.library-last-playlist-copy{
    flex:1;
    min-width:0;
}

.library-last-playlist-copy small,
.library-last-playlist-copy strong,
.library-last-playlist-copy span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.library-last-playlist-copy small{
    color:var(--accent);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:5px;
}

.library-last-playlist-copy strong{
    font-size:21px;
}

.library-last-playlist-copy span{
    color:var(--muted);
    margin-top:6px;
}

.library-last-playlist-card > i{
    color:var(--muted);
    font-size:18px;
    padding:10px;
}

.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-last-playlist-card{
        gap:12px;
        padding:12px;
    }

    .library-last-playlist-card img{
        width:64px;
        height:64px;
        border-radius:12px;
    }

    .library-last-playlist-copy strong{
        font-size:18px;
    }

    .library-last-playlist-copy span{
        font-size:13px;
    }

    .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;
    }
}

/* ==========================================
   ALBUM SYSTEM 2.0
========================================== */

.album-card{
    text-align:left;
    overflow:hidden;
}

.album-card small{
    display:block;
    color:var(--muted);
    margin-top:4px;
}

.sn-album-profile{
    padding:8px 0 10px;
}

.sn-album-head{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:34px;
    align-items:start;
}

.sn-album-cover{
    width:100%;
    aspect-ratio:1/1;
    border-radius:24px;
    object-fit:cover;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    background:#222;
}

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

.sn-album-mini-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:14px;
}

.sn-album-mini{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.045);
    color:#fff;
    border-radius:16px;
    padding:10px;
    cursor:pointer;
    text-align:left;
    transition:.2s;
}

.sn-album-mini:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.08);
}

.sn-album-mini img{
    width:58px;
    height:58px;
    object-fit:cover;
    border-radius:12px;
    background:#222;
    flex-shrink:0;
}

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

.sn-album-mini small{
    color:var(--muted);
    margin-top:3px;
}

@media(max-width:900px){
    .sn-album-head{
        grid-template-columns:1fr;
        gap:18px;
    }

    .sn-album-cover{
        max-width:330px;
        margin:0 auto;
    }

    .sn-album-main h1{
        font-size:34px;
    }

    .sn-album-mini-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================
   PUBLIC ALBUM PAGE
========================================== */

.public-album-body{
    min-height:100vh;
    background:radial-gradient(circle at top left, rgba(29,185,84,.18), transparent 34%), linear-gradient(180deg,#08090b,#111318);
}

.public-album-page{
    max-width:1120px;
    margin:0 auto;
    padding:34px 22px 140px;
}

.public-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    padding:10px 14px;
    margin-bottom:26px;
}

.public-album-hero{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:34px;
    align-items:end;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    padding:30px;
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.public-album-cover{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:24px;
    box-shadow:0 25px 80px rgba(0,0,0,.55);
    background:#222;
}

.public-album-hero h1{
    font-size:56px;
    line-height:1.02;
    margin:10px 0;
}

.public-artist-link{
    color:var(--accent);
    text-decoration:none;
    font-weight:800;
}

.public-album-description{
    color:#d1d5db;
    line-height:1.7;
    max-width:680px;
    margin:16px 0;
}

.public-album-actions{
    margin-top:18px;
}

.public-album-actions a{
    text-decoration:none;
}

.public-album-tracklist{
    margin-top:28px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:22px;
}

.public-album-tracklist h2{
    margin-bottom:16px;
}

.public-album-track{
    display:grid;
    grid-template-columns:44px 56px 1fr 38px;
    gap:14px;
    align-items:center;
    width:100%;
    border:none;
    border-radius:16px;
    background:transparent;
    color:#fff;
    text-align:left;
    padding:10px;
    cursor:pointer;
    transition:.2s;
}

.public-album-track:hover{
    background:rgba(255,255,255,.08);
}

.public-album-track img{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:10px;
}

.public-album-track b,
.public-album-track small{
    display:block;
}

.public-album-track small,
.public-muted{
    color:var(--muted);
}

.embedded-public-profile .public-album-page{
    padding:20px;
}

.embedded-public-profile .public-back-link{
    display:none;
}

@media(max-width:900px){
    .public-album-page{
        padding:18px 14px 130px;
    }

    .public-album-hero{
        grid-template-columns:1fr;
        padding:18px;
    }

    .public-album-cover{
        max-width:330px;
        margin:0 auto;
    }

    .public-album-hero h1{
        font-size:36px;
    }

    .public-album-track{
        grid-template-columns:32px 48px 1fr 26px;
        gap:10px;
    }

    .public-album-track img{
        width:48px;
        height:48px;
    }
}

/* =========================================================
   SOUNDNATION CSS-ONLY PREMIUM LAYER v1
   Nur Optik. Keine Funktionen, kein HTML, kein JavaScript.
   ========================================================= */

:root{
    --bg:#070708;
    --panel:#121318;
    --panel2:#181a21;
    --accent:#d7b46a;
    --accent2:#f1d58a;
    --text:#ffffff;
    --muted:#a8adba;
    --border:rgba(255,255,255,.105);
    --soft-border:rgba(215,180,106,.18);
    --sn-glass:rgba(18,19,24,.72);
    --sn-card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
    --sn-gold:linear-gradient(135deg,#f4d98f,#b98a35);
    --sn-shadow:0 20px 55px rgba(0,0,0,.42);
    --sn-shadow-soft:0 12px 32px rgba(0,0,0,.28);
}

html{
    background:#070708;
}

body{
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:
        radial-gradient(circle at 16% -8%,rgba(215,180,106,.16),transparent 34%),
        radial-gradient(circle at 85% 4%,rgba(255,255,255,.07),transparent 28%),
        linear-gradient(180deg,#070708 0%,#0b0c10 48%,#070708 100%);
    color:#f7f4ec;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);
}

.sidebar{
    background:linear-gradient(180deg,rgba(15,16,20,.96),rgba(7,7,9,.98));
    border-right:1px solid rgba(215,180,106,.13);
    box-shadow:18px 0 45px rgba(0,0,0,.2);
}

.logo{
    color:#f5d98c;
    letter-spacing:-.03em;
}

.logo i{
    filter:drop-shadow(0 0 14px rgba(215,180,106,.35));
}

.nav-label,
.mobile-menu-label{
    color:rgba(245,217,140,.68) !important;
    letter-spacing:.13em;
}

.nav-link,
.mobile-menu-item{
    border:1px solid transparent;
}

.nav-link:hover,
.nav-link.active,
.mobile-menu-item:hover,
.mobile-menu-item.active{
    background:linear-gradient(135deg,rgba(215,180,106,.16),rgba(255,255,255,.055));
    border-color:rgba(215,180,106,.2);
    color:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.nav-link i,
.profile-item i,
.mobile-menu-item i{
    color:#d7b46a;
}

.topbar{
    background:rgba(10,11,14,.78);
    border-bottom:1px solid rgba(215,180,106,.12);
    box-shadow:0 10px 34px rgba(0,0,0,.2);
}

#globalSearch,
.creator-toolbar input,
.creator-toolbar select,
.form-group input,
.form-group select,
.form-group textarea,
.modal-content input,
.modal-content textarea{
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

#globalSearch:focus,
.creator-toolbar input:focus,
.creator-toolbar select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.modal-content input:focus,
.modal-content textarea:focus{
    outline:none;
    border-color:rgba(215,180,106,.48);
    box-shadow:0 0 0 4px rgba(215,180,106,.11), inset 0 1px 0 rgba(255,255,255,.04);
}

.login-btn,
.primary-btn,
.big-submit-btn,
.settings-window-body .primary-btn{
    background:linear-gradient(135deg,#f5d98c,#bd8d38) !important;
    color:#120f09 !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 12px 30px rgba(215,180,106,.18);
}

.secondary-btn,
.show-all,
.creator-link-btn,
.discover-action,
.genre-pill{
    border-color:rgba(215,180,106,.23) !important;
}

.primary-btn:hover,
.login-btn:hover,
.big-submit-btn:hover,
.settings-window-body .primary-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 38px rgba(215,180,106,.24);
}

.secondary-btn:hover,
.show-all:hover,
.creator-link-btn:hover{
    color:#f5d98c !important;
}

.hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 16%,rgba(245,217,140,.28),transparent 32%),
        linear-gradient(135deg,#141416 0%,#262016 52%,#09090b 100%);
    border:1px solid rgba(215,180,106,.18);
    box-shadow:var(--sn-shadow);
}

.hero::before{
    content:"";
    position:absolute;
    inset:-40%;
    pointer-events:none;
    background:conic-gradient(from 160deg,transparent,rgba(245,217,140,.13),transparent 28%);
    animation:snPremiumGlow 14s linear infinite;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 35%,rgba(255,255,255,.04));
}

.hero-content{
    position:relative;
    z-index:1;
}

.hero h1,
.profile-dashboard-hero h2,
.creator-hero-panel h2,
.sn-artist-main h1,
.public-album-hero h1{
    letter-spacing:-.05em;
}

.hero p,
.profile-dashboard-hero p,
.creator-hero-panel p,
.profile-panel-head p{
    color:rgba(255,255,255,.74);
}

.section-header h2,
.section-header h3,
.profile-panel-head h2{
    letter-spacing:-.03em;
}

.card,
.song-card,
.playlist-card,
.artist-card,
.album-card,
.login-required-card,
.profile-stat-card,
.profile-action-card,
.profile-account-card,
.creator-stat-card,
.creator-card,
.creator-recent-box,
.library-hero,
.library-create,
.library-section,
.public-album-hero,
.public-album-tracklist{
    background:var(--sn-card);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:var(--sn-shadow-soft);
    backdrop-filter:blur(16px);
}

.card:hover,
.song-card:hover,
.playlist-card:hover,
.artist-card:hover,
.album-card:hover,
.profile-action-card:hover,
.creator-card:hover,
.discover-action:hover,
.genre-pill:hover,
.library-song-row:hover,
.sn-mini-song:hover{
    border-color:rgba(215,180,106,.26);
    box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 0 1px rgba(215,180,106,.09) inset;
}

.song-card,
.artist-card,
.album-card,
.creator-card,
.profile-action-card,
.playlist-card{
    border-radius:22px;
}

.song-cover,
.artist-card-image,
.creator-album-cover,
.public-album-cover{
    background:linear-gradient(135deg,rgba(215,180,106,.12),rgba(255,255,255,.035));
}

.song-cover img,
.song-list-cover,
.player-left img,
.artist-card-image img,
.creator-song-cover,
.creator-mini-song img,
.library-song-row img,
.sn-song-cover,
.sn-mini-song img,
.profile-avatar,
.sn-artist-avatar{
    box-shadow:0 12px 30px rgba(0,0,0,.3);
}

.song-info h3,
.song-list-title,
.artist-card-info h3,
.creator-song-info h3,
.creator-mini-song strong,
.library-song-row strong,
.sn-mini-song strong{
    color:#fffaf0;
}

.song-info p,
.song-info small,
.song-list-artist,
.song-list-meta,
.artist-card-info p,
.artist-card-info small,
.creator-song-meta,
.creator-mini-song span,
.creator-mini-song em,
.library-song-row small,
.sn-mini-song small,
.public-muted{
    color:#aeb3c0;
}

.song-list-item,
.library-song-row,
.sn-mini-song,
.public-album-track{
    border:1px solid transparent;
}

.song-list-item:hover,
.library-song-row:hover,
.sn-mini-song:hover,
.public-album-track:hover{
    background:rgba(255,255,255,.065);
    border-color:rgba(255,255,255,.08);
}

.song-list-item.active{
    background:linear-gradient(135deg,rgba(215,180,106,.18),rgba(255,255,255,.055));
    border-left-color:#d7b46a;
}

.song-list-item.active .song-list-title{
    color:#f5d98c;
}

#player{
    background:rgba(10,11,14,.86);
    border-top:1px solid rgba(215,180,106,.16);
    box-shadow:0 -18px 60px rgba(0,0,0,.5);
    backdrop-filter:blur(22px);
}

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

#playerCover{
    border:1px solid rgba(215,180,106,.22);
}

#playerCover:hover,
.player-meta:hover{
    filter:brightness(1.08);
}

#playerTitle{
    color:#fffaf0;
    font-weight:800;
}

#playerArtist{
    color:#b8bfcc;
}

.player-controls button,
.player-like-btn,
.icon-btn,
.song-list-menu,
.sn-action,
#snClose,
#mobileMenuClose{
    transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.player-controls button:hover,
.player-like-btn:hover,
.icon-btn:hover,
.song-list-menu:hover,
#snClose:hover,
#mobileMenuClose:hover{
    background:rgba(215,180,106,.14);
    color:#f5d98c;
    transform:translateY(-1px);
}

#playBtn{
    background:linear-gradient(135deg,#f5d98c,#bd8d38);
    color:#120f09;
    border-radius:999px;
    box-shadow:0 12px 28px rgba(215,180,106,.22);
}

#progress,
#volumeSlider,
#seekBar{
    accent-color:#d7b46a;
}

.mobile-nav{
    background:rgba(10,11,14,.92);
    border-top:1px solid rgba(215,180,106,.14);
    backdrop-filter:blur(20px);
}

.mobile-nav button{
    color:#c7cad3;
}

.mobile-nav button.active,
.mobile-nav button:hover{
    color:#f5d98c;
}

.mobile-menu-panel,
.modal-content,
.sn-container,
.settings-window{
    background:linear-gradient(180deg,rgba(27,29,36,.98),rgba(14,15,19,.98));
    border:1px solid rgba(215,180,106,.16);
    box-shadow:var(--sn-shadow);
}

.sn-overlay,
.modal{
    backdrop-filter:blur(10px);
}

.sn-song-cover{
    border:1px solid rgba(215,180,106,.22);
}

.sn-kicker,
.creator-kicker,
.show-all,
.sn-artist-chip,
.chart-rank{
    color:#f5d98c !important;
}

.sn-action{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.09);
}

.sn-action:hover{
    background:rgba(215,180,106,.16);
    border-color:rgba(215,180,106,.26);
}

.profile-header,
.profile-dashboard-hero,
.creator-hero-panel{
    background:
        radial-gradient(circle at 18% 20%,rgba(215,180,106,.18),transparent 32%),
        linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    border:1px solid rgba(215,180,106,.14);
    box-shadow:var(--sn-shadow-soft);
}

.profile-banner{
    background:
        radial-gradient(circle at 18% 16%,rgba(245,217,140,.2),transparent 26%),
        linear-gradient(135deg,#191512,#2c2418 45%,#0d0e12);
}

.profile-sidebar{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.075);
    box-shadow:var(--sn-shadow-soft);
}

.profile-item{
    border:1px solid transparent;
}

.profile-item:hover,
.profile-item.active{
    background:linear-gradient(135deg,rgba(215,180,106,.16),rgba(255,255,255,.045));
    border-color:rgba(215,180,106,.2);
}

.profile-stat-card strong,
.creator-stat-card strong,
.library-stats strong{
    color:#f5d98c;
}

.discover-action,
.genre-pill{
    background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}

.creator-card i,
.discover-action i,
.login-required-card i,
.library-section-head i,
.playlist-icon{
    color:#f5d98c;
    filter:drop-shadow(0 0 14px rgba(215,180,106,.22));
}

.auth-tabs button.active{
    background:linear-gradient(135deg,#f5d98c,#bd8d38);
    color:#120f09;
}

.auth-small-link a,
.modal-content a{
    color:#f5d98c;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:rgba(255,255,255,.035);
}

::-webkit-scrollbar-thumb{
    background:rgba(215,180,106,.32);
    border-radius:999px;
    border:2px solid rgba(0,0,0,.24);
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(215,180,106,.5);
}

@keyframes snPremiumGlow{
    to{transform:rotate(1turn)}
}

@media(max-width:900px){
    #content{
        padding:20px 14px 190px;
    }

    .hero{
        border-radius:24px;
    }

    .hero h1{
        font-size:38px;
        line-height:1.02;
    }

    .section-header{
        gap:12px;
    }

    .song-card,
    .artist-card,
    .album-card,
    .creator-card,
    .profile-action-card,
    .playlist-card{
        border-radius:18px;
    }

    #player{
        min-height:92px;
    }

    .player-center{
        gap:8px;
    }

    .mobile-menu-panel{
        border-radius:26px 26px 0 0;
    }
}


/* ==========================================
   HOME: NEUE RELEASES MOBILE 2ER GRID
   Nur der Startseiten-Bereich "Neue Releases".
   Erzwingt auf Smartphones immer 2 Kacheln nebeneinander.
========================================== */
@media(max-width:900px){
    #latestSongs{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    #latestSongs .song-card{
        min-width:0;
        width:100%;
    }

    #latestSongs .song-info{
        padding:10px;
    }

    #latestSongs .song-info h3{
        font-size:13px;
        line-height:1.2;
        margin-bottom:4px;
    }

    #latestSongs .song-info p,
    #latestSongs .song-info small{
        font-size:11px;
        line-height:1.25;
    }
}


/* ==========================================
   HOME: NEUE KÜNSTLER + NEUE ALBEN MOBILE 2ER GRID
   Nur Startseite. Erzwingt auf Smartphones 2 Kacheln nebeneinander.
========================================== */
@media(max-width:900px){
    #latestArtists,
    #latestAlbums{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    #latestArtists .artist-card,
    #latestAlbums .album-card{
        min-width:0;
        width:100%;
        padding:10px !important;
        border-radius:16px !important;
    }

    #latestArtists .artist-card-image{
        margin-bottom:10px;
    }

    #latestArtists .artist-card-info h3,
    #latestAlbums .menu-card-info h3,
    #latestAlbums .album-card h3{
        font-size:13px;
        line-height:1.2;
        margin-bottom:4px;
    }

    #latestArtists .artist-card-info p,
    #latestArtists .artist-card-info small,
    #latestAlbums .menu-card-info p,
    #latestAlbums .menu-card-info small,
    #latestAlbums .album-card p,
    #latestAlbums .album-card small{
        font-size:11px;
        line-height:1.25;
    }

    #latestAlbums .menu-card img,
    #latestAlbums .album-card img{
        width:100%;
        aspect-ratio:1/1;
        object-fit:cover;
    }
}

/* ==========================================
   PATCH: TOPBAR LOGIN/LOGOUT + ALLE SONGS OPTIK
   Nur CSS. Keine Funktionen/JS/PHP.
========================================== */
.user-box{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:max-content;
}

.topbar .login-btn{
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:0 16px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045)) !important;
    color:#fff7df !important;
    border:1px solid rgba(215,180,106,.32) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
    font-size:14px;
    font-weight:800;
    letter-spacing:.01em;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
}

.topbar .login-btn i{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#14110b;
    background:linear-gradient(135deg,#f5d98c,#bd8d38);
    box-shadow:0 8px 18px rgba(215,180,106,.2);
    font-size:13px;
}

.topbar .login-btn[href*="logout"]{
    color:#ffe8e8 !important;
    border-color:rgba(255,115,115,.25) !important;
    background:linear-gradient(135deg,rgba(255,95,95,.12),rgba(255,255,255,.045)) !important;
}

.topbar .login-btn[href*="logout"] i{
    background:linear-gradient(135deg,#ffb1b1,#d96b6b);
    color:#180909;
}

.topbar .login-btn:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(245,217,140,.52) !important;
    background:linear-gradient(135deg,rgba(245,217,140,.18),rgba(255,255,255,.07)) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 0 3px rgba(215,180,106,.08) !important;
}

#songsView .section-header{
    padding:18px 20px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(215,180,106,.12),rgba(255,255,255,.035));
    border:1px solid rgba(215,180,106,.15);
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}

#songsView .section-header h2{
    margin:0;
    font-size:clamp(22px,3vw,34px);
    color:#fff7df;
}

#songsView #songsGrid{
    align-items:stretch;
}

#songsView #songsGrid .song-list-item{
    min-height:96px;
    padding:14px;
    border-radius:20px;
    background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    backdrop-filter:blur(14px);
}

#songsView #songsGrid .song-list-item:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,rgba(215,180,106,.14),rgba(255,255,255,.05));
    border-color:rgba(215,180,106,.26);
    box-shadow:0 20px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

#songsView #songsGrid .song-list-cover{
    width:68px;
    height:68px;
    border-radius:16px;
}

#songsView #songsGrid .song-list-title{
    font-size:16px;
    color:#fffaf0;
}

.artist-inline-link,
button.song-list-artist,
#songsView #songsGrid button.song-list-artist{
    appearance:none;
    -webkit-appearance:none;
    display:inline-block;
    width:auto;
    max-width:100%;
    padding:0;
    margin:4px 0 0;
    border:0 !important;
    outline:0;
    background:transparent !important;
    box-shadow:none !important;
    color:#d7b46a !important;
    font:inherit;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
    text-align:left;
    cursor:pointer;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.artist-inline-link:hover,
button.song-list-artist:hover,
#songsView #songsGrid button.song-list-artist:hover{
    color:#f5d98c !important;
    text-decoration:underline;
    text-underline-offset:3px;
    transform:none !important;
}

#songsView #songsGrid .song-list-meta{
    color:rgba(255,255,255,.55);
}

#songsView #songsGrid .song-list-add{
    border-radius:14px;
    background:rgba(215,180,106,.12);
    border:1px solid rgba(215,180,106,.18);
    color:#f5d98c;
}

@media(max-width:700px){
    .topbar{
        gap:10px;
    }

    .topbar .login-btn{
        min-height:38px;
        padding:0 11px !important;
        font-size:0;
    }

    .topbar .login-btn i{
        width:28px;
        height:28px;
        margin:0;
    }

    #songsView .section-header{
        padding:14px 15px;
        border-radius:20px;
    }

    #songsView #songsGrid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    #songsView #songsGrid .song-list-item{
        min-height:82px;
        padding:11px;
        border-radius:17px;
    }

    #songsView #songsGrid .song-list-cover{
        width:58px;
        height:58px;
        border-radius:14px;
    }

    #songsView #songsGrid .song-list-title{
        font-size:15px;
    }

    .artist-inline-link,
    button.song-list-artist,
    #songsView #songsGrid button.song-list-artist{
        font-size:13px;
    }
}

/* =========================================================
   SoundNation Patch: Startseite "Alle anzeigen" Buttons
   Nur Optik, keine Funktionen.
   ========================================================= */
.section-header .show-all,
.home-section .show-all,
.show-all[data-view]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:34px !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,rgba(245,217,140,.16),rgba(189,141,56,.08)) !important;
    border:1px solid rgba(245,217,140,.32) !important;
    color:#f5d98c !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    cursor:pointer !important;
    user-select:none !important;
    touch-action:manipulation !important;
    box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.section-header .show-all::after,
.home-section .show-all::after,
.show-all[data-view]::after{
    content:"›";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(245,217,140,.16);
    color:#fff3c4;
    font-size:1rem;
    line-height:1;
    transform:translateY(-1px);
}

.section-header .show-all:hover,
.home-section .show-all:hover,
.show-all[data-view]:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(245,217,140,.58) !important;
    background:linear-gradient(135deg,rgba(245,217,140,.24),rgba(189,141,56,.13)) !important;
    box-shadow:0 16px 32px rgba(215,180,106,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.section-header .show-all:active,
.home-section .show-all:active,
.show-all[data-view]:active{
    transform:translateY(0) scale(.98) !important;
}

@media (max-width:560px){
    .section-header{
        gap:12px !important;
    }

    .section-header .show-all,
    .home-section .show-all,
    .show-all[data-view]{
        min-height:32px !important;
        padding:7px 10px !important;
        font-size:.72rem !important;
        gap:6px !important;
    }

    .section-header .show-all::after,
    .home-section .show-all::after,
    .show-all[data-view]::after{
        width:16px;
        height:16px;
        font-size:.9rem;
    }
}

/* =========================================================
   SoundNation Patch: Admin-Button in Topbar kompakt ausrichten
   Nur CSS. Keine Funktionen/JS/PHP.
   ========================================================= */
.topbar{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
}

#globalSearch{
    min-width:0 !important;
    width:100% !important;
}

.user-box{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    max-width:max-content !important;
}

/* Admin-Button nur als kompaktes Icon, damit nichts nach links verschoben wird */
.topbar .login-btn[href*="admin"]{
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    gap:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    overflow:hidden !important;
}

.topbar .login-btn[href*="admin"] i{
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    flex:0 0 30px !important;
    font-size:13px !important;
}

@media(max-width:700px){
    .topbar{
        grid-template-columns:auto minmax(0,1fr) auto !important;
        gap:8px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .user-box{
        gap:6px !important;
    }

    .topbar .login-btn[href*="admin"],
    .topbar .login-btn[href*="logout"],
    .topbar .login-btn#openLogin,
    .topbar button.login-btn{
        width:38px !important;
        min-width:38px !important;
        max-width:38px !important;
        height:38px !important;
        min-height:38px !important;
        padding:0 !important;
        font-size:0 !important;
    }

    .topbar .login-btn i{
        width:28px !important;
        height:28px !important;
        flex:0 0 28px !important;
    }
}

/* =========================================================
   SONGDETAILS PREMIUM v2
   Nur Song-Overlay. Keine Player- oder API-Logik.
   ========================================================= */

.sn-song-detail-v2{
    display:block;
}

.sn-song-detail-v2 .sn-song-hero{
    display:grid;
    grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    gap:42px;
    align-items:start;
}

.sn-song-detail-v2 .sn-song-left{
    width:100%;
    position:sticky;
    top:16px;
}

.sn-song-cover-shell{
    position:relative;
    isolation:isolate;
}

.sn-song-cover-shell::before{
    content:"";
    position:absolute;
    inset:8% 8% -6%;
    z-index:-2;
    border-radius:30px;
    background:var(--accent);
    opacity:.18;
    filter:blur(34px);
}

.sn-song-detail-v2 .sn-song-cover{
    position:relative;
    z-index:2;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 28px 80px rgba(0,0,0,.55);
}

.sn-song-cover-glow{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 35%,rgba(215,180,106,.08));
}

.sn-song-detail-v2 .sn-song-info{
    padding-top:2px;
}

.sn-song-detail-v2 .sn-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(215,180,106,.1);
    border:1px solid rgba(215,180,106,.2);
}

.sn-song-detail-v2 .sn-song-info h1{
    margin-top:16px;
    font-size:clamp(36px,5vw,58px);
    letter-spacing:-.035em;
    text-wrap:balance;
}

.sn-song-detail-v2 .sn-artist{
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    color:var(--accent2,var(--accent));
}

.sn-song-meta-grid{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:2px 0 20px;
}

.sn-song-meta-chip{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 11px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
    color:#d9dbe2;
    font:inherit;
    font-size:13px;
    line-height:1;
}

button.sn-song-meta-chip{
    cursor:pointer;
}

.sn-song-meta-chip i{
    color:var(--accent);
}

.sn-song-meta-link:hover{
    border-color:rgba(215,180,106,.35);
    background:rgba(215,180,106,.1);
    color:#fff;
}

.sn-description-panel{
    padding:17px 18px;
    border-radius:17px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}

.sn-description-panel > span{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.sn-description-panel .sn-description{
    margin:0;
    color:#bfc3cd;
}

.sn-song-detail-v2 .sn-actions{
    margin:20px 0 0;
}

.sn-song-detail-v2 .sn-action{
    border:1px solid rgba(255,255,255,.08);
    transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.sn-song-detail-v2 .sn-action:hover{
    transform:translateY(-2px);
    border-color:rgba(215,180,106,.28);
}

.sn-song-detail-v2 .sn-action-primary{
    color:#15110a;
    background:var(--sn-gold,linear-gradient(135deg,#f4d98f,#b98a35));
    border-color:transparent;
    box-shadow:0 10px 28px rgba(185,138,53,.22);
}

.sn-song-detail-v2 .sn-action-primary:hover{
    background:var(--sn-gold,linear-gradient(135deg,#f4d98f,#b98a35));
    filter:brightness(1.06);
}

.sn-song-detail-v2 .sn-action.active{
    color:#ffd9df;
    border-color:rgba(255,92,120,.26);
    background:rgba(255,92,120,.12);
}

.sn-song-detail-v2 .sn-action-danger{
    color:#c9cbd2;
}

.sn-song-detail-v2 .sn-action-danger:hover{
    color:#ffb4bf;
    border-color:rgba(255,92,120,.28);
    background:rgba(255,92,120,.08);
}

.sn-song-related{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
}

.sn-song-related:empty{
    display:none;
}

.sn-song-related .sn-list-block{
    margin-top:0;
    min-width:0;
    padding:17px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.075);
    background:rgba(255,255,255,.025);
}

.sn-song-related .sn-list-block h3{
    font-size:16px;
}

.sn-song-related .sn-mini-song{
    border:1px solid transparent;
}

.sn-song-related .sn-mini-song:hover{
    border-color:rgba(215,180,106,.2);
    background:rgba(215,180,106,.075);
}

@media(max-width:900px){

    .sn-song-detail-v2 .sn-song-hero{
        grid-template-columns:1fr;
        gap:19px;
    }

    .sn-song-detail-v2 .sn-song-left{
        position:static;
    }

    .sn-song-detail-v2 .sn-song-cover-shell{
        width:min(100%,340px);
        margin:0 auto;
    }

    .sn-song-detail-v2 .sn-song-info h1{
        margin-top:13px;
        font-size:clamp(29px,9vw,40px);
    }

    .sn-song-meta-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sn-song-meta-chip{
        width:100%;
        min-width:0;
        justify-content:flex-start;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .sn-song-detail-v2 .sn-actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .sn-song-detail-v2 .sn-action{
        width:100%;
        min-width:0;
        justify-content:center;
        padding:12px 10px;
        font-size:13px;
    }

    .sn-song-related{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:25px;
        padding-top:22px;
    }

    .sn-song-related .sn-list-block{
        padding:14px;
    }
}

@media(max-width:390px){
    .sn-song-meta-grid{
        grid-template-columns:1fr;
    }
}

/* Album track order */
.sn-album-track-list .sn-mini-song{
    display:grid;
    grid-template-columns:34px 54px minmax(0,1fr) 24px;
}

.sn-track-number,
.public-album-track-number{
    color:#1db954;
    font-variant-numeric:tabular-nums;
    text-align:center;
}

.sn-album-track-list .sn-mini-song > i{
    color:#aeb4bf;
}

.public-album-track-number{
    width:32px;
    flex:0 0 32px;
}

/* =========================================================
   Suche, Filter, Charts und Entdecken
   ========================================================= */
.global-search-wrap{
    position:relative;
    width:100%;
    min-width:0;
}

.global-search-wrap #globalSearch{
    padding-right:48px !important;
}

.global-search-clear{
    position:absolute;
    top:50%;
    right:9px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#aeb4bf;
    opacity:0;
    pointer-events:none;
    cursor:pointer;
    transform:translateY(-50%) scale(.85);
    transition:.18s ease;
}

.global-search-clear.visible{
    opacity:1;
    pointer-events:auto;
    transform:translateY(-50%) scale(1);
}

.global-search-clear:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.sn-kicker{
    display:block;
    margin-bottom:7px;
    color:#d7b46a;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.section-subline,
.search-results-head p,
.discover-page-head p,
.charts-page-head p{
    margin-top:6px;
    color:#9da3ae;
    line-height:1.55;
}

.discover-page-head,
.search-results-head,
.charts-page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
    padding:25px;
    border:1px solid rgba(215,180,106,.14);
    border-radius:24px;
    background:
        radial-gradient(circle at 88% 12%,rgba(215,180,106,.14),transparent 32%),
        linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    box-shadow:0 18px 50px rgba(0,0,0,.2);
}

.discover-page-head h2,
.search-results-head h2,
.charts-page-head h2{
    margin:0;
    font-size:clamp(27px,4vw,42px);
}

.discover-page-head .secondary-btn{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    padding:12px 18px;
    border-radius:14px;
    background:rgba(255,255,255,.035);
}

.discover-block{
    margin-bottom:34px;
}

.catalog-toolbar{
    display:grid;
    grid-template-columns:minmax(220px,1.45fr) repeat(4,minmax(145px,.72fr)) auto;
    gap:10px;
    margin:0 0 22px;
    padding:14px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    background:rgba(255,255,255,.025);
}

.catalog-toolbar input,
.catalog-toolbar select{
    width:100%;
    min-width:0;
    height:45px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:#17191f;
    color:#fff;
    outline:none;
}

.catalog-toolbar input:focus,
.catalog-toolbar select:focus{
    border-color:rgba(215,180,106,.48);
    box-shadow:0 0 0 3px rgba(215,180,106,.1);
}

.catalog-toolbar select option{
    background:#17191f;
    color:#fff;
}

.catalog-search-field{
    position:relative;
    display:block;
}

.catalog-search-field i{
    position:absolute;
    left:14px;
    top:50%;
    z-index:1;
    color:#8e949f;
    transform:translateY(-50%);
}

.catalog-search-field input{
    padding-left:39px;
}

.filter-reset-btn{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 16px;
    border:1px solid rgba(215,180,106,.2);
    border-radius:12px;
    background:rgba(215,180,106,.07);
    color:#e7d4a4;
    white-space:nowrap;
    cursor:pointer;
    transition:.18s ease;
}

.filter-reset-btn:hover{
    background:rgba(215,180,106,.13);
    border-color:rgba(215,180,106,.38);
}

.search-result-section{
    margin-bottom:34px;
}

.search-result-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.result-count{
    min-width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0 9px;
    border:1px solid rgba(215,180,106,.22);
    border-radius:999px;
    background:rgba(215,180,106,.08);
    color:#ead7a4;
    font-size:13px;
    font-weight:800;
}

.search-empty-inline{
    grid-column:1/-1;
    padding:18px;
    border:1px dashed rgba(255,255,255,.1);
    border-radius:16px;
    color:#8f96a3;
    text-align:center;
}

.search-artist-card{
    min-width:0;
}

.chart-mode-switch{
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(0,0,0,.22);
}

.chart-mode-btn{
    min-height:39px;
    padding:0 15px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#aeb4bf;
    font-weight:750;
    cursor:pointer;
    transition:.18s ease;
}

.chart-mode-btn:hover{
    color:#fff;
    background:rgba(255,255,255,.05);
}

.chart-mode-btn.active{
    background:linear-gradient(135deg,#f5d98c,#bd8d38);
    color:#141008;
    box-shadow:0 8px 22px rgba(215,180,106,.18);
}

.chart-list{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.chart-row{
    display:grid;
    grid-template-columns:46px 62px minmax(0,1fr) minmax(210px,auto) 42px;
    align-items:center;
    gap:14px;
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:rgba(255,255,255,.026);
    cursor:pointer;
    transition:.18s ease;
}

.chart-row:hover{
    border-color:rgba(215,180,106,.22);
    background:rgba(215,180,106,.055);
    transform:translateX(3px);
}

.chart-position{
    color:#777f8d;
    font-size:18px;
    font-weight:900;
    text-align:center;
    font-variant-numeric:tabular-nums;
}

.chart-position-1{color:#f3d67d}
.chart-position-2{color:#ced5df}
.chart-position-3{color:#c78d5d}

.chart-row > img{
    width:62px;
    height:62px;
    border-radius:12px;
    object-fit:cover;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.chart-song-main{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.chart-song-main strong{
    overflow:hidden;
    color:#fff;
    font-size:15px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chart-song-main button{
    width:max-content;
    max-width:100%;
    padding:0;
    overflow:hidden;
    border:0;
    background:transparent;
    color:#d7b46a;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}

.chart-song-main small{
    overflow:hidden;
    color:#858d99;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chart-metrics{
    display:flex;
    justify-content:flex-end;
    gap:16px;
    color:#aeb4bf;
    font-size:12px;
}

.chart-metrics span{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.chart-metrics i{
    color:#d7b46a;
}

.chart-play{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(215,180,106,.2);
    border-radius:50%;
    background:rgba(215,180,106,.08);
    color:#ecd69d;
    cursor:pointer;
}

#discoverView .card-row,
#searchView .card-row{
    grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
}

@media(max-width:1200px){
    .catalog-toolbar{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .catalog-search-field{
        grid-column:span 2;
    }
}

@media(max-width:900px){
    .discover-page-head,
    .search-results-head,
    .charts-page-head{
        flex-direction:column;
        padding:20px;
        border-radius:20px;
    }

    .discover-page-head .secondary-btn{
        width:100%;
        justify-content:center;
    }

    .catalog-toolbar{
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:11px;
    }

    .catalog-search-field{
        grid-column:1/-1;
    }

    .filter-reset-btn{
        grid-column:1/-1;
    }

    .chart-mode-switch{
        width:100%;
        overflow-x:auto;
    }

    .chart-mode-btn{
        flex:1 0 auto;
    }

    .chart-row{
        grid-template-columns:34px 54px minmax(0,1fr) 38px;
        gap:10px;
        padding:10px;
    }

    .chart-row > img{
        width:54px;
        height:54px;
    }

    .chart-metrics{
        grid-column:3/5;
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:8px 13px;
        padding-top:2px;
    }

    .chart-play{
        grid-column:4;
        grid-row:1;
    }
}

@media(max-width:560px){
    .global-search-wrap #globalSearch{
        padding-left:13px !important;
        padding-right:42px !important;
        font-size:13px;
    }

    .catalog-toolbar{
        grid-template-columns:1fr;
    }

    .catalog-search-field,
    .filter-reset-btn{
        grid-column:1;
    }

    .chart-row{
        grid-template-columns:28px 50px minmax(0,1fr) 34px;
        gap:8px;
    }

    .chart-row > img{
        width:50px;
        height:50px;
        border-radius:10px;
    }

    .chart-position{
        font-size:15px;
    }

    .chart-play{
        width:34px;
        height:34px;
    }

    .chart-metrics{
        grid-column:2/5;
        padding-left:36px;
        font-size:11px;
    }
}

/* ==========================================
   PLAYER 3.0: WARTESCHLANGE / FORTSETZEN
========================================== */

.player-queue-source{
    display:block;
    max-width:220px;
    margin-top:3px;
    padding:0;
    border:0;
    background:transparent;
    color:rgba(245,217,140,.78);
    font:inherit;
    font-size:11px;
    line-height:1.25;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    cursor:pointer;
}

.player-queue-source:hover{
    color:#f5d98c;
    text-decoration:underline;
    text-underline-offset:3px;
}

.player-queue-btn{
    position:relative;
}

.queue-count-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#d7b46a;
    color:#120f09;
    font-size:9px;
    font-weight:900;
    line-height:1;
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.queue-count-badge.show{
    display:flex;
}

.queue-backdrop{
    position:fixed;
    inset:0;
    z-index:11990;
    background:rgba(0,0,0,.58);
    opacity:0;
    transition:opacity .24s ease;
    backdrop-filter:blur(5px);
}

.queue-backdrop.show{
    opacity:1;
}

.queue-panel{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:12000;
    width:min(430px,92vw);
    padding:24px 20px 30px;
    display:flex;
    flex-direction:column;
    gap:18px;
    background:
        radial-gradient(circle at 18% 0,rgba(215,180,106,.15),transparent 34%),
        linear-gradient(180deg,rgba(26,28,34,.99),rgba(11,12,16,.995));
    border-left:1px solid rgba(215,180,106,.2);
    box-shadow:-28px 0 80px rgba(0,0,0,.55);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .28s ease,visibility .28s ease;
}

.queue-panel.show{
    transform:translateX(0);
    visibility:visible;
}

.queue-panel-handle{
    display:none;
}

.queue-panel-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.queue-panel-head h2{
    margin:4px 0 3px;
    font-size:29px;
    letter-spacing:-.03em;
}

.queue-panel-head p{
    margin:0;
    color:#aeb3c0;
    font-size:13px;
}

.queue-close-btn{
    width:42px;
    height:42px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.055);
    color:#fff;
    cursor:pointer;
}

.queue-close-btn:hover{
    background:rgba(215,180,106,.15);
    color:#f5d98c;
}

.queue-settings{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.queue-setting-btn{
    min-width:0;
    min-height:58px;
    padding:9px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.045);
    color:#c6cad3;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
}

.queue-setting-btn i{
    font-size:15px;
}

.queue-setting-btn.active{
    border-color:rgba(215,180,106,.35);
    background:rgba(215,180,106,.13);
    color:#f5d98c;
    box-shadow:0 0 22px rgba(215,180,106,.09);
}

.queue-section-label{
    display:block;
    margin-bottom:8px;
    color:#9ca2af;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.queue-current-song,
.queue-song-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:rgba(255,255,255,.045);
}

.queue-current-song{
    padding:10px;
    color:#fff;
    cursor:pointer;
    text-align:left;
}

.queue-current-song img,
.queue-song-main img{
    width:52px;
    height:52px;
    flex:0 0 auto;
    border-radius:12px;
    object-fit:cover;
    background:#17181d;
    border:1px solid rgba(215,180,106,.15);
}

.queue-current-song span,
.queue-song-main span{
    min-width:0;
    flex:1;
}

.queue-current-song strong,
.queue-current-song small,
.queue-song-main strong,
.queue-song-main small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.queue-current-song strong,
.queue-song-main strong{
    color:#fffaf0;
    font-size:14px;
}

.queue-current-song small,
.queue-song-main small{
    margin-top:4px;
    color:#aeb3c0;
    font-size:12px;
}

.queue-current-song > i{
    padding:0 8px;
    color:#f5d98c;
}

.queue-list-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
}

.queue-list-head strong,
.queue-list-head small{
    display:block;
}

.queue-list-head small{
    margin-top:3px;
    color:#8d94a2;
    font-size:11px;
}

.queue-clear-btn{
    border:0;
    background:transparent;
    color:#f5d98c;
    font-weight:800;
    cursor:pointer;
}

.queue-clear-btn:disabled{
    opacity:.35;
    cursor:default;
}

.queue-list{
    min-height:0;
    flex:1;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-right:3px;
}

.queue-song-row{
    padding:7px;
    cursor:grab;
    transition:background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;
}

.queue-song-row:active{
    cursor:grabbing;
}

.queue-song-row.dragging{
    opacity:.45;
}

.queue-song-row.drag-over{
    transform:translateY(2px);
    border-color:rgba(215,180,106,.45);
    background:rgba(215,180,106,.1);
}

.queue-song-main{
    min-width:0;
    flex:1;
    padding:0;
    display:flex;
    align-items:center;
    gap:10px;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
}

.queue-song-main img{
    width:44px;
    height:44px;
    border-radius:10px;
}

.queue-song-actions{
    display:flex;
    gap:3px;
}

.queue-song-actions button{
    width:29px;
    height:29px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#9fa5b2;
    cursor:pointer;
}

.queue-song-actions button:hover:not(:disabled){
    background:rgba(215,180,106,.13);
    color:#f5d98c;
}

.queue-song-actions button:disabled{
    opacity:.22;
    cursor:default;
}

.queue-empty-state,
.queue-empty-list{
    padding:22px 14px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:17px;
    background:rgba(255,255,255,.025);
    color:#9fa5b2;
    text-align:center;
}

.queue-empty-state i,
.queue-empty-state strong,
.queue-empty-state small{
    display:block;
}

.queue-empty-state i{
    margin-bottom:10px;
    color:#f5d98c;
    font-size:24px;
}

.queue-empty-state strong{
    color:#fff;
}

.queue-empty-state small{
    margin-top:5px;
}

.queue-status{
    min-height:18px;
    color:#f5d98c;
    font-size:12px;
    text-align:center;
    opacity:0;
    transition:opacity .2s ease;
}

.queue-status.show{
    opacity:1;
}

.song-list-next{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    color:#bec3cd;
    cursor:pointer;
}

.song-list-next:hover{
    border-color:rgba(215,180,106,.25);
    background:rgba(215,180,106,.12);
    color:#f5d98c;
}

body.queue-panel-open{
    overflow:hidden;
}

@media(max-width:900px){
    .player-queue-source{
        max-width:39vw;
        font-size:10px;
    }

    .queue-panel{
        top:auto;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        max-height:min(78dvh,720px);
        padding:12px 14px calc(20px + env(safe-area-inset-bottom));
        border-left:0;
        border-top:1px solid rgba(215,180,106,.2);
        border-radius:26px 26px 0 0;
        transform:translateY(105%);
        box-shadow:0 -28px 80px rgba(0,0,0,.58);
    }

    .queue-panel.show{
        transform:translateY(0);
    }

    .queue-panel-handle{
        display:block;
        width:44px;
        height:5px;
        margin:0 auto 2px;
        border-radius:999px;
        background:rgba(255,255,255,.2);
    }

    .queue-panel-head h2{
        font-size:24px;
    }

    .queue-settings{
        gap:6px;
    }

    .queue-setting-btn{
        min-height:52px;
        font-size:10px;
    }

    .queue-song-row{
        cursor:default;
    }

    .queue-song-row[draggable="true"]{
        -webkit-user-drag:none;
    }

    .song-list-next{
        width:34px;
        height:34px;
    }
}

@media(max-width:560px){
    #songsView #songsGrid .song-list-item{
        gap:8px;
    }

    #songsView #songsGrid .song-list-add,
    #songsView #songsGrid .song-list-next,
    #songsView #songsGrid .song-list-menu{
        width:32px;
        height:32px;
        border-radius:11px;
        font-size:12px;
    }

    .queue-song-actions button{
        width:31px;
        height:31px;
    }
}


/* =========================================================
   Mobiler Player: sichtbarer, touchfreundlicher Suchbalken
   ========================================================= */
@media(max-width:900px){
    #player{
        height:126px !important;
        padding:8px 12px 10px !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-rows:minmax(0,1fr) 34px !important;
        column-gap:10px !important;
        row-gap:2px !important;
        align-items:center !important;
    }

    #player .player-left{
        grid-column:1;
        grid-row:1;
        min-width:0;
    }

    #player .player-center{
        display:contents !important;
    }

    #player .player-controls{
        grid-column:2;
        grid-row:1;
        align-self:center;
        gap:7px;
    }

    #player .player-progress{
        grid-column:1 / -1;
        grid-row:2;
        display:grid !important;
        grid-template-columns:38px minmax(0,1fr) 38px;
        gap:8px;
        align-items:center;
        width:100%;
        min-width:0;
        font-size:11px;
        font-variant-numeric:tabular-nums;
        color:rgba(255,255,255,.72);
    }

    #player #currentTime{
        text-align:left;
    }

    #player #duration{
        text-align:right;
    }

    #player #progress{
        --seek-progress:0%;
        width:100%;
        height:32px;
        margin:0;
        padding:0;
        border:0;
        outline:none;
        background:transparent;
        cursor:pointer;
        touch-action:pan-x;
        -webkit-appearance:none;
        appearance:none;
    }

    #player #progress::-webkit-slider-runnable-track{
        width:100%;
        height:6px;
        border-radius:999px;
        background:linear-gradient(90deg,
            #f5d98c 0%,
            #d7b46a var(--seek-progress),
            rgba(255,255,255,.18) var(--seek-progress),
            rgba(255,255,255,.18) 100%);
        box-shadow:inset 0 1px 2px rgba(0,0,0,.38);
    }

    #player #progress::-webkit-slider-thumb{
        width:20px;
        height:20px;
        margin-top:-7px;
        border:2px solid #fff7dd;
        border-radius:50%;
        background:#d7b46a;
        box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 0 5px rgba(215,180,106,.12);
        -webkit-appearance:none;
        appearance:none;
    }

    #player #progress::-moz-range-track{
        width:100%;
        height:6px;
        border:0;
        border-radius:999px;
        background:rgba(255,255,255,.18);
        box-shadow:inset 0 1px 2px rgba(0,0,0,.38);
    }

    #player #progress::-moz-range-progress{
        height:6px;
        border-radius:999px;
        background:linear-gradient(90deg,#f5d98c,#d7b46a);
    }

    #player #progress::-moz-range-thumb{
        width:18px;
        height:18px;
        border:2px solid #fff7dd;
        border-radius:50%;
        background:#d7b46a;
        box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 0 5px rgba(215,180,106,.12);
    }

    #player #progress:focus-visible::-webkit-slider-thumb{
        box-shadow:0 3px 12px rgba(0,0,0,.5), 0 0 0 7px rgba(215,180,106,.28);
    }

    .mobile-nav{
        bottom:126px !important;
    }

    .app{
        height:calc(100vh - 186px) !important;
        height:calc(100dvh - 186px) !important;
    }
}

@media(max-width:560px){
    #player{
        height:122px !important;
        grid-template-rows:minmax(0,1fr) 32px !important;
    }

    #player .player-controls{
        gap:5px;
    }

    #player .player-controls button{
        width:30px;
        height:30px;
    }

    #player #playBtn{
        width:38px;
        height:38px;
    }

    #player .player-progress{
        grid-template-columns:34px minmax(0,1fr) 34px;
        gap:6px;
        font-size:10px;
    }

    .mobile-nav{
        bottom:122px !important;
    }

    .app{
        height:calc(100vh - 182px) !important;
        height:calc(100dvh - 182px) !important;
    }
}


/* ==========================================
   PLAYLIST PICKER – MOBILE POSITION & LEGIBILITY
========================================== */
#playlistModal{
    z-index:100250;
}

.playlist-modal-content{
    width:min(520px, calc(100% - 24px));
}

.closePlaylistModal{
    position:absolute;
    top:10px;
    right:14px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}

#playlistList{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:min(42vh, 380px);
    overflow-y:auto;
    margin-bottom:18px;
    padding-right:3px;
}

.playlist-item{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:17px;
    font-weight:700;
    line-height:1.25;
    text-align:left;
    cursor:pointer;
}

.playlist-item i{
    flex:0 0 auto;
    color:#f5d98c;
    font-size:18px;
}

.playlist-item:hover{
    background:rgba(215,180,106,.15);
    border-color:rgba(215,180,106,.30);
}

.new-playlist-box{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:start;
}

@media(max-width:900px){
    #playlistModal.modal{
        align-items:flex-start !important;
        padding-top:max(34px, env(safe-area-inset-top)) !important;
        padding-right:12px !important;
        padding-left:12px !important;
        padding-bottom:calc(var(--sn-mobile-player, 104px) + var(--sn-mobile-nav, 60px) + 18px + env(safe-area-inset-bottom)) !important;
    }

    #playlistModal .playlist-modal-content{
        width:100% !important;
        max-width:560px !important;
        max-height:calc(100dvh - var(--sn-mobile-player, 104px) - var(--sn-mobile-nav, 60px) - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin:0 auto !important;
        padding:24px 18px 22px !important;
        border-radius:22px !important;
    }

    #playlistModal .playlist-modal-content h2{
        margin:4px 46px 20px 0;
        text-align:left;
        font-size:23px;
    }

    #playlistList{
        max-height:min(38dvh, 330px);
        gap:11px;
    }

    .playlist-item{
        min-height:58px;
        padding:15px 16px;
        font-size:19px;
        border-radius:15px;
    }

    .playlist-item i{
        font-size:20px;
    }

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

    .new-playlist-box .primary-btn{
        width:100%;
        min-height:48px;
    }
}


/* ==========================================
   SOUNDNATION APP DOWNLOAD
========================================== */
.sn-app-download-page{
    width:min(1180px,100%);
    margin:0 auto;
    padding:6px 0 36px;
}

.sn-app-download-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    align-items:center;
    gap:48px;
    min-height:460px;
    padding:54px clamp(28px,5vw,72px);
    overflow:hidden;
    border:1px solid rgba(215,180,106,.22);
    border-radius:32px;
    background:
        radial-gradient(circle at 84% 18%,rgba(215,180,106,.22),transparent 30%),
        radial-gradient(circle at 14% 100%,rgba(255,255,255,.08),transparent 38%),
        linear-gradient(135deg,#17191f 0%,#0d0f13 55%,#181510 100%);
    box-shadow:0 28px 70px rgba(0,0,0,.38);
}

.sn-app-download-hero::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-180px;
    bottom:-190px;
    border:1px solid rgba(215,180,106,.18);
    border-radius:50%;
    box-shadow:0 0 0 50px rgba(215,180,106,.035),0 0 0 100px rgba(215,180,106,.025);
}

.sn-app-download-copy{
    position:relative;
    z-index:2;
}

.sn-app-download-kicker{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    margin-bottom:18px;
    padding:7px 13px;
    border:1px solid rgba(215,180,106,.28);
    border-radius:999px;
    background:rgba(215,180,106,.10);
    color:#f5d98c;
    font-size:12px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.sn-app-download-copy h2{
    max-width:720px;
    margin:0 0 18px;
    color:#fff8e6;
    font-size:clamp(38px,6vw,70px);
    line-height:.98;
    letter-spacing:-.055em;
}

.sn-app-download-copy > p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.70);
    font-size:clamp(16px,2vw,20px);
    line-height:1.65;
}

.sn-app-download-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.sn-app-download-primary,
.sn-app-download-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    min-height:54px;
    padding:14px 22px;
    border-radius:16px;
    font-size:15px;
    font-weight:900;
    text-decoration:none;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.sn-app-download-primary{
    border:1px solid #f5d98c;
    background:linear-gradient(135deg,#f5d98c,#c99f4f);
    color:#111217;
    box-shadow:0 14px 35px rgba(201,159,79,.23);
}

.sn-app-download-primary i{
    font-size:21px;
}

.sn-app-download-secondary{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.065);
    color:#fff;
}

.sn-app-download-primary:hover,
.sn-app-download-secondary:hover{
    transform:translateY(-2px);
}

.sn-app-download-primary:hover{
    box-shadow:0 18px 42px rgba(201,159,79,.34);
}

.sn-app-download-secondary:hover{
    border-color:rgba(215,180,106,.34);
    background:rgba(215,180,106,.11);
}

.sn-app-download-note{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    color:rgba(255,255,255,.50);
    font-size:13px;
}

.sn-app-download-note i{
    color:#d7b46a;
}

.sn-app-phone{
    position:relative;
    z-index:2;
    width:min(290px,100%);
    aspect-ratio:9/18;
    justify-self:center;
    padding:11px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:42px;
    background:linear-gradient(145deg,#2d3038,#090a0d 65%);
    box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.025);
    transform:rotate(4deg);
}

.sn-app-phone-speaker{
    position:absolute;
    top:18px;
    left:50%;
    z-index:3;
    width:76px;
    height:7px;
    border-radius:999px;
    background:#090a0d;
    transform:translateX(-50%);
}

.sn-app-phone-screen{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    overflow:hidden;
    border-radius:33px;
    background:
        radial-gradient(circle at 50% 36%,rgba(215,180,106,.22),transparent 24%),
        linear-gradient(180deg,#151820,#090a0e);
    text-align:center;
}

.sn-app-phone-logo{
    width:88px;
    height:88px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border:1px solid rgba(245,217,140,.42);
    border-radius:27px;
    background:linear-gradient(145deg,rgba(245,217,140,.22),rgba(215,180,106,.06));
    color:#f5d98c;
    font-size:35px;
    box-shadow:0 15px 38px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}

.sn-app-phone-screen strong{
    color:#fff8e6;
    font-size:25px;
    letter-spacing:-.04em;
}

.sn-app-phone-screen > span{
    margin-top:8px;
    color:rgba(255,255,255,.46);
    font-size:12px;
}

.sn-app-phone-wave{
    height:54px;
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:42px;
}

.sn-app-phone-wave i{
    width:5px;
    border-radius:999px;
    background:linear-gradient(180deg,#f5d98c,#b68837);
    box-shadow:0 0 14px rgba(215,180,106,.28);
}

.sn-app-phone-wave i:nth-child(1),
.sn-app-phone-wave i:nth-child(7){height:16px}
.sn-app-phone-wave i:nth-child(2),
.sn-app-phone-wave i:nth-child(6){height:30px}
.sn-app-phone-wave i:nth-child(3),
.sn-app-phone-wave i:nth-child(5){height:44px}
.sn-app-phone-wave i:nth-child(4){height:54px}

.sn-app-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:22px;
}

.sn-app-feature-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    min-height:150px;
    padding:24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.sn-app-feature-card > i{
    flex:0 0 auto;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(215,180,106,.24);
    border-radius:15px;
    background:rgba(215,180,106,.10);
    color:#f5d98c;
    font-size:20px;
}

.sn-app-feature-card h3,
.sn-app-install-help h3{
    margin:1px 0 8px;
    color:#fff7df;
    font-size:18px;
}

.sn-app-feature-card p,
.sn-app-install-help p{
    margin:0;
    color:rgba(255,255,255,.58);
    font-size:14px;
    line-height:1.55;
}

.sn-app-install-help{
    display:flex;
    align-items:flex-start;
    gap:17px;
    margin-top:18px;
    padding:22px 24px;
    border:1px solid rgba(215,180,106,.16);
    border-radius:20px;
    background:rgba(215,180,106,.055);
}

.sn-app-install-help-icon{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(215,180,106,.13);
    color:#f5d98c;
}


.sn-app-apple-action i{
    font-size:22px;
}

.sn-app-platform-grid{
    display:grid;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:18px;
    margin-top:22px;
    align-items:start;
}

.sn-app-platform-card{
    position:relative;
    min-width:0;
    padding:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.085);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    box-shadow:0 16px 42px rgba(0,0,0,.20);
}

.sn-app-platform-ios{
    scroll-margin-top:110px;
    border-color:rgba(215,180,106,.24);
    background:
        radial-gradient(circle at 100% 0,rgba(215,180,106,.14),transparent 32%),
        linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
}

.sn-app-platform-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:23px;
}

.sn-app-platform-icon{
    flex:0 0 auto;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(215,180,106,.26);
    border-radius:18px;
    background:rgba(215,180,106,.10);
    color:#f5d98c;
    font-size:27px;
}

.sn-app-platform-badge{
    display:block;
    margin-bottom:5px;
    color:#d7b46a;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.sn-app-platform-head h3{
    margin:0;
    color:#fff7df;
    font-size:clamp(20px,2.5vw,27px);
    line-height:1.15;
    letter-spacing:-.025em;
}

.sn-app-install-steps{
    display:grid;
    gap:13px;
    margin:0;
    padding:0;
    list-style:none;
}

.sn-app-install-steps li{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:13px;
    align-items:start;
    padding:14px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:17px;
    background:rgba(0,0,0,.16);
}

.sn-app-step-number{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(215,180,106,.28);
    border-radius:12px;
    background:rgba(215,180,106,.11);
    color:#f5d98c;
    font-size:14px;
    font-weight:900;
}

.sn-app-install-steps strong{
    display:block;
    margin:1px 0 5px;
    color:#fff;
    font-size:15px;
    line-height:1.35;
}

.sn-app-install-steps p{
    margin:0;
    color:rgba(255,255,255,.56);
    font-size:13px;
    line-height:1.55;
}

.sn-app-safari-warning{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin:-3px 0 17px;
    padding:15px 16px;
    border:1px solid rgba(90,180,255,.18);
    border-radius:16px;
    background:rgba(45,138,210,.08);
}

.sn-app-safari-warning > i{
    flex:0 0 auto;
    margin-top:1px;
    color:#78c4ff;
    font-size:25px;
}

.sn-app-safari-warning p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.55;
}

.sn-app-inline-symbol{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:9px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:rgba(255,255,255,.78);
    font-size:12px;
    font-weight:800;
}

.sn-app-ios-result{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-top:17px;
    padding:16px;
    border:1px solid rgba(86,211,140,.20);
    border-radius:17px;
    background:rgba(50,183,112,.08);
}

.sn-app-ios-result > i{
    flex:0 0 auto;
    margin-top:2px;
    color:#68d99a;
    font-size:21px;
}

.sn-app-ios-result strong{
    display:block;
    margin-bottom:4px;
    color:#dbffe9;
    font-size:15px;
}

.sn-app-ios-result p{
    margin:0;
    color:rgba(255,255,255,.60);
    font-size:13px;
    line-height:1.5;
}

.sn-app-ios-missing-option{
    margin:15px 3px 0;
    color:rgba(255,255,255,.50);
    font-size:12px;
    line-height:1.6;
}

.sn-app-ios-missing-option strong{
    color:rgba(255,255,255,.78);
}

@media(max-width:900px){
    .sn-app-download-page{
        padding-top:0;
    }

    .sn-app-download-hero{
        grid-template-columns:1fr;
        gap:38px;
        min-height:0;
        padding:34px 24px 38px;
        border-radius:26px;
    }

    .sn-app-download-copy{
        text-align:center;
    }

    .sn-app-download-copy > p{
        margin-inline:auto;
    }

    .sn-app-download-actions{
        justify-content:center;
    }

    .sn-app-download-note{
        justify-content:center;
    }

    .sn-app-phone{
        width:min(230px,76vw);
        transform:rotate(2deg);
    }

    .sn-app-feature-grid,
    .sn-app-platform-grid{
        grid-template-columns:1fr;
    }

    .sn-app-feature-card{
        min-height:0;
    }
}

@media(max-width:560px){
    .sn-app-download-hero{
        padding:27px 17px 31px;
        border-radius:22px;
    }

    .sn-app-download-copy h2{
        font-size:39px;
    }

    .sn-app-download-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .sn-app-download-primary,
    .sn-app-download-secondary{
        width:100%;
        min-height:56px;
        margin:0;
    }

    .sn-app-phone{
        width:min(205px,72vw);
    }

    .sn-app-feature-card,
    .sn-app-platform-card,
    .sn-app-install-help{
        padding:19px;
    }

    .sn-app-platform-head{
        align-items:flex-start;
    }

    .sn-app-platform-icon{
        width:50px;
        height:50px;
        border-radius:15px;
        font-size:23px;
    }

    .sn-app-install-steps li{
        grid-template-columns:34px minmax(0,1fr);
        gap:11px;
        padding:13px;
    }

    .sn-app-step-number{
        width:34px;
        height:34px;
        border-radius:11px;
    }

    .sn-app-install-help{
        align-items:flex-start;
    }
}

/* ==========================================
   EIGENE PLAYLIST SORTIEREN
========================================== */

.playlist-order-hint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:14px 0 10px;
    padding:13px 16px;
    border:1px solid rgba(212,175,55,.24);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(212,175,55,.09),rgba(255,255,255,.025));
    color:var(--muted);
}

.playlist-order-help{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
    line-height:1.45;
}

.playlist-order-help > i{
    color:#d4af37;
    font-size:18px;
    flex:0 0 auto;
}

.playlist-order-help strong{
    color:#fff;
}

.playlist-order-status{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:84px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}

.playlist-order-status.sorting,
.playlist-order-status.saving{
    background:rgba(212,175,55,.16);
    color:#f5d982;
}

.playlist-order-status.saved{
    background:rgba(29,185,84,.16);
    color:#76e49d;
}

.playlist-order-status.error{
    background:rgba(239,68,68,.16);
    color:#ff9b9b;
}

.playlist-sort-list{
    position:relative;
}

.playlist-sortable-item{
    position:relative;
    border:1px solid transparent;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease;
}

.playlist-sortable-item.playlist-hold-pending{
    border-color:rgba(212,175,55,.18);
}

.playlist-sortable-item.playlist-dragging{
    z-index:10050;
    cursor:grabbing;
    border-color:rgba(212,175,55,.72);
    background:#25231c;
    box-shadow:0 22px 54px rgba(0,0,0,.58),0 0 0 2px rgba(212,175,55,.18);
    transform:scale(1.018);
    will-change:top;
}

.playlist-sort-placeholder{
    width:100%;
    min-height:58px;
    border:2px dashed rgba(212,175,55,.58);
    border-radius:15px;
    background:rgba(212,175,55,.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.playlist-sort-active .playlist-sortable-item:not(.playlist-dragging){
    transition:transform .14s ease,background .14s ease;
}

.playlist-order-saving{
    pointer-events:none;
    opacity:.82;
}

.playlist-drag-handle,
.song-list-remove{
    width:42px;
    height:42px;
    min-width:42px;
    display:inline-grid;
    place-items:center;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:17px;
    padding:0;
    flex:0 0 auto;
}

.playlist-drag-handle{
    cursor:grab;
    touch-action:none !important;
    overscroll-behavior:contain;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.playlist-drag-handle:hover,
.playlist-drag-handle:focus-visible{
    background:rgba(212,175,55,.13);
    color:#e6c865;
    outline:none;
}

.playlist-drag-handle:active{
    cursor:grabbing;
}

.song-list-remove:hover,
.song-list-remove:focus-visible{
    background:rgba(239,68,68,.14);
    color:#ff8e8e;
    outline:none;
}

body.playlist-sorting{
    user-select:none;
    -webkit-user-select:none;
    overscroll-behavior:none;
}

body.playlist-sorting .playlist-drag-handle{
    cursor:grabbing;
}

@media(max-width:700px){
    .playlist-order-hint{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:12px 13px;
    }

    .playlist-order-status{
        align-self:flex-start;
    }

    .playlist-sortable-item{
        gap:9px;
        padding:9px 7px;
    }

    .playlist-drag-handle,
    .song-list-remove{
        width:38px;
        min-width:38px;
        height:44px;
    }

    .playlist-sortable-item .song-list-cover{
        width:52px;
        height:52px;
    }
}