/* -------- Base + background layers -------- */

:root{
  --bg: #fff;
  --fg: #e6edf3;
  --muted: #8b949e;
  --glass: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.16);
  --neon1: #00d1ff;   /* cyan */
  --neon2: #7b61ff;   /* violet */
  --neon3: #16ff8b;   /* mint */
}

* { box-sizing: border-box; }
html, body { height: 100%; }



body.cyber-bg {
  background: radial-gradient(1000px 300px at 50% -100%, #1b2430 0%, var(--bg) 5%, #05070a 10%);
  color: var(--fg);
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  overflow-x: hidden;
  overflow-y: auto;
}

/* animated grid lines */
.bg-grid, .bg-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.bg-grid {
  background:
    repeating-linear-gradient(transparent, transparent 29px, rgba(0, 209, 255, 0.05) 30px),
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(123, 97, 255, 0.05) 30px);
  mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.55), rgba(0,0,0,1) 60%);
  animation: drift 18s linear infinite;
}
@keyframes drift {
  0% { transform: translateY(0) }
  100% { transform: translateY(30px) }
}
.bg-noise {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKUlEQVQYV2N8c+bMf0ZGBiYGhoYxQKZgYGBwJgYFGCwQw1EwGQ0gFQ0gYADmG7b1sI9N1wAAAABJRU5ErkJggg==");
  opacity: .08;
  mix-blend-mode: overlay;
}


/* Force white text inside the cyber inputs */
form .form-control.cyber-input,
form .form-control.cyber-input:focus,
form .form-control.cyber-input:active {
  color: #fff !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* Placeholder should also be lighter */
form .form-control.cyber-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Handle Chrome autofill yellow background */
form .form-control.cyber-input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.08) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}



/* -------- Hero banner -------- */

.hero {
  margin-top: clamp(20px, 6vh, 60px);
  display: flex;
  justify-content: center;
  z-index: 1;
}

.hero-img{ 
  width: min(1000px, 92vw); 
  height: auto; 
  max-width: 500px;
  object-fit: cover; 
  border-radius: 18px; 
  border: 1px solid var(--stroke); 
  box-shadow: 0 0 0 1px rgba(123,97,255,.25) inset, 0 10px 40px rgba(0,0,0,.45), 0 0 40px rgba(0, 209, 255, .25); 
  animation: glowpulse 6s ease-in-out infinite; 
}




@keyframes glowpulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(123,97,255,.25) inset, 0 10px 40px rgba(0,0,0,.45), 0 0 30px rgba(0,209,255,.15);}
  50% { box-shadow: 0 0 0 1px rgba(22,255,139,.35) inset, 0 10px 40px rgba(0,0,0,.45), 0 0 60px rgba(22,255,139,.25);}
}

/* -------- Login card -------- */

.login-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: clamp(16px, 4vh, 40px) 0 8vh;
  padding-bottom: 40px;
}

.glass-card{
  width: min(360px, 92vw);
  padding: 28px 28px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid var(--stroke);
  border-radius: 16px;
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.neon-border{
  position: relative;
}
.neon-border::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 18px;
  padding:2px;
  background: linear-gradient(135deg, var(--neon1), var(--neon2), var(--neon3));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box, 
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.6;
  filter: drop-shadow(0 0 14px rgba(0, 209, 255, .25));
  pointer-events: none;
  z-index: -1;
}

/* Heading with subtle flicker */
.cyber-heading{
  font-family: "Orbitron", sans-serif;
  text-align:center;
  letter-spacing: .3rem;
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgba(0,209,255,.4), 0 0 20px rgba(123,97,255,.2);
  animation: flicker 4s linear infinite;
}
@keyframes flicker{
  0%,97%,100% { opacity: 1 }
  98% { opacity: .62 }
  99% { opacity: .86 }
}

/* Inputs */
.cyber-input{
  background: var(--glass);
  color: #fff;
  border: 1px solid var(--stroke);
  outline: none;
}
.cyber-input::placeholder{
  color: rgba(255,255, 255, 0.6) !important;
}
.cyber-input:focus{
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(0, 209, 255, .35), 0 0 22px rgba(0, 209, 255, .2);
  #background: rgba(255,255,255,0.10);
}

/* Button */
.neon-btn{
  --g: linear-gradient(90deg, var(--neon1), var(--neon2), var(--neon3));
  border: none;
  color: #07131a;
  font-weight: 700;
  letter-spacing: .06rem;
  background: var(--g);
  box-shadow: 0 8px 24px rgba(0,209,255,.25), 0 0 1
}

/* >>> FORCE WHITE TEXT IN INPUTS (ALL STATES + AUTOFILL) <<< */
.glass-card input.form-control,
.glass-card input.form-control:focus,
.glass-card input.form-control:active,
.glass-card input.form-control:-webkit-autofill {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* Chrome/Safari */
  caret-color: #fff !important;
  background-color: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* placeholder too */
.glass-card input.form-control::placeholder {
  color: rgba(255,255,255,0.6) !important;
  opacity: 1 !important;
}

/* keep the glow border from blocking clicks (safety) */
.neon-border::before {
  z-index: -1;
  pointer-events: none;
}


/* --- Fix stacking so the glow never sits above the form (FF safe) --- */
.glass-card { position: relative; isolation: isolate; } /* new stacking context */
.neon-border::before {
  position: absolute;
  inset: -2px;
  z-index: 0;              /* under the content */
  pointer-events: none;    /* never intercept clicks */
}
.glass-card * { position: relative; z-index: 1; } /* form stays above */

/* --- Force white text while typing (all states) --- */
.glass-card input.form-control.cyber-input,
.glass-card input.form-control.cyber-input:focus,
.glass-card input.form-control.cyber-input:active {
  color: #fff !important;
  caret-color: #fff !important;
  background-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Placeholders: generic + Firefox */
.glass-card input.form-control.cyber-input::placeholder {
  color: rgba(255,255,255,0.65) !important;
  opacity: 1 !important;
}
.glass-card input.form-control.cyber-input::-moz-placeholder {
  color: rgba(255,255,255,0.65) !important;
  opacity: 1 !important;
}

/* Tame Firefox autofill */
.glass-card input.form-control.cyber-input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.10) inset !important;
}
.glass-card input.form-control.cyber-input:-moz-ui-invalid { box-shadow: none !important; }