:root{
    --bg:#0d0b12;
    --surface:#171320;
    --card:#1f1a2a;
    --border:#2f2740;
    --text:#eee8f8;
    --muted:#9787b6;
    --accent1:#c97ef5;
    --accent2:#f576b8;
    --accent3:#5cf0c8;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:sans-serif;
}

.container{
    max-width:1400px;
    margin:0 auto;
    padding:2rem;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 2rem;
    background:rgba(0,0,0,0.3);
    border-bottom:1px solid var(--border);
}

.brand{
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:1.2rem;
    font-weight:700;
}

.brand img{
    width:56px;
    height:56px;
    border-radius:50%;
}

nav{
    display:flex;
    gap:1rem;
}

nav a{
    color:var(--text);
}