.menu-button{
  position:fixed;
  top:max(18px,env(safe-area-inset-top));
  inset-inline-start:18px;
  z-index:40;
  width:42px;
  height:42px;
  padding:10px;
  border-radius:13px;
  background:rgba(8,17,31,.88);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  transition:transform .2s ease,opacity .2s ease,border-color .2s ease;
}
.menu-button span{display:block;width:100%;height:2px;border-radius:2px;background:#fff}
.menu-button:hover,.menu-button:focus-visible{border-color:var(--cyan);outline:none}
.menu-button.menu-hidden{transform:translateY(calc(-100% - 30px));opacity:0;pointer-events:none}
.drawer-backdrop{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.58);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.drawer-backdrop.show{opacity:1;visibility:visible}
.side-drawer{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  z-index:80;
  width:min(340px,88vw);
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#101d30,#08111f);
  border-inline-end:1px solid rgba(255,255,255,.12);
  box-shadow:20px 0 60px rgba(0,0,0,.5);
  transform:translateX(-105%);
  transition:transform .24s ease;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
[dir="rtl"] .side-drawer{transform:translateX(105%);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.side-drawer.open{transform:translateX(0)}
.drawer-open{overflow:hidden}
.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 4px 18px;border-bottom:1px solid var(--line)}
.drawer-kicker{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.drawer-header h2{font-size:23px;line-height:1.15;margin:6px 0 0}
.drawer-close{flex:0 0 38px;height:38px;border-radius:12px;background:#172740;color:#fff;font-size:25px;line-height:1}
.drawer-close:hover,.drawer-close:focus-visible{background:#203754;outline:2px solid var(--cyan)}
.drawer-nav{display:grid;gap:7px;padding:18px 0}
.drawer-link{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:transparent;
  color:#eaf3ff;
  text-align:start;
  font-size:16px;
  font-weight:700;
}
.drawer-link:hover,.drawer-link:focus-visible{background:rgba(255,255,255,.07);outline:none}
.drawer-link.active{background:rgba(54,224,208,.12);color:#8ff9ef}
.drawer-link small{color:var(--muted);font-size:11px;font-weight:600}
.drawer-language{margin-top:4px;padding-top:18px;border-top:1px solid var(--line)}
.drawer-section-title{margin:0 4px 12px;color:#dce9f8;font-size:14px;font-weight:800}
.drawer-language-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-language-grid button{
  min-height:44px;
  padding:9px 10px;
  border-radius:12px;
  background:#14243a;
  color:#fff;
  border:1px solid var(--line);
  text-align:start;
  font-size:14px;
}
.drawer-language-grid button span{margin-inline-end:6px}
.drawer-language-grid button:hover,.drawer-language-grid button:focus-visible{border-color:var(--cyan);outline:none}
.drawer-language-grid button.active{background:rgba(54,224,208,.15);border-color:var(--cyan);color:#a8fff7}
.drawer-version{margin-top:auto;padding:20px 4px 2px;color:#7f91aa;font-size:11px;text-align:center;direction:ltr}
@media (prefers-reduced-motion:reduce){.side-drawer,.drawer-backdrop,.menu-button{transition:none}}