:root {
  --ax-login-label: #d8dcd9;
  --ax-login-card: #0c0f0d;
  --ax-login-card-border: #383d39;
  --ax-login-card-shadow: #000000;
  --ax-login-feature: #101310;
  --ax-login-feature-border: #3b403c;
  --ax-login-status: #7ee0a3;
  --ax-login-danger: #ff5f5b;
  --ax-login-grid: #ff342f;
  --ax-login-button-start: #c90d09;
  --ax-login-button-end: #ff342f;
  --ax-login-bg-x: 50%;
  --ax-login-bg-y: 50%;
  --ax-login-bg-scale: 1.04;
  --ax-login-bg-brightness: 1;
  --ax-login-bg-saturation: 1;
  --ax-login-grid-opacity: .15;
  --ax-login-orb-opacity: .55;
  --ax-login-card-padding: 28px;
  --ax-login-card-opacity: 22%;
  --ax-login-input-height: 52px;
  --ax-login-button-height: 54px;
  --ax-login-brand-size: 27px;
  --ax-login-hero-size: 68px;
  --ax-login-hero-line: 1.04;
  --ax-login-description-size: 17px;
  --ax-login-form-title-size: 31px;
  --ax-login-feature-radius: 12px;
  --ax-login-feature-gap: 14px;
  --ax-login-feature-height: 112px;
  --ax-login-feature-overlay: .48;
  --ax-login-font-family: Roboto, Arial, sans-serif;
}

html,
body,
button,
input {
  font-family: var(--ax-login-font-family) !important;
}

.ax-login-shell {
  isolation: isolate;
}

.ax-login-shell [data-login-position] {
  translate: var(--ax-login-item-x-desktop, 0px) var(--ax-login-item-y-desktop, 0px);
}

.ax-visual,
.ax-auth {
  min-width: 0;
}

.ax-login-background-picture {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.ax-login-background-media {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-position: var(--ax-login-bg-x) var(--ax-login-bg-y);
  transform: scale(var(--ax-login-bg-scale));
  filter: blur(var(--ax-login-blur)) brightness(var(--ax-login-bg-brightness)) saturate(var(--ax-login-bg-saturation));
  transition: transform .5s ease, filter .35s ease, object-position .35s ease;
}

.ax-grid {
  opacity: var(--ax-login-grid-opacity) !important;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ax-login-grid) 46%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ax-login-grid) 46%, transparent) 1px, transparent 1px) !important;
}

.ax-orb {
  opacity: var(--ax-login-orb-opacity);
}

.ax-brand,
.ax-mobile-brand {
  font-size: var(--ax-login-brand-size) !important;
}

.ax-brand-mark {
  align-items: center !important;
  justify-content: center;
  padding: 0 !important;
}

.ax-brand-mark > i {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  opacity: 1 !important;
  transform: none !important;
}

.ax-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ax-eyebrow > i {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid color-mix(in srgb, var(--ax-login-accent) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ax-login-accent) 10%, transparent);
}

.ax-hero-copy h1 {
  font-size: calc(clamp(36px, 5.1vw, var(--ax-login-hero-size)) * var(--ax-login-font-scale)) !important;
  line-height: var(--ax-login-hero-line) !important;
}

.ax-hero-copy > p:not(.ax-eyebrow) {
  font-size: calc(var(--ax-login-description-size) * var(--ax-login-font-scale)) !important;
}

.ax-login-hero-center .ax-hero-copy {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ax-login-hero-center .ax-eyebrow,
.ax-login-hero-center .ax-feature-row {
  justify-content: center;
}

.ax-login-hero-center .ax-hero-copy > p:not(.ax-eyebrow) {
  margin-left: auto;
  margin-right: auto;
}

.ax-login-hero-right .ax-hero-copy {
  margin-left: auto;
  text-align: right;
}

.ax-login-hero-right .ax-eyebrow,
.ax-login-hero-right .ax-feature-row {
  justify-content: flex-end;
}

.ax-login-hero-right .ax-hero-copy > p:not(.ax-eyebrow) {
  margin-left: auto;
}

.ax-feature-row {
  gap: var(--ax-login-feature-gap) !important;
}

.ax-feature-row article {
  border-color: color-mix(in srgb, var(--ax-login-feature-border) 72%, transparent) !important;
  border-radius: var(--ax-login-feature-radius) !important;
  background: color-mix(in srgb, var(--ax-login-feature) 76%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 40px rgba(0,0,0,.08);
}

.ax-feature-row.ax-media-strip {
  width: 100%;
  max-width: 850px;
  display: grid !important;
  grid-template-columns: repeat(var(--ax-login-media-count, 4), minmax(0, 1fr));
  gap: var(--ax-login-feature-gap) !important;
  align-items: stretch;
}

.ax-media-tile {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: var(--ax-login-feature-height);
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ax-login-feature-border) 78%, transparent);
  border-radius: var(--ax-login-feature-radius);
  background: color-mix(in srgb, var(--ax-login-feature) 88%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 42px rgba(0,0,0,.16);
  color: #fff;
  text-decoration: none;
}

.ax-media-tile::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, color-mix(in srgb, var(--ax-login-accent) 13%, transparent), transparent 42%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-login-accent) 0%, transparent);
  pointer-events: none;
  transition: box-shadow .24s ease, background .24s ease;
}

.ax-media-tile > img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

.ax-media-fit-cover > img { object-fit: cover; }
.ax-media-fit-contain > img { object-fit: contain; padding: 10px; }

a.ax-media-tile:hover > img,
a.ax-media-tile:focus-visible > img {
  transform: scale(1.045);
  filter: brightness(1.06);
}

a.ax-media-tile:hover::after,
a.ax-media-tile:focus-visible::after {
  background: linear-gradient(125deg, color-mix(in srgb, var(--ax-login-accent) 22%, transparent), transparent 48%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-login-accent) 48%, transparent), 0 0 28px color-mix(in srgb, var(--ax-login-accent) 14%, transparent);
}

.ax-media-caption {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: block;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,var(--ax-login-feature-overlay)) 34%, rgba(0,0,0,.9));
  color: #fff;
}

.ax-media-caption strong,
.ax-media-caption small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-media-caption strong { font-size: 12px; }
.ax-media-caption small { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 10px; }

.ax-system-state {
  padding: 9px 12px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--ax-login-status) 17%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ax-login-auth) 46%, transparent);
  backdrop-filter: blur(12px);
}

.ax-login-hero-center .ax-system-state {
  margin-left: auto;
  margin-right: auto;
}

.ax-login-hero-right .ax-system-state {
  margin-left: auto;
}

.ax-pulse {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: color-mix(in srgb, var(--ax-login-status) 16%, transparent) !important;
  color: var(--ax-login-status);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ax-login-status) 7%, transparent), 0 0 18px color-mix(in srgb, var(--ax-login-status) 30%, transparent) !important;
}

.ax-pulse i {
  font-size: 10px;
}

.ax-auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ax-auth::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--ax-login-accent) 8%, transparent), transparent 28%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--ax-login-accent-dark) 10%, transparent), transparent 30%);
  pointer-events: none;
}

.ax-auth-background-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .15;
  filter: saturate(.8) contrast(1.05);
}

.ax-auth-card {
  padding: var(--ax-login-card-padding) !important;
  border: 1px solid color-mix(in srgb, var(--ax-login-card-border) 74%, transparent);
  border-radius: var(--ax-login-card-radius) !important;
  background: color-mix(in srgb, var(--ax-login-card) var(--ax-login-card-opacity), transparent);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--ax-login-card-shadow) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
}

.ax-login-form-center .ax-auth-card header,
.ax-login-form-center .ax-auth-card footer {
  text-align: center;
}

.ax-login-form-center .ax-lock,
.ax-login-form-center .ax-form-logo {
  margin-left: auto;
  margin-right: auto;
}

.ax-auth-card header h2 {
  font-size: calc(var(--ax-login-form-title-size) * var(--ax-login-font-scale)) !important;
}

.ax-field label {
  color: var(--ax-login-label) !important;
}

.ax-input {
  height: var(--ax-login-input-height) !important;
}

.ax-submit {
  height: var(--ax-login-button-height) !important;
  background: linear-gradient(100deg, var(--ax-login-button-start), var(--ax-login-button-end)) !important;
}

.ax-submit:focus-visible,
.ax-reveal:focus-visible,
.ax-remember:focus-within {
  outline: 2px solid var(--ax-login-accent);
  outline-offset: 3px;
}

.ax-remember span {
  display: grid;
  place-items: center;
  color: transparent;
}

.ax-remember span i {
  font-size: 9px;
}

.ax-remember input:checked + span {
  color: var(--ax-login-button-text);
  box-shadow: none !important;
}

.ax-alert {
  align-items: flex-start;
  border-color: color-mix(in srgb, var(--ax-login-danger) 42%, transparent) !important;
  background: color-mix(in srgb, var(--ax-login-danger) 10%, transparent) !important;
  color: color-mix(in srgb, var(--ax-login-danger) 78%, #fff) !important;
}

.ax-alert > i {
  margin-top: 2px;
}

.ax-alert span,
.ax-alert b,
.ax-alert small {
  display: block;
}

.ax-alert b {
  margin-bottom: 3px;
  font-size: 12px;
}

.ax-alert small {
  font-size: 11px;
  line-height: 1.45;
}

.is-loading .ax-submit span {
  display: inline !important;
}

.is-loading .ax-submit > i {
  display: none !important;
}

.is-loading .ax-spinner {
  display: block !important;
}

.ax-login-motion-soft .ax-brand,
.ax-login-motion-soft .ax-hero-copy,
.ax-login-motion-soft .ax-system-state,
.ax-login-motion-soft .ax-auth-card,
.ax-login-motion-soft .ax-copyright {
  animation: ax-login-enter .65s cubic-bezier(.2,.8,.2,1) both;
}

.ax-login-motion-soft .ax-hero-copy { animation-delay: .08s; }
.ax-login-motion-soft .ax-system-state { animation-delay: .16s; }
.ax-login-motion-soft .ax-auth-card { animation-delay: .1s; }
.ax-login-motion-soft .ax-copyright { animation-delay: .2s; }

.ax-login-motion-dynamic .ax-brand,
.ax-login-motion-dynamic .ax-hero-copy,
.ax-login-motion-dynamic .ax-system-state,
.ax-login-motion-dynamic .ax-auth-card,
.ax-login-motion-dynamic .ax-copyright {
  animation: ax-login-enter-dynamic .78s cubic-bezier(.16,1,.3,1) both;
}

.ax-login-motion-dynamic .ax-hero-copy { animation-delay: .12s; }
.ax-login-motion-dynamic .ax-system-state { animation-delay: .25s; }
.ax-login-motion-dynamic .ax-auth-card { animation-delay: .18s; }
.ax-login-motion-dynamic .ax-copyright { animation-delay: .3s; }

@keyframes ax-login-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; }
}

@keyframes ax-login-enter-dynamic {
  from { opacity: 0; transform: translate3d(0, 25px, 0) scale(.975); filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* Keep the complete login composition inside common laptop viewports without
   sacrificing the spacious desktop layout on taller screens. */
@media (min-width: 761px) and (max-height: 800px) {
  .ax-visual-content {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .ax-brand {
    font-size: min(var(--ax-login-brand-size), 24px) !important;
  }

  .ax-hero-copy h1 {
    margin-top: 14px;
    margin-bottom: 18px;
    font-size: calc(min(var(--ax-login-hero-size), 58px) * var(--ax-login-font-scale)) !important;
  }

  .ax-hero-copy > p:not(.ax-eyebrow) {
    line-height: 1.55;
  }

  .ax-feature-row {
    margin-top: 28px;
  }

  .ax-feature-row.ax-media-strip .ax-media-tile {
    height: min(var(--ax-login-feature-height), 96px);
  }

  .ax-feature-row article {
    padding: 12px;
  }

  .ax-auth {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .ax-auth-card {
    padding: min(var(--ax-login-card-padding), 24px) !important;
  }

  .ax-form-logo {
    max-height: 58px;
    margin-bottom: 16px;
  }

  .ax-lock {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
  }

  .ax-auth-card header {
    margin-bottom: 22px;
  }

  .ax-field {
    margin-bottom: 14px;
  }

  .ax-remember {
    margin: 2px 0 16px !important;
  }

  .ax-auth-card footer {
    margin-top: 18px;
  }

  .ax-copyright {
    margin-top: 26px;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .ax-login-shell [data-login-position] {
    translate: var(--ax-login-item-x-tablet, 0px) var(--ax-login-item-y-tablet, 0px);
  }
}

@media (max-width: 760px) {
  .ax-login-shell [data-login-position] {
    translate: var(--ax-login-item-x-mobile, 0px) var(--ax-login-item-y-mobile, 0px);
  }

  .ax-login-mobile-visual .ax-login-shell {
    display: block !important;
  }

  .ax-login-mobile-visual .ax-visual {
    display: block !important;
    min-height: 42vh;
  }

  .ax-login-mobile-visual .ax-visual-content {
    min-height: 42vh;
    padding: 28px 24px;
  }

  .ax-login-mobile-visual .ax-visual .ax-brand,
  .ax-login-mobile-visual .ax-visual .ax-system-state,
  .ax-login-mobile-visual .ax-visual .ax-feature-row,
  .ax-login-mobile-visual .ax-visual .ax-hero-copy > p:not(.ax-eyebrow) {
    display: none !important;
  }

  .ax-login-mobile-visual .ax-hero-copy h1 {
    margin: 12px 0;
    font-size: min(12vw, 48px) !important;
  }

  .ax-auth-card {
    padding: min(var(--ax-login-card-padding), 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-login-motion-soft .ax-brand,
  .ax-login-motion-soft .ax-hero-copy,
  .ax-login-motion-soft .ax-system-state,
  .ax-login-motion-soft .ax-auth-card,
  .ax-login-motion-soft .ax-copyright,
  .ax-login-motion-dynamic .ax-brand,
  .ax-login-motion-dynamic .ax-hero-copy,
  .ax-login-motion-dynamic .ax-system-state,
  .ax-login-motion-dynamic .ax-auth-card,
  .ax-login-motion-dynamic .ax-copyright {
    animation: none !important;
  }
}