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

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:linear-gradient(
        135deg,
        #eef2ff,
        #f9fafb
    );
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
    padding:12px;
    color:#111827;
}

/* =========================================
LAYOUT
========================================= */

.container{
    width:100%;
    max-width:520px;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(12px);
    border-radius:24px;
    padding:18px;
    box-shadow:0 20px 60px rgba(
        0,
        0,
        0,
        0.08
    );
}

/* =========================================
LOGO
========================================= */

.logo{
    width:180px;
    display:block;
    margin:4px auto 10px;
}

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

.nav-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    width:fit-content;

    max-width:100%;

    margin:0 auto;

    background:rgba(255,255,255,0.72);

    backdrop-filter:blur(10px);

    border-radius:16px;

    box-shadow:0 15px 35px rgba(
        0,
        0,
        0,
        0.06
    );

    overflow:hidden;
}

/* TOP NAV */

.nav-modern{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:4px 14px 0;

    padding:11px 18px;

    border-radius:16px 16px 0 0;

    width:100%;

    position:relative;

    z-index:2;

    box-shadow:none;

    background:transparent;
}

.nav-modern a,
.tools-trigger{

    display:flex;

    align-items:center;

    gap:7px;

    color:#6b7280;

    text-decoration:none;

    padding:6px 8px;

    border-radius:8px;

    font-size:0.82rem;

    background:none;

    border:none;

    cursor:pointer;

    font-family:inherit;

    transition:0.15s;

    position:relative;
}

.nav-modern a:hover,
.tools-trigger:hover{
    color:#111827;
}

/* ACTIVE */

.nav-modern a.active{
    color:#111827;
    font-weight:500;
}

.nav-modern a.active::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-8px;

    width:72%;

    height:2px;

    background:#6366f1;

    border-radius:2px;
}

.nav-modern a.active .icon{
    stroke:#111827;
}

.nav-modern .icon{
    width:18px;
    height:18px;
    stroke:#6366f1;
}

.nav-modern .divider{
    width:1px;
    height:16px;
    background:#e5e7eb;
}

/* =========================================
TOOLS ROW
========================================= */

.tools-row{

    display:none;

    align-items:center;

    justify-content:center;

    padding:6px 12px 8px;

    width:100%;

    position:relative;

    z-index:1;

    background:transparent;
}

.tools-row.active{
    display:flex;
}

.tool-card{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:6px 10px;

    text-decoration:none;

    color:#6b7280;

    font-size:0.79rem;

    transition:.15s;

    position:relative;
}

.tool-card:hover{
    color:#111827;
}

.tool-card.active{
    color:#111827;
    font-weight:500;
}

.tool-card.active::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-8px;

    width:72%;

    height:2px;

    background:#6366f1;

    border-radius:2px;
}

.tool-icon{
    width:16px;
    height:16px;
    stroke:#6366f1;
}

/* DIVIDER */

.tool-divider{
    width:1px;
    height:16px;
    background:#e5e7eb;
    margin:0 4px;
}

/* =========================================
FOOTER
========================================= */

.footer{
    margin-top:30px;
    text-align:center;
    font-size:0.72rem;
}

.footer-warning{
    margin-bottom:14px;
    color:#b0b7c3;
    line-height:1.5;
}

.footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.footer-links a{
    color:#6b7280;
    text-decoration:none;
    transition:0.15s;
    font-weight:500;
}

.footer-links a:hover{
    color:#111827;
}

.footer-links span{
    color:#cbd5e1;
}
/* =========================================
MOBILE
========================================= */

@media (max-width:480px){

    body{
        padding:8px;
    }

    .container{
        border-radius:20px;
        padding:14px;
    }

    .logo{
        width:145px;
    }

    /* NAV WRAPPER */

    .nav-wrapper{

        width:fit-content;

        max-width:100%;
    }

    /* TOP NAV */

    .nav-modern{

        gap:6px;

        padding:8px 12px;

        width:100%;

        margin:3px 10px 0;

        overflow-x:auto;

        justify-content:center;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .nav-modern::-webkit-scrollbar{
        display:none;
    }

    .nav-modern a,
    .tools-trigger{

        font-size:0.68rem;

        padding:5px 6px;

        white-space:nowrap;

        flex:0 0 auto;
    }

    .nav-modern .icon{
        width:14px;
        height:14px;
    }

    /* TOOL ROW */

    .tools-row{

        width:100%;

        min-width:0;

        overflow-x:auto;

        justify-content:center;

        padding:5px 12px 7px;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .tools-row::-webkit-scrollbar{
        display:none;
    }

    .tool-card{

        white-space:nowrap;

        font-size:0.68rem;

        flex:0 0 auto;

        padding:5px 7px;
    }

    .tool-icon{
        width:14px;
        height:14px;
    }

    .tool-divider{
        flex:0 0 auto;
    }

    /* ACTIVE LINE */

    .nav-modern a.active::after,
    .tool-card.active::after{

        width:60%;

        bottom:-7px;
    }

}