html, body { height: 100%; margin: 0; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background: #f5f6f8; }
.page { min-height: 100%; display: flex; flex-direction: column; }
.login-card { width: 360px; max-width: 92%; margin: auto; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.08); padding: 24px 22px 20px; }
.title { margin: 0 0 12px; font-size: 20px; text-align: center; color: #222; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 14px; color: #444; }
input[type="text"], input[type="password"] { padding: 10px 12px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 14px; outline: none; }
input[type="text"]:focus, input[type="password"]:focus { border-color: #409eff; box-shadow: 0 0 0 3px rgba(64,158,255,.12); }
.btn { cursor: pointer; border: none; border-radius: 6px; padding: 10px 14px; font-size: 14px; }
.btn-primary { background: #409eff; color: #fff; }
.btn-primary:hover { background: #3a8be0; }
.btn-block { width: 100%; }
.footer { margin-top: auto; background: #fff; height: 72px; box-shadow: 0 -1px 0 rgba(0,0,0,.05); }