:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f5f7fb; } * { box-sizing: border-box; } body { margin: 0; } .login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-card { width: min(390px, 100%); padding: 30px; border: 1px solid #d9e0ec; border-radius: 8px; background: #fff; box-shadow: 0 16px 48px rgba(15, 23, 42, .12); } .mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: #172033; color: #fff; font-weight: 800; } h1 { margin: 18px 0 6px; font-size: 20px; } p { margin: 0 0 22px; color: #60708a; line-height: 1.45; } label { display: grid; gap: 6px; margin: 14px 0; color: #45536a; font-size: 13px; font-weight: 700; } input { width: 100%; padding: 10px 11px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; } button { width: 100%; margin-top: 8px; padding: 11px; border: 0; border-radius: 6px; background: #2563eb; color: #fff; font: inherit; font-weight: 750; cursor: pointer; } #status { min-height: 18px; margin: 8px 0 0; color: #b42318; font-size: 12px; }