body{
    font-family:Arial,sans-serif;
    background:#efefef;
    font-size:12px;
    color:#333;
    padding-bottom:95px;
}

/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar{
    background:#2e2e2e;
    color:white;
    padding:8px 15px;
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.logo{
    font-size:16px;
    font-weight:bold;
    white-space:nowrap;
}

.search-form{
    flex:1;
    min-width:200px;
}

.search-form input{
    width:100%;
    max-width:250px;
    padding:7px 10px;
    border:none;
    outline:none;
    background:#444;
    color:white;
    font-size:12px;
    box-sizing:border-box;
}

.login-btn{
    color:white;
    text-decoration:none;
    border:1px solid #666;
    padding:8px 12px;
    font-size:11px;
    white-space:nowrap;
    border-radius:6px;
}

/*
|--------------------------------------------------------------------------
| LAYOUT
|--------------------------------------------------------------------------
*/

.container{
    display:flex;
    align-items:flex-start;
}

.left-content{
    width:78%;
    background:white;
    padding:15px;
    box-sizing:border-box;
}

.sidebar{
    width:22%;
    background:#f5f5f5;
    padding:15px;
    border-left:1px solid #ddd;
    box-sizing:border-box;
}

/*
|--------------------------------------------------------------------------
| TITLES
|--------------------------------------------------------------------------
*/

.section-title,
.side-title{
    font-weight:bold;
    margin-bottom:15px;
    color:#666;
    font-size:13px;
}

/*
|--------------------------------------------------------------------------
| BEAT CARD
|--------------------------------------------------------------------------
*/

.beat-card{
    display:flex;
    gap:15px;
    padding-bottom:18px;
    margin-bottom:18px;
    border-bottom:1px solid #ddd;
    width:100%;
}

.cover{
    width:85px;
    height:85px;
    min-width:85px;
    object-fit:cover;
    border-radius:4px;
    background:#ddd;
}

.beat-info{
    flex:1;
}

.beat-top{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.play-btn{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    border:none;
    background:#8B5CF6;
    color:white;
    cursor:pointer;
    font-size:11px;
}

.producer{
    font-size:11px;
    color:#777;
    margin-bottom:4px;
}

.title{
    font-size:15px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:6px;
}

/*
|--------------------------------------------------------------------------
| PROGRESS BAR
|--------------------------------------------------------------------------
*/

.progress-line{
    height:3px;
    background:#f7f7f7;
    margin:10px 0;
    border-radius:20px;
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.actions{
    display:flex;
    gap:6px;
    flex-wrap:nowrap;
}

.actions button{
    background:#f7f7f7;
    border:1px solid #ddd;
    padding:6px 10px;
    cursor:pointer;
    font-size:11px;
    border-radius:5px;
}

/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.meta{
    width:90px;
    text-align:right;
    color:#777;
    font-size:10px;
}

.time{
    margin-bottom:6px;
}

.category{
    background:#ddd;
    display:inline-block;
    padding:3px 7px;
    margin:5px 0;
    font-size:10px;
}

.stats{
    margin-top:6px;
    line-height:1.5;
}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.sidebar ul{
    padding:0;
    margin:0;
    list-style:none;
}

.sidebar ul li{
    border-bottom:1px solid #ddd;
}

.sidebar ul li a{
    display:block;
    padding:10px 0;
    color:#666;
    text-decoration:none;
    font-size:11px;
}

/*
|--------------------------------------------------------------------------
| ADVANCED PLAYER
|--------------------------------------------------------------------------
*/

.player-bar{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:#f1f1f1;
    border-top:1px solid #ccc;
    padding:10px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    z-index:999;
    box-sizing:border-box;
}

.player-left{
    display:flex;
    align-items:center;
    gap:10px;
    width:260px;
    min-width:260px;
    overflow:hidden;
}

.player-art{
    width:45px;
    height:45px;
    min-width:45px;
    object-fit:cover;
    border-radius:6px;
    background:#ddd;
}

.player-meta{
    overflow:hidden;
    flex:1;
}

#playerTitle{
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#playerArtist{
    font-size:11px;
    color:#777;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.player-center{
    flex:1;
}

.player-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    margin-bottom:5px;
}

.player-controls button{
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:#8B5CF6;
    color:white;
    cursor:pointer;
    font-size:10px;
}

.main-progress{
    width:100%;
    height:4px;
    background:#ccc;
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

#mainProgressBar{
    width:0%;
    height:100%;
    background:#8B5CF6;
}

/*
|--------------------------------------------------------------------------
| AUTH
|--------------------------------------------------------------------------
*/

.auth-box{
    width:100%;
    max-width:350px;
    margin:50px auto;
    background:white;
    padding:20px;
    border:1px solid #ddd;
}

.auth-box input,
.auth-box textarea,
.auth-box select{
    width:100%;
    padding:10px;
    margin-bottom:12px;
    box-sizing:border-box;
    font-size:12px;
}

.auth-box button{
    padding:10px 15px;
    font-size:12px;
}
.site-footer{
    background:#111;
    color:#fff;
    margin-top:30px;
    padding:25px 15px;
}

.footer-inner{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.footer-text{
    flex:1;
    min-width:250px;
}

.footer-social{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.footer-social a{
    color:#fff;
    text-decoration:none;
}

.footer-social a:hover{
    color:#d62828;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:900px){

.container{
    flex-direction:column;
}

.left-content,
.sidebar{
    width:100%;
}

.meta{
    display:none;
}

.title{
    font-size:16px;
}

.player-bar{
    flex-direction:row;
    align-items:center;
}

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

.player-center{
    flex:1;
    width:auto;
}

}

@media(max-width:768px){

.topbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
}

.logo{
    text-align:center;
}

.search-form{
    width:100%;
}

.search-form input{
    width:100%;
    max-width:none;
}

.login-btn{
    text-align:center;
}

}

@media(max-width:600px){

.beat-card{
    gap:10px;
}

.cover{
    width:65px;
    height:65px;
    min-width:65px;
}

.play-btn{
    width:30px;
    height:30px;
    min-width:30px;
}

.title{
    font-size:14px;
}

.actions{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
}

.actions button{
    flex:none;
    white-space:nowrap;
}

}
.modal-overlay{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
backdrop-filter:blur(5px);
z-index:9998;
}

.auth-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
align-items:center;
justify-content:center;
z-index:9999;
padding:15px;
box-sizing:border-box;
}

.auth-modal-box{
width:100%;
max-width:420px;
background:#fff;
padding:25px;
border-radius:16px;
position:relative;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.auth-modal-box h2{
margin-top:0;
text-align:center;
}

.auth-modal-box form{
display:flex;
flex-direction:column;
gap:12px;
}

.auth-modal-box input{
padding:12px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
}

.auth-modal-box button{
background:#d62828;
color:#fff;
border:none;
padding:12px;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

.close-modal{
position:absolute;
top:10px;
right:15px;
font-size:28px;
cursor:pointer;
}

/*
|--------------------------------------------------------------------------
| PHASE 1 MOBILE HEADER
|--------------------------------------------------------------------------
*/

.mobile-header{
    display:flex;
    align-items:center;
    gap:12px;
}

.desktop-menu{
    display:flex;
    gap:10px;
}

.mobile-menu{
    display:none;
}

.menu-toggle{
    display:none;
    border:none;
    background:#444;
    color:#fff;
    width:42px;
    height:42px;
    border-radius:8px;
    cursor:pointer;
    font-size:22px;
}

/* DESKTOP */

@media(min-width:769px){

    .topbar{
        display:flex;
        align-items:center;
        gap:15px;
        flex-wrap:wrap;
    }

    .menu-toggle{
        display:none;
    }

    .desktop-menu{
        display:flex;
        gap:10px;
        margin-left:auto;
    }

    .mobile-menu{
        display:none !important;
    }

}

/* MOBILE */

@media(max-width:768px){

    .topbar{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        padding:15px;
    }

    .mobile-header{
        display:flex;
        align-items:center;
        gap:12px;
        width:100%;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .logo{
        flex:1;
        text-align:center;
    }

    .desktop-menu{
        display:none !important;
    }

    .search-form{
        width:100%;
        display:flex;
        gap:8px;
    }

    .search-form input{
        flex:1;
        max-width:none;
    }

    .mobile-menu{
        display:none;
        width:100%;
        background:#2e2e2e;
        border-top:1px solid #444;
    }

    .mobile-menu.show{
        display:block;
    }

    .mobile-menu a{
        display:block;
        padding:14px 16px;
        color:#fff;
        text-decoration:none;
        border-bottom:1px solid #444;
    }

    .mobile-menu a:hover{
        background:#3a3a3a;
    }

}/*
|--------------------------------------------------------------------------
| PHASE 3 MOBILE BOTTOM NAV
|--------------------------------------------------------------------------
*/

.mobile-bottom-nav{
    display:none;
}

@media(max-width:768px){

.mobile-bottom-nav{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:65px;
    background:#fff;
    border-top:1px solid #ddd;
    display:flex;
    justify-content:space-around;
    align-items:center;
    z-index:99999;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
}

.mobile-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#666;
    font-size:11px;
    gap:4px;
    flex:1;
}

.mobile-nav-item i{
    font-size:18px;
}

.mobile-nav-item:hover{
    color:#d62828;
}

body{
    padding-bottom:140px;
}

.player-bar{
    position:fixed;
    left:0;
    bottom:65px;
    width:100%;
    background:#fff;
    border-top:1px solid #ddd;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    z-index:9998;
    box-sizing:border-box;
}

.site-footer{
background:#111;
color:#fff;
margin-top:40px;
padding:25px 15px;
}

.footer-inner{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.footer-text{
flex:1;
min-width:250px;
}

.footer-social{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.footer-social a{
color:#fff;
text-decoration:none;
}

.footer-social a:hover{
color:#d62828;
}


}