/* ---------- LOGIN ---------- */
#login-screen{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  z-index:50;
}
.login-box{ width:360px; max-width:90vw; }

/* Автовход с сохранённым на устройстве аккаунтом: сама форма (поля, кнопка,
   строка "сохранён: ...") не показывается, пока идёт подключение — виден
   только бренд/статус, без мелькания логина и пароля на экране. */
#login-screen.auto-connecting .field,
#login-screen.auto-connecting .btn-primary,
#login-screen.auto-connecting .saved-account{
  display:none;
}
#login-screen.auto-connecting .login-status{ margin-top:4px; }
.login-brand{
  font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:'IBM Plex Mono',monospace; color:var(--ink-40);
  margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.login-brand .dot{width:6px;height:6px;background:var(--ink);border-radius:50%;display:inline-block;}
.login-title{ font-size:2.125rem; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
.login-sub{ font-size:0.75rem; color:var(--ok); font-family:'IBM Plex Mono',monospace; margin-bottom:22px; display:flex; align-items:center; gap:6px;}
.login-sub .lock{ font-size:0.8125rem; }
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:0.6875rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-40); margin-bottom:6px; font-family:'IBM Plex Mono',monospace;
}
.field input{
  width:100%; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:11px 14px; font-size:0.9375rem; font-family:'Inter',sans-serif; outline:none;
  border-radius:var(--r-sm);
}
.field input:focus{ background:var(--ink); color:var(--paper); caret-color:var(--paper); -webkit-text-fill-color:var(--paper); }
.btn-primary{
  width:100%; background:var(--ink); color:var(--paper); border:1.5px solid var(--ink);
  padding:13px; font-size:0.875rem; font-weight:600; letter-spacing:.02em; cursor:pointer;
  margin-top:8px; text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
  border-radius:var(--r-sm);
}
.btn-primary:hover{ background:var(--paper); color:var(--ink); }
.btn-primary:disabled{ opacity:.3; cursor:default; }
.btn-secondary{
  width:100%; background:none; color:var(--ink-60); border:1px solid var(--ink-20);
  padding:10px; font-size:0.75rem; letter-spacing:.02em; cursor:pointer;
  margin-top:8px; text-transform:uppercase; font-family:'IBM Plex Mono',monospace;
  border-radius:var(--r-sm);
}
.btn-secondary:hover{ border-color:var(--ink); color:var(--ink); }
.login-status{
  margin-top:14px; font-size:0.75rem; font-family:'IBM Plex Mono',monospace; color:var(--ink-60);
  min-height:16px;
}
.login-status.err{ color:var(--ink); font-weight:600; }

.saved-account{
  margin-top:16px; padding:12px 14px; border:1px solid var(--ink-20); border-radius:var(--r-md); font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem; color:var(--ink-60); display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.saved-account button{
  background:none; border:1px solid var(--ink-40); border-radius:var(--r-round); color:var(--ink-60); font-size:0.6875rem; padding:5px 11px;
  cursor:pointer; font-family:'IBM Plex Mono',monospace; text-transform:uppercase;
}
.saved-account button:hover{ border-color:var(--ink); color:var(--ink); }