.aqto-dynamic-app-pages {
  background: var(--aqto-shell-nav-bg, var(--aqto-shell-surface, transparent));
  border-bottom: var(--aqto-shell-nav-border, 1px solid var(--aqto-shell-border, color-mix(in srgb, currentColor 16%, transparent)));
  box-shadow: var(--aqto-shell-nav-shadow, none);
  color: var(--aqto-shell-text, inherit);
  font-family: var(--aqto-shell-font-family, inherit);
  position: sticky;
  top: 0;
  z-index: 20;
}

.aqto-dynamic-app-pages__bar {
  align-items: center;
  display: flex;
  gap: var(--aqto-shell-menu-bar-gap, 1rem);
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--aqto-shell-menu-max-width, 72rem);
  padding: var(--aqto-shell-menu-bar-padding, 0.9rem 1rem);
}

.aqto-dynamic-app-pages__brand {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
}

.aqto-dynamic-app-pages__brand strong {
  color: var(--aqto-shell-heading, var(--aqto-shell-text, inherit));
  display: block;
  font: var(--aqto-shell-brand-font, 800 1rem/1.2 var(--aqto-shell-font-family, system-ui, sans-serif));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aqto-dynamic-app-pages__logo {
  aspect-ratio: 1;
  border-radius: var(--aqto-shell-radius, 0.65rem);
  height: 2.75rem;
  object-fit: cover;
  width: 2.75rem;
}

.aqto-dynamic-app-pages__toggle {
  background: var(--aqto-shell-menu-toggle-bg, transparent);
  border: var(--aqto-shell-menu-toggle-border, 1px solid currentColor);
  border-radius: var(--aqto-shell-menu-toggle-radius, var(--aqto-shell-radius, 0.65rem));
  color: var(--aqto-shell-menu-toggle-color, var(--aqto-shell-text, inherit));
  display: none;
  font: var(--aqto-shell-menu-toggle-font, 700 0.9rem/1.1 var(--aqto-shell-font-family, system-ui, sans-serif));
  padding: var(--aqto-shell-menu-toggle-padding, 0.55rem 0.9rem);
  text-decoration: var(--aqto-shell-menu-toggle-decoration, none);
}

.aqto-dynamic-app-pages__body {
  align-items: center;
  display: flex;
  gap: var(--aqto-shell-menu-body-gap, 1rem);
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--aqto-shell-menu-max-width, 72rem);
  padding: var(--aqto-shell-menu-body-padding, 0 1rem 1rem);
}

.aqto-dynamic-app-pages__list {
  background: var(--aqto-shell-menu-list-bg, transparent);
  border: var(--aqto-shell-menu-list-border, 0);
  border-radius: var(--aqto-shell-menu-list-radius, var(--aqto-shell-radius, 0));
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--aqto-shell-menu-list-gap, 0.75rem);
  list-style: none;
  margin: 0;
  padding: var(--aqto-shell-menu-list-padding, 0);
}

.aqto-dynamic-app-pages__link {
  background: var(--aqto-shell-menu-link-bg, transparent);
  border: var(--aqto-shell-menu-link-border, 1px solid transparent);
  border-radius: var(--aqto-shell-menu-link-radius, var(--aqto-shell-radius, 0.65rem));
  color: var(--aqto-shell-menu-link-color, var(--aqto-shell-link, var(--aqto-shell-text, inherit)));
  display: inline-flex;
  font: var(--aqto-shell-menu-link-font, 750 0.92rem/1.1 var(--aqto-shell-font-family, system-ui, sans-serif));
  padding: var(--aqto-shell-menu-link-padding, 0.58rem 0.85rem);
  text-decoration: var(--aqto-shell-menu-link-decoration, none);
}

.aqto-dynamic-app-pages__link:hover,
.aqto-dynamic-app-pages__link:focus {
  background: var(--aqto-shell-menu-link-hover-bg, color-mix(in srgb, currentColor 10%, transparent));
  border-color: var(--aqto-shell-menu-link-hover-border, color-mix(in srgb, currentColor 28%, transparent));
  color: var(--aqto-shell-menu-link-hover-color, var(--aqto-shell-link-hover, currentColor));
  outline: none;
  text-decoration: var(--aqto-shell-menu-link-hover-decoration, var(--aqto-shell-menu-link-decoration, none));
}

.aqto-dynamic-app-pages__link:focus-visible,
.aqto-dynamic-app-pages__toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--aqto-shell-focus, color-mix(in srgb, currentColor 24%, transparent));
}

.aqto-dynamic-app-pages__link.is-active {
  background: var(--aqto-shell-menu-link-active-bg, var(--aqto-shell-active-bg, var(--aqto-shell-accent, currentColor)));
  border-color: var(--aqto-shell-menu-link-active-border, var(--aqto-shell-menu-link-active-bg, var(--aqto-shell-active-bg, var(--aqto-shell-accent, currentColor))));
  color: var(--aqto-shell-menu-link-active-color, var(--aqto-shell-active, var(--aqto-shell-accent-contrast, Canvas)));
  text-decoration: var(--aqto-shell-menu-link-active-decoration, var(--aqto-shell-menu-link-decoration, none));
}

.aqto-runtime-auth,
.aqto-login-widget {
  align-items: center;
  align-self: stretch;
  background: var(--aqto-login-widget-bg, var(--aqto-shell-auth-bg, color-mix(in srgb, var(--aqto-shell-surface, Canvas) 88%, transparent)));
  border: var(--aqto-login-widget-border, var(--aqto-shell-auth-border, 1px solid var(--aqto-shell-border, color-mix(in srgb, currentColor 14%, transparent))));
  border-radius: var(--aqto-login-widget-radius, var(--aqto-shell-auth-radius, var(--aqto-shell-radius, 0.75rem)));
  box-shadow: var(--aqto-login-widget-shadow, var(--aqto-shell-auth-shadow, 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06)));
  color: var(--aqto-login-widget-color, var(--aqto-shell-text, inherit));
  display: flex;
  flex: 0 1 auto;
  gap: var(--aqto-login-widget-gap, 0.65rem);
  justify-content: flex-end;
  margin-inline-start: auto;
  min-width: min(100%, var(--aqto-login-widget-min-width, 15rem));
  padding: var(--aqto-login-widget-padding, 0.45rem 0.55rem 0.45rem 0.75rem);
  position: relative;
  z-index: 20;
}

.aqto-runtime-auth__summary,
.aqto-login-widget__summary {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.aqto-runtime-auth__summary strong,
.aqto-login-widget__summary strong {
  color: var(--aqto-login-widget-title-color, var(--aqto-shell-heading, var(--aqto-shell-text, inherit)));
  font: var(--aqto-login-widget-title-font, var(--aqto-shell-auth-title-font, 800 0.78rem/1.15 var(--aqto-shell-font-family, system-ui, sans-serif)));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aqto-runtime-auth__summary span,
.aqto-login-widget__summary span,
.aqto-runtime-auth__account span,
.aqto-login-widget__account span {
  color: var(--aqto-login-widget-meta-color, var(--aqto-shell-muted, currentColor));
  font: var(--aqto-login-widget-meta-font, var(--aqto-shell-auth-meta-font, 650 0.76rem/1.25 var(--aqto-shell-font-family, system-ui, sans-serif)));
  max-width: var(--aqto-login-widget-text-max-width, 16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aqto-runtime-auth__actions,
.aqto-login-widget__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--aqto-login-widget-action-gap, 0.45rem);
  justify-content: flex-end;
}

.aqto-runtime-auth__container,
.aqto-login-widget__container {
  min-width: 0;
}

.aqto-runtime-auth__login,
.aqto-runtime-auth__logout,
.aqto-login-widget__login,
.aqto-login-widget__logout {
  border-radius: var(--aqto-login-widget-button-radius, var(--aqto-shell-button-radius, var(--aqto-shell-radius, 0.65rem)));
  cursor: pointer;
  font: var(--aqto-login-widget-button-font, var(--aqto-shell-button-font, 800 0.78rem/1 var(--aqto-shell-font-family, system-ui, sans-serif)));
  min-height: var(--aqto-login-widget-button-height, 2rem);
  padding: var(--aqto-login-widget-button-padding, 0.5rem 0.7rem);
}

.aqto-runtime-auth__login,
.aqto-login-widget__login {
  background: var(--aqto-login-widget-login-bg, var(--aqto-shell-active-bg, var(--aqto-shell-accent, currentColor)));
  border: 1px solid var(--aqto-login-widget-login-border, var(--aqto-login-widget-login-bg, var(--aqto-shell-active-bg, var(--aqto-shell-accent, currentColor))));
  color: var(--aqto-login-widget-login-color, var(--aqto-shell-active, var(--aqto-shell-accent-contrast, Canvas)));
}

.aqto-runtime-auth__login:hover,
.aqto-login-widget__login:hover {
  filter: brightness(0.94);
}

.aqto-runtime-auth__logout,
.aqto-login-widget__logout {
  background: var(--aqto-login-widget-logout-bg, var(--aqto-shell-button-bg, color-mix(in srgb, var(--aqto-shell-surface, Canvas) 90%, transparent)));
  border: 1px solid var(--aqto-login-widget-logout-border, var(--aqto-shell-border, color-mix(in srgb, currentColor 18%, transparent)));
  color: var(--aqto-login-widget-logout-color, var(--aqto-shell-text, inherit));
}

.aqto-runtime-auth__logout:hover,
.aqto-login-widget__logout:hover {
  border-color: var(--aqto-login-widget-logout-hover-border, var(--aqto-shell-accent, currentColor));
  color: var(--aqto-login-widget-logout-hover-color, var(--aqto-shell-link-hover, var(--aqto-shell-accent, currentColor)));
}

.aqto-runtime-auth__login:focus-visible,
.aqto-runtime-auth__logout:focus-visible,
.aqto-login-widget__login:focus-visible,
.aqto-login-widget__logout:focus-visible {
  box-shadow: 0 0 0 3px var(--aqto-shell-focus, color-mix(in srgb, currentColor 24%, transparent));
  outline: none;
}

.aqto-runtime-auth__account,
.aqto-login-widget__account {
  background: var(--aqto-login-widget-account-bg, color-mix(in srgb, var(--aqto-shell-accent, currentColor) 9%, transparent));
  border: var(--aqto-login-widget-account-border, 1px solid color-mix(in srgb, var(--aqto-shell-accent, currentColor) 22%, transparent));
  border-radius: var(--aqto-login-widget-account-radius, calc(var(--aqto-login-widget-radius, var(--aqto-shell-radius, 0.75rem)) - 0.25rem));
  color: var(--aqto-login-widget-account-color, var(--aqto-shell-text, inherit));
  display: grid;
  gap: 0.05rem;
  padding: var(--aqto-login-widget-account-padding, 0.35rem 0.5rem);
}

.aqto-runtime-auth__account[hidden],
.aqto-login-widget__account[hidden] {
  display: none !important;
}

.aqto-runtime-auth__account strong,
.aqto-login-widget__account strong {
  color: var(--aqto-login-widget-account-title-color, var(--aqto-shell-heading, var(--aqto-shell-text, inherit)));
  font: var(--aqto-login-widget-account-title-font, 800 0.7rem/1.15 var(--aqto-shell-font-family, system-ui, sans-serif));
}

.aqto-runtime-auth__error,
.aqto-login-widget__error {
  background: var(--aqto-login-widget-error-bg, var(--aqto-shell-error-bg, #fff1f2));
  border: 1px solid var(--aqto-login-widget-error-border, var(--aqto-shell-error-border, #fda4af));
  border-radius: var(--aqto-login-widget-error-radius, var(--aqto-shell-radius, 0.65rem));
  color: var(--aqto-login-widget-error-color, var(--aqto-shell-error-text, #9f1239));
  flex: 1 1 100%;
  font: var(--aqto-login-widget-error-font, 750 0.76rem/1.35 var(--aqto-shell-font-family, system-ui, sans-serif));
  padding: var(--aqto-login-widget-error-padding, 0.5rem 0.6rem);
}

.aqto-runtime-auth__error[hidden],
.aqto-login-widget__error[hidden] {
  display: none !important;
}

[data-aqto-page][hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .aqto-dynamic-app-pages__toggle {
    display: inline-flex;
  }

  .aqto-dynamic-app-pages--has-toggle .aqto-dynamic-app-pages__body {
    display: none;
    padding-top: 0;
  }

  .aqto-dynamic-app-pages.is-open .aqto-dynamic-app-pages__body {
    display: grid;
    gap: var(--aqto-shell-menu-body-mobile-gap, 0.85rem);
  }

  .aqto-dynamic-app-pages__list {
    display: grid;
    width: 100%;
  }

  .aqto-dynamic-app-pages__link {
    min-width: 0;
  }

  .aqto-runtime-auth,
  .aqto-login-widget {
    justify-content: space-between;
    margin-inline-start: 0;
    min-width: 0;
    width: 100%;
  }

  .aqto-runtime-auth__summary span,
  .aqto-login-widget__summary span,
  .aqto-runtime-auth__account span,
  .aqto-login-widget__account span {
    max-width: min(100%, 18rem);
  }
}