:root { font-family: Arial, Helvetica, sans-serif; color: #1f2329; background: #eef4fb; font-size: 14px; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top left, #dcecff, transparent 42%), #f5f8fc; }
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid #dce3ec; box-shadow: 0 24px 70px rgba(24, 54, 90, .14); padding: 30px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; background: #1677ff; color: #fff; font-weight: 700; font-size: 24px; border-radius: 12px; }
.auth-brand strong, .auth-brand span { display: block; }
.auth-brand strong { font-size: 19px; }
.auth-brand span { color: #667085; margin-top: 3px; font-size: 12px; }
.auth-heading h1 { margin: 0 0 8px; font-size: 24px; }
.auth-heading p { margin: 0 0 22px; color: #667085; line-height: 1.55; }
.auth-error { margin-bottom: 18px; padding: 11px 12px; color: #b42318; border: 1px solid #fecdca; background: #fef3f2; }
label { display: block; margin: 15px 0 7px; font-weight: 600; }
input { width: 100%; height: 42px; border: 1px solid #cfd7e3; padding: 9px 11px; outline: none; font: inherit; }
input:focus { border-color: #1677ff; box-shadow: 0 0 0 3px rgba(22,119,255,.12); }
button { width: 100%; min-height: 42px; margin-top: 22px; border: 1px solid #1677ff; background: #1677ff; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #095fd1; }
@media (max-width: 520px) { .auth-shell { padding: 14px; } .auth-card { padding: 22px 18px; } }

/* Mobile UX v1 */
.auth-card { border-radius: 16px; }
input, button { border-radius: 9px; }
@media (max-width: 520px) {
    body { min-height: 100dvh; }
    .auth-shell {
        min-height: 100dvh;
        place-items: center;
        padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
    }
    .auth-card {
        padding: 22px 16px;
        border-radius: 14px;
    }
    .auth-brand { margin-bottom: 22px; }
    .auth-heading h1 { font-size: 22px; }
    input { height: 46px; font-size: 16px; }
    button { min-height: 46px; touch-action: manipulation; }
}