.login-surface { color-scheme: light; margin: 0; background: #f5f5f8; color: #17151d; font-family: var(--owner-font-family, "Onest", sans-serif); -webkit-font-smoothing: antialiased; }
.login-surface * { box-sizing: border-box; }
.login-page { display: grid; place-items: center; min-height: 100svh; padding: 40px 16px; }
.login-stack { width: min(100%, 480px); min-width: 0; }
.login-card { padding: 36px; border: 1px solid #e7e5ec; border-radius: 28px; background: #fff; box-shadow: 0 16px 48px rgba(23, 21, 29, .04); }
.brand-mark { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 500; letter-spacing: -.8px; margin-bottom: 32px; }
.brand-mark svg { width: 32px; height: 32px; flex: 0 0 32px; }
.login-title { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.25; }
.login-subtitle { margin: 12px 0 0; font-size: 14px; color: #66616f; line-height: 1.7; }
.login-status { margin-top: 20px; border: 1px solid #b8d8cf; border-radius: 14px; background: #f0faf5; padding: 14px; color: #22634c; font-size: 13px; line-height: 1.6; }
.login-status--error { border-color: #ebc4c4; background: #fff3f3; color: #9f2525; }
.login-form { display: grid; gap: 22px; margin-top: 28px; }
.field-label, .consent-label { display: block; margin-bottom: 9px; color: #66616f; font-size: 12px; line-height: 1.5; }
.email-input { width: 100%; min-width: 0; height: 50px; border: 1px solid #d6cfdf; border-radius: 12px; padding: 0 14px; background: #fff; color: #17151d; font: inherit; font-size: 15px; }
.email-input::placeholder { color: #82778d; }
.consent-panel { padding: 18px; background: #f7f5fa; border-radius: 16px; }
.consent-label { color: #17151d; font-weight: 500; margin-bottom: 14px; }
.consent-list { display: grid; gap: 18px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: #66616f; font-size: 12px; line-height: 1.7; }
.check-row input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; accent-color: #705484; }
.check-row a { color: #705484; text-decoration: underline; text-decoration-color: #cbb9da; text-underline-offset: 3px; }
.check-row a:hover { color: #17151d; }
.login-submit { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: #17151d; color: #fff; padding: 12px 18px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; }
.login-submit:hover:not(:disabled) { background: #30263d; }
.login-submit:disabled { background: #edeaf1; color: #766e81; cursor: not-allowed; }
.login-helper { margin: 18px 0 0; color: #746c80; font-size: 12px; line-height: 1.65; text-align: center; }
.login-mail-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 24px; border: 1px solid #e6ddef; border-radius: 20px; background: #f4eff9; color: #705484; }
.login-success-label { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #28735b; font-size: 12px; font-weight: 500; }
.login-success-label span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.login-recipient { margin: 5px 0 0; font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.login-next-steps { display: grid; gap: 22px; margin: 28px 0; padding: 24px 0; border-block: 1px solid #eeebf2; list-style: none; }
.login-next-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
.login-next-steps li > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #f3eff7; color: #705484; font-size: 12px; }
.login-next-steps small { display: block; margin-top: 5px; color: #746c80; font-size: 12px; line-height: 1.7; }
.login-resend-form { margin-top: 24px; }
.login-resend-form .login-helper { margin-top: 12px; }
.login-change-email { display: block; width: fit-content; margin: 22px auto 0; color: #705484; font-size: 13px; text-underline-offset: 4px; }
.login-change-email:hover { color: #17151d; }
.login-surface :is(input, button, a):focus-visible { outline: 2px solid #705484; outline-offset: 3px; }
.login-surface .potok-notice { background: #fff !important; color: #17151d !important; font-family: inherit; box-shadow: 0 12px 36px rgba(23, 21, 29, .12); }
.login-surface .potok-notice__close { color: #17151d; }
@media (max-width: 520px) {
  .login-page { padding: 20px 12px; }
  .login-card { padding: 24px; border-radius: 24px; }
  .login-title { font-size: 27px; }
}
@media (max-width: 360px) {
  .login-card { padding: 20px; }
  .consent-panel { padding: 14px; }
}
.login-providers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.login-provider { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 50px; border: 1px solid #ddd5e7; border-radius: 15px; background: #fff; color: #211c29; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.login-provider:hover { background: #f3eef8; }
.login-provider:focus-visible { outline: 3px solid #9c86b6; outline-offset: 3px; }
.login-provider:disabled { opacity: .5; cursor: default; }
.login-provider-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-weight: 700; font-size: 18px; color: #fff; }
.login-provider--yandex .login-provider-icon { background: #fc3f1d; }
.login-provider--vk .login-provider-icon { background: #0077ff; font-size: 12px; }
.login-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #81738d; }
.login-divider::before,.login-divider::after { content: ""; height: 1px; flex: 1; background: #e6dfec; }
.login-social-note { padding: 14px; border-radius: 14px; background: #f2edf7; }
.login-choices { display: grid; gap: 12px; margin-top: 28px; }
.login-choices .login-provider { min-height: 56px; }
.login-provider--email .login-provider-icon { color: #705484; background: #f3eff7; }
.login-choices .login-divider { margin: 4px 0; }
.login-email-card { margin-top: 26px; padding: 20px; border: 1px solid #e4dbed; border-radius: 16px; background: #f5f0fa; }
.login-email-card .login-recipient { margin: 4px 0 0; }
.login-back { border: 0; background: transparent; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; }