/* Tema: BioVitality Motion
   - Fundal luminos + overlay animat în nuanțe inspirate de logo (verde/roșu/indigo)
   - Card alb
   - Buton cu gradient indigo→roșu animat lent
   - Glow verde discret sub logo (pulse)
   - Credit sub card la ~15px
*/

:root{
  /* Accente */
  --indigo-400:#818cf8;
  --indigo-500:#6366f1;
  --indigo-600:#4f46e5;
  --red-500:#ef4444;
  --rose-500:#f43f5e;
  --green-500:#22c55e;

  /* Text */
  --text-0:#0f172a;   /* slate-900 */
  --text-1:#334155;   /* slate-700 */
  --muted:#64748b;

  /* Card */
  --card-bg:#ffffff;
  --card-brd:#e8ecff;
  --shadow: 0 18px 50px rgba(15,23,42,.14), 0 6px 18px rgba(15,23,42,.08);
  --radius:16px;

  /* Focus ring */
  --ring:#c7d2feaa;
}

*{box-sizing:border-box}
html,body{height:100%}
body.login-bg{
  margin:0;
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text-0);
  background: linear-gradient(180deg,#f7f9ff,#eef2ff); /* bază luminoasă */
  overflow:hidden;
  position:relative;
}

/* Overlay animat subtil (nuanțe bio→vitality→indigo) */
body.login-bg::before{
  content:"";
  position:fixed; inset:-20%;
  background:
    radial-gradient(50% 40% at 15% 15%, rgba(34,197,94,.25) 0%, transparent 60%),
    radial-gradient(50% 40% at 85% 20%, rgba(244,63,94,.22) 0%, transparent 65%),
    radial-gradient(60% 45% at 50% 90%, rgba(99,102,241,.28) 0%, transparent 70%);
  filter: blur(50px);
  opacity:.55;
  animation: bgShift 22s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bgShift{
  0%   { transform: translate3d(0,0,0) scale(1);   opacity:.55 }
  50%  { transform: translate3d(0,-2%,0) scale(1.04); opacity:.48 }
  100% { transform: translate3d(0,0,0) scale(1);   opacity:.55 }
}

/* Wrapper: coloană => creditul stă sub card */
.login-wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  gap:15px; /* spațiu între card și credit */
}

/* CARD alb */
.login-card{
  width:100%;
  max-width:420px;
  background:var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  position:relative;
}

/* Logo + glow verde subtil sub logo */
.logo-wrap{
  position:relative;
  display:flex; justify-content:center;
  margin-bottom:10px;
}
.logo{
  height:156px; width:auto;
  filter: drop-shadow(0 2px 6px rgba(15,23,42,.12));
  user-select:none;
}
.logo-wrap::after{
  content:"";
  position:absolute; bottom:-8px; width:140px; height:18px;
  background: radial-gradient(ellipse at center, rgba(34,197,94,.32) 0%, rgba(34,197,94,0) 70%);
  filter: blur(10px);
  animation: pulse 4.2s ease-in-out infinite;
  left:50%; transform:translateX(-50%);
  pointer-events:none;
}
@keyframes pulse{
  0%,100%{ opacity:.35; transform: translateX(-50%) scale(1) }
  50%    { opacity:.15; transform: translateX(-50%) scale(1.06) }
}

.title{
  font-size:20px; font-weight:700;
  text-align:center; letter-spacing:.2px;
  margin:6px 0 18px; color:#111827;
}

/* FORM */
.form{ display:grid; gap:14px }
.field label{
  display:block; font-size:12px; color:var(--text-1); margin-bottom:6px;
}
.field input{
  width:100%;
  padding:10px 12px;
  background:#ffffff;
  color:var(--text-0);
  border:1px solid #dbe4ff;
  border-radius:10px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease, background .15s ease;
}
.field input::placeholder{ color:#94a3b8 }
.field input:hover{ background:#f9fbff }
.field input:focus{
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 4px var(--ring);
}
.field input:active{ transform: translateY(.5px) }

/* BUTON: gradient animat lent indigo→roșu */
.btn-primary{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; gap:10px; margin-top:4px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #c7d2fe;
  color:white; font-weight:700; letter-spacing:.2px;
  cursor:pointer; overflow:hidden;

  background: linear-gradient(90deg, var(--indigo-500), var(--rose-500));
  background-size: 200% 100%;
  animation: btnShift 10s ease-in-out infinite;
  box-shadow: 0 8px 22px rgba(99,102,241,.30);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
@keyframes btnShift{
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 28px rgba(244,63,94,.28);
}
.btn-primary:active{ transform: translateY(1px) }
.btn-primary:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px var(--ring), 0 10px 26px rgba(99,102,241,.32);
}
.btn-label{ position:relative; z-index:2 }

/* Nu mai folosim btn-glow în această temă */
.btn-glow{ display:none }

/* ALERTĂ EROARE */
.alert{
  padding:10px 12px;
  border-radius:10px;
  background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d;
  font-size:13px; margin:-4px 0 8px 0;
}

/* CREDIT SUB CARD – fix sub card la ~15px */
.made-by{
  text-align:center;
  font-size:12px;
  color:var(--text-0);
  opacity:.42;
  user-select:none;
  margin-top:0; /* gap-ul de 15px e dat de .login-wrap */
}

/* Apariție + mișcarea logo-ului (ușoară) */
.appear{ animation:appear .22s ease-out both }
@keyframes appear{
  from{ opacity:0; transform:translateY(6px) scale(.995) }
  to  { opacity:1; transform:none }
}
.floaty{
  animation:floaty 6s ease-in-out infinite;
  transform-origin:center; will-change: transform;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0px) }
  50%    { transform: translateY(4px) }
}

/* Reduce motion: oprește animațiile pentru cei care preferă static */
@media (prefers-reduced-motion: reduce){
  body.login-bg::before,
  .logo-wrap::after,
  .btn-primary,
  .floaty,
  .appear{ animation: none !important }
}

/* Mobil mic */
@media (max-width: 380px){
  .login-card{ padding:18px }
  .logo{ height:90px }
}