/* ========= Base & Theme ========= */
* { box-sizing: border-box; }
:root{
  --bg-start: #0f172a;       /* slate-900 */
  --bg-end:   #020617;       /* slate-950 */
  --card: rgba(255,255,255,0.08);
  --card-stroke: rgba(255,255,255,0.18);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --primary: #60a5fa;        /* blue-400 */
  --primary-strong: #3b82f6; /* blue-500 */
  --ring: rgba(59,130,246,0.45);
  --success: #22c55e;
  --error: #ef4444;

  --google-bg: #ffffff;
  --google-text: #111827;
  --github-bg: #111827;
  --github-text: #ffffff;
  --facebook-bg: #1877f2;
  --facebook-text: #ffffff;

  --radius: 16px;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}

/* Light mode (optional) */
@media (prefers-color-scheme: light) {
  :root{
    --bg-start: #e2e8f0;
    --bg-end: #cbd5e1;
    --card: rgba(255,255,255,0.7);
    --card-stroke: rgba(15,23,42,0.08);
    --text: #0f172a;
    --muted: #475569;
    --primary: #2563eb;
    --primary-strong: #1d4ed8;
    --ring: rgba(37,99,235,0.25);
    --shadow: 0 20px 50px rgba(2,6,23,.12);
  }
}

/* ========= Page background (animated gradient blobs) ========= */
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(96,165,250,.25), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, rgba(99,102,241,.25), transparent 55%),
              linear-gradient(180deg, var(--bg-start), var(--bg-end));
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-x: hidden;
}

body::before, body::after{
  content:"";
  position: fixed;
  width: 40vmax; height: 40vmax;
  filter: blur(70px);
  opacity: .25;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, #22d3ee, transparent 50%);
  transform: translate(-40%, -30%);
  animation: float1 24s ease-in-out infinite;
}
body::after{
  background: radial-gradient(circle at 70% 70%, #a78bfa, transparent 50%);
  transform: translate(40%, 20%);
  animation: float2 26s ease-in-out infinite;
}
@keyframes float1 { 0%,100%{transform:translate(-40%,-30%)} 50%{transform:translate(-35%,-20%)} }
@keyframes float2 { 0%,100%{transform:translate(40%,20%)} 50%{transform:translate(35%,30%)} }

/* ========= Auth Card ========= */
.container{
  width: 100%;
  max-width: 420px;
  background: var(--card);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.container::before{
  content:"";
  position:absolute; inset: -1px -1px auto -1px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.8), transparent);
  opacity: .9;
}

/* ========= Heading ========= */
h1{
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: .2px;
}
.subtitle{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

/* ========= Form ========= */
form{
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.input{
  position: relative;
}
.input input{
  width: 100%;
  padding: 12px 14px 12px 44px; /* leave space for icon */
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  outline: none;
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease;
}
.input input::placeholder{ color: var(--muted); }
.input input:focus{
  border-color: var(--primary);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 4px var(--ring);
}

/* tiny inline svg icons for email/password */
.input .icon{
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  opacity: .8;
  pointer-events: none;
}

/* ========= Buttons ========= */
.row{ display: flex; gap: 10px; flex-wrap: wrap; }

button{
  appearance: none; border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, opacity .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

#btn-login{
  flex: 1; min-width: 140px;
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #fff;
}
#btn-login:hover{ filter: brightness(1.05); }
#btn-login:active{ transform: translateY(1px); }

#btn-signup{
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
}
#btn-signup:hover{ background: rgba(59,130,246,.08); }

/* OAuth buttons with brand styles */
#btn-google{
  flex: 1 1 140px;
  background: var(--google-bg);
  color: var(--google-text);
  border: 1px solid rgba(148,163,184,.35);
}
#btn-google:hover{ filter: brightness(.98); }

#btn-github{
  flex: 1 1 120px;
  background: var(--github-bg);
  color: var(--github-text);
}
#btn-github:hover{ filter: brightness(1.05); }

#btn-facebook{
  flex: 1 1 140px;
  background: var(--facebook-bg);
  color: var(--facebook-text);
}
#btn-facebook:hover{ filter: brightness(1.06); }

#btn-logout{
  flex: 1 1 140px;
  background: var(--facebook-bg);
  color: var(--facebook-text);
}
#btn-logout:hover{ filter: brightness(1.06); }

/* ========= Divider ========= */
.sep{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  margin: 16px 0;
  user-select: none;
}
#btn-forgot {
  width: 100%;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  margin-top: 10px;
}
#btn-forgot:hover {
  background: rgba(59, 130, 246, 0.08);
}



#new-password {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background-color: var(--card);
  color: var(--text);
  font-size: 16px;
}

#new-password:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 5px var(--primary);
}




.sep::before, .sep::after{
  content:"";
  height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,.4), transparent);
}

/* ========= Messages ========= */
.msg{ min-height: 20px; font-size: 14px; }
.msg.success{ color: var(--success); }
.msg.error{ color: var(--error); }

/* ========= Small screens ========= */
@media (max-width: 400px){
  .container{ padding: 22px 18px 18px; }
  h1{ font-size: 22px; }
  button, input{ font-size: 15px; }
 #btn-signup{
   width: 100%;
 }
 #btn-create{
   width: 100%;
 }

}