/* Login page. */

.login-page {
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.login { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.login-card {
  position: relative; display: grid; gap: 16px; width: min(380px, 100%);
  padding: 30px 28px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
}
.login-ribbon { position: absolute; inset: 0 0 auto 0; display: flex; gap: 2px; height: 4px; }
.login-ribbon span { flex: 1; background: var(--tint); }
.login-ribbon span:nth-child(1) { flex: 3; }
.login-ribbon span:nth-child(3) { flex: 2.4; }
.login-ribbon span:nth-child(5) { flex: 1.6; }
.login-title { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 6px; }
.login-field { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.login-input { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 4px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); }
.login-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-input input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-size: 15px; letter-spacing: 0.04em; }
.login-input input:disabled { opacity: 0.5; }
.login-error .login-input { border-color: var(--neg); }
.login-message { min-height: 20px; font-size: 13px; color: var(--text-2); }
.login-message[data-kind="error"] { color: var(--neg); }
.login-message[data-kind="locked"] { color: var(--warn); font-variant-numeric: tabular-nums; }
.login-submit { height: 42px; justify-content: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.login-shake { animation: shake 0.32s var(--ease); }
@keyframes shake {
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}