#mobile-nav-drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(340px, 88vw); max-width: 100vw;
  height: 100dvh; max-height: 100dvh; margin: 0;
  padding: max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box; overflow-y: auto;
  background: #11182a; color: #edf2ff;
  border: 0; border-left: 1px solid #3a3154;
  box-shadow: -16px 0 60px #0007;
}
#mobile-nav-drawer[open] { animation: mobile-drawer-enter .23s ease-out; }
#mobile-nav-drawer::backdrop { background: #030611b8; backdrop-filter: blur(3px); }
.mobile-drawer-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid #ffffff16; }
.mobile-drawer-heading strong { font-size: 20px; }
.mobile-drawer-heading button { width: 42px; height: 42px; border: 1px solid #514264; border-radius: 12px; background: #251f3b; color: #fff; font-size: 28px; cursor: pointer; }
#mobile-nav-drawer nav { display: flex; flex-direction: column; gap: 9px; }
#mobile-nav-drawer nav a { display: flex; align-items: center; gap: 12px; padding: 15px 12px; min-height: 48px; border-radius: 12px; color: #e0e7ff; }
#mobile-nav-drawer nav a:hover, #mobile-nav-drawer nav a:focus-visible { background: #34254e; color: #fff; }
#mobile-nav-drawer :focus-visible { outline: 2px solid #b69aff; outline-offset: 3px; }
@keyframes mobile-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media(prefers-reduced-motion:reduce) { #mobile-nav-drawer[open] { animation: none; } }