@font-face { font-family: Inter; src: local('Inter'); font-display: swap; }

:root {
  color-scheme: dark;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  color: #f4eef2;
  background: #09090c;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #ffa5b7; outline-offset: 5px; }
[hidden] { display: none !important; }
.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; }

.login-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 22% 43%, #8d173421, transparent 44%), radial-gradient(ellipse at 92% 12%, #4a273019, transparent 36%), linear-gradient(130deg, #0e0c10, #09090c 65%);
}
.login-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; max-width: 1600px; margin: auto; padding: 34px 5.4% 25px; }
.login-header { display: flex; align-items: center; gap: 24px; }
.login-brand { display: inline-flex; align-items: center; gap: 13px; font-size: 23px; letter-spacing: 2.7px; font-weight: 750; }
.login-brand-mark { display: flex; align-items: center; justify-content: center; gap: 4px; width: 36px; height: 36px; border-radius: 12px; transform: rotate(-5deg); border: 1px solid #ffc1cd69; background: linear-gradient(145deg, #ff7a92, #e73155 55%, #ab1537); box-shadow: inset 0 2px 3px #ffebee66, inset 0 -2px 4px #67082870, 0 6px 25px #df274b24; }
.login-brand-mark i { display: block; width: 4px; height: 17px; border-radius: 1px; transform: skew(-18deg); background: #fff2f5; }
.login-brand-mark i + i { height: 12px; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 444px); align-items: center; gap: 68px; width: 100%; max-width: 1096px; margin: auto; padding: 54px 0 66px; }
.login-intro { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-height: 570px; }
.login-intro-copy { position: relative; z-index: 2; margin-top: 330px; padding-left: 21px; }
.login-intro h2 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.14; font-weight: 500; letter-spacing: -2.1px; margin: 20px 0 0; }
.login-intro h2 span { color: #a897a5; }
.login-art { position: absolute; width: 490px; max-width: 110%; height: 430px; left: -23px; top: calc(50% - 314px); pointer-events: none; }
.login-art:before { content: ''; position: absolute; width: 310px; height: 300px; left: 90px; top: 92px; border-radius: 50%; background: #d9204826; filter: blur(68px); }
.login-art-lens { position: absolute; width: 326px; height: 326px; top: 46px; left: 82px; overflow: hidden; border-radius: 50%; transform: rotate(-24deg); border: 1px solid #ffc0cb73; background: radial-gradient(ellipse at 27% 13%, #ffe7ed61, transparent 35%), radial-gradient(ellipse at 50% 90%, #ff64762b, transparent 47%), conic-gradient(from 15deg, #ff7a951f, #4f06178a 17%, #dc2f554d 30%, #ff9caf9c 45%, #a50e3966 58%, #13050bde 77%, #ff96ad3b); box-shadow: inset 2px 3px 9px #ffd6dd67, inset -8px -7px 16px #e45b7770, inset 12px -12px 25px #930f376b, 13px 25px 65px #0009, -8px -8px 50px #e83b6321; }
.login-art-lens:before { content: ''; position: absolute; inset: 19px; border-radius: inherit; border: 1px solid #ff9fbd54; background: radial-gradient(ellipse at 20% 15%, #ffbcc531, transparent 36%), radial-gradient(ellipse at 66% 65%, #a41f395e, transparent 60%); box-shadow: inset 3px 3px 8px #ffb2bf4a, 0 1px 6px #ffbbca44, 0 0 15px #dc174b3d; }
.login-art-lens:after { content: ''; position: absolute; left: 17px; right: 22px; top: 21px; height: 114px; border-radius: 50%; transform: rotate(-17deg); border-top: 3px solid #ffe6edcf; filter: blur(.7px); background: linear-gradient(170deg, #ffbed021, transparent 72%); }
.login-art-lens span { position: absolute; inset: 57px; border: 1px solid #f59da74d; border-radius: 50%; background: radial-gradient(ellipse at 65% 36%, #6d152733, #11080f6b 75%); box-shadow: inset -5px -6px 10px #ff617954, inset 5px 3px 12px #05030a9c, 3px 3px 7px #ff9aa01c; }
.login-art-lens i { position: absolute; top: 94px; left: 122px; height: 137px; width: 29px; transform: skew(-17deg); border-radius: 6px; border: 1px solid #ffe4eb7d; background: linear-gradient(90deg, #ffdcdf20, #ffadbf75 55%, #ffdae94d); box-shadow: inset 2px 1px 3px #fff2, 8px 6px 12px #16040d80; }
.login-art-lens i + i { left: 170px; top: 119px; height: 94px; background: linear-gradient(90deg, #ffb7c72e, #ffb3c170 65%, #ffdeed4a); }
.login-art-orbit { position: absolute; width: 456px; height: 186px; left: 9px; top: 126px; border: 1px solid #fbb1c149; border-top-color: #ee749018; border-bottom-color: #ffb6c2a1; border-radius: 50%; transform: rotate(-36deg); box-shadow: 0 3px 3px #ff9fb111, inset 0 -1px 4px #ff7b9f35; z-index: 1; }
.login-art-orbit:after { content: ''; position: absolute; inset: 7px; border: 1px solid #ffadc317; border-bottom-color: #ffa5bb4a; border-radius: inherit; }
.login-art-reflection { position: absolute; bottom: 16px; left: 120px; width: 270px; height: 13px; border-radius: 50%; background: #e32a4524; filter: blur(15px); transform: rotate(-8deg); }
.login-art-cross { position: absolute; width: 9px; height: 9px; opacity: .5; }
.login-art-cross:before, .login-art-cross:after { content: ''; position: absolute; background: #bd8498; }
.login-art-cross:before { left: 4px; top: 0; width: 1px; height: 9px; }
.login-art-cross:after { left: 0; top: 4px; height: 1px; width: 9px; }
.login-art-cross-one { top: 46px; left: 34px; }
.login-art-cross-two { bottom: 45px; right: 5px; }

.login-card { position: relative; padding: 37px 36px 31px; border: 1px solid #ffffff18; border-top-color: #ffffff28; border-radius: 27px; background: radial-gradient(ellipse at 100% 100%, #8e234114, transparent 65%), linear-gradient(135deg, #ffffff09, #ffffff03 65%); box-shadow: inset 0 1px 0 #ffffff07, 0 28px 90px #00000026; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.login-card:before { content: ''; position: absolute; height: 1px; top: -1px; left: 15%; right: 15%; background: linear-gradient(90deg, transparent, #ffbbcc4a, transparent); }
.login-card-heading { margin-bottom: 31px; }
.login-card h1 { margin: 0; font-size: 38px; line-height: 1.2; font-weight: 550; letter-spacing: -1.3px; }
#login-form { display: grid; gap: 20px; }
.login-field { display: grid; gap: 10px; }
.login-field label { font-size: 14px; font-weight: 500; color: #dbd1da; }
.login-field input { display: block; width: 100%; height: 54px; padding: 0 16px; border: 1px solid #ffffff1e; border-radius: 12px; background: #08070c66; color: #f7eff4; font-size: 15px; outline: none; box-shadow: inset 0 1px 3px #00000020; transition: border-color .18s, box-shadow .18s, background .18s; }
.login-field input::placeholder { color: #837482; opacity: 1; }
.login-field input:hover { border-color: #ffffff35; }
.login-field input:focus { border-color: #f68da388; box-shadow: 0 0 0 3px #ee597c13; background: #100b1266; }
.login-field input:disabled { opacity: .65; }
.login-field input:-webkit-autofill { -webkit-text-fill-color: #f7eff4; box-shadow: 0 0 0 1000px #21161f inset; caret-color: #f7eff4; }
.login-password { position: relative; }
.login-password input { padding-right: 55px; }
.login-password-toggle { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; top: 6px; right: 6px; padding: 10px; border: 0; border-radius: 8px; color: #a897a6; background: transparent; }
.login-password-toggle svg { width: 21px; height: 21px; }
.login-password-toggle:hover { color: #f0d5e1; background: #ffffff06; }
.login-password-toggle:focus-visible { outline-offset: -2px; }
.login-password-toggle .eye-closed { display: none; }
.login-password-toggle[aria-pressed=true] .eye-open { display: none; }
.login-password-toggle[aria-pressed=true] .eye-closed { display: block; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 55px; margin-top: 5px; padding: 14px 19px; border: 1px solid #ff9eb369; border-radius: 12px; background: linear-gradient(115deg, #ee4b6d, #d72a52 65%, #c21a43); box-shadow: inset 0 1px 1px #ffc2d14f, 0 7px 30px #df325426; color: #fff7fa; font-size: 15px; font-weight: 650; transition: filter .18s, box-shadow .18s, transform .18s; }
.login-submit:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 1px 1px #ffc2d14f, 0 7px 35px #df32543a; }
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit-arrow { width: 20px; height: 20px; }
.login-submit:disabled { opacity: .8; }
.login-spinner { display: none; width: 18px; height: 18px; border: 2px solid #ffffff40; border-top-color: white; border-radius: 50%; animation: login-spin .8s linear infinite; }
#login-form[aria-busy=true] .login-submit-arrow { display: none; }
#login-form[aria-busy=true] .login-spinner { display: block; }
.login-error { margin: 0; padding: 12px 14px; border: 1px solid #ed688b44; border-radius: 10px; background: #d22d5012; color: #ffb1c4; font-size: 13px; line-height: 1.55; }
.login-error + .login-submit { margin-top: 0; }
noscript .login-error { margin-top: 20px; }
.login-demo { border-top: 1px solid #ffffff10; margin-top: 29px; padding-top: 24px; }
.login-demo-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.demo-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 7px 13px; min-height: 77px; border: 1px solid #ffffff17; border-radius: 11px; background: linear-gradient(145deg, #ffffff06, #ffffff01); box-shadow: inset 0 1px 0 #ffffff05; color: #bdaeba; font-size: 14px; transition: border-color .18s, color .18s, background .18s; }
.demo-btn svg { width: 20px; height: 20px; color: #bd91a4; }
.demo-btn:hover, .demo-btn[aria-pressed=true] { color: #ffe9f1; border-color: #ee8aa64d; background: linear-gradient(130deg, #f75b8120, #f56f900a); }
.demo-btn[aria-pressed=true] svg { color: #ff9ab7; }
.demo-btn:disabled { opacity: .55; }
@keyframes login-spin { to { transform: rotate(360deg); } }

@media (min-width: 1600px) { .login-page { padding-left: 85px; padding-right: 85px; } }
@media (max-width: 1120px) { .login-layout { gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } .login-intro-copy { padding-left: 0; } .login-art { transform: scale(.87); transform-origin: 35% 50%; left: -43px; } .login-intro h2 { font-size: 43px; } .login-card { padding: 33px 30px 28px; } }
@media (min-width: 881px) and (max-height: 800px) { .login-layout { padding: 26px 0; } .login-intro { min-height: 500px; } .login-art { top: calc(50% - 285px); } .login-intro-copy { margin-top: 300px; } }
@media (max-width: 880px) { .login-page { padding: 26px 28px 22px; } .login-layout { grid-template-columns: minmax(0, 444px); justify-content: center; padding: 52px 0; } .login-intro { display: none; } .login-card { padding: 35px; } .login-ambient { background: radial-gradient(ellipse at 50% 0%, #a3213b2b, transparent 54%), radial-gradient(ellipse at 0% 90%, #4f1b3526, transparent 45%), #09090c; } }
@media (max-width: 480px) { .login-page { padding: 25px 20px 20px; } .login-brand { font-size: 21px; gap: 10px; } .login-brand-mark { width: 33px; height: 33px; border-radius: 10px; } .login-layout { padding: 42px 0; } .login-card { padding: 29px 23px 25px; border-radius: 22px; } .login-card h1 { font-size: 34px; } .login-card-heading { margin-bottom: 27px; } .login-field input { font-size: 16px; } .login-demo-options { gap: 7px; } }
@media (max-width: 360px) { .login-page { padding-left: 14px; padding-right: 14px; } .login-card { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }