.v2-topbar {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 500;
  pointer-events: none;
}

.v2-topbar-shell {
  position: relative;
  width: min(1180px, calc(100vw - 36px));
  min-height: var(--v2-header-height);
  margin: 0 auto;
  padding: 8px 10px 8px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 38%),
    rgba(8, 7, 14, .48);
  box-shadow:
    0 16px 55px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  pointer-events: auto;
  overflow: visible;
  transition:
    width 480ms cubic-bezier(.2,.8,.2,1),
    min-height 480ms cubic-bezier(.2,.8,.2,1),
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease,
    transform 350ms ease;
}

.v2-topbar-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .55;
  background: radial-gradient(260px circle at var(--nav-light-x, 50%) -35%, rgba(199, 178, 255, .18), transparent 58%);
}

.v2-topbar.is-scrolled .v2-topbar-shell {
  width: min(1080px, calc(100vw - 32px));
  min-height: 62px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%),
    rgba(7, 6, 12, .78);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.075);
}

.v2-brand {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  text-decoration: none;
  color: white;
  transition: background-color 220ms ease, transform 220ms ease;
}

.v2-brand:hover,
.v2-brand:focus-visible {
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.v2-brand img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(145, 112, 220, .22));
}

.v2-nav {
  min-width: 0;
}

.v2-menu-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.v2-nav-link {
  position: relative;
  padding: 11px 15px;
  border-radius: 12px;
  color: rgba(245, 241, 255, .68);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .015em;
  transition: color 180ms ease, background-color 180ms ease;
}

.v2-nav-link:hover,
.v2-nav-link:focus-visible,
.v2-nav-link.is-active {
  color: #fff;
  background: rgba(255,255,255,.055);
}

.v2-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--v2-lavender-bright), transparent);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.v2-nav-link.is-active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.v2-topbar-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.v2-project-cta {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(203, 185, 255, .22);
  border-radius: 15px;
  color: #fff;
  text-decoration: none;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .015em;
  background:
    radial-gradient(circle at 35% 0%, rgba(194, 171, 255, .20), transparent 55%),
    rgba(136, 104, 211, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.v2-project-cta:hover,
.v2-project-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(210, 195, 255, .42);
  background-color: rgba(148, 114, 221, .20);
}

.v2-project-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 220ms ease;
}

.v2-project-cta:hover svg { transform: translateX(2px); }

.v2-topbar .nav-profile {
  position: relative;
  display: block;
}

.v2-topbar .profile-trigger {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.v2-topbar .profile-trigger:hover,
.v2-topbar .profile-trigger:focus-visible,
.v2-topbar .profile-trigger[aria-expanded="true"] {
  border-color: rgba(194, 174, 255, .28);
  background: rgba(255,255,255,.075);
  transform: translateY(-1px);
}

.v2-topbar .profile-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(154,127,232,.28), rgba(30,22,52,.38));
  color: #eee7ff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.v2-topbar .profile-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

.v2-topbar .account-box {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}

.v2-topbar #profileDropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(10, 8, 17, .91);
  box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  padding: 18px;
  pointer-events: auto;
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
}

.v2-topbar #profileDropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.v2-topbar .profile-section p {
  margin: 0 0 14px;
  color: var(--v2-text-soft);
  line-height: 1.55;
  font-size: .88rem;
}

.v2-topbar .profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.v2-topbar .profile-photo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0b0912 center/cover no-repeat;
  border: 1px solid rgba(190,170,255,.18);
  box-shadow: inset 0 0 0 2px rgba(5,4,9,.82);
  color: white;
  font-weight: 800;
}

.v2-topbar .profile-name { color: #fff !important; font-weight: 700; margin-bottom: 2px !important; }
.v2-topbar .profile-email { color: var(--v2-text-muted) !important; font-size: .78rem !important; overflow-wrap: anywhere; }
.v2-topbar .profile-actions .btn { width: 100%; }

.v2-menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
}

.v2-menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 260ms ease, opacity 180ms ease;
}

.v2-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.v2-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.v2-menu-backdrop {
  display: none;
}

@media (max-width: 950px) {
  .v2-menu-toggle { display: block; }
  .v2-topbar-shell { grid-template-columns: auto 1fr auto; }
  .v2-nav { position: static; }

  .v2-menu-panel {
    position: fixed;
    inset: 0;
    z-index: -1;
    min-height: 100dvh;
    padding: calc(96px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 50% 16%, rgba(103, 72, 168, .20), transparent 32%),
      rgba(3, 2, 7, .985);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity 320ms ease, visibility 320ms ease, transform 320ms ease;
  }

  .v2-menu-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .v2-menu-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(255,255,255,.24) 0 1px, transparent 1.6px);
    background-size: 84px 84px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 72%);
    opacity: .18;
  }

  .v2-nav-link {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    min-height: 70px;
    margin: 0 auto;
    padding: 18px 4px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: transparent !important;
    font-family: Manrope, Inter, sans-serif;
    font-size: clamp(1.45rem, 5.2vw, 2.45rem);
    font-weight: 600;
    letter-spacing: -.045em;
    color: rgba(255,255,255,.78);
  }

  .v2-nav-link::after { display: none; }
  .v2-nav-link:hover, .v2-nav-link:focus-visible { color: #fff; }
}

@media (max-width: 650px) {
  .v2-topbar { top: 12px; }
  .v2-topbar-shell,
  .v2-topbar.is-scrolled .v2-topbar-shell {
    width: calc(100vw - 24px);
    min-height: 58px;
    padding: 6px 7px 6px 9px;
    border-radius: 20px;
  }
  .v2-brand { width: 44px; height: 44px; }
  .v2-brand img { width: 31px; height: 31px; }
  .v2-project-cta { display: none; }
  .v2-topbar-actions { gap: 6px; }
  .v2-topbar .profile-trigger,
  .v2-menu-toggle { width: 44px; height: 44px; border-radius: 14px; }
  .v2-menu-panel { padding-top: calc(88px + env(safe-area-inset-top)); }
}

@media (max-width: 950px) {
  body.is-menu-open { overflow:hidden; }
  body.is-menu-open .v2-universe-canvas { opacity:.34; }
  body.is-menu-open main { opacity:.32; }
}

@media (max-width: 820px), (pointer: coarse) {
  .v2-topbar-shell {
    background:
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.015) 38%),
      rgba(8,7,14,.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}