:root{--blue:#00b5f2;--ink:#04080d;--muted:#b7c6d2}
*{box-sizing:border-box}
body{
  margin:0;background:#05080c;color:#fff;font-family:Arial,Helvetica,sans-serif;
}
.login-page{
  min-height:100vh;position:relative;overflow:hidden;
  background:url("/static/home-racing.png") center/cover no-repeat;
}
.login-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,6,10,.94),rgba(2,6,10,.77) 48%,rgba(2,6,10,.54)),
    linear-gradient(0deg,rgba(2,6,10,.85),transparent 60%);
}
.login-header{
  position:relative;z-index:1;height:82px;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(24px,7vw,135px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.login-brand{
  display:flex;flex-direction:column;gap:3px;color:#fff;text-decoration:none;
  font-size:10px;font-weight:900;letter-spacing:1.5px;
}
.login-brand span{color:var(--blue);font-size:18px;letter-spacing:1px}
.home-link{
  padding:11px 15px;border:1px solid rgba(0,181,242,.58);border-radius:6px;
  color:var(--blue);font-size:11px;font-weight:900;text-decoration:none;
}
.login-layout{
  position:relative;z-index:1;min-height:calc(100vh - 82px);
  max-width:1280px;margin:auto;padding:80px clamp(24px,7vw,135px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:center;
}
.eyebrow,.card-label{
  color:var(--blue);font-size:11px;font-weight:900;letter-spacing:2px;
}
.login-intro h1{
  margin:16px 0;font-size:clamp(45px,5.5vw,78px);line-height:.98;letter-spacing:-3px;
}
.login-intro h1 span{color:var(--blue)}
.login-intro p{
  max-width:520px;color:#d1dce5;font-size:17px;line-height:1.7;
}
.login-features{
  display:flex;gap:15px;flex-wrap:wrap;margin-top:32px;color:#c6d2db;
  font-size:12px;font-weight:800;
}
.login-features span:before{content:"+";color:var(--blue);margin-right:7px}
.login-card{
  width:min(100%,465px);justify-self:end;padding:38px;
  background:linear-gradient(150deg,rgba(16,29,42,.96),rgba(6,13,20,.96));
  border:1px solid rgba(0,181,242,.38);border-radius:14px;
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}
.login-card h2{margin:13px 0 8px;font-size:38px;letter-spacing:-1px}
.login-card > p{margin:0 0 27px;color:var(--muted);font-size:14px}
.login-card label{
  display:block;margin:17px 0 8px;color:#cde4f2;
  font-size:11px;font-weight:900;letter-spacing:1px;
}
.login-card input{
  width:100%;height:47px;padding:0 13px;border:1px solid #28506a;
  border-radius:7px;background:#071019;color:#fff;font-size:15px;
}
.login-card input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,181,242,.13)}
.login-card button{
  width:100%;height:50px;margin-top:24px;border:0;border-radius:7px;
  background:linear-gradient(135deg,#008ee2,#10bef5);color:#fff;
  font-size:12px;font-weight:900;letter-spacing:1px;cursor:pointer;
}
.login-card button b{margin-left:10px}
.login-card small{display:block;margin-top:19px;color:#91a9ba;line-height:1.5}
.login-error{
  padding:12px 13px;margin-bottom:16px;border:1px solid #8d313d;
  border-radius:7px;background:rgba(116,24,36,.36);color:#ffd3d8;font-size:13px;
}
@media(max-width:800px){
 .login-header{padding:0 22px}
 .login-layout{grid-template-columns:1fr;gap:35px;padding:60px 22px}
 .login-card{justify-self:stretch;width:100%}
 .login-intro h1{letter-spacing:-2px}
}