:root{
  --accent:#e5303f; --accent2:#3a63ff; --text:#e9eeff; --muted:#93a0c2;
  --bg-url:url("/static/img/bg.jpg");
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:15px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);
  background:#050814;
  background-image:
    radial-gradient(900px 520px at 50% 48%,rgba(5,8,20,.0),rgba(5,8,20,.55) 70%),
    linear-gradient(180deg,rgba(5,8,20,.35),rgba(5,8,20,.55)),
    var(--bg-url);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.stage{min-height:100%;display:grid;place-items:center;padding:28px 16px}

.card{
  width:min(440px,100%);padding:34px 36px 26px;border-radius:24px;position:relative;
  background:linear-gradient(180deg,rgba(14,22,48,.72),rgba(8,13,30,.78));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(130,160,255,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 1px 0 rgba(255,255,255,.08) inset;
  animation:rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.card::before{ /* brand-coloured hairline across the top edge */
  content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);opacity:.9;
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.card.shake{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

.logo{display:block;width:min(270px,78%);height:auto;margin:2px auto 18px;filter:drop-shadow(0 6px 24px rgba(58,99,255,.25))}
.eyebrow{text-align:center;font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
h1{margin:6px 0 4px;text-align:center;font-size:26px;font-weight:650;letter-spacing:.2px}
.sub{margin:0 0 22px;text-align:center;color:var(--muted);font-size:13.5px}

.field{display:block;margin-bottom:14px}
.field>span{display:block;margin:0 0 6px 2px;font-size:12px;letter-spacing:.6px;color:#aab6d6}
.input{
  display:flex;align-items:center;gap:10px;padding:0 12px;height:48px;border-radius:13px;
  background:rgba(4,8,22,.62);border:1px solid rgba(130,160,255,.2);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.input:focus-within{border-color:var(--accent2);box-shadow:0 0 0 4px rgba(58,99,255,.2);background:rgba(4,8,22,.8)}
.input svg{width:19px;height:19px;flex:none;fill:none;stroke:#7f8db3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.input:focus-within>svg{stroke:#b9c6ff}
.input input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:15.5px}
.input input:-webkit-autofill{-webkit-text-fill-color:var(--text);transition:background-color 9999s}
.eye{all:unset;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;margin-right:-6px}
.eye:hover{background:rgba(255,255,255,.07)}
.eye:focus-visible{outline:2px solid var(--accent2)}
.eye svg{width:19px;height:19px}
.eye.on svg{stroke:#fff}

.error{margin:2px 0 12px;padding:10px 12px;border-radius:11px;font-size:13.5px;color:#ffd3d6;
  background:rgba(229,48,63,.14);border:1px solid rgba(229,48,63,.4)}

.go{
  width:100%;height:50px;margin-top:6px;border:0;border-radius:13px;cursor:pointer;color:#fff;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:.3px;
  background:linear-gradient(115deg,var(--accent) 0%,#8a3cc8 52%,var(--accent2) 100%);
  box-shadow:0 12px 30px rgba(58,99,255,.28),0 2px 0 rgba(255,255,255,.18) inset;
  transition:transform .12s,filter .15s,box-shadow .15s;
}
.go:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 16px 36px rgba(58,99,255,.38),0 2px 0 rgba(255,255,255,.18) inset}
.go:active{transform:translateY(0)}
.go:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:2px}
.go:disabled{cursor:wait;filter:saturate(.6) brightness(.9);transform:none}
.go.busy span::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{margin:18px 0 0;text-align:center;font-size:12px;color:#7b88ac}
[hidden]{display:none!important}

@media (max-width:480px){.card{padding:28px 22px 22px;border-radius:20px}h1{font-size:23px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}