/* Klyro · новый экран входа: надпись Klyro на анимированных обоях «Космос» + лист с формой */

body.auth-v2 { background: var(--klyro-bg) !important; }
body.auth-v2 .top-auth {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}
body.auth-v2 .top-auth .brand { visibility: hidden; }
body.auth-v2 .auth-wrap {
  min-height: 100dvh;
  padding: 0;
  display: block;
}

.authv2 { min-height: 100dvh; display: flex; flex-direction: column; }
.authv2-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Шапка с обоями */
.authv2-hero {
  position: relative;
  flex: none;
  height: calc(200px + var(--safe-top, 0px));
  overflow: hidden;
  display: grid;
  place-items: center;
  padding-top: calc(28px + var(--safe-top, 0px));
  background: radial-gradient(120% 80% at 50% 100%, rgba(124, 58, 237, .32), transparent 70%), #0f0a1a;
}
html:not(.dark) .authv2-hero {
  background: radial-gradient(120% 80% at 50% 100%, rgba(167, 139, 250, .35), transparent 70%), #f2ecfc;
}
.authv2-lines {
  position: absolute;
  inset: 0;
  -webkit-mask: url("wallpapers/violet.svg") 0 0 / 240px 240px repeat;
  mask: url("wallpapers/violet.svg") 0 0 / 240px 240px repeat;
  background: linear-gradient(160deg, #a78bfa, #f472b6 50%, #60a5fa);
  background-size: 200% 200%;
  opacity: .34;
  animation: authv2-drift 40s linear infinite, authv2-hue 12s ease-in-out infinite alternate;
}
html:not(.dark) .authv2-lines { opacity: .3; }
@keyframes authv2-drift { to { -webkit-mask-position: 240px 240px; mask-position: 240px 240px; } }
@keyframes authv2-hue { from { background-position: 0 0; } to { background-position: 100% 100%; } }
.authv2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, var(--klyro-bg));
}
.authv2-wm {
  position: relative;
  z-index: 2;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.045em;
  color: #f6f1ff;
  text-shadow: 0 6px 30px rgba(124, 58, 237, .55);
}
html:not(.dark) .authv2-wm { color: #1b1325; text-shadow: 0 6px 30px rgba(167, 139, 250, .5); }

/* Лист с формой */
.authv2-main {
  position: relative;
  z-index: 3;
  flex: 1;
  margin-top: -26px;
  padding: 18px 16px calc(24px + var(--safe-bottom, 0px));
  border-radius: 28px 28px 0 0;
  background: var(--klyro-surface);
  box-shadow: 0 -1px 0 color-mix(in srgb, #fff 8%, transparent), 0 -18px 40px rgba(15, 10, 30, .12);
}
.authv2-main .hw-countdown { max-width: 440px; margin: 0 auto 14px; }
body.auth-v2 .authv2-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
}
body.auth-v2 .authv2-card h1 { font-size: 1.45rem; margin: 4px 0 2px; text-align: left; }
body.auth-v2 .authv2-card .auth-lead { text-align: left; margin-bottom: 14px; }

.authv2-seg {
  display: flex;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--klyro-text) 6%, transparent);
}
.authv2-seg > * {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 11px;
  font-size: .9rem;
  font-weight: 650;
  color: var(--klyro-text-muted);
  text-decoration: none;
}
.authv2-seg > a:hover { color: var(--klyro-text); text-decoration: none; }
.authv2-seg .on {
  color: var(--klyro-text);
  background: var(--klyro-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* поля с иконками */
body.auth-v2 .auth-form label { margin-top: 10px; }
.authv2-field { position: relative; display: block; }
.authv2-field .pw-field { position: relative; }
.authv2-ico {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  color: var(--klyro-text-muted);
  pointer-events: none;
}
body.auth-v2 .authv2-field .klyro-input {
  height: 52px;
  padding-left: 44px;
  border-radius: 16px;
  font-size: 1rem;
  background: color-mix(in srgb, var(--klyro-text) 4%, var(--klyro-surface));
  backdrop-filter: none;
}
body.auth-v2 .authv2-field .klyro-input:focus {
  border-color: var(--klyro-purple);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--klyro-purple) 18%, transparent);
}
.authv2-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 2px 14px;
}
body.auth-v2 .authv2-row .auth-foreign { margin: 0; font-size: .88rem; }
.authv2-forgot { font-size: .88rem; font-weight: 650; white-space: nowrap; }
body.auth-v2 .auth-submit {
  height: 52px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--klyro-purple) 40%, transparent);
}
.authv2-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font-size: .8rem;
  color: var(--klyro-text-muted);
}
.authv2-or::before, .authv2-or::after { content: ""; flex: 1; height: 1px; background: var(--klyro-border); }
.authv2-or[hidden] { display: none; }
body.auth-v2 .authv2-passkey {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid var(--klyro-border);
  background: transparent;
  color: var(--klyro-text);
  font-weight: 650;
  text-decoration: none !important;
}
body.auth-v2 .authv2-passkey:hover { background: var(--klyro-hover); }
body.auth-v2 .authv2-passkey[hidden] { display: none; }
body.auth-v2 .auth-foot { text-align: center; margin-top: 18px; }
body.auth-v2 .auth-apps { text-align: center; font-size: .82rem; }
.authv2-code { text-align: center; font-size: 1.6rem !important; letter-spacing: .4em; height: 60px; }

/* Компьютер: обои — узкая колонка слева, форма справа */
@media (min-width: 900px) {
  .authv2 { flex-direction: row; }
  .authv2-hero {
    flex: 0 0 380px;
    height: auto;
    min-height: 100dvh;
    position: sticky;
    top: 0;
    padding-top: 0;
  }
  .authv2-hero::after { background: linear-gradient(90deg, transparent 70%, color-mix(in srgb, var(--klyro-bg) 60%, transparent)); }
  .authv2-wm { font-size: 68px; }
  .authv2-main {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--klyro-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 48px;
  }
  .authv2-main .hw-countdown,
  body.auth-v2 .authv2-card { width: 100%; max-width: 400px; }
  body.auth-v2 .authv2-card h1 { font-size: 1.8rem; }
  body.auth-v2 .top-auth .brand { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .authv2-lines { animation: none; }
}

/* ===== Регистрация ===== */
@media (max-width: 899px) {
  .authv2-reg .authv2-hero { height: calc(150px + var(--safe-top, 0px)); }
  .authv2-reg .authv2-wm { font-size: 38px; }
}
.authv2-steps { display: flex; gap: 6px; margin: 2px 0 14px; }
.authv2-steps span { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--klyro-text) 12%, transparent); }
.authv2-steps span.on { background: linear-gradient(90deg, #a78bfa, var(--klyro-purple)); }
.authv2-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.authv2-head > div { min-width: 0; }
body.auth-v2 .authv2-head h1 { margin: 0; }
body.auth-v2 .authv2-head .auth-lead { margin: 2px 0 0; }
.authv2-back {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--klyro-text);
  background: color-mix(in srgb, var(--klyro-text) 7%, transparent);
}
.authv2-back:hover { text-decoration: none; background: color-mix(in srgb, var(--klyro-text) 12%, transparent); }
.authv2-flab { display: block; font-size: .8rem; font-weight: 600; color: var(--klyro-text-muted); margin: 0 4px 6px; }
.authv2-inp { position: relative; display: block; }
.authv2-ico-at { font-size: 1.1rem; font-weight: 700; }
body.auth-v2 .media-hint { display: block; margin: 6px 4px 0; font-size: .78rem; color: var(--klyro-text-muted); }
body.auth-v2 .pw-strength { margin: 8px 4px 0; }
body.auth-v2 .pw-strength-label { margin: 4px 4px 0; font-size: .8rem; }
.authv2-match { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); color: #22c55e; display: none; pointer-events: none; }
.pw-field.is-match .authv2-match { display: flex; }
body.auth-v2 .pw-field.is-match .klyro-input { border-color: color-mix(in srgb, #22c55e 65%, transparent); }
body.auth-v2 .authv2-check { display: flex; align-items: flex-start; gap: 10px; margin: 10px 2px 0; font-size: .9rem; line-height: 1.35; }
body.auth-v2 .authv2-check + .auth-submit { margin-top: 16px; }
.authv2-mail {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 16px;
  font-size: .86rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--klyro-purple) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--klyro-purple) 24%, transparent);
}
.authv2-mail > span:last-child { min-width: 0; color: var(--klyro-text-muted); }
.authv2-mail strong { display: block; color: var(--klyro-text); font-size: .92rem; overflow-wrap: anywhere; }
.authv2-mail-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #a78bfa, #6d28d9); }

/* шесть ячеек поверх одного поля: вставка и подсказка кода работают как обычно */
.authv2-otp { position: relative; display: block; margin: 4px 0 14px; }
.authv2-otp-cells { display: none; }
.authv2-otp.is-js .authv2-otp-cells {
  display: flex;
  gap: 7px;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.authv2-otp.is-js input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  caret-color: transparent;
  font-size: 16px !important;
  letter-spacing: 0;
  z-index: 2;
}
.authv2-otp-cells i {
  width: 46px;
  height: 58px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--klyro-text) 4%, var(--klyro-surface));
  border: 1px solid var(--klyro-border);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.authv2-otp-cells i.f { border-color: color-mix(in srgb, var(--klyro-purple) 55%, transparent); }
.authv2-otp-cells i.cur { border-color: var(--klyro-purple); box-shadow: 0 0 0 4px color-mix(in srgb, var(--klyro-purple) 18%, transparent); }
.authv2-otp-cells i.cur::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--klyro-purple); animation: authv2-caret 1s steps(1) infinite; }
@keyframes authv2-caret { 50% { opacity: 0; } }
.authv2-otp-cells b { width: 10px; height: 2px; flex: none; background: currentColor; opacity: .3; }
.authv2-otp.is-full .authv2-otp-cells i { border-color: color-mix(in srgb, #22c55e 70%, transparent); color: #22c55e; }
.authv2-otp.is-error .authv2-otp-cells i { border-color: #f87171; color: #f87171; background: color-mix(in srgb, #f87171 7%, transparent); }
.authv2-otp.is-error .authv2-otp-cells { animation: authv2-shake .4s; }
@keyframes authv2-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 370px) { .authv2-otp-cells i { width: 40px; height: 52px; } }
.authv2-resend { text-align: center; margin-top: 12px; font-size: .88rem; }
.authv2-resend button[disabled] { display: none; }
.authv2-resend-wait b { color: var(--klyro-purple); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .authv2-otp.is-error .authv2-otp-cells, .authv2-otp-cells i.cur::after { animation: none; } }
body.auth-v2 .media-hint.ok { color: #22c55e; font-weight: 600; }
body.auth-v2 .media-hint.err { color: #f87171; }
body.auth-v2 .authv2-at:has(.media-hint.ok) .klyro-input { border-color: color-mix(in srgb, #22c55e 65%, transparent); }
body.auth-v2 .authv2-at:has(.media-hint.err) .klyro-input { border-color: color-mix(in srgb, #f87171 65%, transparent); }