:root { color-scheme:light; font:16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; color:#171322; background:#f7f5fa; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top right, #e8e0f7, transparent 32rem), #f7f5fa; }
.login-card { width:min(100%, 26rem); padding:38px; border:1px solid #e3ddeb; border-radius:20px; background:#fff; box-shadow:0 18px 48px rgb(41 25 70 / 12%); }
img { display:block; border-radius:16px; margin-bottom:24px; }
.eyebrow { margin:0 0 5px; color:#7556ad; font-size:.75rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:2rem; letter-spacing:-.03em; }
.lead,.support { color:#676274; }
.lead { margin:8px 0 26px; }
.support { margin:22px 0 0; font-size:.85rem; }
form { display:grid; gap:8px; }
label { margin-top:6px; color:#454052; font-size:.9rem; font-weight:700; }
input,button { width:100%; min-height:46px; border-radius:9px; font:inherit; }
input { border:1px solid #cbc3d8; padding:10px 12px; color:#171322; background:#fff; }
input:focus { outline:3px solid #ded4ee; border-color:#7556ad; }
button { margin-top:14px; border:0; padding:10px 14px; color:#fff; background:#7556ad; font-weight:800; cursor:pointer; }
button:hover { background:#644598; }
button:disabled { opacity:.65; cursor:wait; }
#error { margin:8px 0 0; padding:10px 12px; border-radius:9px; color:#982642; background:#fdebed; font-size:.9rem; }
@media (max-width:440px) { .login-card { padding:28px 22px; } }