.side-menu[hidden] { display: none; }
.side-menu { position: fixed; z-index: 150; inset: 0; }
.side-menu__backdrop { position: absolute; inset: 0; background: rgb(26 26 26 / 40%); opacity: 0; transition: opacity var(--motion-snap); }
.side-menu__panel { position: fixed; z-index: 1; top: 0; bottom: 0; left: calc(50% - 40px); display: flex; flex-direction: column; width: 480px; max-width: 100%; overflow-y: auto; background: var(--color-surface); transform: translateX(-100%); transition: transform var(--motion-snap); scrollbar-width: none; }
.side-menu__panel::-webkit-scrollbar { display: none; }
.side-menu.is-open .side-menu__backdrop { opacity: 1; }
.side-menu.is-open .side-menu__panel { transform: translateX(0); }
.side-menu__header { display: flex; align-items: flex-start; flex: 0 0 auto; justify-content: space-between; padding: 24px 5%; border-bottom: 8px solid var(--color-soft); }
.user-profile-v1-side-account { display: block; min-width: 0; padding-right: 16px; }
.user-profile-v1-side-account .side-menu__member-name { color: var(--color-ink); }
.user-profile-v1-side-account .side-menu__member-links { display: flex; align-items: center; gap: 12px; min-height: 28px; margin-top: 6px; }
.user-profile-v1-side-account .side-menu__member-links a { color: var(--color-ink); font-weight: 600; }
.user-profile-v1-side-account .side-menu__member-links span { overflow: hidden; color: var(--color-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.side-menu__header strong { display: block; color: var(--color-ink); font-size: 16px; line-height: 24px; }
.side-menu__header a { display: flex; align-items: center; color: var(--color-muted); font-size: 14px; line-height: 20px; }
.side-menu__header a b { margin-left: 2px; font-size: 18px; font-weight: 400; }
.side-menu__header .side-menu__login { color: var(--color-ink); }
.side-menu__account-links { display: flex; align-items: center; margin-top: 8px; }
.side-menu__account-links a:first-child { position: relative; margin-right: 18px; }
.side-menu__account-links a:first-child::after { position: absolute; top: 4px; right: -10px; width: 1px; height: 12px; background: var(--color-border); content: ""; }
.side-menu__close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -10px -10px 0 0; padding: 0; border: 0; background: transparent; }
.side-menu__close svg { width: 24px; height: 24px; }
.side-menu__categories { flex: 0 0 auto; padding: 8px 5% 24px; }
.side-menu__categories a { display: flex; align-items: center; min-height: 81px; border-bottom: 1px solid var(--color-border); }
.side-menu__categories img { flex: 0 0 48px; width: 48px; height: 48px; margin-right: 16px; object-fit: contain; }
.side-menu__categories strong { color: var(--color-ink); font-size: 14px; line-height: 24px; }
.side-menu__categories span { margin-left: auto; color: var(--color-muted); font-size: 24px; font-weight: 300; }
.side-menu__community { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; gap: 0 16px; padding: 0 5% 24px; }
.side-menu__community a { display: flex; align-items: center; min-height: 48px; color: var(--color-ink); font-size: 15px; line-height: 24px; }
.side-menu__notice { display: flex; position: sticky; bottom: 56px; align-items: center; flex: 0 0 56px; min-height: 56px; margin-top: auto; padding: 0 20px; overflow: hidden; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.side-menu__notice svg { flex: 0 0 24px; width: 24px; height: 24px; margin-right: 4px; }
.side-menu__notice strong { flex: 0 0 auto; margin-right: 10px; font-size: 14px; }
.side-menu__notice span { overflow: hidden; color: var(--color-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.side-menu__bottom { display: flex; position: sticky; bottom: 0; flex: 0 0 56px; height: 56px; background: var(--color-ink); color: var(--color-surface); }
.side-menu__bottom a { display: flex; position: relative; align-items: center; justify-content: center; flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.user-profile-v1-side-bottom-account { display: flex; flex: 1; min-width: 0; }
.user-profile-v1-side-bottom-account a { width: 100%; }
.side-menu__bottom a:not(:last-child)::after { position: absolute; top: 22px; right: 0; width: 1px; height: 12px; background: var(--color-muted-strong); content: ""; }
body.is-side-menu-open { overflow: hidden; }
@media (max-width: 1024px) {
  .side-menu__panel { left: max(0px, calc(50% - 240px)); }
}
@media (prefers-reduced-motion: reduce) {
  .side-menu__backdrop,
  .side-menu__panel { transition-duration: .01ms; }
}