/* ============ Glow Login Theme (Sudip) ============ */
:root{
  --bg1:#0f1220;
  --bg2:#0a0d18;
  --card:#14192aee;
  --text:#e7ecff;
  --muted:#aab3d1;
  --primary:#4cc9f0;
  --focus:#5eead4;
  --ring1:#6ee7f9;
  --ring2:#7c3aed;
  --ring3:#22d3ee;
  --ring4:#f59e0b;
  --ring5:#10b981;
}

/* soft animated gradient background */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% 10%, #1b1f34 0%, transparent 60%),
              radial-gradient(900px 700px at 90% 20%, #1a233d 0%, transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow-x:hidden;
}

/* soft glow “auras” */
body::before, body::after{
  content:"";
  position:fixed; inset:auto;
  width:46vmax; height:46vmax; filter:blur(80px); opacity:.35;
  border-radius:50%;
  z-index:0; pointer-events:none;
}
body::before{ background:conic-gradient(from 30deg, #5eead4, #60a5fa, #a78bfa, #5eead4); top:-15vmax; left:-10vmax; animation:spin 24s linear infinite reverse;}
body::after { background:conic-gradient(from -20deg, #f59e0b, #22d3ee, #10b981, #f59e0b); bottom:-18vmax; right:-12vmax; animation:spin 28s linear infinite;}
@keyframes spin{to{transform:rotate(1turn)}}

/* glass card */
.login-card{
  position:relative; z-index:1;
  width:min(680px, 92vw);
  padding:42px 40px 30px;
  background:var(--card);
  border-radius:26px;
  backdrop-filter: blur(8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 40px rgba(124,58,237,.18);
}

/* title */
.login-title{
  display:flex; align-items:center; gap:12px;
  font-weight:800; letter-spacing:.2px;
  font-size: clamp(26px, 4vw, 36px);
}

/* input */
.login-input{
  width:100%; margin-top:18px;
  background:#0d1020; color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; font-size:16px;
  padding:16px 18px; outline:none;
  transition:border .2s, box-shadow .2s, transform .06s;
}
.login-input::placeholder{color:#94a3b8;}
.login-input:focus{
  border-color: rgba(99,102,241,.6);
  box-shadow: 0 0 0 6px rgba(99,102,241,.12),
              0 0 0 1px rgba(255,255,255,.08);
}

/* rainbow-edge glow button like your sample */
.glow-btn{
  --radius:18px;
  border:0; cursor:pointer;
  font-weight:700; color:#0b1220;
  padding:12px 22px; margin-top:16px;
  border-radius:var(--radius);
  background: #e7f5ff;
  position:relative; isolation:isolate;
  transition: transform .06s ease;
}
.glow-btn:active{ transform: translateY(1px); }

/* outer glow ring */
.glow-btn::before{
  content:"";
  position:absolute; inset:-3px;
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(100% 100% at 0% 0%, #22d3ee 0, transparent 40%),
    radial-gradient(100% 100% at 100% 0%, #7c3aed 0, transparent 40%),
    radial-gradient(100% 100% at 0% 100%, #10b981 0, transparent 40%),
    radial-gradient(100% 100% at 100% 100%, #f59e0b 0, transparent 40%);
  filter: blur(8px);
  z-index:-1; opacity:.85; transition: opacity .25s ease, filter .3s ease;
}
.glow-btn:hover::before{ opacity:1; filter: blur(10px); }

/* subtle underline link */
.login-help{
  margin-top:18px; color:var(--muted); text-align:center; font-size:14px;
}
.login-help a{ color:#b9c7ff; text-decoration:underline dotted; }

/* motivational footer */
.login-quote{
  margin-top:26px; text-align:center; font-size:14.5px; line-height:1.5;
  color: #dfe7ff;
  opacity:.9;
}
.login-quote strong{ color:#c4d4ff; }

/* mobile spacing */
@media (max-width:480px){
  .login-card{ padding:28px 20px 22px; }
}
/* AI Mode style glowing button */
/* === AI Mode pill button — exact look === */
.login-card .ai-glow-btn{
  /* make it win against base styles */
  position: relative;
  isolation: isolate;     /* keep pseudo behind content but above card */
  z-index: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 28px;
  border-radius: 9999px;  /* full pill */
  border: 0 !important;
  background: #ffffff !important;
  color: #202124 !important;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;

  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    0 8px 28px rgba(124,58,237,.18); /* soft drop like your screenshot */

  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.login-card .ai-glow-btn:hover{
  transform: scale(1.04);
  background: #f8fafc !important;
}

/* glowing rainbow edge around the pill */
.login-card .ai-glow-btn::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* ring thickness */
  border-radius: inherit;

  background: linear-gradient(90deg,
    #22d3ee, #60a5fa, #a78bfa, #f59e0b, #10b981, #22d3ee);
  background-size: 300% 300%;
  animation: glowShift 6s linear infinite;

  /* punch a hole so only the border glows */
  padding:2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;  /* Safari/Chrome */
          mask-composite: exclude;

  filter: blur(5px);
  opacity:.95;
  z-index: -1;               /* behind the button content */
}

/* soft little under-glow line like in your sample */
.login-card .ai-glow-btn::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-10px;
  height:4px;
  border-radius:9999px;
  background: linear-gradient(90deg, #22d3ee, #10b981, #a3e635);
  filter: blur(6px);
  opacity:.55;
}

@keyframes glowShift{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}