body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: var(--bg-soft); padding: 24px; }
.login-shell { width: 100%; max-width: 430px; }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand a { color: var(--primary); text-decoration: none; font-size: 1.8rem; font-weight: 700; }
.login-brand p { margin: 4px 0 0; color: var(--text-muted); font-style: italic; }
.login-box { background: var(--bg-card, white); padding: 38px; border-radius: 8px;     box-shadow: var(--shadow-card); border: 1px solid rgba(var(--primary-rgb), 0.09); width: 100%; text-align: center; box-sizing: border-box; }
h2 { color: var(--text-dark); margin: 0 0 8px; font-size: 1.65rem; }
.login-copy { margin: 0 0 26px; color: var(--text-muted); font-size: 0.95rem; }
input { width: 100%; padding: 12px; margin-bottom: 14px; border: 1px solid rgba(40, 34, 36, 0.16); border-radius: 6px; box-sizing: border-box; font-family: inherit; }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb),0.12); }
button { width: 100%; padding: 12px; background-color: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition); box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.16); }
button:hover { background-color: var(--primary-dark); transform: translateY(-1px); }
button:disabled { background-color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none; }
.error { color: var(--primary-dark); background: var(--alert-err-bg); padding: 10px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; border: 1px solid rgba(var(--primary-rgb), 0.16); }
.error-locked { color: var(--text-muted); background: var(--bg-muted); border-color: var(--border); }
.back-home { display: inline-block; margin-top: 20px; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid transparent; }
.back-home:hover { color: var(--primary); border-color: var(--primary); }

@media (max-width: 768px) {
  body { padding: 16px; }
  .login-box { padding: 24px 20px; }
  h2 { font-size: 1.4rem; }
}