.menu-button[hidden], .main-menu[hidden], .menu-backdrop[hidden] { display: none; }
.menu-button { margin-left: auto; width: 46px; padding: 10px; display: grid; gap: 5px; place-content: center; }
.menu-button span { display: block; width: 22px; height: 2px; border-radius: 2px; background: white; transition: transform .18s ease, opacity .18s ease; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-backdrop { position: fixed; z-index: 7; inset: 0; background: #071b1480; }
.main-menu { position: fixed; z-index: 8; top: calc(68px + env(safe-area-inset-top)); right: 12px; width: min(310px, calc(100vw - 24px)); padding: 10px; border: 1px solid #d2ddd7; border-radius: 16px; background: white; box-shadow: 0 14px 40px #001b1250; }
.main-menu button, .main-menu a { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 11px; text-align: left; color: #123c2f; background: transparent; text-decoration: none; }
.main-menu button:hover, .main-menu button:focus-visible, .main-menu a:hover, .main-menu a:focus-visible { background: #edf5f1; }
.main-menu button.active { color: white; background: #123c2f; }
.main-menu hr { margin: 7px 5px; border: 0; border-top: 1px solid #dce5e1; }
.main-menu .logout-button { color: #a1241d; }
body.menu-open { overflow: hidden; }
body.menu-open header { z-index: 9; }