:root{
  --violet:#4d00d3;
  --violet-2:#6c24ff;
  --violet-3:#a974ff;
  --ink:#101426;
  --muted:#6f7690;
  --line:#e7e8f0;
  --card:rgba(255,255,255,.975);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.auth-page{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 76% 9%,rgba(202,153,255,.72),transparent 25%),
    radial-gradient(circle at 24% 70%,rgba(130,72,255,.74),transparent 29%),
    radial-gradient(circle at 49% 108%,rgba(186,121,255,.55),transparent 23%),
    linear-gradient(135deg,#1900b5 0%,#4b00f1 42%,#7a28ff 72%,#a05cff 100%);
}
.auth-stage{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:42px 24px;
  isolation:isolate;
  overflow:hidden;
}
.auth-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-5;
  background:
    linear-gradient(110deg,rgba(8,0,78,.18),transparent 28%),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.10),transparent 34%);
  pointer-events:none;
}
.auth-shape{
  position:absolute;
  z-index:-3;
  width:370px;
  aspect-ratio:1;
  background:linear-gradient(145deg,#ead8ff 0%,#c090ff 18%,#8046ff 45%,#5a08ea 72%,#3410b7 100%);
  -webkit-mask:url("/optrixis-mail-icon.svg") center/contain no-repeat;
  mask:url("/optrixis-mail-icon.svg") center/contain no-repeat;
  filter:
    drop-shadow(22px 30px 18px rgba(32,0,98,.36))
    drop-shadow(-7px -8px 10px rgba(255,255,255,.24));
  opacity:.92;
}
.auth-shape::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,0) 36%,rgba(41,0,151,.38) 72%);
  -webkit-mask:url("/optrixis-mail-icon.svg") center/contain no-repeat;
  mask:url("/optrixis-mail-icon.svg") center/contain no-repeat;
  transform:translate(-7px,-8px);
  filter:blur(4px);
}
.shape-a{left:-138px;bottom:-125px;width:480px;transform:rotate(-17deg)}
.shape-b{right:-55px;top:-45px;width:340px;transform:rotate(25deg);opacity:.78}
.shape-c{left:10%;top:31%;width:160px;transform:rotate(14deg);filter:blur(4px) drop-shadow(14px 18px 18px rgba(38,0,117,.30));opacity:.38}
.auth-card{
  width:min(500px,100%);
  position:relative;
  padding:42px 44px 34px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:24px;
  background:var(--card);
  box-shadow:
    0 36px 90px rgba(31,0,99,.30),
    0 8px 24px rgba(20,15,53,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
}
.auth-logo{
  display:block;
  width:min(268px,78%);
  height:auto;
  margin:0 auto 30px;
}
.auth-kicker{
  margin:0 0 10px;
  text-align:center;
  color:#9a78ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.30em;
  text-transform:uppercase;
}
.auth-card h1{
  margin:0;
  text-align:center;
  font-family:"Sora","Manrope",sans-serif;
  font-size:31px;
  line-height:1.15;
  letter-spacing:-.045em;
}
.auth-lead{
  margin:11px auto 28px;
  max-width:390px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.auth-form{display:grid;gap:14px}
.auth-field{display:grid;gap:7px}
.auth-field>span{
  font-size:10px;
  font-weight:800;
  color:#41485f;
}
.auth-input{
  position:relative;
  display:flex;
  align-items:center;
  border:1px solid #dfe2ec;
  border-radius:12px;
  background:#fff;
  transition:.2s ease;
  box-shadow:0 2px 8px rgba(28,28,49,.02);
}
.auth-input:focus-within{
  border-color:#916dff;
  box-shadow:0 0 0 4px rgba(89,29,238,.09);
}
.auth-input svg{
  width:18px;
  height:18px;
  margin-left:15px;
  flex:0 0 auto;
  stroke:#706f9a;
  stroke-width:1.8;
  fill:none;
}
.auth-input input{
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  padding:14px 13px;
  color:var(--ink);
  font:600 13px "Manrope",sans-serif;
}
.auth-input input::placeholder{color:#9aa0b2;font-weight:500}
.password-toggle{
  margin:0 8px 0 0;
  padding:8px;
  border:0;
  background:transparent;
  color:#756ba2;
  cursor:pointer;
}
.password-toggle svg{margin:0;width:18px;height:18px}
.auth-submit{
  width:100%;
  min-height:48px;
  margin-top:5px;
  border:0;
  border-radius:11px;
  padding:13px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(100deg,#4a00db 0%,#6227ff 52%,#782fff 100%);
  color:#fff;
  font:800 12px "Manrope",sans-serif;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(78,0,211,.22);
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(78,0,211,.29)}
.auth-submit:disabled{opacity:.58;cursor:wait;transform:none}
.auth-meta{
  margin-top:22px;
  padding-top:19px;
  border-top:1px solid #ececf3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#858ca1;
  font-size:9.5px;
}
.auth-meta svg{width:16px;height:16px;stroke:#6a28ff;fill:none;stroke-width:1.8}
.auth-status{min-height:0}
.auth-status:not(:empty){
  margin-top:2px;
  padding:10px 12px;
  border:1px solid #f0d5d0;
  border-radius:9px;
  background:#fff3f1;
  color:#9b433a;
  font-size:10px;
}
.auth-small-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:1px;
  color:#7f879a;
  font-size:10px;
}
.auth-small-row a{color:#5b18e8;text-decoration:none;font-weight:700}
.auth-small-row a:hover{text-decoration:underline}
.auth-footer{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.68);
  font-size:9px;
  white-space:nowrap;
}
@media(max-width:680px){
  .auth-stage{padding:22px 16px 42px}
  .auth-card{padding:32px 22px 27px;border-radius:20px}
  .auth-logo{width:min(230px,76%);margin-bottom:25px}
  .auth-card h1{font-size:27px}
  .auth-lead{font-size:12px;margin-bottom:23px}
  .shape-a{width:340px;left:-170px;bottom:-100px}
  .shape-b{width:250px;right:-105px;top:-58px}
  .shape-c{display:none}
}
@media(prefers-reduced-motion:no-preference){
  .shape-a{animation:floatA 8s ease-in-out infinite}
  .shape-b{animation:floatB 10s ease-in-out infinite}
  .shape-c{animation:floatC 9s ease-in-out infinite}
}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:-8px 12px}}
@keyframes floatC{0%,100%{translate:0 0}50%{translate:9px -9px}}