:root{
  --bg:#05070b;
  --panel:rgba(10,13,20,.72);
  --panel-2:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --text:#f5f7fb;
  --muted:#8992a8;
  --mint:#69f7d2;
  --purple:#756bff;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
.auth-page{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:
    radial-gradient(circle at 15% 20%,rgba(105,247,210,.08),transparent 28%),
    radial-gradient(circle at 85% 75%,rgba(117,107,255,.10),transparent 30%),
    url("images/login.jpg") center/cover no-repeat fixed;
  background:url("images/login.jpg");
  background-size: cover;
  background-attachment: fixed;
}
.auth-page:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(117,107,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,107,255,.035) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.auth-page:after{
  content:"";position:absolute;inset:0;
  background: radial-gradient(circle at center, transparent 0, rgba(5, 7, 11, .28) 45%, #05070b87 100% 100%);
  pointer-events:none;
}
.auth-shell{
  width:min(100%,460px);
  position:relative;
  z-index:2;
}
.auth-brand{
  display:flex;justify-content:center;margin-bottom:28px;
}
.auth-brand img{width:min(260px,75vw);height:auto}
.auth-card{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius:24px;
  padding:38px;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 100px rgba(0,0,0,.48);
}
.auth-eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--muted);font-size:10px;font-weight:800;
  letter-spacing:2.5px;margin-bottom:16px;
}
.auth-eyebrow span{width:26px;height:1px;background:var(--mint);box-shadow:0 0 12px var(--mint)}
.auth-card h1{
  font-family:"Space Grotesk",Inter,sans-serif;
  letter-spacing:-2px;font-size:42px;line-height:1;margin:0 0 12px;
}
.auth-card .lead{color:#8d96a9;font-size:14px;line-height:1.65;margin-bottom:28px}
.auth-form label{
  color:#b8c0cf;font-size:11px;font-weight:700;
  letter-spacing:.8px;margin:0 0 8px;
}
.auth-form .form-control{
  min-height:50px;border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;padding:0 15px;
  box-shadow:none;
}
.auth-form .form-control::placeholder{color:#586274}
.auth-form .form-control:focus{
  border-color:rgba(105,247,210,.55);
  box-shadow:0 0 0 3px rgba(105,247,210,.08);
  background:rgba(255,255,255,.05);
  color:#fff;
}
.auth-form .form-check-input{background-color:transparent;border-color:#4b5566}
.auth-form .form-check-input:checked{background-color:var(--mint);border-color:var(--mint)}
.auth-form .form-check-label{color:#778195;font-size:11px}
.auth-link{color:var(--mint);text-decoration:none}
.auth-link:hover{color:#fff}
.auth-btn{
  width:100%;min-height:50px;border:0;border-radius:999px;
  background:linear-gradient(110deg,var(--mint),var(--purple));
  color:#05070b;font-weight:800;
  box-shadow:0 0 35px rgba(105,247,210,.16);
  transition:.25s;
}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 0 45px rgba(117,107,255,.30)}
.auth-divider{display:flex;align-items:center;gap:12px;color:#505a6b;font-size:9px;letter-spacing:1.5px;margin:24px 0}
.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.08)}
.auth-foot{text-align:center;color:#687285;font-size:12px;margin:24px 0 0}
.back-home{
  display:block;text-align:center;margin-top:20px;
  color:#687285;font-size:11px;text-decoration:none;letter-spacing:.5px
}
.back-home:hover{color:#fff}
.password-wrap{position:relative}
.password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#697487;font-size:11px;cursor:pointer
}
.form-note{color:#596476;font-size:10px;line-height:1.6;margin-top:8px}
.invalid-feedback{font-size:10px}
@media(max-width:576px){
  .auth-page{padding:24px 14px}
  .auth-card{padding:28px 20px;border-radius:20px}
  .auth-card h1{font-size:35px}
}