body { display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 1.5rem; min-height: calc(100vh - var(--site-nav-h, 0px)); margin: 0; padding: 16px; }

.welcome { text-align: center; max-width: 520px; }
.welcome-kicker { color: var(--accent); letter-spacing: 0.35em; text-transform: uppercase;
  font-size: 0.8rem; margin: 0 0 1rem; }
.welcome-title { font-weight: normal; margin: 0 0 1rem; color: var(--fg);
  font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: 0.04em; }
.welcome-body { color: var(--muted); line-height: 1.6; margin: 0; }
.welcome-signature { color: var(--accent); font-style: italic; margin: 1rem 0 0; }

.login-box {
  border: 2px solid var(--accent);
  padding: 20px;
  width: min(95vw, 420px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-title { text-align: center; font-size: 1.2em; margin-bottom: 8px; }
.login-input {
  background: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 8px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.login-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.login-error { color: #f33; margin: 4px 0 0; }
.login-box .btn { margin-top: 10px; }
.login-hint { font-size: 0.75rem; opacity: 0.7; margin: -2px 0 4px; }
.login-switch { text-align: center; font-size: 0.85rem; margin: 8px 0 0; }
.login-switch a { text-decoration: underline; }