:root{

    --primary:#4F7CFF;
    --primary-container:#DCE1FF;

    --background:#0F1115;
    --surface:#1A1D23;
    --surface2:#252932;

    --text:#FFFFFF;
    --text2:#B5BAC5;

    --border:#30343C;

    --success:#2ECC71;
    --warning:#F39C12;
    --error:#E74C3C;

    --radius:24px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Vazirmatn",sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--background);
    color:var(--text);

}

/* Splash */

#splash{

    position:fixed;
    inset:0;

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

    gap:20px;

    background:var(--background);

    z-index:9999;

}

#splash img{

    width:90px;
    height:90px;

}

#app{

    max-width:700px;
    margin:auto;

    min-height:100vh;

    padding-bottom:90px;

}

/* TopBar */

.topbar{

    position:sticky;
    top:0;

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

    padding:18px;

    background:rgba(15,17,21,.75);

    backdrop-filter:blur(20px);

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

    z-index:100;

}

.topbar h2{

    font-size:20px;

    font-weight:700;

}

.icon-btn{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:var(--surface);

    color:white;

    cursor:pointer;

    transition:.25s;

}

.icon-btn:hover{

    background:var(--surface2);

}

/* Search */

#searchBox{

    padding:16px;

}

#searchInput{

    width:100%;

    padding:14px 18px;

    border:none;

    outline:none;

    border-radius:18px;

    background:var(--surface);

    color:white;

    font-size:15px;

}

/* Proxy List */

#proxyList{

    display:flex;
    flex-direction:column;

    gap:14px;

    padding:16px;

}

/* Card */

.proxy-card{

    background:var(--surface);

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

    border-radius:24px;

    padding:18px;

    transition:.25s;

}

.proxy-card:hover{

    transform:translateY(-2px);

    border-color:var(--primary);

}

/* FAB */

#fab{

    position:fixed;

    right:24px;
    bottom:90px;

    width:62px;
    height:62px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:white;

    cursor:pointer;

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

}

/* Bottom */

.bottomNav{

    position:fixed;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;
    max-width:700px;

    height:75px;

    display:flex;

    background:rgba(20,22,28,.85);

    backdrop-filter:blur(24px);

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

}

.bottomNav button{

    flex:1;

    border:none;

    background:none;

    color:var(--text2);

    cursor:pointer;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    transition:.25s;

}

.bottomNav button.active{

    color:var(--primary);

}

.material-symbols-rounded{

    font-size:26px;

}