.main-menu{
  display:flex; gap:20px; padding:10px 20px; justify-content:center; flex-wrap:wrap;
  border-bottom:1px solid var(--c-border); background:var(--c-body-bg); color:var(--c-text);
  font-family:sans-serif;
}
.menu-item{
  text-decoration:none; font-size:1rem; padding:8px 14px; border-radius:8px; color:inherit;
  transition:background .3s, color .3s;
}
.menu-item:hover{background: rgba(100,100,255,.1);}
.menu-item.active{font-weight:bold; cursor:default; background: rgba(100,100,255,.2); pointer-events:none;}

.logout-form{margin:0;}
.logout-button{
  font-size:1rem; padding:8px 14px; border-radius:8px; background:none; border:0; color:#888;
  cursor:pointer; transition: background .3s, color .3s, border-color .3s;
}
.logout-button:hover{background: rgba(200,50,50,.1); color:#c00; border-color:#c00;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .main-menu{border-color:#444;}
  :root:not([data-theme="light"]) .menu-item:hover{background: rgba(150,150,255,.1);}
  :root:not([data-theme="light"]) .menu-item.active{background: rgba(150,150,255,.2);}
  :root:not([data-theme="light"]) .logout-button{color:#aaa;}
  :root:not([data-theme="light"]) .logout-button:hover{background: rgba(255,80,80,.15); color:#ff5555;}
}
:root[data-theme="dark"] .main-menu{border-color:#444;}
:root[data-theme="dark"] .menu-item:hover{background: rgba(150,150,255,.1);}
:root[data-theme="dark"] .menu-item.active{background: rgba(150,150,255,.2);}
:root[data-theme="dark"] .logout-button{color:#aaa;}
:root[data-theme="dark"] .logout-button:hover{background: rgba(255,80,80,.15); color:#ff5555;}