*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:28px;background:radial-gradient(at 20% 10%,#e5e8fa,transparent 55%),radial-gradient(at 90% 90%,#e2f0fa,transparent 60%),#f4f7fc;font:14px system-ui,sans-serif;color:#3d4f69}main{width:min(390px,100%);padding:36px;background:#ffffffd9;border:1px solid #fff;border-radius:14px;box-shadow:0 18px 65px #3b52600d}.login-mark{display:block;width:30px;height:33px;border-radius:7px;background:linear-gradient(145deg,#d5f5ff,#91baf7,#afa8ef);transform:rotate(-8deg);margin-bottom:24px}h1{font-size:21px;margin:0 0 8px}main>p{font-size:12px;color:#8b99ad;margin-bottom:26px}label{display:grid;gap:8px;font-size:12px;margin-top:16px}input{width:100%;font:inherit;padding:11px 12px;border:1px solid #dfe6f0;background:#ffffffb3;border-radius:6px;color:#3d4f69}input:focus{outline:2px solid #b9d0f3;outline-offset:1px}.login-error{min-height:20px;font-size:12px;color:#b26e7c;line-height:1.7;margin:14px 0}button{width:100%;padding:11px;font:inherit;border:0;border-radius:6px;color:white;background:#6b91cf;cursor:pointer}button:hover{background:#577ebd}button:focus-visible{outline:2px solid #a9c8f4;outline-offset:3px}