body { margin:0; font-family: system-ui, sans-serif; background: var(--color-surface-muted, #f4f7f9); min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-card { background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(15,35,52,.08); padding:32px; max-width:400px; width:100%; }
.login-logo { display:block; margin:0 auto 20px; max-width:240px; height:auto; border-radius:8px; }
.login-hint { font-size:.875rem; color:#5a6b78; text-align:center; margin:0 0 20px; }
label { display:block; font-size:.8rem; font-weight:600; color:#374955; margin-bottom:6px; }
input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #cfd8e0; border-radius:8px; font-size:1rem; margin-bottom:14px; }
button[type=submit] { width:100%; padding:12px; border:none; border-radius:8px; font-weight:600; font-size:1rem; cursor:pointer; box-sizing:border-box; background:var(--color-accent, #589da1); color:#fff; }
button[type=submit]:hover { filter:brightness(0.94); }
#hub-login-form.is-passkey-busy { opacity:.85; pointer-events:none; }
.login-error { color:#b00020; font-size:.9rem; margin-bottom:12px; }
.login-info { color:#0b5; font-size:.9rem; margin-bottom:12px; }
.login-footer { margin-top:18px; font-size:.85rem; text-align:center; }
.login-footer a { color:var(--color-accent, #589da1); }

.login-card { max-width: 440px; }
.login-card--wide { max-width: 440px; }
.hub-section-mt { margin-top: 14px; }
.login-card .hub-pw-field > label { font-size: .8rem; font-weight: 600; color: #374955; }
.login-card .hub-field-wrap.hub-password-field-wrap { max-width: none; }
.login-card h1 { margin: 0 0 16px; }
.login-card input[type="text"][name="otp"],
.login-card input[autocomplete="one-time-code"] {
  font-size: 1.1rem; letter-spacing: 0.15em; text-align: center;
}
.hub-btn-secondary {
  width: 100%; padding: 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-accent-background, var(--color-accent-soft2, #e2eef0)) 65%, #9ab5bc);
  background: var(--color-accent-background, var(--color-accent-soft2, #e2eef0));
  color: var(--color-accent-muted, #2a6b6f); font: inherit; font-weight: 600; cursor: pointer;
}
.hub-btn-secondary:hover { filter: brightness(0.97); color: var(--color-accent-muted, #2a6b6f); }
.hub-auth-access-card {
  background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(15, 35, 52, 0.08);
  padding: 28px 32px; max-width: 440px; width: 100%; text-align: center;
}
.hub-auth-access-card h1 { font-size: 1.2rem; margin: 0 0 12px; color: #0f2334; }
.hub-auth-access-card p { color: #5a6b78; line-height: 1.5; margin: 0 0 20px; }
.hub-auth-access-card a { color: var(--color-accent, #589da1); font-weight: 600; text-decoration: none; }
.hub-auth-access-card a:hover { text-decoration: underline; }