@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap";
.login-root{--primary:#9380f2;--primary-600:#7c66ee;--primary-700:#6a52e0;--primary-800:#523dc4;--light:#f1edfd;--ink:#1c1633;--ink-2:#4a4364;--muted:#8a82a6;--line:#e7e1f7;--white:#fff;--danger:#e0556b;--green:#2faa6a;--radius:12px;--font-display:"Outfit", system-ui, sans-serif;--font-sans:"Inter", system-ui, sans-serif;box-sizing:border-box;font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:linear-gradient(#fff 0%,#e8e4f3 60%,#d7d2ed 100%);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:24px 32px;display:flex}.login-root *,.login-root :before,.login-root :after{box-sizing:border-box}.login-root a{color:inherit;text-decoration:none}.window{background:var(--white);border-radius:30px;grid-template-columns:1fr 1.06fr;gap:0;width:100%;max-width:1020px;padding:14px;display:grid;box-shadow:0 40px 90px -40px #523dc466,inset 0 2px #fff9}.mesh{color:#fff;isolation:isolate;background:linear-gradient(145deg,#5733d6 0%,#8b76f4 52%,#cabfff 100%);border-radius:20px;flex-direction:column;justify-content:space-between;min-height:460px;padding:34px;display:flex;position:relative;overflow:hidden}.blob{filter:blur(30px);opacity:1;z-index:-1;will-change:transform;border-radius:50%;position:absolute}.b1{aspect-ratio:1;background:radial-gradient(circle,#2a1492 0%,#2a149200 66%);width:66%;animation:11s ease-in-out infinite m1;top:-14%;left:-12%}.b2{aspect-ratio:1;background:radial-gradient(circle,#ded4ff 0%,#ded4ff00 66%);width:60%;animation:9s ease-in-out infinite m2;top:6%;right:-16%}.b3{aspect-ratio:1;background:radial-gradient(circle,#3f1fc6 0%,#3f1fc600 66%);width:72%;animation:13s ease-in-out infinite m3;bottom:-26%;left:-10%}.b4{aspect-ratio:1;background:radial-gradient(circle,#f4f0ff 0%,#f4f0ff00 64%);width:52%;animation:10s ease-in-out infinite m4;bottom:-10%;right:-8%}.b5{aspect-ratio:1;background:radial-gradient(circle,#a48dff 0%,#a48dff00 66%);width:48%;animation:14s ease-in-out infinite m5;top:30%;left:34%}@keyframes m1{0%{transform:translate(0)scale(1)}33%{transform:translate(40%,30%)scale(1.3)}66%{transform:translate(18%,55%)scale(1.1)}to{transform:translate(0)scale(1)}}@keyframes m2{0%{transform:translate(0)scale(1)}33%{transform:translate(-38%,40%)scale(1.25)}66%{transform:translate(-15%,12%)scale(1.4)}to{transform:translate(0)scale(1)}}@keyframes m3{0%{transform:translate(0)scale(1)}33%{transform:translate(34%,-34%)scale(1.3)}66%{transform:translate(55%,-12%)scale(1.15)}to{transform:translate(0)scale(1)}}@keyframes m4{0%{transform:translate(0)scale(1)}33%{transform:translate(-44%,-34%)scale(1.35)}66%{transform:translate(-12%,-55%)scale(1.1)}to{transform:translate(0)scale(1)}}@keyframes m5{0%{transform:translate(0)scale(1)}33%{transform:translate(-48%,-30%)scale(1.4)}66%{transform:translate(30%,-45%)scale(1.2)}to{transform:translate(0)scale(1)}}.mark{display:flex}.mark svg{width:40px;height:40px;animation:26s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.mesh-copy{z-index:1;margin-top:auto;position:relative}.mesh-copy .kicker{color:#ffffffdb;letter-spacing:.01em;margin:0 0 10px;font-size:14px}.mesh-copy h2{font-family:var(--font-display);letter-spacing:-.02em;text-shadow:0 1px 24px #28145a2e;max-width:340px;margin:0;font-size:clamp(26px,2.5vw,33px);font-weight:700;line-height:1.14}.panel{flex-direction:column;justify-content:center;padding:32px 44px 28px;display:flex}.card{width:100%;max-width:360px;margin:0 auto}.fmark{color:var(--primary-700);margin-bottom:12px;display:flex}.fmark svg{width:28px;height:28px}.card h1{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 9px;font-size:30px;font-weight:700}.card .sub{color:var(--muted);margin:0 0 18px;font-size:13.5px;line-height:1.55}.form{flex-direction:column;gap:12px;display:flex}.field{flex-direction:column;gap:7px;display:flex}.field label{color:var(--ink);justify-content:space-between;align-items:center;font-size:13px;font-weight:600;display:flex}.field label .forgot{color:var(--primary-700);font-size:12px;font-weight:500}.field label .forgot:hover{text-decoration:underline}.inputWrap{border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;align-items:center;transition:border-color .16s,box-shadow .16s;display:flex;position:relative}.inputWrap input{width:100%;color:var(--ink);border-radius:var(--radius);background:0 0;border:0;outline:none;padding:13px 15px;font-family:inherit;font-size:14px}.inputWrap input::placeholder{color:#aaa2c4}.inputWrap .toggle{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:8px;padding:7px;transition:color .16s,background .16s;display:flex;position:absolute;right:7px}.inputWrap .toggle:hover{color:var(--ink);background:#f1edfd}.inputWrap.focused{border-color:var(--primary);box-shadow:0 0 0 4px #9380f229}.inputWrap.invalid{border-color:var(--danger)}.inputWrap.invalid.focused{box-shadow:0 0 0 4px #e0556b26}.inputWrap input[type=password]{letter-spacing:.12em}.err{color:var(--danger);align-items:center;gap:5px;font-size:12px;display:flex}.err svg{width:13px;height:13px}.hint{color:var(--muted);align-items:center;gap:5px;font-size:11.5px;display:flex}.hint svg{color:#d89a2e;width:13px;height:13px}.row{justify-content:space-between;align-items:center;margin-top:-2px;display:flex}.check{cursor:pointer;color:var(--ink-2);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:13px;display:flex}.check input{opacity:0;width:0;height:0;position:absolute}.check .box{background:#fff;border:1.5px solid #cfc7ea;border-radius:5px;place-items:center;width:17px;height:17px;transition:all .16s;display:grid}.check .box svg{color:#fff;opacity:0;width:11px;height:11px;transition:all .16s;transform:scale(.6)}.check input:checked+.box{background:var(--primary);border-color:var(--primary)}.check input:checked+.box svg{opacity:1;transform:scale(1)}.check input:focus-visible+.box{box-shadow:0 0 0 4px #9380f238}.btn{cursor:pointer;width:100%;font-family:var(--font-sans);color:#fff;background:var(--primary-700);border-radius:var(--radius);border:0;justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:14px 18px;font-size:14.5px;font-weight:600;transition:background .16s,transform 80ms,box-shadow .16s;display:flex;box-shadow:0 14px 30px -14px #6a52e0b3}.btn:hover{background:var(--primary-800)}.btn:active{transform:scale(.985)}.btn:disabled{cursor:default}.btn.ok{background:var(--green);box-shadow:none}.btn svg{width:17px;height:17px}.arr{transition:transform .18s;display:flex}.btn:hover .arr{transform:translate(3px)}.spin{border:2.5px solid #fff6;border-top-color:#fff;border-radius:50%;width:17px;height:17px;animation:.7s linear infinite spin2}@keyframes spin2{to{transform:rotate(360deg)}}.formerr{color:#b5384c;background:#fdeef0;border:1px solid #f6cdd4;border-radius:10px;align-items:center;gap:8px;padding:10px 12px;font-size:12.5px;animation:.4s shake;display:flex}.formerr svg{flex:none;width:15px;height:15px}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.divider{color:var(--muted);align-items:center;gap:12px;margin:14px 0;font-size:12px;display:flex}.divider:before,.divider:after{content:"";background:var(--line);flex:1;height:1px}.socials{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.social{border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink);cursor:pointer;background:#fbfaff;justify-content:center;align-items:center;gap:7px;padding:11px;font-size:13px;font-weight:600;transition:border-color .16s,background .16s,transform 80ms;display:flex}.social:hover{background:#f6f3ff;border-color:#d6cdf3}.social:active{transform:scale(.97)}.social svg{width:17px;height:17px}.foot{text-align:center;color:var(--muted);margin-top:14px;font-size:13px}.foot a{color:var(--primary-700);font-weight:600}.foot a:hover{text-decoration:underline}@media (max-width:860px){.login-root{padding:16px}.window{grid-template-columns:1fr;max-width:460px}.mesh{min-height:180px;padding:26px}.mesh-copy h2{max-width:none;font-size:22px}.panel{padding:34px 28px 30px}}@media (max-width:460px){.socials{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.blob,.mark svg,.spin{animation:none!important}}
