:root {
    --bg: #0d0f14;
    --surface: #13161e;
    --surface2: #1a1e28;
    --border: #242836;
    --accent: #6c63ff;
    --accent2: #ff6b6b;
    --accent3: #43e97b;
    --text: #e8eaf0;
    --muted: #F2F0F0;
    --card-h: 220px;
    --nav-w: 72px;
    --radius: 16px;
  }
  
.menu {
    text-align: center;
    font-weight: bold;
}

.menu-item {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--muted);
    font-weight:bold;
    font-size: 10px;
    transition: color 0.2s;
}

.topbar{
display:flex;
justify-content:space-around;
border-radius: var(--radius);
margin:5px;
align-items:center;
padding:12px;
background: var(--surface);
border: 1px solid var(--border);
box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* Logout Button */
.logout-btn{
    background:#7569FE;
    color:#ffffff;
    border:none;
    padding:8px 12px;
    border-radius:20px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}