@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
    --bg:#070a0f;
    --bg2:#0b1018;
    --panel:#101722;
    --panel2:#151d29;
    --panel3:#1a2432;
    --text:#f5f7fb;
    --muted:#8994a5;
    --muted2:#667285;
    --line:#202b3a;
    --gold:#f2c45e;
    --gold2:#ffda78;
    --green:#27d98a;
    --blue:#7bdcff;
    --danger:#ff6b78;
    --shadow:0 24px 70px rgba(0,0,0,.35);
    --radius:20px;
    --max:1240px;
}

*{
    box-sizing:border-box;
}

html{
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',system-ui,sans-serif;
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    padding-bottom:118px;
    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(242,196,94,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 25%,
            rgba(39,217,138,.07),
            transparent 25%
        ),
        var(--bg);
}

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

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
}

#app-content{
    position:relative;
    z-index:1;
}


/* =========================================================
   HEADER
========================================================= */

.topbar{
    position:sticky;
    top:0;
    z-index:100;
    min-height:76px;
    padding:12px max(
        24px,
        calc((100% - var(--max))/2)
    );
    display:flex;
    align-items:center;
    gap:18px;
    background:rgba(7,10,15,.82);
    border-bottom:1px solid rgba(255,255,255,.07);
    backdrop-filter:blur(22px);
}

.brand{
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--gold);
    white-space:nowrap;
}

.theme-toggle{
    width:40px;
    height:40px;
    flex:none;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
    color:var(--gold);
    display:grid;
    place-items:center;
}

.theme-toggle:hover{
    border-color:rgba(242,196,94,.45);
    background:var(--panel2);
}

.topbar .search{
    flex:1;
    max-width:520px;
    margin:auto;
}

.search{
    display:flex;
}

.search input{
    min-width:0;
    flex:1;
    height:44px;
    border:1px solid var(--line);
    border-right:0;
    border-radius:13px 0 0 13px;
    background:var(--panel);
    color:var(--text);
    padding:0 15px;
    outline:0;
}

.search input:focus{
    border-color:#46566d;
}

.search button{
    height:44px;
    border:0;
    border-radius:0 13px 13px 0;
    padding:0 18px;
    background:var(--gold);
    color:#17130a;
    font-weight:700;
}

.topbar nav{
    display:flex;
    align-items:center;
    gap:4px;
}

.topbar nav>a{
    padding:10px 11px;
    border-radius:10px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

.topbar nav>a:hover{
    background:var(--panel);
    color:var(--text);
}

.topbar nav>a.gold{
    background:var(--gold);
    color:#17130a;
    padding:10px 16px;
}


/* =========================================================
   USER MENU
========================================================= */

.user-menu{
    position:relative;
    flex:none;
}

.user-menu-trigger{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:4px 8px 4px 5px;
    border:1px solid transparent;
    border-radius:999px;
    background:transparent;
    color:var(--text);
    transition:
        background .18s,
        border-color .18s,
        transform .18s;
}

.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger{
    background:var(--panel);
    border-color:var(--line);
}

.user-menu-trigger:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

.user-avatar-wrap{
    position:relative;
    width:38px;
    height:38px;
    flex:none;
}

.user-avatar,
.user-avatar-fallback{
    width:38px;
    height:38px;
    border-radius:50%;
}

.user-avatar{
    display:block;
    object-fit:cover;
    background:var(--panel2);
    border:1px solid rgba(255,255,255,.10);
}

.user-avatar-fallback{
    display:grid;
    place-items:center;
    background:
        linear-gradient(
            135deg,
            #263b4e,
            #18251f
        );
    border:1px solid rgba(242,196,94,.28);
    color:var(--gold);
    font-family:'Space Grotesk',sans-serif;
    font-size:15px;
    font-weight:700;
}

.online-indicator{
    position:absolute;
    right:-1px;
    bottom:0;
    width:11px;
    height:11px;
    border-radius:50%;
    background:var(--green);
    border:2px solid var(--bg);
    box-shadow:
        0 0 0 1px rgba(39,217,138,.12),
        0 0 10px rgba(39,217,138,.35);
}

.user-menu-name{
    max-width:125px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
}

.user-menu-chevron{
    color:var(--muted);
    font-size:12px;
    transition:transform .18s;
}

.user-menu.open .user-menu-chevron{
    transform:rotate(180deg);
}

.user-menu-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:500;
    width:260px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );
    box-shadow:
        0 25px 70px rgba(0,0,0,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:
        translateY(-7px)
        scale(.98);
    transform-origin:top right;
    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}

.user-menu.open .user-menu-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:
        translateY(0)
        scale(1);
}

.user-menu-summary{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px;
    margin-bottom:6px;
    border-radius:13px;
    background:rgba(255,255,255,.025);
}

.user-menu-summary-avatar{
    width:42px;
    height:42px;
    flex:none;
    border-radius:50%;
    overflow:hidden;
    background:var(--panel3);
    display:grid;
    place-items:center;
    color:var(--gold);
    font-weight:800;
}

.user-menu-summary-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-menu-summary-copy{
    min-width:0;
}

.user-menu-summary-copy strong,
.user-menu-summary-copy span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.user-menu-summary-copy strong{
    font-size:14px;
}

.user-menu-summary-copy span{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.user-menu-divider{
    height:1px;
    margin:6px 5px;
    background:var(--line);
}

.user-menu-item{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 11px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--text);
    font-size:13px;
    font-weight:600;
    text-align:left;
}

.user-menu-item:hover{
    background:var(--panel3);
    color:var(--gold);
}

.user-menu-item .menu-icon{
    width:22px;
    flex:none;
    color:var(--muted);
    text-align:center;
}

.user-menu-item:hover .menu-icon{
    color:var(--gold);
}

.user-menu-item.danger{
    color:#ffb4bc;
}

.user-menu-item.danger:hover{
    background:rgba(255,107,120,.08);
    color:var(--danger);
}

.user-menu-logout{
    margin:0;
}

.user-menu-logout button{
    font:inherit;
}


/* =========================================================
   GLOBAL
========================================================= */

.hero,
.section,
.detail,
.auth,
.empty-page{
    width:min(
        var(--max),
        calc(100% - 40px)
    );
    margin:38px auto;
}

.section{
    margin-top:58px;
}

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.section-head h2,
.section-head h1{
    margin:3px 0 0;
    font-family:'Space Grotesk',sans-serif;
}

.section-head>a{
    color:var(--gold);
    font-size:14px;
    font-weight:700;
}

.eyebrow,
.section-kicker{
    display:block;
    color:var(--blue);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:700;
}

.lead{
    color:var(--muted);
    line-height:1.75;
    max-width:700px;
}

.muted-text{
    color:var(--muted);
    font-size:14px;
}

h1,
h2,
h3{
    font-family:'Space Grotesk',sans-serif;
}

h1{
    font-size:clamp(36px,5vw,64px);
    line-height:1.02;
    margin:12px 0 14px;
}

h2{
    font-size:25px;
}

h3{
    font-size:19px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:0 17px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
    color:var(--text);
    font-weight:700;
    transition:.18s;
}

.btn:hover{
    transform:translateY(-1px);
    border-color:#3a485d;
}

.btn.gold{
    background:var(--gold)!important;
    color:#17130a!important;
    border-color:var(--gold);
}

.btn.gold:hover{
    background:var(--gold2)!important;
}

.btn.active{
    color:var(--gold);
    border-color:rgba(242,196,94,.4);
}


/* =========================================================
   HOME HERO
========================================================= */

.hero{
    position:relative;
    min-height:470px;
    padding:70px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:30px;
    background:
        linear-gradient(
            120deg,
            #111b26 0%,
            #0b1119 55%,
            #121711 100%
        );
    box-shadow:var(--shadow);
}

.hero:after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-100px;
    top:-100px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(242,196,94,.20),
            transparent 65%
        );
    filter:blur(10px);
}

.hero>div:first-child{
    position:relative;
    z-index:2;
    max-width:720px;
}

.hero h1{
    font-size:clamp(48px,7vw,86px);
    letter-spacing:-.045em;
    margin:15px 0;
}

.hero p{
    color:var(--muted);
    font-size:17px;
    line-height:1.75;
    max-width:620px;
}

.hero-disc{
    position:relative;
    z-index:2;
    width:290px;
    height:290px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:115px;
    color:var(--gold);
    background:
        radial-gradient(
            circle at 35% 30%,
            #344152,
            #10151e 48%,
            #070a0f 49%
        );
    box-shadow:
        0 0 0 16px rgba(242,196,94,.035),
        0 0 0 34px rgba(242,196,94,.025),
        0 35px 100px rgba(0,0,0,.55);
}


/* =========================================================
   TRACK LIST
========================================================= */

.track-list{
    display:grid;
    gap:8px;
}

.track{
    display:flex;
    align-items:center;
    gap:15px;
    min-height:74px;
    padding:11px 14px;
    border:1px solid transparent;
    border-radius:16px;
    background:rgba(16,23,34,.78);
    transition:.18s;
}

.track:hover{
    background:var(--panel2);
    border-color:var(--line);
    transform:translateY(-1px);
}

.track>div,
.track-info{
    min-width:0;
    flex:1;
}

.track strong,
.track-title{
    display:block;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.track span,
.track-meta,
.track small{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-top:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.track small{
    margin:0;
    white-space:nowrap;
}

.cover{
    flex:0 0 52px;
    width:52px;
    height:52px;
    padding:0;
    border:0;
    border-radius:13px;
    background:
        linear-gradient(
            135deg,
            #26374a,
            #15201c
        );
    color:var(--gold);
    font-weight:800;
    display:grid;
    place-items:center;
    overflow:hidden;
}

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

.track-more{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:10px;
    background:transparent;
    color:var(--muted);
}

.track-more:hover{
    color:var(--gold);
    border-color:var(--gold);
}


/* =========================================================
   CARDS
========================================================= */

.cards,
.artist-grid,
.album-grid,
.playlist-grid,
.track-grid{
    display:grid;
    gap:16px;
}

.cards{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px,1fr)
        );
}

.card{
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
    display:grid;
    gap:13px;
    transition:.18s;
}

.card:hover,
.artist-card:hover,
.album-card:hover,
.playlist-card:hover{
    transform:translateY(-3px);
    border-color:#344256;
    background:var(--panel2);
}


/* =========================================================
   AVATARS
========================================================= */

.avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #25394a,
            #18241f
        );
    color:var(--gold);
    font-size:26px;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* =========================================================
   ARTIST DIRECTORY
========================================================= */

.artist-grid{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px,1fr)
        );
}

.artist-card{
    min-width:0;
    padding:16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
    transition:.18s;
}

.artist-image{
    aspect-ratio:1;
    border-radius:14px;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #23364a,
            #18221d
        );
    display:grid;
    place-items:center;
    margin-bottom:13px;
}

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

.artist-card strong,
.artist-card span{
    display:block;
}

.artist-card span{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
}


/* =========================================================
   ARTIST PROFILE
========================================================= */

.artist-profile{
    width:min(
        var(--max),
        calc(100% - 40px)
    );
    margin:38px auto 80px;
}

.artist-hero{
    position:relative;
    display:flex;
    align-items:center;
    gap:34px;
    padding:40px;
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(39,217,138,.14),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(242,196,94,.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--panel2),
            var(--panel)
        );
    box-shadow:var(--shadow);
}

.artist-avatar{
    width:180px;
    height:180px;
    flex:0 0 180px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        linear-gradient(
            135deg,
            #153d2b,
            #172b39
        );
    border:1px solid var(--line);
    box-shadow:
        0 20px 60px rgba(0,0,0,.45);
    color:var(--gold);
    font-size:70px;
}

.artist-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.artist-details{
    min-width:0;
}

.artist-details h1{
    margin:8px 0 12px;
    font-size:clamp(36px,6vw,68px);
    line-height:1;
    letter-spacing:-.04em;
}

.artist-bio{
    max-width:650px;
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.artist-meta{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    align-items:center;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
}

.artist-meta:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:
        0 0 12px rgba(39,217,138,.6);
}


/* =========================================================
   ALBUMS
========================================================= */

.album-grid{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px,1fr)
        );
}

.album-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
    transition:.2s;
}

.album-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
}

.album-cover{
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #153d2b,
            #172b39
        );
}

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

.album-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:var(--gold);
    font-size:60px;
}

.album-play{
    position:absolute;
    right:12px;
    bottom:12px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:var(--gold);
    color:#17140a;
    font-size:13px;
    box-shadow:
        0 8px 25px rgba(0,0,0,.5);
    opacity:0;
    transform:translateY(5px);
    transition:.2s;
}

.album-card:hover .album-play{
    opacity:1;
    transform:none;
}

.album-info{
    display:grid;
    gap:5px;
    padding:14px;
}

.album-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.album-info span,
.album-info small{
    color:var(--muted);
    font-size:12px;
}


/* =========================================================
   ARTIST TRACKS
========================================================= */

.artist-tracks{
    margin-top:58px;
}

.artist-tracks .section-head{
    margin-bottom:16px;
}

.track-number{
    width:30px;
    flex:0 0 30px;
    color:var(--muted);
    font-size:12px;
    text-align:center;
}

.artist-tracks .track{
    min-height:72px;
}

.artist-tracks .track .cover{
    position:relative;
}

.artist-tracks .cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

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

.track-title{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:800;
}

.track-meta{
    display:flex;
    gap:7px;
    align-items:center;
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
}

.track-stats{
    display:flex;
    align-items:baseline;
    gap:5px;
    color:var(--text);
    font-size:13px;
}

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

.artist-empty{
    display:grid;
    place-items:center;
    gap:6px;
    padding:55px 20px;
    border:1px dashed var(--line);
    border-radius:18px;
    background:rgba(16,23,34,.45);
}

.empty-icon{
    color:var(--gold);
    font-size:36px;
}

.artist-empty strong{
    font-size:17px;
}

.artist-empty p{
    margin:0;
    color:var(--muted);
}


/* =========================================================
   DETAIL PAGES
========================================================= */

.detail{
    display:flex;
    align-items:center;
    gap:44px;
    padding:42px 0;
}

.detail-cover{
    width:340px;
    aspect-ratio:1;
    flex:none;
    border-radius:26px;
    background-color:var(--panel);
    background-size:cover;
    background-position:center;
    box-shadow:var(--shadow);
}

.track-detail-copy{
    max-width:650px;
}

.track-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:25px 0;
}

.track-metrics{
    display:flex;
    gap:28px;
    color:var(--muted);
    font-size:14px;
}

.track-metrics b{
    color:var(--text);
    font-size:18px;
    margin-right:4px;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:26px;
    background:var(--panel);
    box-shadow:var(--shadow);
}

.profile-cover{
    height:250px;
    background:
        linear-gradient(
            135deg,
            #182536,
            #13231d
        );
    background-size:cover;
    background-position:center;
}

.profile-body{
    position:relative;
    padding:0 38px 38px;
}

.profile-avatar{
    width:118px;
    height:118px;
    margin-top:-59px;
    border:6px solid var(--panel);
    border-radius:50%;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #293b4e,
            #17231e
        );
    display:grid;
    place-items:center;
    color:var(--gold);
    font-size:45px;
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-body .eyebrow{
    margin-top:22px;
}

.profile-name{
    font-size:46px;
    margin:7px 0 3px;
}

.profile-handle{
    color:var(--muted);
    font-size:14px;
}

.profile-bio{
    max-width:700px;
    color:#c3cad4;
    line-height:1.7;
}

.profile-stats{
    max-width:760px;
    margin-top:28px;
}

.profile-layout{
    display:grid;
    grid-template-columns:
        minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
}

.profile-main,
.profile-side{
    padding:24px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--panel);
}

.profile-edit{
    display:grid;
    gap:16px;
}

.profile-edit label{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

.upload-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.profile-side{
    display:grid;
    gap:8px;
}

.library-link{
    padding:16px;
    border:1px solid transparent;
    border-radius:14px;
    background:var(--bg2);
}

.library-link:hover{
    border-color:var(--line);
    background:var(--panel2);
}

.library-link b,
.library-link span{
    display:block;
}

.library-link span{
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
}


/* =========================================================
   MUSIC CARDS
========================================================= */

.track-grid{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px,1fr)
        );
}

.music-card{
    min-width:0;
}

.music-cover{
    position:relative;
    width:100%;
    aspect-ratio:1;
    padding:0;
    border:0;
    border-radius:16px;
    overflow:hidden;
    background:var(--panel2);
    display:block;
}

.music-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.music-cover span{
    position:absolute;
    right:10px;
    bottom:10px;
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--gold);
    color:#17130a;
}

.music-card>a{
    display:block;
    padding:11px 2px;
}

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

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


/* =========================================================
   AUTH
========================================================= */

.auth{
    max-width:520px;
    margin-top:70px;
    padding:38px;
    border:1px solid var(--line);
    border-radius:24px;
    background:
        linear-gradient(
            145deg,
            var(--panel2),
            var(--panel)
        );
    box-shadow:var(--shadow);
}

.auth h1{
    font-size:38px;
}

.auth>p{
    color:var(--muted);
    line-height:1.6;
}

.auth form{
    display:grid;
    gap:16px;
}

.auth label{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

input,
textarea,
select{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:#0b1119;
    color:var(--text);
    padding:12px 13px;
    outline:0;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#52647c;
    box-shadow:
        0 0 0 3px rgba(123,220,255,.05);
}

textarea{
    min-height:120px;
    resize:vertical;
}

.auth form .btn{
    margin-top:3px;
}

.auth a{
    color:var(--gold);
    font-weight:600;
}


/* =========================================================
   ADMIN
========================================================= */

.stats{
    display:grid;
    grid-template-columns:
        repeat(4,1fr);
    gap:14px;
}

.stats div{
    padding:22px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
}

.stats b,
.stats span{
    display:block;
}

.stats b{
    font-family:'Space Grotesk',sans-serif;
    font-size:30px;
    color:var(--gold);
}

.stats span{
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
}

.admin-grid{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:16px;
}

.admin-grid form{
    display:grid;
    gap:16px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--panel);
}

.admin-grid label{
    display:grid;
    gap:7px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

.admin-grid h2{
    margin:0 0 5px;
    font-size:21px;
}


/* =========================================================
   SEARCH / LIBRARY
========================================================= */

.search.big{
    max-width:none;
    margin:25px 0 34px;
}

.search-results{
    display:grid;
    gap:18px;
}

.library-create{
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--panel);
    margin:22px 0;
}

.library-create form{
    display:grid;
    grid-template-columns:
        1fr 1.5fr auto;
    gap:10px;
}

.empty,
.empty-state{
    padding:45px 25px;
    text-align:center;
    color:var(--muted);
    border:1px dashed #344052;
    border-radius:18px;
    background:rgba(16,23,34,.45);
}

.empty-icon{
    font-size:42px;
    color:var(--gold);
    margin-bottom:10px;
}

.empty-state h3{
    color:var(--text);
    margin:5px;
}

.empty-state p{
    margin:6px 0;
}


/* =========================================================
   FLASH / ERROR
========================================================= */

.flash{
    width:min(
        var(--max),
        calc(100% - 40px)
    );
    margin:18px auto;
    padding:13px 16px;
    border-radius:13px;
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
}

.flash.error{
    border-color:rgba(255,107,120,.35);
    color:#ffd7db;
}

.flash.success{
    border-color:rgba(39,217,138,.35);
}

.flash ul{
    margin:0;
    padding-left:20px;
}

.empty-page{
    text-align:center;
    padding:90px 20px;
}

.empty-page h1{
    font-size:100px;
    margin:0;
    color:var(--gold);
}


/* =========================================================
   MINI PLAYER
========================================================= */

.mini-player{
    position:fixed;
    z-index:200;
    left:50%;
    bottom:16px;
    transform:
        translate(-50%,130px);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    width:min(
        1050px,
        calc(100% - 28px)
    );
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 13px;
    border:1px solid #2b3849;
    border-radius:18px;
    background:rgba(12,17,25,.96);
    backdrop-filter:blur(22px);
    box-shadow:
        0 25px 80px rgba(0,0,0,.55);
}

.mini-player.active{
    transform:
        translate(-50%,0);
    opacity:1;
    visibility:visible;
}

.mini-player img{
    width:52px;
    height:52px;
    flex:none;
    border-radius:12px;
    object-fit:cover;
    background:var(--panel2);
}

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

.player-meta b,
.player-meta span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.player-meta span{
    font-size:12px;
    color:var(--muted);
    margin-top:4px;
}

.mini-player>button{
    width:38px;
    height:38px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--text);
    font-size:20px;
}

.mini-player>button:hover{
    background:var(--panel2);
}

.mini-player #player-play{
    background:var(--gold);
    color:#17130a;
}

.mini-player input[type=range]{
    flex:1;
    min-width:80px;
    accent-color:var(--gold);
}

.mini-player #player-time{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
}


/* =========================================================
   AJAX NAVIGATION
========================================================= */

html.zonga-loading{
    cursor:progress;
}

html.zonga-loading #app-content{
    opacity:.72;
    transition:opacity .12s ease;
}


/* =========================================================
   DAY THEME
========================================================= */

body.theme-day{
    --bg:#f2f4f6;
    --bg2:#e9edf1;
    --panel:#fff;
    --panel2:#f7f8fa;
    --panel3:#edf1f5;
    --text:#111821;
    --muted:#647181;
    --muted2:#8290a0;
    --line:#d9e0e7;
    --shadow:
        0 20px 60px rgba(20,30,40,.10);

    background:
        radial-gradient(
            circle at 75% -10%,
            rgba(242,196,94,.16),
            transparent 30%
        ),
        var(--bg);
}

body.theme-day:before{
    opacity:.18;
}

.theme-day .topbar{
    background:rgba(242,244,246,.86);
}

.theme-day input,
.theme-day textarea,
.theme-day select{
    background:#fff;
}

.theme-day .mini-player{
    background:rgba(255,255,255,.96);
    border-color:var(--line);
}

.theme-day .online-indicator{
    border-color:var(--bg);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:1050px){

    .topbar{
        padding:12px 20px;
    }

    /*
     * Do not hide nav items by nth-child anymore.
     * The user menu is a separate .user-menu element.
     */

    .topbar nav>a{
        display:none;
    }

    .topbar nav>a.gold{
        display:inline-flex;
    }

    .user-menu-name{
        display:none;
    }

    .user-menu-chevron{
        display:none;
    }

    .hero{
        padding:52px;
    }

    .hero-disc{
        width:230px;
        height:230px;
        font-size:90px;
    }

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

    .profile-layout{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:760px){

    body{
        padding-bottom:105px;
    }

    .hero,
    .section,
    .detail,
    .auth,
    .empty-page,
    .artist-profile{
        width:min(
            100% - 24px,
            640px
        );
    }

    .topbar{
        padding:10px 12px;
        gap:10px;
        flex-wrap:wrap;
    }

    .brand{
        font-size:18px;
    }

    .theme-toggle{
        width:38px;
        height:38px;
    }

    .topbar .search{
        order:5;
        flex-basis:100%;
        max-width:none;
    }

    .topbar nav{
        margin-left:auto;
    }

    .topbar nav>a{
        display:none;
    }

    .user-menu-trigger{
        min-height:40px;
        padding:3px;
    }

    .user-avatar-wrap,
    .user-avatar,
    .user-avatar-fallback{
        width:38px;
        height:38px;
    }

    .user-menu-dropdown{
        position:fixed;
        top:64px;
        right:12px;
        width:min(
            280px,
            calc(100vw - 24px)
        );
    }

    .hero{
        min-height:430px;
        padding:35px 25px;
        display:block;
    }

    .hero h1{
        font-size:50px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-disc{
        width:170px;
        height:170px;
        font-size:65px;
        margin:35px auto 0;
    }

    .section{
        margin-top:42px;
    }

    .section-head{
        align-items:flex-start;
    }

    .cards,
    .artist-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .album-grid,
    .playlist-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .detail{
        display:block;
        padding:28px 0;
    }

    .detail-cover{
        width:min(100%,380px);
        margin-bottom:28px;
    }

    .stats{
        grid-template-columns:
            repeat(2,1fr);
    }

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

    /* ARTIST */

    .artist-profile{
        margin-top:24px;
    }

    .artist-hero{
        flex-direction:column;
        align-items:flex-start;
        padding:24px;
        gap:22px;
    }

    .artist-avatar{
        width:125px;
        height:125px;
        flex-basis:125px;
        font-size:48px;
    }

    .artist-details h1{
        font-size:40px;
    }

    .artist-tracks{
        margin-top:42px;
    }

    .artist-tracks .track{
        gap:9px;
        padding:10px;
    }

    .track-number{
        display:none;
    }

    .track-stats{
        display:none;
    }

    .track-more{
        width:30px;
        height:30px;
    }

    /* PROFILE */

    .profile-cover{
        height:190px;
    }

    .profile-body{
        padding:0 20px 25px;
    }

    .profile-avatar{
        width:100px;
        height:100px;
        margin-top:-50px;
    }

    .profile-name{
        font-size:37px;
    }

    .upload-row{
        grid-template-columns:1fr;
    }

    /* LIBRARY */

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

    /* PLAYER */

    .mini-player{
        gap:8px;
        padding:8px;
    }

    .mini-player img{
        width:45px;
        height:45px;
    }

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

    .mini-player #player-prev,
    .mini-player #player-next{
        display:none;
    }

    .mini-player input[type=range]{
        position:absolute;
        left:0;
        right:0;
        bottom:-5px;
        width:100%;
        height:10px;
    }

    .mini-player #player-time{
        display:none;
    }
}


/* =========================================================
   RESPONSIVE — SMALL PHONES
========================================================= */

@media(max-width:430px){

    .cards,
    .artist-grid,
    .album-grid,
    .playlist-grid{
        grid-template-columns:
            repeat(2,1fr);
        gap:10px;
    }

    .hero h1{
        font-size:43px;
    }

    .track{
        padding:9px;
    }

    .track small{
        display:none;
    }

    .track-more{
        display:none;
    }

    .auth{
        padding:25px;
    }

    .profile-stats{
        grid-template-columns:
            1fr 1fr;
    }

    .detail-cover{
        width:100%;
    }

    .artist-details h1{
        font-size:34px;
    }

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

    .album-info{
        padding:11px;
    }

    .user-menu-dropdown{
        right:8px;
        width:calc(100vw - 16px);
    }
}


/* =========================================================
   HOME DISCOVERY
========================================================= */

.music-hero{
    display:grid;
    grid-template-columns:
        minmax(0,1.2fr) 360px;
    gap:34px;
    align-items:center;
    min-height:390px;
    padding:42px;
    border:1px solid var(--line);
    border-radius:30px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(242,196,94,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--panel2),
            var(--panel)
        );
    box-shadow:var(--shadow);
}

.music-hero-copy h1{
    margin:10px 0;
    font-size:clamp(42px,6vw,76px);
    letter-spacing:-.045em;
    line-height:.98;
}

.music-hero-copy p{
    color:var(--muted);
    font-size:16px;
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}

.music-hero-art{
    aspect-ratio:1;
    max-width:360px;
    width:100%;
    justify-self:end;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:
        0 25px 80px rgba(0,0,0,.5);
}

.music-hero-art img{
    width:100%;
    height:100%;
    object-fit:cover;
}

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

.section-sub{
    margin:5px 0 0;
    color:var(--muted);
    font-size:13px;
}

.discovery-track{
    background:var(--panel);
}

.discovery-track .track-number{
    color:var(--gold);
}

.discovery-albums{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px,1fr)
        );
}

.discovery-artists{
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px,1fr)
        );
}

.genre-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.genre-chip{
    padding:12px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    color:var(--text);
    transition:.18s;
}

.genre-chip:hover{
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-2px);
}

@media(max-width:760px){

    .music-hero{
        grid-template-columns:1fr;
        padding:25px;
        min-height:auto;
    }

    .music-hero-art{
        max-width:260px;
        justify-self:start;
        order:-1;
    }

    .music-hero-copy h1{
        font-size:
            clamp(
                40px,
                13vw,
                60px
            );
    }

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

One important correction

There is a subtle issue in the "layout.php" + "app.js" combination we now have.

The user-menu dropdown is outside "#app-content", so AJAX page navigation will not destroy it. That's good.

However, "app.js" currently does:

closeUserMenu();

after replacing "#app-content". That's also correct.

The bigger point is that the CSS now treats the avatar menu as its own navigation component, rather than trying to identify it with "nth-child()" selectors. This is much safer as Zonga's header grows.

Also, the green dot is still a visual online indicator, not proof of real-time presence. When we build genuine presence later, we should add something like "last_seen_at" plus a lightweight heartbeat rather than permanently displaying everyone as online.

So the current frontend stack should now be:

- "layout.php" → header/avatar/dropdown + global player markup
- "app.css" → visual styling for header/avatar/dropdown/player/pages
- "app.js" → dropdown behavior + player + AJAX navigation
- "home.php" → discovery/home content
- "track.php" → track detail

That separation is clean and gives us a good foundation for the next Zonga features.