.login-card-layout {
  --login-card-shadow: 0 28px 80px color-mix(in srgb, var(--tatu-color-black, #111111) 56%, transparent);
  --login-brand-logo-shadow: drop-shadow(0 16px 40px color-mix(in srgb, var(--tatu-color-black, #111111) 100%, transparent));
  position: relative;
  min-height: 100vh;
}

.login-card-layout .content {
  width: 640px;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--login-surface-bg);
  box-shadow: var(--login-card-shadow);
}

.login-card-layout .login-card {
  display: flex;
  min-height: 100%;
}

.login-card-layout .login-card__brand {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-right: 1px solid var(--login-border-color);
  background: var(--login-surface-bg);
}

.login-card-layout .login-card__brand img {
  max-width: 206px;
  width: 100%;
  height: auto;
  filter: var(--login-brand-logo-shadow);
}

.login-card-layout .login-card__form {
  flex: 1 1 auto;
  padding: 30px 30px 20px;
}

.login-card-layout .login-card__form noscript {
  display: block;
  margin-bottom: 10px;
}

.login-card-layout .copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0;
}

.legacy-login {
  --login-surface-bg: var(--ui-surface-color, var(--tatu-bg-card, #f5f7fa));
  --login-border-color: var(--ui-border-soft-color, var(--tatu-border-subtle, #eaf0f5));
  --login-input-bg: var(--ui-input-bg, var(--tatu-bg-input, #ffffff));
  --login-input-border: var(--ui-list-divider-header, #aab7c4);
  --login-text-primary: var(--ui-text-color-base, var(--tatu-text-primary, #111111));
  --login-text-secondary: var(--ui-text-color-secondary, var(--tatu-text-secondary, #667085));
  --ui-action-blue-bg: #0097d7;
  --ui-action-blue-hover-bg: #00aeef;
  --ui-action-contrast: #ffffff;
  --ui-action-blue-contrast: var(--ui-action-contrast);
  --ui-semantic-primary-color: var(--ui-action-blue-hover-bg);
}

.legacy-login .form-title,
.legacy-login .font-blue,
.legacy-login .font-blue-steel {
  color: var(--ui-semantic-primary-color) !important;
}

.legacy-login .form-control,
.legacy-login .form-control::placeholder {
  color: var(--login-text-primary) !important;
}

.legacy-login .form-control {
  background: var(--login-input-bg) !important;
  border-color: var(--login-input-border) !important;
}

.legacy-login .input-icon {
  position: relative;
}

.legacy-login .input-icon > i {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  font-size: var(--ui-icon-size-md, 14px);
  line-height: 1;
  color: var(--tatu-icon-color, var(--ui-text-color-secondary, var(--tatu-text-secondary, #667085))) !important;
  pointer-events: none;
}

.legacy-login .input-icon > .form-control {
  padding-left: 34px !important;
}

.legacy-login .login-capslock-status {
  display: flex;
  align-items: center;
  min-height: 18px;
  margin: 6px 0 0 34px;
  color: var(--login-text-secondary);
  font-size: var(--tatu-type-meta-size, 12px);
  line-height: 1.25;
}

.legacy-login .login-capslock-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

.legacy-login .login-capslock-status--on {
  color: var(--ui-action-yellow-bg, #f5b301);
  font-weight: var(--tatu-type-value-primary-weight, 500);
}

.legacy-login .login-capslock-status--off {
  color: var(--login-text-secondary);
}

.legacy-login .input-icon:hover > i,
.legacy-login .input-icon:focus-within > i {
  color: var(--ui-action-blue-hover-bg) !important;
}

.legacy-login .rememberme {
  color: var(--login-text-primary) !important;
}

.legacy-login .login-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legacy-login .login-submit-action,
.legacy-login .login-forget-submit-action {
  float: none;
}

.legacy-login .login-audit-notice {
  margin: 14px 0 0;
  color: var(--login-text-secondary);
  font-size: var(--tatu-type-meta-size, 12px);
  line-height: var(--ui-line-height-base, 1.45);
}

.legacy-login .login-feedback-box {
  position: relative;
  margin: 0 0 12px;
  padding: 9px 34px 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm, 4px);
  font-size: var(--ui-font-base, 13px);
  line-height: 1.35;
}

.legacy-login .login-feedback-box.tatu-context-box--danger {
  background: var(--ui-action-red-bg, #ff4d5e);
  border-color: var(--ui-action-red-bg, #ff4d5e);
  color: var(--ui-action-red-contrast, #ffffff);
}

.legacy-login .login-feedback-box.tatu-context-box--warning {
  background: var(--ui-action-yellow-bg, #ffd34d);
  border-color: var(--ui-action-yellow-bg, #ffd34d);
  color: var(--ui-action-yellow-contrast, #111111);
}

.legacy-login .login-feedback-box .close {
  position: absolute;
  top: 7px;
  right: 9px;
  color: inherit;
  opacity: 0.75;
  text-shadow: none;
}

.legacy-login .login-feedback-box .close:hover,
.legacy-login .login-feedback-box .close:focus {
  color: inherit;
  opacity: 1;
}

.legacy-login .copyright {
  color: var(--ui-active-bg, var(--tatu-bg-active, #eaf0f5)) !important;
}

.legacy-login .btn.blue {
  background: var(--ui-action-blue-bg) !important;
  border-color: var(--ui-action-blue-bg) !important;
  color: var(--ui-action-blue-contrast) !important;
}

.legacy-login .btn.blue:hover,
.legacy-login .btn.blue:focus {
  background: var(--ui-action-blue-hover-bg) !important;
  border-color: var(--ui-action-blue-hover-bg) !important;
  color: var(--ui-action-blue-contrast) !important;
}

.legacy-login.login-2fa .backup-link.btn-link {
  color: var(--ui-semantic-primary-color) !important;
  text-decoration: underline;
  padding: 0;
}

.market-login {
  --login-surface-bg: #0c1520;
  --login-border-color: rgba(0, 174, 239, 0.34);
  --login-input-bg: #08111a;
  --login-input-border: #00aeef;
  --login-text-primary: var(--ui-text-color-inverse, #ffffff);
  --login-text-secondary: #9ec2d6;
  --ui-action-blue-bg: #00aeef;
  --ui-action-blue-hover-bg: #19d39a;
  --ui-action-blue-contrast: #031018;
  --login-card-shadow:
    0 0 0 1px rgba(0, 174, 239, 0.22),
    0 0 34px rgba(0, 174, 239, 0.28),
    0 30px 90px rgba(0, 0, 0, 0.74);
  background: #0b0f14;
  color: var(--login-text-primary);
  color-scheme: dark;
}

.market-login::before {
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  background:
    linear-gradient(135deg, #05080e 0%, #08131f 50%, #04070c 100%),
    repeating-linear-gradient(90deg, rgba(0, 174, 239, 0.06) 0 1px, transparent 1px 82px);
  z-index: -1;
}

.market-login .content {
  --market-login-orbit-duration: 12s;
  --market-login-orbit-iterations: infinite;
  --market-login-card-energy-duration: 3.8s;
  --market-login-card-energy-iterations: infinite;
  --market-login-card-fill-duration: 3.4s;
  --market-login-icon-pulse-duration: 4.6s;
  --market-login-password-width: 294px;
  --market-login-password-icon-band: 52px;
  --market-login-password-right-band: 14px;
  --market-login-neon-blue: #00aeef;
  --market-login-neon-green: #19d39a;
  --market-login-error-red: #ff4d5e;
  width: min(620px, 92vw);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: visible;
}

.market-login .content::before,
.market-login .content::after {
  content: "";
  display: none;
  position: absolute;
  pointer-events: none;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--market-login-neon-blue) 32deg,
      transparent 86deg,
      transparent 172deg,
      var(--market-login-neon-green) 218deg,
      transparent 274deg,
      transparent 360deg
    );
  animation: market-login-neon-orbit var(--market-login-orbit-duration) linear var(--market-login-orbit-iterations);
}

.market-login .content::before {
  inset: -2px;
  z-index: 2;
  padding: 2px;
  border-radius: 12px;
  filter:
    drop-shadow(0 0 8px rgba(0, 174, 239, 0.72))
    drop-shadow(0 0 12px rgba(25, 211, 154, 0.44));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.market-login .content::after {
  inset: -12px;
  z-index: 0;
  border-radius: 18px;
  opacity: 0.28;
  filter: blur(18px);
}

.market-login .content.market-login-card--typing {
  --market-login-orbit-duration: 4s;
  --market-login-card-energy-duration: 2.4s;
  --market-login-card-fill-duration: 2.2s;
  --market-login-icon-pulse-duration: 2.4s;
}

.market-login .content.market-login-card--loading {
  --market-login-orbit-duration: 360ms;
  --market-login-orbit-iterations: 5;
  --market-login-card-energy-duration: 360ms;
  --market-login-card-energy-iterations: 5;
  --market-login-card-fill-duration: 620ms;
  --market-login-icon-pulse-duration: 640ms;
}

.market-login .login-card {
  position: relative;
  z-index: 1;
  background: var(--login-surface-bg);
  border-radius: 8px;
  min-height: 292px;
  overflow: hidden;
}

.market-login .login-card::before,
.market-login .login-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.market-login .login-card::before {
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 174, 239, 0.08) 18%,
      rgba(0, 174, 239, 0.96) 42%,
      rgba(25, 211, 154, 1) 50%,
      rgba(0, 174, 239, 0.96) 58%,
      rgba(25, 211, 154, 0.1) 82%,
      transparent 100%
    ),
    linear-gradient(135deg, rgba(0, 174, 239, 0.3), rgba(25, 211, 154, 0.28));
  background-size: 240% 100%, 100% 100%;
  box-shadow: 0 0 18px rgba(0, 174, 239, 0.42), 0 0 22px rgba(25, 211, 154, 0.22);
  opacity: 0.92;
  animation: market-login-card-energy-flow var(--market-login-card-energy-duration) linear var(--market-login-card-energy-iterations);
  will-change: background-position;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.market-login .login-card::after {
  top: 2px;
  bottom: 2px;
  left: -48%;
  z-index: 0;
  width: 48%;
  border-radius: 6px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 174, 239, 0.04) 18%,
      rgba(0, 174, 239, 0.2) 42%,
      rgba(25, 211, 154, 0.34) 50%,
      rgba(0, 174, 239, 0.2) 58%,
      rgba(25, 211, 154, 0.04) 82%,
      transparent 100%
    );
  opacity: 0.9;
  transform: translateX(0) skewX(-14deg);
  animation: market-login-card-infill-energy var(--market-login-card-fill-duration) linear var(--market-login-card-energy-iterations);
  will-change: transform;
}

.market-login .login-card__brand,
.market-login .login-card__form {
  position: relative;
  z-index: 1;
}

.market-login .market-login__brand {
  flex-basis: 214px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050b12;
  border-color: rgba(0, 174, 239, 0.28);
}

.market-login .market-login__brand::after {
  content: "";
  bottom: 28px;
  position: absolute;
  right: -1px;
  top: 28px;
  z-index: 2;
  width: 2px;
  background: linear-gradient(180deg, transparent, #00aeef 18%, #19d39a 55%, transparent);
  box-shadow: 0 0 18px rgba(0, 174, 239, 0.72);
}

.market-login .market-login__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}

.market-login .market-login-system-icon {
  display: block;
  position: relative;
  z-index: 1;
  width: min(174px, 78%);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(25, 211, 154, 0.5))
    drop-shadow(0 0 24px rgba(0, 174, 239, 0.58))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.72));
  animation: market-login-icon-pulse var(--market-login-icon-pulse-duration) ease-in-out infinite;
}

.market-login .market-login-form {
  width: min(var(--market-login-password-width), 100%);
}

.market-login .market-password-group {
  margin-bottom: 0;
}

.market-login .market-password-shell {
  width: 100%;
}

.market-login .market-password-shell > i {
  width: var(--market-login-password-icon-band);
  height: 60px;
  font-size: 22px;
  color: #19d39a !important;
}

.market-login .market-password-shell > .market-password-mask {
  width: 100%;
  height: 60px;
  padding-left: var(--market-login-password-icon-band) !important;
  padding-right: var(--market-login-password-right-band) !important;
  border-width: 2px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 2px;
  caret-color: transparent;
  text-align: center;
  text-shadow: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 0 1px rgba(0, 174, 239, 0.14);
}

.market-login .market-password-shell > .market-password-mask::placeholder {
  color: rgba(25, 211, 154, 0.32) !important;
  font-size: 42px;
}

.market-login .market-password-shell > .market-password-mask:focus {
  color: #ffffff !important;
  border-color: #19d39a !important;
  box-shadow:
    0 0 0 3px rgba(25, 211, 154, 0.22),
    0 0 30px rgba(0, 174, 239, 0.38),
    inset 0 0 18px rgba(25, 211, 154, 0.06);
}

.market-login .market-password-feedback {
  display: block;
  min-height: 18px;
  margin-top: 8px;
  color: var(--market-login-error-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.market-login .market-password-feedback.display-hide {
  display: none;
}

.market-login .market-login-submit {
  width: 100%;
  min-height: 42px;
  margin-top: 10px;
  border-radius: 8px !important;
  font-weight: 800;
  letter-spacing: 0;
}

.market-login .market-login-submit:disabled {
  opacity: 0.72;
  pointer-events: none;
}

.market-login .market-login-form--error .market-password-shell > i {
  color: var(--market-login-error-red) !important;
}

.market-login .market-login-form--error .market-password-shell > .market-password-mask,
.market-login .market-login-form--error .market-password-shell > .market-password-mask:focus {
  border-color: var(--market-login-error-red) !important;
  box-shadow:
    0 0 0 3px rgba(255, 77, 94, 0.24),
    0 0 28px rgba(255, 77, 94, 0.42),
    inset 0 0 18px rgba(255, 77, 94, 0.08);
}

.market-login .market-login-form--error .market-password-shell > .market-password-stars {
  color: var(--market-login-error-red);
}

.market-login .market-password-shell > .market-password-stars {
  position: absolute;
  left: var(--market-login-password-icon-band);
  right: var(--market-login-password-right-band);
  top: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  opacity: 0;
  transform: none;
  white-space: nowrap;
}

@keyframes market-login-neon-orbit {
  to {
    transform: rotate(1turn);
  }
}

@keyframes market-login-card-energy-flow {
  0% {
    background-position: 140% 0, 0 0;
  }

  100% {
    background-position: -140% 0, 0 0;
  }
}

@keyframes market-login-card-infill-energy {
  0% {
    transform: translateX(0) skewX(-14deg);
  }

  100% {
    transform: translateX(410%) skewX(-14deg);
  }
}

@keyframes market-login-icon-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 10px rgba(25, 211, 154, 0.5))
      drop-shadow(0 0 24px rgba(0, 174, 239, 0.58))
      drop-shadow(0 18px 34px rgba(0, 0, 0, 0.72));
  }

  50% {
    filter:
      drop-shadow(0 0 14px rgba(25, 211, 154, 0.76))
      drop-shadow(0 0 34px rgba(0, 174, 239, 0.82))
      drop-shadow(0 20px 38px rgba(0, 0, 0, 0.78));
  }
}

@media (prefers-reduced-motion: reduce) {
  .market-login .login-card::before,
  .market-login .login-card::after {
    animation-duration: 7s;
  }

  .market-login .content.market-login-card--loading .login-card::before,
  .market-login .content.market-login-card--loading .login-card::after {
    animation-duration: 720ms;
  }

  .market-login .market-login-system-icon {
    animation: none;
  }
}

.offline-page .logo {
  margin: 34px auto 16px;
  text-align: center;
}

.offline-page .logo img {
  width: 116px;
  height: auto;
  filter: var(
    --login-brand-logo-shadow,
    drop-shadow(0 16px 40px color-mix(in srgb, var(--tatu-color-black, #111111) 100%, transparent))
  );
}

.offline-page .offline-content {
  width: min(520px, 92vw);
  padding: 30px;
  text-align: center;
  background: var(--login-surface-bg);
  border: 1px solid var(--login-border-color);
  box-shadow: var(--login-card-shadow);
}

.offline-page .status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border-radius: 50%;
  background: var(--ui-action-blue-bg);
  color: var(--ui-action-blue-contrast);
  font-size: 18px;
  line-height: 1;
}

.offline-page .offline-lead,
.offline-page .offline-tips {
  color: var(--login-text-secondary);
}

.offline-page .offline-lead {
  margin: 0 0 14px;
  line-height: 1.45;
}

.offline-page .offline-tips {
  margin: 0 0 16px;
  padding-left: 18px;
  text-align: left;
  line-height: 1.5;
}

.offline-page .offline-alert {
  background: var(--ui-surface-elevated-color, var(--tatu-bg-elevated, #fbfcfe));
  border: 1px solid var(--ui-border-soft-color, var(--tatu-border-light, #e7edf4));
  border-radius: var(--ui-radius-sm, 4px);
  color: var(--ui-text-color-secondary, var(--tatu-text-secondary, #667085));
  font-size: var(--ui-font-base, 13px);
  line-height: 1.35;
  margin-bottom: 16px;
  padding: 8px 10px;
  text-align: left;
}

.offline-page .offline-alert i {
  color: var(--ui-action-blue-bg, #00aeef);
  margin-right: 6px;
}

.offline-page .offline-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .login-card-layout .content {
    width: 92%;
    position: static;
    transform: none;
    margin: 20px auto 10px;
  }

  .login-card-layout .login-card {
    flex-direction: column;
  }

  .login-card-layout .login-card__brand {
    border-right: 0;
    border-bottom: 1px solid var(--login-border-color);
    padding: 16px;
  }

  .login-card-layout .login-card__brand img {
    max-width: 172px;
  }

  .login-card-layout .login-card__form {
    padding: 20px;
  }

  .market-login .market-login__form {
    padding: 24px;
  }

  .market-login .market-login__brand {
    flex-basis: auto;
  }

  .login-card-layout .copyright {
    position: static;
    margin-bottom: 20px;
  }

  .offline-page .offline-content {
    padding: 22px;
  }
}

.login-forget-dev-note {
      margin-top: 8px;
    }