/* Экран входа: узкая колонка по центру, два шага, поля и записки.
   Общее (.win, .btn, .linklike, поля ввода, .muted) — в public/styles.css;
   здесь только то, что нужно этому экрану. */

.login {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

/* --- шаги --- */

.login-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}

.login-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(42, 36, 29, .35);
  border-radius: var(--radius);
  background: rgba(120, 96, 56, .08);
  color: var(--ink-soft);
}

.login-step-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42, 36, 29, .45);
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  background: var(--bark-light);
}

.login-step-text { display: grid; line-height: 1.3; }
.login-step-text b { font-size: 12px; letter-spacing: .3px; }
.login-step-text span { font-size: 11px; color: var(--dim); }

.login-step.is-now {
  background: rgba(201, 162, 39, .18);
  border-color: var(--gold-dim);
  color: var(--ink);
}
.login-step.is-now .login-step-num {
  background: var(--gold);
  border-color: var(--gold-dim);
  color: #2a1f16;
}
.login-step.is-done .login-step-num {
  background: rgba(78, 122, 46, .22);
  border-color: rgba(78, 122, 46, .55);
  color: #3d6323;
}

/* --- поля --- */

.login-form { margin: 0 0 8px; }

.login-field { display: block; margin-bottom: 10px; }

.login-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .4px;
  color: var(--ink-soft);
}

.login-input { width: 100%; }

/* Ключ набирается по знакам, поэтому шире буквы и заметнее разрядка. */
.login-key {
  font-family: 'DejaVu Sans Mono', Consolas, 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.login-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.login-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin-bottom: 8px;
}

.login-small {
  font-size: 11px;
  line-height: 1.5;
  color: var(--dim);
  margin: 0;
}

/* --- найденный профиль --- */

.login-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(42, 36, 29, .3);
  border-radius: var(--radius);
  background: rgba(120, 96, 56, .1);
}

.login-profile-text { display: grid; line-height: 1.35; min-width: 0; }
.login-profile-text b { color: #3b2c14; letter-spacing: .4px; word-break: break-all; }
.login-profile-alias { font-size: 11px; color: var(--ink-soft); }

/* --- записка об исходе --- */

.login-note {
  padding: 8px 10px;
  margin-bottom: 10px;
  border-left: 3px solid var(--dim);
  border-radius: var(--radius);
  background: rgba(120, 96, 56, .12);
}

.login-note-text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.login-note-hint { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }

.login-note.is-ok { border-left-color: var(--life); background: rgba(78, 122, 46, .14); }
.login-note.is-again { border-left-color: var(--energy); background: rgba(63, 111, 165, .14); }
.login-note.is-bad { border-left-color: var(--blood); background: rgba(143, 31, 26, .12); }

/* --- «как это устроено» --- */

.win-login-how .win-body { padding-top: 10px; }

.login-how { margin: 0 0 0 18px; padding: 0; }
.login-how li { margin-bottom: 6px; font-size: 12px; line-height: 1.5; }
.login-how li:last-child { margin-bottom: 0; }
.login-how b { color: #3b2c14; }

@media (max-width: 480px) {
  .login-steps { grid-template-columns: 1fr; }
  .login-key { font-size: 14px; letter-spacing: 1px; }
}