html { background: #f7ffff; font-family: Arial, sans-serif; }
body { margin: 0; min-height: 100vh; display: grid; place-items: start center; color: #111; }
.recovery-card { width: min(390px, calc(100% - 30px)); margin-top: 12vh; padding: 24px; box-sizing: border-box; border: 8px solid whitesmoke; border-radius: 5px; background: #e3e3e3; box-shadow: 0 6px 20px rgba(0,0,0,.19); }
h1 { margin: 0 0 18px; text-align: center; font-size: 24px; }
p { line-height: 1.45; text-align: center; }
label { display: block; margin: 16px 0 6px; font-weight: bold; }
input { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #555; border-radius: 3px; font-size: 15px; }
button { display: block; margin: 20px 0 12px auto; padding: 8px 14px; border: 1px solid #222; border-radius: 5px; background: #f5f5f5; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
a { display: block; text-align: center; color: #174f65; }
#message { min-height: 22px; }
.hint { font-size: 13px; text-align: left; }
.message-success { color: #176b35; }
.message-error { color: #a52222; }