@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --page:#0b0910; --page-rgb:11,9,16; --surface:#15121d; --surface-hover:#1d1827;
  --field:#1a1721; --text:#f6f2fb; --muted:#9c94a8; --quiet:#6e6878;
  --line:rgba(255,255,255,.1); --primary:#8b5cf6; --primary-strong:#7447ef;
  --pink:#d852a9; --cyan:#57d6cf; --danger:#ff6b9e;
  --shadow:0 24px 80px rgba(0,0,0,.36);
}
html[data-theme="light"] {
  color-scheme:light;
  --page:#f6f2fa; --page-rgb:246,242,250; --surface:#fff; --surface-hover:#f7f1fc;
  --field:#ece6f2; --text:#21172c; --muted:#6f6579; --quiet:#968ca0;
  --line:rgba(47,28,65,.11); --primary:#7846e8; --primary-strong:#6632dc;
  --pink:#c83e96; --cyan:#198f8c; --danger:#bf2460;
  --shadow:0 24px 80px rgba(75,51,96,.13);
}
*{box-sizing:border-box}
html,body{min-width:320px;min-height:100%;margin:0}
body{
  min-height:100vh;min-height:100svh;overflow-x:hidden;background:var(--page);color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition:background-color .24s ease,color .24s ease
}
button,input{font:inherit} button,a,input,label{-webkit-tap-highlight-color:transparent} a{color:inherit}
.signin-page{
  position:relative;isolation:isolate;display:grid;min-height:100vh;min-height:100svh;place-items:center;
  padding:72px 28px 76px;overflow:hidden;
  background:linear-gradient(rgba(var(--page-rgb),.9),rgba(var(--page-rgb),.96)),
  repeating-linear-gradient(90deg,transparent 0 79px,var(--line) 80px),
  repeating-linear-gradient(0deg,transparent 0 79px,var(--line) 80px)
}
.signin-page:before{
  position:absolute;z-index:-1;inset:0;content:"";opacity:.2;
  background-image:radial-gradient(rgba(255,255,255,.6) .55px,transparent .55px);
  background-size:5px 5px;pointer-events:none
}
.ambient{position:absolute;z-index:-2;width:460px;height:460px;border-radius:50%;filter:blur(120px);opacity:.14;pointer-events:none}
.ambient--violet{top:-200px;left:-120px;background:var(--primary)}
.ambient--pink{right:-190px;bottom:-230px;background:var(--pink)}
.theme-toggle{
  position:fixed;z-index:5;top:24px;right:24px;display:grid;width:44px;height:44px;padding:0;
  place-items:center;border:0;border-radius:14px;background:var(--surface);color:var(--muted);
  box-shadow:var(--shadow);cursor:pointer;transition:transform .18s ease,color .18s ease
}
.theme-toggle:hover{color:var(--primary);transform:translateY(-2px)}
.theme-toggle__icon,.theme-toggle svg{width:20px;height:20px}
.theme-toggle svg{stroke:currentColor;stroke-linecap:round;stroke-width:1.7}
.signin-shell{width:min(100%,790px);animation:reveal .65s cubic-bezier(.2,.8,.2,1) both}
.brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:28px}
.brand__mark{
  position:relative;display:block;width:31px;height:31px;border-radius:9px;
  background:linear-gradient(145deg,#a978ff,var(--primary) 55%,var(--pink));
  box-shadow:0 8px 24px rgba(139,92,246,.3);transform:rotate(-4deg)
}
.brand__dot,.brand__stem{position:absolute;display:block;background:#fff}
.brand__dot{top:6px;left:13px;width:5px;height:5px;border-radius:50%}
.brand__stem{top:13px;left:13px;width:5px;height:12px;border-radius:3px}
.brand__name{font-size:16px;font-weight:800;letter-spacing:-.02em}
.heading{margin:0 auto 32px;text-align:center}
.heading__eyebrow{margin:0 auto 9px!important;color:var(--primary)!important;text-align:center;font-size:11px!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.heading h1{margin:0;font-size:clamp(34px,5vw,50px);line-height:1.08;letter-spacing:-.052em}
.heading p{max-width:540px;margin:15px auto 0;color:var(--muted);font-size:14px;line-height:1.65}
.fields-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{min-width:0}
.field__label{display:block;margin:0 0 9px 3px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.field__control{
  position:relative;display:flex;height:58px;align-items:center;gap:12px;padding:0 18px;
  border-radius:10px;background:var(--field);box-shadow:inset 0 0 0 1px transparent;
  transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.field__control:focus-within{
  background:var(--surface-hover);box-shadow:inset 0 0 0 1px rgba(139,92,246,.24),0 10px 28px rgba(76,45,139,.12);
  transform:translateY(-1px)
}
.field__control>svg{
  flex:0 0 auto;width:19px;height:19px;color:var(--quiet);stroke:currentColor;stroke-linecap:round;
  stroke-linejoin:round;stroke-width:1.65;transition:color .18s ease
}
.field__control:focus-within>svg{color:var(--primary)}
.field input{width:100%;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;color:var(--text);font-size:14px;font-weight:600}
.field input::placeholder{color:var(--quiet);font-weight:500}
.password-toggle{
  display:grid;flex:0 0 auto;width:30px;height:30px;padding:0;place-items:center;border:0;border-radius:8px;
  background:transparent;color:var(--quiet);cursor:pointer
}
.password-toggle:hover{background:rgba(139,92,246,.1);color:var(--primary)}
.password-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}
.field__error{display:block;min-height:20px;padding:6px 3px 0;color:var(--danger);font-size:11px}
.field.is-invalid .field__control{box-shadow:inset 0 0 0 1px rgba(255,73,134,.42)}
.form-options{display:flex;align-items:center;justify-content:space-between;margin:5px 3px 28px;color:var(--muted);font-size:12px}
.form-options a,.support-note a{color:var(--text);font-weight:700;text-decoration:none}
.form-options a:hover,.support-note a:hover{color:var(--primary)}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.remember input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.remember__box{
  display:grid;width:17px;height:17px;place-items:center;border-radius:5px;background:var(--field);
  box-shadow:inset 0 0 0 1px var(--line);transition:background-color .16s ease
}
.remember__box svg{width:13px;opacity:0;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transform:scale(.7);transition:.16s ease}
.remember input:checked+.remember__box{background:var(--primary);box-shadow:none}
.remember input:checked+.remember__box svg{opacity:1;transform:scale(1)}
.remember input:focus-visible+.remember__box{box-shadow:0 0 0 3px rgba(139,92,246,.22)}
.divider{height:1px;margin-bottom:35px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.submit-frame{position:relative;padding:14px}
.corner{position:absolute;width:18px;height:18px;opacity:.78;transition:width .25s ease,height .25s ease,opacity .25s ease}
.corner--tl{top:0;left:0;border-top:2px solid var(--primary);border-left:2px solid var(--primary);border-radius:8px 0 0}
.corner--tr{top:0;right:0;border-top:2px solid var(--primary);border-right:2px solid var(--primary);border-radius:0 8px 0 0}
.corner--bl{bottom:0;left:0;border-bottom:2px solid var(--pink);border-left:2px solid var(--pink);border-radius:0 0 0 8px}
.corner--br{right:0;bottom:0;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink);border-radius:0 0 8px}
.submit-frame:hover .corner,.submit-frame:focus-within .corner{width:27px;height:27px;opacity:1}
.submit-button{
  position:relative;display:flex;width:100%;height:58px;align-items:center;justify-content:center;gap:12px;
  overflow:hidden;border:0;border-radius:10px;background:linear-gradient(105deg,var(--primary-strong),var(--primary) 48%,var(--pink));
  color:#fff;box-shadow:0 14px 36px rgba(111,61,215,.24);cursor:pointer;font-size:14px;font-weight:800;
  transition:box-shadow .2s ease,transform .2s ease,filter .2s ease
}
.submit-button:before{
  position:absolute;top:-60%;left:-30%;width:24%;height:220%;content:"";background:rgba(255,255,255,.25);
  filter:blur(4px);transform:rotate(22deg);transition:left .5s ease
}
.submit-button:hover{box-shadow:0 18px 42px rgba(111,61,215,.34);filter:saturate(1.08);transform:translateY(-2px)}
.submit-button:hover:before{left:112%}
.submit-button:active{transform:translateY(0)}
.submit-button svg{width:19px;height:19px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;transition:transform .18s ease}
.submit-button:hover svg{transform:translateX(4px)}
.submit-button.is-loading{cursor:wait}.submit-button.is-loading svg{animation:loading .85s linear infinite}
.submit-button:focus-visible,.theme-toggle:focus-visible,.password-toggle:focus-visible,a:focus-visible{outline:3px solid rgba(139,92,246,.36);outline-offset:3px}
.form-status{min-height:20px;margin:10px 0 0;color:var(--cyan);font-size:12px;font-weight:700;text-align:center}
.support-note{margin:24px 0 0;color:var(--muted);font-size:12px;text-align:center}
.page-note{position:absolute;bottom:24px;left:50%;width:calc(100% - 48px);margin:0;color:var(--quiet);font-size:10px;font-weight:600;letter-spacing:.04em;text-align:center;transform:translateX(-50%)}
.page-note span{padding:0 6px;color:var(--primary)}
@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes loading{to{transform:rotate(360deg)}}
@media(max-width:700px){
  .signin-page{align-items:start;padding:86px 20px 74px}.signin-shell{width:min(100%,440px)}
  .fields-row{grid-template-columns:1fr;gap:2px}.heading{margin-bottom:26px}.heading h1{font-size:36px}.form-options{margin-top:8px}
}
@media(max-width:420px){.theme-toggle{top:16px;right:16px}.form-options{align-items:flex-start;gap:16px}.submit-frame{padding:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}