/* Login page (public). Standalone: shares the app's tokens but not app.css, which is behind the login. */
:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-2: #0a101d;
  --card: #111a2c;
  --line: #1c2840;
  --line-2: #2a3a5a;
  --text: #e9eef8;
  --text-2: #b7c2d6;
  --muted: #7f8ca6;
  --green: #35e08f;
  --red: #ff6170;
  --red-bg: rgba(255, 97, 112, 0.1);
  --red-line: rgba(255, 97, 112, 0.36);
  --focus: #93b6ff;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(64, 98, 170, 0.22), transparent 70%),
    var(--bg);
  color: var(--text); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased;
}
h1, p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.login { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 22px; padding: 32px 16px; }
.login__brand { display: inline-flex; align-items: center; gap: 10px; }
.login__mark { width: 34px; height: 34px; color: var(--green); }
.login__word { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.login__word b { font-weight: 800; }

.card {
  width: 100%; max-width: 380px; display: grid; gap: 16px;
  background: linear-gradient(180deg, var(--card) 0%, #0f1828 100%);
  border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px 20px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
.card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.card__sub { color: var(--muted); font-size: 13.5px; margin-top: -10px; }

.field { display: grid; gap: 6px; }
.field__row { display: flex; align-items: center; justify-content: space-between; }
label { font-size: 13px; font-weight: 600; color: var(--text-2); }
input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px;
}
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.reveal {
  border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 4px 6px; margin-right: -6px; border-radius: 6px;
}
.reveal:hover { color: var(--text); }

.error {
  font-size: 13.5px; color: #ffc2c8; background: var(--red-bg); border: 1px solid var(--red-line);
  border-radius: 10px; padding: 9px 12px;
}
.error::before { content: '! '; font-weight: 800; color: var(--red); }
.error[hidden] { display: none; }

.submit {
  min-height: 46px; border-radius: 10px; border: 1px solid var(--text); background: var(--text); color: var(--bg);
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.submit:hover { background: #fff; }
.submit:disabled { opacity: 0.6; cursor: progress; }
.help { text-align: center; font-size: 13px; color: var(--muted); }
.foot { max-width: 380px; text-align: center; font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}