html {
  --shell-nav-wrap-x: 18px;
  --shell-nav-wrap-top: 18px;
  --shell-nav-width: 1460px;
  --shell-nav-height: 78px;
  --shell-nav-radius: 24px;
  --shell-nav-padding-x: 22px;
  --shell-brand-gap: 12px;
  --shell-logo-width: 28px;
  --shell-logo-height: 36px;
  --shell-brand-size: 22px;
  --shell-nav-gap: 32px;
  --shell-nav-font-size: 16px;
  --shell-underline-width: 40px;
  --shell-underline-height: 3px;
  --shell-underline-bottom: -10px;
}

.page {
  animation: fluidPageEnter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.fluid-page-leaving .page {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

html.propulsion-pending .page {
  animation: none;
}

.landing-topbar-wrap,
.navbar-wrap {
  padding: var(--shell-nav-wrap-top) var(--shell-nav-wrap-x) 0 !important;
}

.landing-topbar,
.navbar {
  width: 100% !important;
  max-width: var(--shell-nav-width) !important;
  height: var(--shell-nav-height) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  border-radius: var(--shell-nav-radius) !important;
  padding: 0 var(--shell-nav-padding-x) !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  background: var(--nav-surface, var(--surface)) !important;
  border-color: var(--nav-border, var(--border)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand {
  gap: var(--shell-brand-gap) !important;
  justify-self: start;
}

.brand-logo {
  width: var(--shell-logo-width) !important;
  height: var(--shell-logo-height) !important;
  flex-shrink: 0;
}

.brand-name {
  font-size: var(--shell-brand-size) !important;
  letter-spacing: -0.04em !important;
}

.nav-links {
  gap: var(--shell-nav-gap) !important;
}

.nav-link {
  font-size: var(--shell-nav-font-size) !important;
  padding: 8px 0 !important;
  transition: color 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text);
}

.nav-link.active::after {
  bottom: var(--shell-underline-bottom) !important;
  width: var(--shell-underline-width) !important;
  height: var(--shell-underline-height) !important;
  border-radius: 999px !important;
  background: var(--hero-gradient) !important;
}

.fluid-account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.fluid-account-menu[hidden] {
  display: none !important;
}

.fluid-account-trigger {
  height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--nav-border, var(--border));
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.fluid-account-trigger:hover {
  transform: translateY(-1px);
}

.fluid-plan-badge {
  min-width: 42px;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.fluid-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--nav-surface, var(--surface)), var(--nav-surface, var(--surface))) padding-box,
    var(--hero-gradient) border-box;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.fluid-account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(290px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid var(--nav-border, var(--border));
  border-radius: 18px;
  background: var(--nav-surface, var(--surface));
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.fluid-account-user {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 8px 10px;
}

.fluid-account-user strong,
.fluid-account-user span,
.fluid-account-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fluid-account-user strong {
  font-size: 14px;
  line-height: 1.25;
}

.fluid-account-user span,
.fluid-account-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.fluid-account-meta {
  display: grid;
  gap: 5px;
  margin: 0 0 6px;
  padding: 9px 8px;
  border-top: 1px solid var(--nav-border, var(--border));
  border-bottom: 1px solid var(--nav-border, var(--border));
}

.fluid-account-item {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}

.fluid-account-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.fluid-account-item.danger {
  color: #ef4444;
}

.fluid-account-item.is-disabled,
.fluid-account-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

@keyframes fluidPageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 1200px) {
  .landing-topbar,
  .navbar {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }

  .nav-links {
    display: none !important;
  }
}

@media (max-width: 860px) {
  html {
    --shell-nav-wrap-x: 14px;
    --shell-nav-wrap-top: 14px;
    --shell-nav-height: 70px;
    --shell-nav-radius: 20px;
    --shell-nav-padding-x: 14px;
    --shell-brand-size: 22px;
  }

  .theme-btn,
  .signin-btn,
  .logout-btn,
  .fluid-account-trigger,
  .topbar-actions .icon-only-btn {
    height: 44px !important;
    min-width: 44px;
    border-radius: 14px !important;
  }

  .fluid-account-trigger {
    padding: 3px 4px 3px 10px;
  }

  .fluid-avatar {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page {
    animation: none;
  }

  html.fluid-page-leaving .page {
    transition: none;
    transform: none;
  }
}