@media (max-width: 800px) {
  .profile-mark,
  .header-right,
  .menu-button {
    position: relative;
    z-index: 110;
  }

  .menu-button {
    position: absolute !important;
    right: 20px;
    z-index: 120 !important;
    cursor: pointer;
  }

  .nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .nav.open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 90 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    background: #080a0d !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: mobileMenuIn .28s ease both !important;
  }
}

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}