:root{
    --bg1:#09090f;
    --bg2:#11111b;
    --card:#17171f;
    --line:rgba(255,255,255,0.08);

    --text:#f8fafc;
    --muted:#a1a1aa;

    --purple:#9146ff;
    --purple-dark:#772ce8;

    --danger:#ef4444;
    --danger-dark:#dc2626;

    --shadow:0 20px 50px rgba(0,0,0,0.35);
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
    min-height:100%;

    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);

    background:
        radial-gradient(circle at top left, rgba(145,70,255,0.20), transparent 28%),
        radial-gradient(circle at top right, rgba(103,232,249,0.10), transparent 20%),
        linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* Links */

a{
    color:#67e8f9;
    text-decoration:none;
}

a:hover{
    opacity:0.9;
}

/* Layout */

.container{
    width:min(1700px,95%);
    margin:0 auto;
    padding:30px 0;
}

/* Card */

.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
}

/* Buttons */

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 18px;

    background:var(--purple);
    color:#fff;

    border:none;
    border-radius:10px;

    cursor:pointer;
    font-weight:700;

    transition:0.18s ease;
}

.button:hover{
    background:var(--purple-dark);
}

/* NAVBAR */

.top-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    margin-bottom:24px;

    padding:16px 20px;

    background:rgba(17,23,39,0.80);
    border:1px solid var(--line);

    border-radius:18px;

    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);

    flex-wrap:wrap;
}

/* LEFT PART */

.top-nav-left{
    display:flex;
    align-items:center;
    gap:14px;
}

/* LOGO */

.top-nav-logo{
    width:48px;
    height:48px;

    object-fit:contain;

    border-radius:12px;

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

    padding:4px;

    border:1px solid rgba(255,255,255,0.08);
}

/* TITLE */

.top-nav-title{
    font-size:1.2rem;
    font-weight:800;
}

.top-nav-sub{
    font-size:0.9rem;
    color:var(--muted);
}

/* LINKS */

.top-nav-links{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

/* NAV BUTTON */

.top-nav-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    border-radius:10px;

    background:#23232d;
    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:0.18s ease;
}

.top-nav-link:hover{
    background:#2e2e3b;
}

/* ACTIVE */

.top-nav-link.active{
    background:var(--purple);
}

/* DANGER */

.top-nav-link.danger{
    background:var(--danger);
}

.top-nav-link.danger:hover{
    background:var(--danger-dark);
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0f0f14;
}

::-webkit-scrollbar-thumb{
    background:#2e2e3b;
    border-radius:8px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3a3a4a;
}