* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Arial, Helvetica, sans-serif; }
[hidden] { display: none !important; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 30px 20px;
  background:
    radial-gradient(circle at 14% 18%, rgba(201, 120, 90, .13), transparent 26%),
    radial-gradient(circle at 87% 82%, rgba(141, 155, 126, .18), transparent 30%),
    #f6f1e9;
  color: #35231c;
}
.login-card { width: min(100%, 470px); padding: 48px; border: 1px solid #e4d7c8; border-radius: 22px; background: #fffdf9; box-shadow: 0 24px 70px rgba(81, 53, 41, .13); }
.login-brand { display: inline-flex; align-items: baseline; color: #35231c; text-decoration: none; }
.login-brand span { font-family: Georgia, "Times New Roman", serif; font-size: 29px; letter-spacing: -.04em; }
.login-brand em { margin-left: 7px; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 30px; font-weight: 400; }
.login-kicker { margin: 38px 0 4px; color: #ad5f46; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.login-card h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 44px; font-weight: 400; letter-spacing: -.04em; }
.login-intro { margin: 10px 0 28px; color: #766a64; font-size: 14px; }
.login-card form { display: grid; gap: 18px; }
.login-card label { font-size: 12px; font-weight: 700; }
.login-card input { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #d9cbbc; border-radius: 8px; outline: none; background: white; color: #35231c; font: inherit; }
.login-card input:focus { border-color: #c9785a; box-shadow: 0 0 0 3px rgba(201, 120, 90, .13); }
.login-card button { min-height: 51px; border: 0; border-radius: 8px; background: #c9785a; color: white; cursor: pointer; font: inherit; font-weight: 700; }
.login-card button:disabled { cursor: wait; opacity: .65; }
.login-primary { display: grid; min-height: 51px; place-items: center; padding: 0 18px; border-radius: 8px; background: #c9785a; color: white; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
.login-primary:hover { background: #b9684c; }
.login-secondary { display: block; margin-top: 14px; color: #766a64; font-size: 12px; text-align: center; }
.login-demo-note { margin: 18px 0 0; padding: 13px 14px; border-radius: 8px; background: #f3eee6; color: #766a64; font-size: 11px; line-height: 1.55; }
.login-error { margin: 0; padding: 10px 12px; border-radius: 7px; background: #f8e5e0; color: #8f3f32; font-size: 12px; }
.login-back { display: inline-block; margin-top: 28px; color: #766a64; font-size: 12px; text-decoration: none; }
@media (max-width: 520px) { .login-card { padding: 34px 26px; } .login-card h1 { font-size: 38px; } }