/* Color palette (exactly 5 colors) */
:root{
  --bg:#0a0a0b;          /* neutral */
  --card:#0f1115;        /* neutral */
  --fg:#e5e7eb;          /* neutral */
  --primary:#3b82f6;     /* blue (brand) */
  --accent:#06b6d4;      /* teal (accent) */

  --muted:#98a2b3;       /* derived neutral for hints (not counted as standalone brand color) */

  --radius-xl:18px;
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --ring:0 0 0 2px rgba(59,130,246,.35);
}

/* Reset/base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Animated background layers */
.auth-bg{
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
}
.bg-gradient{
  position:absolute; inset:-25%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(59,130,246,.18), rgba(6,182,212,.18), rgba(59,130,246,.18));
  filter: blur(60px);
  animation: spin 24s linear infinite;
}
.bg-grid{
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, transparent 70%);
}
.bg-glow{
  position:absolute; left:50%; top:65%;
  width:700px; height:700px; transform: translate(-50%,-50%);
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.25), transparent 50%),
              radial-gradient(circle at 30% 40%, rgba(6,182,212,.25), transparent 45%);
  filter: blur(60px);
  opacity:.7;
  animation: pulse 8s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.06)}
}

/* Layout */
.auth-center{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:16px;
}

/* Glass card */
.glass-auth{
  position:relative;
  background: rgba(15,17,21,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  width:100%;
  max-width:480px;
  padding:28px 22px;
  isolation:isolate;
}
@media(min-width:768px){
  .glass-auth{padding:34px 28px}
}

/* Mode-tinted overlay (login/register/forgot) */
.glass-auth::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  transition: background .35s ease, opacity .35s ease;
}
.glass-auth.login::before{
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(6,182,212,.10));
}
.glass-auth.register::before{
  background: linear-gradient(135deg, rgba(6,182,212,.10), rgba(59,130,246,.10));
}
.glass-auth.forgot::before{
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.14));
}

/* Header */
.brand-dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 16px rgba(59,130,246,.6);
}
#authTitle{
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight:800;
  letter-spacing:.2px;
}
.subtitle{
  color: var(--muted);
  font-size:.95rem;
}

/* Form controls */
.form-control{
  background: rgba(20,22,26,.9);
  color: var(--fg);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 12px;
}
.form-control:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: none;
  outline: none;
}
.form-control::placeholder{color:#b4bcc9}

/* Toggle visibility icon */
.toggle-visibility{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#aab3c2; cursor:pointer;
  font-size:16px; line-height:1; padding:6px; border-radius:8px;
}
.toggle-visibility:hover{ color: var(--fg); background: rgba(255,255,255,.06) }

/* Primary action button with gradient */
.btn-primary.gradient-btn{
  --g1: var(--primary);
  --g2: var(--accent);
  background: linear-gradient(135deg, var(--g1), var(--g2));
  border: 0;
  border-radius:14px;
  padding:12px 14px;
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 28px rgba(59,130,246,.25);
}
.btn-primary.gradient-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 34px rgba(59,130,246,.32);
}
.btn-primary.gradient-btn:active{
  transform: translateY(1px);
}

/* Links */
.auth-switch{ color: var(--muted) }
.auth-switch a{
  color: var(--fg); text-decoration: underline; text-underline-offset: 2px;
}
.auth-switch .sep{ opacity:.6; margin: 0 .5rem }

/* Notes */
.note{ color: var(--muted); font-size:.85rem }

/* Toasts */
.toast-stack{
  position: fixed; right: 16px; bottom: 16px; display:flex; flex-direction:column; gap:10px; z-index: 1000;
}
.glass-toast{
  background: rgba(15,17,21,.85);
  border:1px solid rgba(255,255,255,.10);
  color: var(--fg);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  display:flex; align-items:center; gap:10px;
  animation: toast-in .2s ease both;
}
.glass-toast.success{ border-color: rgba(34,197,94,.35) }
.glass-toast.error{ border-color: rgba(239,68,68,.35) }
.glass-toast .close{
  margin-left:auto; color:#b6bfcc; background:transparent; border:0; cursor:pointer; padding:4px 6px; border-radius:8px;
}
.glass-toast .close:hover{ color: var(--fg); background: rgba(255,255,255,.06) }
@keyframes toast-in{
  from{ opacity:0; transform: translateY(6px) scale(.98) }
  to{ opacity:1; transform: translateY(0) scale(1) }
}

/* Accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}