*{box-sizing:border-box}html{min-height:100%;background:#f0f5ff}body{margin:0;min-width:280px;min-height:100vh;min-height:100svh;font-family:"Arial",sans-serif;color:#405171;background:radial-gradient(ellipse at 50% 48%,#e5ecff 0,#f1f6ff 74%)}.decoration{position:fixed;inset:0;overflow:hidden;pointer-events:none}.decoration span{position:absolute;border-radius:50%}.blue{width:44vw;height:44vw;left:-16.5vw;top:-11vw;background:linear-gradient(135deg,#0561e9,#0049ed)}.yellow{width:17.3vw;height:17.3vw;right:-1.6vw;top:22.3%;background:radial-gradient(circle at 40% 38%,#fffa4c,#f5f347)}.cyan{width:59vw;height:59vw;left:68.2%;top:51.3%;background:linear-gradient(130deg,#b9e8f1,#c2eaf3)}.viewport{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.card{width:550px;max-width:100%;padding:40px 42px 36px;border-radius:28px;background:rgba(255,255,255,.89);box-shadow:0 16px 65px rgba(74,106,195,.12);text-align:center}.brand-icon{display:block;width:187px;height:144px;margin:0 auto 20px;overflow:visible}h1{color:#063de4;font-size:34px;line-height:1.18;letter-spacing:-1.2px;font-weight:750;margin:0;white-space:nowrap}.subtitle{margin:7px 0 26px;font-size:17px;line-height:1.4;letter-spacing:5.7px;color:#0045ff;padding-left:5.7px}.intro{font-size:20px;line-height:1.38;margin:0 0 24px}.field{height:60px;display:flex;align-items:center;gap:26px;padding:0 22px;border:1.5px solid #dbe4f5;border-radius:13px;background:rgba(255,255,255,.35);margin-bottom:14px;text-align:left}.field svg{width:22px;height:25px;flex-shrink:0;fill:none;stroke:#7888a4;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.field input{font:18px/1.3 Arial,sans-serif;min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;color:#405171;background:transparent}.field input::placeholder{color:#98a7c2;opacity:1}.field:focus-within{border-color:#0049ef;box-shadow:0 0 0 3px #0049ef12}button{display:flex;align-items:center;justify-content:center;gap:17px;width:100%;height:58px;margin-top:20px;border:0;border-radius:40px;background:linear-gradient(#004bfa,#0040e7);color:#fff;font:600 20px/1 Arial,sans-serif;cursor:pointer}button svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.5}button:hover{filter:brightness(1.07)}button:focus-visible{outline:3px solid #7186ad;outline-offset:4px}.error{margin:16px 0 0;font-size:15px;line-height:1.4;color:#a51e2c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:851px) and (max-height:760px){.viewport{padding:24px 20px}.card{width:500px;padding:25px 36px}.brand-icon{width:145px;height:112px;margin-bottom:16px}h1{font-size:30px}.subtitle{margin-bottom:20px;font-size:15px}.intro{font-size:18px;margin-bottom:20px}.field{height:54px}button{height:54px;margin-top:18px}}@media(max-width:600px){.viewport{padding:24px 16px}.card{width:430px;padding:30px 24px;border-radius:24px}.brand-icon{width:155px;height:120px}h1{font-size:clamp(21px,6vw,29px);letter-spacing:-.8px}.subtitle{font-size:14px;letter-spacing:4px;margin-bottom:24px}.intro{font-size:17px}.field{height:56px;gap:18px;padding:0 18px}.field input{font-size:17px}button{font-size:18px;height:56px}.blue{width:88vw;height:88vw;left:-48vw;top:-20vw}.yellow{width:35vw;height:35vw;right:-15vw;top:15%}.cyan{width:130vw;height:130vw;left:45%;top:65%}}

/* Compact login layout, version 1.1.1. */
.card{width:420px;padding:28px 30px 26px;border-radius:23px}
.brand-icon{width:137px;height:106px;margin-bottom:16px}
h1{font-size:26px;letter-spacing:-.9px}
.subtitle{font-size:13px;letter-spacing:4.3px;padding-left:4.3px;margin:6px 0 21px}
.intro{font-size:16px;line-height:1.4;margin-bottom:20px}
.field{height:47px;gap:20px;padding:0 17px;border-radius:11px;margin-bottom:12px}
.field svg{width:18px;height:21px}
.field input{font-size:15px}
button{height:46px;margin-top:16px;font-size:16px;gap:14px}
button svg{width:21px;height:21px}
.error{font-size:13px;margin-top:13px}
@media(min-width:851px) and (max-height:760px){.card{width:390px;padding:23px 27px}.brand-icon{width:116px;height:90px;margin-bottom:14px}h1{font-size:24px}.subtitle{font-size:12px;margin-bottom:17px}.intro{font-size:15px;margin-bottom:17px}.field{height:44px}button{height:44px;margin-top:14px}}
@media(max-width:600px){.card{width:360px;padding:25px 23px}.brand-icon{width:120px;height:93px}h1{font-size:clamp(19px,5.6vw,24px)}.subtitle{font-size:12px;letter-spacing:3.7px;margin-bottom:20px}.intro{font-size:15px}.field{height:46px;gap:15px;padding:0 15px}.field input{font-size:15px}button{height:46px;font-size:16px}}