/* Futuristic neon + glassmorphism login with unique animations */
:root {
  /* Gym theme palette */
  --bg: #0b0d10;            /* charcoal */
  --fg: #e8edf1;            /* light steel */
  --muted: #9aa5b1;         /* slate */
  --accent: #24c47e;        /* strength green */
  --accent2: #ff9f1c;       /* warm orange */
  --card: rgba(15, 18, 22, 0.78);
  --ring: rgba(36, 196, 126, 0.22);
  --error: #ff6b6b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1000px 500px at 10% -10%, rgba(36,196,126,.08), transparent 60%),
              radial-gradient(800px 400px at 100% 0%, rgba(255,159,28,.06), transparent 60%),
              var(--bg);
  color: var(--fg);
  font: 400 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

/* Fullscreen canvas background */
#bg, .noise, .scanline { display: none !important; }

/* CRT scanline + noise overlay for texture */
.scanline { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.scanline::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 4px);
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity:.08; }
.noise::before {
  content:""; position:absolute; inset:-50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.8"/></svg>');
  animation: grain 8s steps(10) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 10%{transform:translate(-5%, -10%)} 20%{transform:translate(-15%, 5%)} 30%{transform:translate(7%, -25%)} 40%{transform:translate(-5%, 25%)} 50%{transform:translate(-15%, 10%)} 60%{transform:translate(15%, 0%)} 70%{transform:translate(0%, 15%)} 80%{transform:translate(3%, 35%)} 90%{transform:translate(-10%, 10%)} 100%{transform:translate(0,0)} }

.wrap { position: relative; z-index: 2; height: 100%; display: grid; place-items: center; padding: 24px; }

.card {
  --pad: 28px;
  width: min(92vw, 420px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)),
    var(--card);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  padding: calc(var(--pad) + 2px) var(--pad);
}

.brand { text-align: center; margin-bottom: 14px; }
.brand h1 { margin: 0; font-family: Oswald, Inter, sans-serif; letter-spacing: .5px; }
.brand h1 span { font-weight: 700; font-size: 28px; background: linear-gradient(90deg,var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand h1 em { display:block; font-style: normal; font-weight: 500; color: var(--muted); font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; opacity: .9; margin-top: 6px; }
.brand .subtitle { margin: 10px 0 0; color: var(--muted); font-size: 12px; opacity:.9 }
.logo-glow { display:none }

.form { display: grid; gap: 16px; margin-top: 8px; }
.field { position: relative; }
.field input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--fg);
  padding: 18px 44px 18px 16px;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field label {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: all .18s ease;
  padding: 0 6px;
  background: linear-gradient(180deg, rgba(10,14,26,0.4), rgba(10,14,26,0.7));
  border-radius: 6px;
}
.field input:focus { border-color: var(--accent); background: rgba(36,196,126,.06); box-shadow: 0 0 0 4px var(--ring); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:valid + label {
  transform: translateY(-210%) scale(.92);
  color: var(--fg);
}
.field .focus-ring { position:absolute; inset:-2px; border-radius:14px; pointer-events:none; box-shadow: 0 0 40px -10px var(--neon1); opacity:0; transition: opacity .2s ease; }
.field input:focus ~ .focus-ring { opacity:.6 }

.reveal { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color: var(--fg); cursor: pointer; opacity:.8; }
.reveal.on { box-shadow: inset 0 0 12px rgba(255,255,255,.1), 0 0 16px -8px var(--accent); border-color: rgba(36,196,126,.6); }
.reveal::before { content:"👁️"; display: grid; place-items: center; font-size: 14px; }
.reveal.on::before { content:"🙈"; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; padding: 14px 16px; border-radius: 12px; font-weight: 700; cursor: pointer; }
.btn.neon { color: #0b0d10; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
.btn.neon:hover { filter: brightness(1.05) saturate(1.03); }
.btn.neon:active { transform: translateY(1px); }

.alert { background: rgba(255,107,107,.10); border: 1px solid rgba(255,107,107,.35); color: #ffd7d7; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px; text-align: center; }

.meta { margin-top: 18px; text-align:center; color: var(--muted); }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .noise::before, .glitch::before, .glitch::after { animation: none !important; }
}