body.auth-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(188, 178, 238, .18), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(100, 192, 236, .16), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef3f7 48%, #f7f9fc 100%) !important;
}

body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
    url("/assets/kontur_icon_system.png") center / min(42vw, 520px) no-repeat;
  opacity: .18;
}

body.auth-page .auth-icon-cloud {
  position: fixed;
  inset: -8vh -8vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

body.auth-page .auth-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  box-sizing: border-box;
  overflow: auto;
}

body.auth-page .auth-card {
  width: min(100%, 500px);
  padding: 28px;
  border: 1px solid rgba(158, 147, 216, .20);
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 28px 80px rgba(27, 34, 62, .16);
  backdrop-filter: blur(18px);
  margin: auto;
}

body.auth-page .auth-card-register {
  width: min(100%, 540px);
}

body.auth-page .auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

body.auth-page .auth-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(158, 147, 216, .18);
}

body.auth-page .auth-brand h1 {
  margin: 0 0 2px;
  color: #10182b;
  font-size: 34px;
  font-weight: 520;
  line-height: 1.05;
}

body.auth-page .auth-brand span {
  color: #687287;
  font-size: 11px;
  font-weight: 460;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body.auth-page .auth-lead,
body.auth-page .auth-note {
  color: #687287;
  font-size: 15px;
  line-height: 1.55;
}

body.auth-page .auth-form {
  display: grid;
  gap: 12px;
}

body.auth-page .auth-field {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 56px;
  padding: 5px 14px 5px 8px;
  border: 1px solid #dce3f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  transition: border-color 120ms cubic-bezier(.22, .61, .36, 1), box-shadow 120ms cubic-bezier(.22, .61, .36, 1);
}

body.auth-page .auth-field:focus-within {
  border-color: #b5aae6;
  box-shadow: 0 0 0 4px rgba(158, 147, 216, .14);
}

body.auth-page .auth-field:hover {
  border-color: rgba(158, 147, 216, .34);
  box-shadow: 0 10px 24px rgba(158, 147, 216, .08);
}

body.auth-page .auth-field:hover .field-icon,
body.auth-page .auth-field:focus-within .field-icon {
  color: #6f65ad;
  background: linear-gradient(135deg, rgba(158, 147, 216, .18), rgba(94, 188, 237, .16));
  box-shadow: inset 0 0 0 1px rgba(158, 147, 216, .16);
}

body.auth-page .auth-field input,
body.auth-page .auth-field select {
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #10182b;
  font-size: 14px;
}

body.auth-page .field-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(158, 147, 216, .12), rgba(94, 188, 237, .10));
  color: #877cc8;
  box-shadow: inset 0 0 0 1px rgba(158, 147, 216, .08);
  transition: color 160ms cubic-bezier(.22, .61, .36, 1), background 160ms cubic-bezier(.22, .61, .36, 1), box-shadow 160ms cubic-bezier(.22, .61, .36, 1);
}

body.auth-page .field-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

body.auth-page .auth-primary,
body.auth-page .auth-secondary,
body.auth-page .auth-link-button {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.22, .61, .36, 1), box-shadow 180ms cubic-bezier(.22, .61, .36, 1), background 180ms cubic-bezier(.22, .61, .36, 1);
}

body.auth-page .auth-primary {
  border: 1px solid transparent;
  background: #9e93d8;
  color: #fff;
  box-shadow: 0 16px 36px rgba(158, 147, 216, .22);
}

body.auth-page .auth-primary:hover {
  transform: translateY(-1px);
  background: #8f84cf;
  box-shadow: 0 18px 34px rgba(158, 147, 216, .24);
}

body.auth-page .auth-secondary {
  border: 1px solid #dce3f2;
  background: #fff;
  color: #6f65ad;
  font-weight: 500;
  box-shadow: none;
}

body.auth-page .auth-secondary:hover {
  transform: translateY(-1px);
  background: #f7f5ff;
  color: #514989;
  box-shadow: 0 12px 28px rgba(158, 147, 216, .10);
}

body.auth-page .auth-error {
  border: 1px solid #f1bfc0;
  border-radius: 14px;
  background: #fff1f1;
  color: #b94141;
  padding: 10px 12px;
}

body.auth-page .auth-success,
body.auth-page .auth-manager-preview {
  border: 1px solid #dce3f2;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  color: #687287;
  padding: 14px;
}