/* =========================================================
   LOVEBIRD MASTER SOUNDS
   Global Style
   Version : 1.0
========================================================= */

:root{

    --primary:#2DD36F;
    --primary-dark:#20b55d;

    --background:#07131F;
    --background2:#0D1E2D;

    --card:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.08);

    --text:#FFFFFF;
    --text2:#A8B8C8;

    --danger:#ff5c5c;

    --shadow:0 10px 30px rgba(0,0,0,.35);

    --radius:22px;

    --transition:.30s ease;

}



/* ========================================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    background:
        linear-gradient(
            180deg,
            #07131F 0%,
            #10263B 100%
        );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}



/* ========================================================= */

img{

    max-width:100%;

    display:block;

}



button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}



input{

    border:none;

    outline:none;

    font-family:inherit;

}



/* =========================================================
APP
========================================================= */

.app{

    width:100%;

    max-width:480px;

    margin:auto;

    padding:

        env(safe-area-inset-top)

        20px

        120px;

}



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

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

.header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.header-left{

    display:flex;

    align-items:center;

    gap:16px;

}

.dashboard-btn{

    width:52px;

    height:52px;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#ffffff;

    transition:.25s;

    backdrop-filter:blur(12px);

}

.dashboard-btn:hover{

    background:#2563EB;

    transform:translateY(-2px);

}

.dashboard-btn span{

    font-size:26px;

}



.logo{

    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    background:

        linear-gradient(
            135deg,
            #2DD36F,
            #17B5B5
        );

    box-shadow:

        0 15px 30px rgba(45,211,111,.25);

}



.header h1{

    font-size:22px;

    font-weight:700;

}



.header p{

    margin-top:4px;

    color:var(--text2);

    font-size:13px;

}



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

.search{

    height:58px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    border-radius:18px;

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(18px);

    margin-bottom:28px;

}



.search span{

    color:var(--text2);

}



.search input{

    flex:1;

    background:none;

    color:white;

    font-size:15px;

}



.search input::placeholder{

    color:#93A4B5;

}



/* =========================================================
CATEGORY
========================================================= */

.category{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:8px;

    scrollbar-width:none;

}



.category::-webkit-scrollbar{

    display:none;

}



.category button{

    min-width:90px;

    height:82px;

    border-radius:18px;

    background:var(--card);

    border:1px solid var(--border);

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    transition:var(--transition);

}



.category button span{

    font-size:13px;

}



.category button.active{

    background:var(--primary);

    color:#06131F;

    font-weight:600;

}



.category button:hover{

    transform:translateY(-4px);

}



/* ========================================================= */

.section-title{

    margin:

        32px 0

        20px;

}



.section-title h2{

    font-size:20px;

}



/* =========================================================
AUDIO LIST
========================================================= */

.audio-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}



/* =========================================================
CARD
========================================================= */

.audio-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px;

    background:var(--card);

    border-radius:22px;

    border:1px solid var(--border);

    backdrop-filter:blur(15px);

    transition:var(--transition);

}



.audio-card:hover{

    transform:translateY(-3px);

}



.audio-card img{

    width:88px;

    height:88px;

    border-radius:18px;

    object-fit:cover;

}



.audio-info{

    flex:1;

}



.audio-info h3{

    font-size:16px;

    margin-bottom:8px;

}



.audio-info p{

    color:var(--text2);

    font-size:13px;

}



.audio-play{

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--primary);

    color:#051019;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}



.audio-play:hover{

    transform:scale(1.1);

}



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

.mini-player{

    position:fixed;

    left:50%;
    transform:translateX(-50%);

    bottom:126px;

    width:min(430px,94%);

    height:76px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:12px 14px;

    background:rgba(15,27,42,.92);

    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    box-shadow:
        0 14px 35px rgba(0,0,0,.35);

    transition:.3s;

    z-index:1200;

}

.mini-player img{

    width:54px;
    height:54px;

    border-radius:16px;

    object-fit:cover;

    flex-shrink:0;

}

.mini-info{

    flex:1;

    overflow:hidden;

}

.mini-info h3{

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.mini-info p{

    margin-top:2px;

    font-size:12px;

    color:var(--text2);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.mini-player button{

    width:52px;
    height:52px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.mini-player button:hover{

    transform:scale(1.08);

}

.mini-player button:active{

    transform:scale(.95);

}



/*=========================================================
BOTTOM NAVIGATION
=========================================================*/

.bottom-nav{

    position:fixed;

    left:50%;
    transform:translateX(-50%);

    bottom:28px;

    width:min(390px,92%);

    height:80px;

    display:flex;
    justify-content:space-around;
    align-items:center;

    background:rgba(11,22,36,.90);

    backdrop-filter:blur(26px);
    -webkit-backdrop-filter:blur(26px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.45);

    z-index:1100;

}



/*=========================================================
NAV BUTTON
=========================================================*/

.bottom-nav .nav-btn{

    flex:1;

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:4px;

    text-decoration:none;

    color:#94A3B8;

    position:relative;

    transition:.28s;

    -webkit-tap-highlight-color:transparent;

}

.bottom-nav .nav-btn span{

    font-size:24px;

    transition:.28s;

}

.bottom-nav .nav-btn small{

    font-size:11px;

    font-weight:600;

    transition:.28s;

}



/*=========================================================
ACTIVE
=========================================================*/

.bottom-nav .nav-btn.active{

    color:var(--primary);

}

.bottom-nav .nav-btn.active span{

    transform:
        translateY(-3px)
        scale(1.08);

    font-variation-settings:
    "FILL" 1,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;

}

.bottom-nav .nav-btn.active small{

    font-weight:700;

}

.bottom-nav .nav-btn.active::after{

    content:"";

    position:absolute;

    bottom:10px;

    width:22px;
    height:4px;

    border-radius:999px;

    background:var(--primary);

    box-shadow:0 0 10px rgba(37,99,235,.45);

}



/*=========================================================
HOVER
=========================================================*/

.bottom-nav .nav-btn:hover{

    color:var(--primary);

}

.bottom-nav .nav-btn:hover span{

    transform:translateY(-2px);

}
/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar{

    width:6px;

}



::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}



/* =========================================================
SELECTION
========================================================= */

::selection{

    background:var(--primary);

    color:black;

}

/* ==========================================
   CATEGORY
========================================== */

.category-btn{

    transition:.25s;

}

.category-btn.active{

    background:#2DD36F;

    color:#07131F;

    font-weight:600;

}

.player-extra button.active{

    color:#2DD36F;

}

/* ===========================
   PAGE
=========================== */

.page{
    display:none;
    animation:fadePage .25s ease;
}

.page.active{
    display:block;
}

@keyframes fadePage{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
.playlist-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#243140;

    border-radius:18px;

    padding:18px;

    margin-bottom:14px;

    cursor:pointer;

    transition:.25s;

}

.playlist-card:hover{

    transform:translateY(-2px);

}

.playlist-card h3{

    margin:0;

}

.playlist-card p{

    margin-top:6px;

    opacity:.7;

}

.playlist-card span{

    font-size:42px;

    color:#31d866;

}

/* ==========================
   ABOUT
========================== */

.about-card{

    text-align:center;

    background:#243140;

    border-radius:20px;

    padding:24px;

    margin-top:20px;

}

.about-logo{

    width:90px;

    height:90px;

    border-radius:20px;

    margin-bottom:16px;

}

.about-card h3{

    margin-bottom:8px;

}

.about-card p{

    opacity:.8;

    line-height:1.6;

}

.about-info{

    margin-top:24px;

}

.about-item{

    display:flex;

    align-items:center;

    gap:16px;

    background:#243140;

    border-radius:16px;

    padding:16px;

    margin-bottom:12px;

}

.about-item span{

    font-size:30px;

    color:#31d866;

}