:root{
      /* AEOSCIO brand */
      --slate-900:#0f172a;    /* page bg base */
      --slate-800:#1e293b;
      --text:#e5eefc;

      --blue:#3b82f6;         /* AEOS blue */
      --violet:#8b5cf6;       /* AEOS violet */
      --amber:#f59e0b;        /* AEOS amber accent */

      /* Derived UI tokens */
      --glass: rgba(15,23,42,0.72);
      --glass-border: rgba(255,255,255,0.10);
      --neon: var(--blue);
    }

    * { box-sizing: border-box }
    html, body { height: 100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
      color:var(--text);
      background:
        radial-gradient(900px 600px at 70% -10%, rgba(59,130,246,.18), transparent 60%),
        linear-gradient(160deg, #071021 0%, #0b1530 40%, var(--slate-900) 100%);
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Vanta background canvas */
    #bg {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height:100dvh;
      z-index: -2;
    }

    /* Shift the actual drawing area upward so particles fill the top */
    #bg canvas {
      transform: translateY(-90px);    /* tune: -60 to -120px */
      will-change: transform;
    }


    /* Soft vignette & glow layer */
    .aura{
      position:fixed; inset:0;
      background:
        radial-gradient(650px 420px at 20% 15%, rgba(59,130,246,.14), transparent 60%),
        radial-gradient(800px 600px at 85% 80%, rgba(139,92,246,.12), transparent 70%);
      filter: blur(10px);
      z-index:-1; pointer-events:none;
    }

    .wrap {
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 32px 24px 48px;
    }

    .card{
      width:100%; max-width:420px;
      /* more transparent + stronger blur */
      background: rgba(15,23,42,0.35);
      backdrop-filter: blur(2px);
      border:1px solid rgba(255,255,255,0.14);
      border-radius:20px; padding:28px; margin-top:12px;
      box-shadow:
        0 20px 40px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.05) inset,
        0 0 60px rgba(59,130,246,.18);
      transform: translateY(12px); opacity:1;
    }

    .logo {
      display: grid; place-items: center; margin-bottom: 12px;
      font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase;
    }
    .logo-badge{
      width:99px;
      height:99px;
      border-radius:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,0.12);
      box-shadow:0 0 20px rgba(59,130,246,0.25);
      animation: logoGlow 1.6s ease-in-out infinite;
    }

    .logo-img{
      width:113px;
      height:113px;
      border-radius:12px;
      object-fit:contain;
      filter:drop-shadow(0 0 6px rgba(59,130,246,0.35));
    }

    /* soft pulsing glow around the badge */
    @keyframes logoGlow{
      0%{
        box-shadow:0 0 14px rgba(59,130,246,0.35),
                  0 0 28px rgba(139,92,246,0.20);
        transform:scale(1);
      }
      50%{
        box-shadow:0 0 24px rgba(59,130,246,0.55),
                  0 0 42px rgba(139,92,246,0.38);
        transform:scale(1.04);
      }
      100%{
        box-shadow:0 0 14px rgba(59,130,246,0.35),
                  0 0 28px rgba(139,92,246,0.20);
        transform:scale(1);
      }
    }

    .logo-text { margin-top: 10px; font-size: 12px; color: #b9c6d6; }

    h1{color:#f1f7ff;text-shadow:0 0 12px rgba(59,130,246,.25);}

    label { display:block; font-size: 12px; color:#c8d3e0; margin: 14px 0 6px; }
    .input{
      width:100%; padding:12px 14px; border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(2,8,23,.55); color:var(--text);
    }
    .input:focus{
      border-color: rgba(59,130,246,.7);
      box-shadow: 0 0 0 4px rgba(59,130,246,.20);
    }

    .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
    .link{color:#cfe1ff;}
    .link:hover{text-decoration:underline;}

    .btn{
      width:100%;
      margin-top:18px;
      padding:12px 16px;
      font-weight:700;
      border:0;
      border-radius:12px;
      cursor:pointer;
      color:#fff;

      /* your gradient — keep as is if you already set one */
      background: linear-gradient(135deg, #646cff 0%, #9a4dff 100%);

      /* base shadow + animated breathing halo */
      box-shadow:
        0 6px 16px rgba(100,108,255,0.35),
        0 0 18px rgba(100,108,255,0.20);

      /* slow blink / breathe */
      animation: btnGlow 1.6s ease-in-out infinite;

      transition: filter .18s ease;
    }

    .btn:hover{
      filter: brightness(1.05) saturate(1.06);
    }

    /* slow “breathing” shadow */
    @keyframes btnGlow{
      0%{
        box-shadow:
          0 6px 16px rgba(100,108,255,0.32),
          0 0 16px rgba(100,108,255,0.18);
      }
      50%{
        box-shadow:
          0 8px 22px rgba(100,108,255,0.55),
          0 0 28px rgba(100,108,255,0.42);
      }
      100%{
        box-shadow:
          0 6px 16px rgba(100,108,255,0.32),
          0 0 16px rgba(100,108,255,0.18);
      }
    }

    /* respect users who prefer less motion */
    @media (prefers-reduced-motion: reduce){
      .btn{ animation: none; }
    }

    .cta{margin-top:16px; text-align:center; font-size:13px; color:#c9d5e6;}
    .cta a{color:var(--amber);}

    footer {
      position: fixed; bottom: 10px; left: 0; right: 0;
      text-align: center; font-size: 11px; color: #a8b5c4; opacity:.85;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .card { transition: none !important; }
    }


/* ===== AEOS App Loader ===== */
#app-loader{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(900px 600px at 70% -10%, rgba(59,130,246,.16), transparent 60%),
              linear-gradient(160deg, #071021 0%, #0b1530 40%, var(--slate-900, #0f172a) 100%);
  display:grid; place-items:center;
  transition: opacity .45s ease, visibility .45s ease;
}

#app-loader.hide{
  opacity:0; visibility:hidden;
}

/* centered stack */
.loader-wrap{
  position:relative; width:140px; height:140px;
  display:grid; place-items:center;
}

/* logo + glow pulse (1.6s as requested) */
.loader-logo{
  width:86px; height:86px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 35% 35%, rgba(59,130,246,.28), transparent 65%),
              radial-gradient(circle at 70% 70%, rgba(139,92,246,.22), transparent 70%),
              rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 18px rgba(59,130,246,.25);
  animation: logoPulse 1.6s ease-in-out infinite;
}
.loader-logo img{
  width:64px; height:64px; object-fit:contain; border-radius:14px;
  filter: drop-shadow(0 0 6px rgba(59,130,246,.35));
}

/* orbiting ring */
.loader-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 2px rgba(59,130,246,.18) inset;
  background:
    radial-gradient(closest-side, rgba(139,92,246,.12), transparent 60%),
    conic-gradient(from 0deg, rgba(59,130,246,.0), rgba(59,130,246,.45), rgba(139,92,246,.0));
  mask: radial-gradient(closest-side, transparent 58%, #000 60%);
  animation: ringSpin 2.8s linear infinite;
}

/* animations */
@keyframes logoPulse{
  0%,100%{
    transform: scale(1);
    box-shadow: 0 0 18px rgba(59,130,246,.25), 0 0 36px rgba(139,92,246,.15);
  }
  50%{
    transform: scale(1.04);
    box-shadow: 0 0 26px rgba(59,130,246,.55), 0 0 52px rgba(139,92,246,.35);
  }
}
@keyframes ringSpin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .loader-ring, .loader-logo{ animation: none !important; }
}


/* small helpers to replace inline styles */
.muted { opacity: .7; }
.mt-14 { margin-top: 14px; }

.checkline{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

/* error list */
.alert {
  list-style: none;
  padding: 12px 14px;
  margin: 12px 0 6px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  color: #fecaca;
  font-size: 13px;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.12) inset;
}
.alert li { margin: 4px 0; }




/* --- password toggle --- */
.password-wrap{ position:relative; }

.password-wrap .input{
  width:100%;
  padding-right:44px;           /* room for the eye button */
  position:relative;
  z-index:1;                    /* keep below the button so clicks hit the button */
}

.toggle-password{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  width:34px;                   /* give it real size */
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color:#9fa4b2;                /* eye color */
  border-radius:8px;
  z-index:2;                    /* above the input */
  -webkit-appearance:none;
  appearance:none;
  outline:none;
}

.toggle-password svg{
  width:22px;
  height:22px;
}

.toggle-password:hover{ color:#ffffff; }
.toggle-password:focus-visible{
  box-shadow:0 0 0 3px rgba(59,130,246,.45);
}