/* Руки · страница входа */

.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* —— левая «витрина» —— */
.login-art {
  position: relative; overflow: hidden; display: flex; align-items: center; padding: 56px;
  background:
    radial-gradient(700px 480px at 20% 10%, rgba(242, 196, 92, .16), transparent 70%),
    radial-gradient(640px 520px at 90% 95%, rgba(183, 163, 246, .20), transparent 70%),
    linear-gradient(160deg, #101a31, #070b14 75%);
  border-right: 1px solid var(--line);
  color: #e8eef9;
}
:root[data-theme="light"] .login-art {
  background:
    radial-gradient(700px 480px at 20% 10%, rgba(229, 172, 44, .30), transparent 70%),
    radial-gradient(640px 520px at 90% 95%, rgba(124, 92, 214, .22), transparent 70%),
    linear-gradient(160deg, #1b2547, #0b1020 78%);
}
.login-art .brand { color: #f3f6fc; }
.login-art .brand__sub { color: #9db0d3; }
.login-art__rings { position: absolute; right: -140px; bottom: -140px; width: 520px; height: 520px; opacity: .9; pointer-events: none; }
.login-art__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(242, 196, 92, .22); }
.login-art__rings i:nth-child(2) { inset: 70px; border-color: rgba(183, 163, 246, .26); }
.login-art__rings i:nth-child(3) { inset: 140px; border-color: rgba(242, 196, 92, .30); }
.login-art__body { position: relative; display: grid; gap: 34px; max-width: 480px; }
.login-art h2 { font: 600 clamp(28px, 2.6vw + 10px, 40px)/1.15 var(--font-display); letter-spacing: -.02em; }
.login-art__list { display: grid; gap: 18px; }
.login-art__list li { display: flex; gap: 14px; align-items: flex-start; }
.login-art__list .i { width: 22px; height: 22px; margin-top: 2px; color: var(--gold); }
.login-art__list b { display: block; font-weight: 600; }
.login-art__list span { display: block; color: #a9b8d6; font-size: 13.5px; }

/* —— правая колонка —— */
.login-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 28px 24px; gap: 18px; position: relative; }
.login-top { position: absolute; top: 20px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; }
.login-top__brand { display: none; }
.login-card { width: min(440px, 100%); display: grid; gap: 16px; padding: 34px; border-radius: var(--r-xl); background: color-mix(in srgb, var(--s1) 94%, transparent); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); }
.login-card h1 { font-size: clamp(28px, 3vw + 10px, 36px); }
.login-form { display: grid; gap: 16px; margin-top: 4px; }
.login-note { display: flex; gap: 8px; align-items: flex-start; }
/* публичный режим: «неудачных попыток входа за сутки» под формой */
.login-fails { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.login-fails .i { flex: none; margin-top: 2px; width: 16px; height: 16px; }
.login-fails--warn { color: var(--gold-text); }
.login-note .i { margin-top: 2px; color: var(--lilac-text); }
.login-foot { text-align: center; }
.input--code { font: 600 26px var(--font-mono); letter-spacing: .5em; text-align: center; padding-left: .8em; }

.neom-hint { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--text-2); }
.neom-hint .i { color: var(--lilac-text); margin-top: 3px; }
.neom-hint b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.neom-hint span { font-size: 12.5px; color: var(--muted); }

.dev-hint { border: 1px solid var(--gold-line); background: var(--gold-soft); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; }
.dev-hint summary { cursor: pointer; font-weight: 600; color: var(--gold-text); }
.dev-hint p { margin-top: 8px; }
.dev-hint .row { margin-top: 8px; }

.ticket { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 14px 0 4px; }
.ticket .callout { text-align: left; width: 100%; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--gold); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.boot { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.boot-error { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }

@media (max-width: 960px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .login-top__brand { display: flex; }
  .login-main { justify-content: flex-start; padding-top: 84px; }
}
@media (max-width: 480px) {
  .login-card { padding: 24px 20px; border-radius: var(--r-lg); }
}