:root{--menu-width: 320px;--menu-bg: #ffffff;--menu-text: #333333;--menu-border: #e2e8f0;--menu-hover: #f8fafc;--menu-active: #3b82f6;--overlay-bg: rgba(0, 0, 0, .5)}.dark{--menu-bg: #1f2937;--menu-text: #f9fafb;--menu-border: #374151;--menu-hover: #374151;--overlay-bg: rgba(0, 0, 0, .7)}.hamburger-button{position:fixed;top:20px;left:20px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--menu-bg);border:2px solid var(--menu-border);cursor:pointer;border-radius:8px;transition:all .2s ease;z-index:10000;box-shadow:0 2px 10px #0000001a}.hamburger-button.menu-open{opacity:0;pointer-events:none}.hamburger-button:hover{background-color:var(--menu-hover)}.hamburger-icon{width:24px;height:18px;position:relative}.hamburger-icon span{display:block;position:absolute;height:2px;width:100%;background:var(--menu-text);border-radius:1px;opacity:1;left:0;transition:.25s ease-in-out}.hamburger-icon span:nth-child(1){top:0}.hamburger-icon span:nth-child(2){top:8px}.hamburger-icon span:nth-child(3){top:16px}.hamburger-icon.open span:nth-child(1){top:8px;transform:rotate(135deg)}.hamburger-icon.open span:nth-child(2){opacity:0;left:-60px}.hamburger-icon.open span:nth-child(3){top:8px;transform:rotate(-135deg)}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-bg);z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.menu-container{position:fixed;top:0;left:0;bottom:0;width:var(--menu-width);background:var(--menu-bg);box-shadow:10px 0 40px #00000026;display:flex;flex-direction:column;overflow:hidden;animation:slideInLeft .3s ease}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}.menu-header{position:relative;padding:1.5rem 3.75rem 1.5rem 1.5rem;border-bottom:1px solid var(--menu-border);display:flex;align-items:center}.menu-header h2{margin:0;color:var(--menu-text);font-size:1.25rem;font-weight:600;flex:1}.close-button{position:absolute;top:50%;right:1.5rem;transform:translateY(-50%);width:32px;height:32px;background:none;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--menu-text);font-size:1.5rem;transition:background-color .2s ease}.close-button:hover{background-color:var(--menu-hover)}.user-info{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-bottom:1px solid var(--menu-border);background:var(--menu-hover)}.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--menu-active);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem}.user-details{flex:1;min-width:0}.user-name{font-weight:600;color:var(--menu-text);margin:0;font-size:.9rem}.user-email{color:var(--menu-text);opacity:.7;margin:0;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:.5rem 0}.menu-section{margin-bottom:.5rem}.section-title{padding:.75rem 1.5rem .5rem;color:var(--menu-text);opacity:.6;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:0}.menu-item-wrapper{position:relative}.menu-item{display:block;width:100%;padding:.75rem 1.5rem;background:none;border:none;text-align:left;cursor:pointer;transition:all .2s ease;color:var(--menu-text);font-size:.95rem}.menu-item:hover:not(:disabled){background-color:var(--menu-hover)}.menu-login-link{font-weight:600;border-bottom:1px solid var(--menu-border)}.menu-item:disabled{opacity:.5;cursor:not-allowed}.item-content{display:flex;align-items:center;gap:.75rem;width:100%}.item-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.item-text{flex:1;min-width:0}.item-label{display:block;font-weight:500;line-height:1.2}.item-description{display:block;font-size:.8rem;opacity:.7;line-height:1.3;margin-top:.1rem}.item-arrow{width:16px;height:16px;transition:transform .2s ease;opacity:.6;font-size:.8rem}.item-arrow.expanded{transform:rotate(90deg)}.submenu{background:var(--menu-hover);border-left:3px solid var(--menu-active)}.submenu-item{padding-left:3rem;font-size:.9rem;opacity:.9}.submenu-branch{width:100%}.submenu-nested{border-left-width:2px;margin-left:.75rem}.submenu-item-nested{padding-left:3.5rem;font-size:.85rem}.menu-divider{height:1px;background:var(--menu-border);margin:.5rem 1.5rem}@media(max-width:480px){.menu-container{width:100vw}}@media(max-width:768px){:root{--menu-width: 280px}}
