.menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 280px; 
    background: rgba(255,255,255,0.95); 
    backdrop-filter: blur(10px); 
    padding: 2rem; 
    z-index: 1001; 
    border-right: 1px solid rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: background 0.5s, border-color 0.5s;
}
.menu-top { display: flex; flex-direction: column; gap: 3rem; }
.logo { display: flex; flex-direction: column; gap: 4rem; }
.logo-name { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.logo-name a { color: #222; text-decoration: none; transition: color 0.5s; }
.logo-title { font-size: 0.6rem; font-weight: 500; color: #666; letter-spacing: 0.15em; transition: color 0.5s; }
nav { display: flex; flex-direction: column; gap: 2rem; }
nav a { color: #222; text-decoration: none; font-size: 1.2rem; font-weight: 100; letter-spacing: 0.2em; opacity: 0.6; transition: opacity 0.3s, color 0.5s; }
nav a:hover, nav a.active { opacity: 1; }
.menu-bottom { padding-top: 2rem; }
.menu-bottom > div { display: flex; flex-direction: row; gap: 1rem; }

body.dark-mode .menu { background: rgba(0,0,0,0.95); border-right: 1px solid rgba(255,255,255,0.1); }
body.dark-mode .logo-name a, body.dark-mode nav a { color: #fff; }
body.dark-mode .logo-title { color: #888; }

body { margin-left: 280px; }
@media (max-width: 768px) {
    .menu { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: auto; padding: 1.5rem 0.2rem 0.2rem 1.5rem; border-right: none; border-bottom: 0.4px solid rgba(0,0,0,0.1); z-index: 1002; }
    body.dark-mode .menu { border-bottom: 0.4px solid rgba(255,255,255,0.1); }
    nav { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
    body { margin-left: 0; }
}