:root{
  --overlay-color: rgba(0,0,0,0.30);
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.12);
  --accent: #ff8a3d;
  --card-w: 360px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#fff;
  background:#000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* background slider */
#bg-slider{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  perspective:1000px;
}

.bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform-origin:center;
  transition:opacity 1s ease, transform 1s ease;
  opacity:0;
  will-change:opacity,transform;
  filter: none;
  -webkit-filter: none;
}

/* apply blur via backdrop-filter on an overlay wrapper */
.overlay{
  position:fixed;
  inset:0;
  z-index:1;
  background:var(--overlay-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* center card */
.center-shell{
  position:fixed;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

/* glass card */
.login-card{
  width:var(--card-w);
  max-width:calc(100% - 40px);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* logo */
.brand-logo{
  width:88px;
  height:88px;
  object-fit:contain;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:8px;
  border:1px solid rgba(255,255,255,0.04);
}

/* form */
form{width:100%; display:flex; flex-direction:column; gap:10px}
.field{display:block}
input[type="text"], input[type="password"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:#fff;
  outline:none;
  font-size:15px;
}
input::placeholder{color:rgba(255,255,255,0.5)}
input:focus{box-shadow:0 6px 18px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(255,138,61,0.06); border-color:var(--accent)}

.submit-btn{
  margin-top:6px;
  width:100%;
  padding:12px;
  border-radius:10px;
  border:0;
  background:linear-gradient(90deg, var(--accent), #ff6b2a);
  color:#fff;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,138,61,0.18);
}

/* footer text */
.card-footer{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,0.75);
  text-align:center;
  line-height:1.2;
  padding-top:6px;
}

/* accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.vis{display:none}

/* slide visible state */
.bg-slide.show{opacity:1; transform:scale(1.02)}

/* Responsive tweaks for small screens */
@media (max-height:640px){
  .login-card{padding:14px}
  .brand-logo{width:72px;height:72px}
}