.evia-button,
.evia-icon-button,
.evia-tag,
.evia-tag__dismiss,
.evia-menu-item,
.evia-field,
.evia-textarea-field,
.evia-tab-button {
  box-sizing: border-box;
  transition:
    background-color 200ms linear,
    border-color 200ms linear,
    box-shadow 200ms linear,
    color 200ms linear,
    opacity 200ms linear;
}

@media (hover: hover) and (pointer: fine) {
  .evia-button--auth-primary:not(:disabled):hover {
    box-shadow: 0 0 20px rgba(253, 68, 170, 0.7) !important;
  }

  .evia-button--secondary-gray:not(:disabled):hover {
    border-color: #2d282b !important;
    box-shadow: none !important;
    background-color: #231e21 !important;
  }
}

.evia-button:focus-visible,
.evia-tab-button:focus-visible,
.evia-field:focus-within,
.evia-textarea-field:focus-within {
  outline: 1px solid rgba(253, 68, 170, 0.72);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(253, 68, 170, 0.24);
}

.evia-field.is-error:focus-within,
.evia-textarea-field.is-error:focus-within {
  outline-color: rgba(255, 154, 183, 0.96);
  box-shadow: 0 0 0 4px rgba(123, 28, 58, 0.26);
}

.evia-checkbox__indicator {
  transition:
    border-color var(--evia-motion-fast, 120ms) ease,
    background-color var(--evia-motion-fast, 120ms) ease,
    box-shadow var(--evia-motion-fast, 120ms) ease,
    opacity var(--evia-motion-fast, 120ms) ease;
}

.evia-checkbox__mark {
  transform: scale(0.72);
  opacity: 0;
  transition:
    transform var(--evia-motion-fast, 120ms) ease,
    opacity var(--evia-motion-fast, 120ms) ease,
    background-color var(--evia-motion-fast, 120ms) ease;
}

.evia-checkbox__input:checked + .evia-checkbox__indicator {
  background: linear-gradient(135deg, #fd44aa, #ffa5d7);
  border-color: transparent;
}

.evia-checkbox__input:checked + .evia-checkbox__indicator .evia-checkbox__mark {
  opacity: 1;
  transform: scale(1);
}

.evia-checkbox__input:focus-visible + .evia-checkbox__indicator {
  outline: 1px solid rgba(253, 68, 170, 0.72);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(253, 68, 170, 0.24);
}

.evia-checkbox__input:disabled + .evia-checkbox__indicator {
  opacity: 0.62;
}

.evia-field input::placeholder,
.evia-textarea-field textarea::placeholder {
  color: #987086;
}

.evia-button__loading-dot {
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: evia-auth-loading-dot-blink 1s ease infinite;
}

@keyframes evia-auth-loading-dot-blink {
  0%,
  80%,
  100% {
    opacity: 0.36;
  }

  40% {
    opacity: 1;
  }
}

.evia-ambient-background {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(18, 7, 12, 0.98), rgba(10, 6, 8, 1));
}

.evia-ambient-background__base,
.evia-ambient-background__grid,
.evia-ambient-background__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.evia-ambient-background__base {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 119, 167, 0.18), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(255, 93, 148, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(18, 7, 12, 0.98), rgba(10, 6, 8, 1));
  background-position: 14% 18%, 82% 82%, 50% 50%;
  background-repeat: no-repeat;
  background-size: 132% 132%, 138% 138%, 100% 100%;
}

.evia-ambient-background__grid {
  background:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  mask-image: radial-gradient(circle at center, black 34%, transparent 92%);
}

.evia-ambient-background__glow {
  inset: auto;
  width: var(--evia-ambient-glow-size, 42vw);
  height: var(--evia-ambient-glow-size, 42vw);
  max-width: 520px;
  max-height: 520px;
  border-radius: 999px;
  mix-blend-mode: screen;
  opacity: 0.86;
  will-change: transform, opacity;
}

.evia-ambient-background__glow--primary {
  width: var(--evia-ambient-primary-size, 46vw);
  height: var(--evia-ambient-primary-size, 46vw);
  max-width: 620px;
  max-height: 620px;
  left: var(--evia-ambient-primary-left, 10%);
  top: var(--evia-ambient-primary-top, 8%);
  background: radial-gradient(circle, rgba(255, 119, 167, 0.56), rgba(255, 51, 102, 0.18) 52%, transparent 74%);
}

.evia-ambient-background__glow--secondary {
  width: var(--evia-ambient-secondary-size, 26vw);
  height: var(--evia-ambient-secondary-size, 26vw);
  max-width: 360px;
  max-height: 360px;
  right: var(--evia-ambient-secondary-right, 8%);
  bottom: var(--evia-ambient-secondary-bottom, 10%);
  background: radial-gradient(circle, rgba(255, 93, 148, 0.42), rgba(204, 34, 85, 0.14) 56%, transparent 76%);
}

.evia-ambient-background__content {
  position: relative;
  z-index: 1;
  min-height: inherit;
  height: 100%;
}

.evia-auth-root .evia-ambient-background__content::-webkit-scrollbar {
  width: 10px;
}

.evia-auth-root .evia-ambient-background__content::-webkit-scrollbar-track {
  background: rgba(26, 22, 24, 0.68);
  border-radius: 999px;
}

.evia-auth-root .evia-ambient-background__content::-webkit-scrollbar-thumb {
  background: linear-gradient(171.79deg, #fd44aa 0%, #ff77a7 100%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.evia-auth-root .evia-ambient-background__content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(171.79deg, #ff3b9e 0%, #ff6ea3 100%);
}

.evia-auth-root button:not(:disabled):not([aria-disabled="true"]),
.evia-auth-root [role="button"]:not([aria-disabled="true"]),
.evia-auth-root a[href] {
  cursor: pointer;
}

.evia-auth-root button:disabled,
.evia-auth-root [role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}

.evia-auth-root .evia-button,
.evia-auth-root .evia-tab-button,
.evia-auth-root .evia-auth-forgot button {
  transition-duration: var(--evia-auth-hover-transition-duration) !important;
  transition-timing-function: var(--evia-auth-hover-transition-easing) !important;
}

.evia-auth-remember-me .evia-checkbox-wrapper {
  display: inline-flex;
  gap: 0;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.evia-auth-remember-me .evia-checkbox {
  gap: 10px;
  cursor: pointer;
}

.evia-auth-remember-me .evia-checkbox__indicator {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  border-color: #deb7c5 !important;
  background: transparent !important;
  color: #ffffff !important;
}

.evia-auth-remember-me .evia-checkbox__input:checked + .evia-checkbox__indicator {
  border-color: #fd44aa !important;
  background: #fd44aa !important;
}

.evia-auth-remember-me .evia-checkbox__input:disabled + .evia-checkbox__indicator {
  border-color: #deb7c5 !important;
  background: #584f54 !important;
}

.evia-auth-remember-me .evia-checkbox__mark {
  font-size: 0.625rem;
  line-height: 1;
}

.evia-auth-ambient-background.evia-ambient-background {
  background: linear-gradient(180deg, rgba(10, 6, 8, 0.98), rgba(6, 4, 6, 1));
}

.evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__grid {
  display: none;
}

.evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__base {
  background:
    radial-gradient(circle, rgba(102, 24, 58, 0.22) 0%, rgba(72, 18, 40, 0.16) 34%, rgba(72, 18, 40, 0) 72%),
    radial-gradient(circle, rgba(126, 28, 72, 0.16) 0%, rgba(76, 18, 42, 0.1) 34%, rgba(76, 18, 42, 0) 74%),
    radial-gradient(circle, rgba(34, 10, 20, 0.32) 0%, rgba(34, 10, 20, 0.18) 42%, rgba(34, 10, 20, 0) 78%),
    linear-gradient(180deg, rgba(10, 6, 8, 0.98), rgba(6, 4, 6, 1));
  background-position:
    calc(var(--evia-auth-background-primary-left) + 10%) calc(var(--evia-auth-background-primary-top) + 12%),
    calc(var(--evia-auth-background-secondary-left) + 8%) calc(var(--evia-auth-background-secondary-top) + 10%),
    calc(var(--evia-auth-background-primary-left) - 6%) calc(var(--evia-auth-background-secondary-top) + 24%),
    50% 50%;
  background-repeat: no-repeat;
  background-size: 58% 58%, 36% 36%, 92% 92%, 100% 100%;
  transition: background-position var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing);
  animation: none;
}

.evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__glow--primary {
  width: var(--evia-auth-background-primary-size);
  height: var(--evia-auth-background-primary-size);
  max-width: none;
  max-height: none;
  left: var(--evia-auth-background-primary-left);
  top: var(--evia-auth-background-primary-top);
  right: auto;
  bottom: auto;
  filter: blur(84px);
  mix-blend-mode: screen;
  opacity: var(--evia-auth-glow-primary-opacity);
  background: radial-gradient(circle, rgba(253, 68, 170, 0.72) 0%, rgba(226, 52, 148, 0.28) 48%, rgba(226, 52, 148, 0) 76%);
  transition:
    left var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    top var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    width var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    height var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    opacity var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing);
  animation: none;
}

.evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__glow--secondary {
  width: var(--evia-auth-background-secondary-size);
  height: var(--evia-auth-background-secondary-size);
  max-width: none;
  max-height: none;
  left: var(--evia-auth-background-secondary-left);
  top: var(--evia-auth-background-secondary-top);
  right: auto;
  bottom: auto;
  filter: blur(72px);
  mix-blend-mode: screen;
  opacity: var(--evia-auth-glow-secondary-opacity);
  background: radial-gradient(circle, rgba(253, 68, 170, 0.62) 0%, rgba(226, 52, 148, 0.22) 52%, rgba(226, 52, 148, 0) 78%);
  transition:
    left var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    top var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    width var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    height var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing),
    opacity var(--evia-auth-background-transition-duration) var(--evia-auth-background-transition-easing);
  animation: none;
}

@keyframes evia-auth-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

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

@keyframes evia-auth-tab-panel-in {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, -12px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes evia-auth-tab-panel-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, -12px, 0);
  }
}

@media (hover: hover) and (pointer: fine) {
  .evia-auth-tabs .evia-tab-button:not(:disabled):hover {
    transform: none !important;
  }

  .evia-auth-tabs .evia-tab-button:not(.is-active):not(:disabled):hover {
    color: #fd44aa !important;
  }

  .evia-auth-forgot button:hover {
    color: #ffffff;
  }

  .evia-auth-password-toggle:hover {
    color: rgba(255, 236, 247, 0.92);
    background: rgba(253, 68, 170, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evia-auth-card,
  .evia-auth-password-toggle,
  .evia-auth-tab-panel,
  .evia-auth-tab-indicator {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__base,
  .evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__glow--primary,
  .evia-auth-ambient-background.evia-ambient-background .evia-ambient-background__glow--secondary {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}