/* globals.css is now loaded directly via <link> in every template that uses
   navbar.css — no @import here, so both sheets fetch in parallel. */

/* Allow descenders to render outside flex+border-radius containers */
a, button {
  overflow: visible;
}

.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent-color, var(--color-accent));
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.user-menu {
  position: relative;
}

/* Hover bridge: covers the gap between the trigger and the dropdown so the
   mouse can swipe down to the menu without mouseleave firing. Only active
   while the dropdown is open; invisible otherwise. */
.user-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: min(21rem, calc(100vw - 1.5rem));
  height: 1rem;
  pointer-events: none;
}

.user-menu:has(> .user-dropdown:not(.hidden))::after,
.user-menu.is-dropdown-open::after {
  pointer-events: auto;
}

@media (max-width: 768px) {
  /* Mobile dropdown is fixed-positioned center-screen; bridge isn't needed
     and would interfere with navbar elements. */
  .user-menu::after {
    display: none;
  }
}

.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(15, 15, 17, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  color: var(--color-text-secondary);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border-radius: var(--radius-pill);
}

.user-menu-trigger:hover,
.user-menu-trigger:focus-visible,
.user-menu-trigger[aria-expanded="true"] {
  background: rgba(15, 15, 17, 0.85);
  border-color: rgba(129, 137, 255, 0.45);
  color: var(--color-text);
  box-shadow: none;
}

.user-menu-trigger[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.site-navbar[data-session-pending="true"] .user-menu-trigger [data-nav-avatar],
.site-navbar[data-session-pending="true"] .user-menu-trigger [data-nav-username] {
  opacity: 0;
}

/* `.user-dropdown` is defined once further down (search for the
   "User dropdown — consolidated" block). This stub used to hold
   an early override; consolidated to avoid three competing
   definitions with identical properties and slightly different
   values. */

.user-dropdown.hidden {
  display: none;
}

.user-dropdown-header {
  padding: 1rem;
  background: transparent;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.user-dropdown-section {
  padding: 0.5rem 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.user-dropdown-item i {
  color: var(--color-accent-light);
}

.lol-discord {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  /* Smooth transition for the rotation */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Make the child FA icon inherit the muted gray so the global
   `i[class*="fa-"] { color: var(--color-icon) }` brand accent default doesn't
   win inside the navbar's Discord anchor. */
.lol-discord i { color: inherit; }

.lol-discord:hover {
  color: var(--color-brand);
  /* Rotate 360 degrees and scale up */
  transform: scale(1.3) rotate(360deg);
}

.user-dropdown-item span {
  flex: 1;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

/* Mobile menu page replacement */
#mobileMenu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 55;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--site-chrome-glass-bg-strong, rgba(15, 15, 17, 0.95));
  backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
}

html.mobile-menu-open #mobileMenu,
body.mobile-menu-open #mobileMenu {
  opacity: 1 !important;
}

#mobileMenu .mobile-menu-shell {
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: calc(var(--navbar-height) + clamp(2.25rem, 8vw, 4rem)) clamp(1.25rem, 5vw, 2.5rem) 3rem;
}

#mobileMenu .mobile-menu-card {
  width: 100%;
}

#mobileMenu .mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#mobileMenu .mobile-menu-section + .mobile-menu-section {
  margin-top: clamp(1.8rem, 7vw, 2.75rem);
}

#mobileMenu .mobile-menu-section-label {
  margin: 0 0 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

#mobileMenu .mobile-menu-link {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.85rem, 3vw, 1.4rem);
  color: var(--color-text-secondary);
  font-size: clamp(1.55rem, 7vw, 3rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: clamp(1rem, 3.8vw, 1.35rem) 0;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

#mobileMenu .mobile-menu-link i,
#mobileMenu .mobile-menu-link .lucide-icon,
#mobileMenu .mobile-menu-link .brand-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-icon);
  font-size: clamp(1rem, 4vw, 1.25rem);
  text-align: center;
  transition: color 0.18s ease;
}

#mobileMenu .mobile-menu-link .brand-icon {
  fill: currentColor;
}

#mobileMenu .mobile-menu-link:hover {
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateX(0.25rem);
}

#mobileMenu .mobile-menu-link:hover i,
#mobileMenu .mobile-menu-link.active i,
#mobileMenu .mobile-menu-link:hover .lucide-icon,
#mobileMenu .mobile-menu-link.active .lucide-icon,
#mobileMenu .mobile-menu-link:hover .brand-icon,
#mobileMenu .mobile-menu-link.active .brand-icon {
  color: var(--color-accent-light);
}

#mobileMenu .mobile-menu-link.active {
  color: var(--color-text);
  border-color: rgba(var(--color-brand-rgb), 0.45);
}

#mobileMenu .mobile-menu-link.primary {
  color: var(--color-text);
}

#mobileMenu .mobile-menu-link.primary i,
#mobileMenu .mobile-menu-link.primary .lucide-icon,
#mobileMenu .mobile-menu-link.primary .brand-icon {
  color: var(--color-accent-light);
}

#mobileMenu .mobile-menu-account-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.65rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.85rem;
  background: var(--site-chrome-dropdown-surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#mobileMenu .mobile-menu-account-card img {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  object-fit: cover;
}

#mobileMenu .mobile-menu-account-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

#mobileMenu .mobile-menu-account-name {
  overflow: hidden;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#mobileMenu .mobile-menu-account-state {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

#mobileMenu .mobile-menu-link--account {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.85rem;
  margin-top: 0.5rem;
  padding: 0.88rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.82rem;
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 4.2vw, 1.16rem);
  font-weight: 650;
  line-height: 1.15;
}

#mobileMenu .mobile-menu-link--account i {
  width: 1.5rem;
  font-size: 1rem;
}

#mobileMenu .mobile-menu-link--account:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(0.12rem);
}

#mobileMenu .mobile-menu-link--danger,
#mobileMenu .mobile-menu-link--danger i {
  color: #fb7185;
}

#mobileMenu .mobile-divider {
  height: clamp(1.1rem, 4vw, 1.75rem);
}

#mobileMenu .mobile-menu-note {
  padding: 0.7rem 0 0.95rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

body {
  background-color: var(--primary-bg, var(--color-bg));
  color: var(--text-primary, var(--color-text));
  min-height: 100vh;
  position: relative;
  z-index: 0;
  padding-top: var(--navbar-height);
  /* Override generated tailwind overlay scrollbar to avoid layout shifts */
  overflow-y: auto;
}

/* Global gradient background applied everywhere (matches index/contact) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.055) 0%,
      transparent 50%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 0%, transparent 50%),
    radial-gradient(circle at 20% 20%,
      rgba(255, 255, 255, 0.08),
      transparent 50%),
    radial-gradient(circle at 80% 80%,
      rgba(255, 255, 255, 0.05),
      transparent 50%),
    var(--primary-bg, var(--color-bg));
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.site-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background-color: rgba(15, 15, 17, 0.95);
  border-bottom: 1px solid rgba(51, 65, 85, 0.85);
  backdrop-filter: blur(12px);
}

footer {
  background-color: rgba(15, 15, 17, 0.95);
  border-top: 1px solid rgba(51, 65, 85, 0.85);
  backdrop-filter: blur(12px);
}

/* Mobile Menu Open State */
@media (max-width: 1199px) {
  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }

  html.mobile-menu-open .site-navbar,
  body.mobile-menu-open .site-navbar {
    border-bottom-color: transparent;
  }

  body.mobile-menu-open main,
  body.mobile-menu-open .scps-origin-page {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  #mobileMenu {
    display: none !important;
  }
}

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none;
}

body.modal-open main,
body.modal-open footer {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: all 0.3s ease;
}

/* Prevent page scroll on special layouts when dropdown is open */
html.modal-open .scps-origin-page,
body.modal-open .scps-origin-page {
  height: 100vh !important;
  overflow: hidden !important;
}

/* Global Hero Title Gradient */
.hero-title-gradient {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #ffffff, var(--color-text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

body.page-edit .hero-title-gradient,
body.page-upload .hero-title-gradient {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  line-height: 1.08;
  margin-bottom: 0.75rem;
}

body.page-edit main,
body.page-upload main {
  padding-top: 2.75rem;
}

@media (max-width: 768px) {
  body.page-edit main,
  body.page-upload main {
    padding-top: 1.5rem;
  }
}

/* Animations */
.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Site Chrome Overrides
   ============================================ */

/* Site chrome tokens. Canonical design tokens live in globals.css. */
:root {
  --site-chrome-bg: #080d1a;
  --site-chrome-surface: var(--color-bg-overlay);
  --site-chrome-border: rgba(51, 65, 85, 0.45);
  --site-chrome-text: var(--color-text);
  --site-chrome-text-muted: var(--color-text-muted);
  --site-chrome-text-secondary: var(--color-text-secondary);
  --site-chrome-accent: var(--color-accent);
  --site-chrome-accent-strong: var(--color-accent-hover);
  --site-chrome-glass-bg: rgba(15, 15, 17, 0.38);
  --site-chrome-glass-bg-strong: rgba(15, 15, 17, 0.46);
  --site-chrome-glass-border: rgba(255, 255, 255, 0.09);
  --site-chrome-glass-blur: 18px;
  --site-chrome-dropdown-surface: rgba(15, 15, 17, 0.82);
}

body {
  background-color: var(--site-chrome-bg);
  color: var(--site-chrome-text);
  padding-top: var(--navbar-height);
}

body::before {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 255, 255, 0.07), transparent),
    #080d1a;
}

.site-navbar {
  height: var(--navbar-height);
  background: transparent;
}

/* Constrain the navbar's inner container to the same width + padding as
   .home-content (homepage) and .browse-wrap so the brand logo left-aligns
   with the "Scenepacks" heading / trending posters, and the user dropdown
   right-aligns with the hub-row "More" buttons. */
.site-navbar .container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.site-navbar.is-scrolled {
  background: transparent;
  background-color: transparent;
}

.site-navbar[data-force-scrolled="true"] {
  background: rgba(15, 15, 17, 0.95);
  background-color: rgba(15, 15, 17, 0.95);
  border-bottom: 1px solid rgba(51, 65, 85, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar-shell {
  min-height: var(--navbar-height);
  display: grid;
  /* Side columns use `minmax(0, 1fr)` instead of `auto` so they
     always share remaining space equally — that anchors the
     middle column (the public nav) to the true viewport center
     regardless of how wide the brand on the left or the user
     menu on the right ends up being. With the previous
     `auto 1fr auto`, a long username made `.navbar-actions`
     wider on the right, which shrank the middle `1fr` column
     asymmetrically and pushed the centered nav links off-axis.
     `minmax(0, 1fr)` lets each side track shrink as small as
     needed (allowing the actions cluster to sit flush with the
     navbar's right edge via `justify-self: end` on
     `.navbar-actions`) while keeping the two side tracks the
     same width as each other.  */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--site-chrome-text-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  justify-self: start;
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.site-brand span {
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Branding for hero text — matches navbar SCENEPACKS */
.brand-text {
  font-family: var(--font-sans);
  font-weight: 700;
}

.site-brand:hover {
  color: #fff;
}

.desktop-public-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
}

.nav-link {
  color: var(--site-chrome-text-muted);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 550;
  padding: 0.42rem 0.62rem;
  border-radius: 0.4rem;
  transition: color 0.2s ease, background 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.nav-link::after {
  display: block;
}

.nav-link:hover {
  color: var(--site-chrome-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-link.active {
  color: #fff;
  background: transparent;
}

.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}

.user-menu-trigger {
  background: rgba(15, 15, 17, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.22);
  padding: 0.25rem 0.78rem 0.25rem 0.25rem;
}

.user-menu-trigger:hover,
.user-menu-trigger:focus-visible,
.user-menu-trigger[aria-expanded="true"] {
  background: rgba(15, 15, 17, 0.85);
  border-color: rgba(129, 137, 255, 0.45);
  box-shadow: none;
}

.user-menu-chevron,
.user-menu-trigger .user-menu-chevron {
  color: var(--color-brand);
}

/* (was the second override of `.user-dropdown` — consolidated below.) */

.user-dropdown-header {
  background: transparent;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.user-dropdown-item {
  color: var(--color-text-secondary);
}

.user-dropdown-item i {
  color: var(--color-icon);
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--site-chrome-text-secondary);
  background: none;
  border: 0;
  padding: 0.35rem;
}

.mobile-menu-icon {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 0.95rem;
}

.mobile-menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition:
    top 0.22s ease,
    bottom 0.22s ease,
    opacity 0.16s ease,
    transform 0.22s ease;
}

.mobile-menu-icon span:nth-child(1) {
  top: 0;
}

.mobile-menu-icon span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.mobile-menu-icon span:nth-child(3) {
  bottom: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.2);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-icon span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}



@media (max-width: 1100px) {
  .nav-link {
    font-size: 0.78rem;
    padding: 0.38rem 0.45rem;
  }
}

/* Hide browse in dropdown by default; show only when desktop nav is hidden */
.user-dropdown .dropdown-browse-mobile {
  display: none !important;
}

@media (max-width: 1199px) {
  .desktop-public-nav {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .navbar-actions .lol-discord,
  .navbar-actions .user-menu {
    display: none !important;
  }

  .user-dropdown .dropdown-browse-mobile {
    display: block !important;
  }

  .navbar-shell {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 640px) {
  .site-brand span {
    display: none;
  }

  .navbar-actions {
    gap: 0.45rem;
  }

}

@media (max-width: 768px) {
  .user-dropdown {
    position: fixed;
    top: calc(var(--navbar-height) + 0.5rem);
    left: 50%;
    right: auto;
    width: min(92vw, 20rem);
    transform: translateX(-50%);
    max-height: calc(100dvh - var(--navbar-height) - 1.25rem);
    overflow: auto;
    border-radius: 0.25rem;
    z-index: 150;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
}

/* ============================================
   Unified Floating Nav Menus (All pages)
   ============================================ */

.navbar-shell {
  /* Mirror the canonical rule above (search for the comment about
     viewport-centered nav). Both definitions need to use
     `minmax(0, 1fr) auto minmax(0, 1fr)` — this rule is later in the
     cascade so without this update it would silently override the
     fix and the nav would still drift left when the user menu got
     wider. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-content: initial;
}

.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.menu-cluster {
  position: relative;
}

@media (max-width: 1199px) {
  .navbar-shell {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .navbar-actions {
    justify-self: end;
  }
}
/* User dropdown — consolidated. Portaled to <body> in navbar.ts so glass blur
   is not trapped inside the navbar backdrop root. */
.user-dropdown {
  position: absolute;
  right: 0;
  left: auto;
  transform: translateY(-0.35rem) scale(0.98);
  top: calc(100% + 0.65rem);
  width: min(21rem, calc(100vw - 1.5rem));
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  box-shadow: none;
  overflow: hidden;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transform-origin: top right;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.user-dropdown::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--site-chrome-dropdown-surface);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
  pointer-events: none;
}

.user-dropdown > * {
  position: relative;
  z-index: 1;
}

.user-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Portaled panel: always frosted, independent of navbar scroll/hover state. */
#userDropdownMenu.user-dropdown.user-dropdown--portaled {
  position: fixed;
  z-index: 120;
  background-color: var(--site-chrome-dropdown-surface);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
  -webkit-backdrop-filter: blur(var(--site-chrome-glass-blur, 18px));
  isolation: isolate;
}

#userDropdownMenu.user-dropdown.user-dropdown--portaled::before {
  display: none;
}

@media (max-width: 768px) {
  /* Right-align with the trigger on mobile. Explicitly clears any left/
     transform leaked from earlier rules so the dropdown's right edge sticks
     to the button's right edge instead of centering on it and overflowing. */
  .user-dropdown {
    position: absolute;
    right: 0;
    left: auto;
    top: calc(100% + 0.5rem);
    width: min(20rem, calc(100vw - 1rem));
    max-height: calc(100dvh - var(--navbar-height) - 1.25rem);
    overflow: auto;
    z-index: 150;
  }
}

.user-dropdown.hidden {
  display: none;
}

.user-menu-trigger {
  min-height: 2.2rem;
}

.user-dropdown-section {
  padding: 0.35rem 0;
}

.user-dropdown-section + .user-dropdown-section {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.dropdown-section-label {
  margin: 0;
  padding: 0.2rem 0.9rem 0.45rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dropdown-identity-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.identity-meta {
  min-width: 0;
  flex: 1;
}

.identity-meta p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0.25rem 0.68rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 650;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.dropdown-login-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.6rem 0.9rem;
}

.user-dropdown-item .lucide-icon,
.user-dropdown-item i {
  flex: 0 0 auto;
  transform: translateY(-1px);
}

.user-dropdown-item.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text);
}

.user-dropdown-item.active i {
  color: var(--color-icon);
}

@media (max-width: 640px) {
  .user-name {
    display: none;
  }

  .user-menu-trigger {
    padding-inline: 0.62rem;
  }
}