/* ====== Theme & layout (mobile-first) ====== */
:root{
  --bg-1:#0a0f1d; --bg-2:#0b1220; --card:#0d111cdd;
  --muted:#9ba4b4; --text:#e7eaf0;
  --stroke:rgba(255,255,255,.08);
  --brand-1:#2e73ff; --brand-2:#00d4b7;
  --focus: 0 0 0 .18rem rgba(46,115,255,.35);
}

@media (prefers-reduced-motion:no-preference){
  .fade-in { animation: fadeIn .5s ease-out both; }
  @keyframes fadeIn { from {opacity:0; transform: translateY(6px)} to {opacity:1; transform:none} }
}

body.auth-bg{
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 110% -10%, rgba(46,115,255,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,255,200,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text);
  display:flex; align-items:center;
}

/* ====== Card (glass) ====== */
.auth-card{
  backdrop-filter: blur(10px);
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  border-radius:1.25rem;
  position:relative; overflow:clip;
}
.auth-card::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background: linear-gradient(120deg, transparent 20%, rgba(46,115,255,.25), rgba(0,212,183,.25), transparent 80%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; border-radius:inherit;
}

/* Previously injected only if $hasErr; now always defined, only applied when .error-shake class is present */
.auth-card.error-shake{ animation: shake .35s ease-in-out both; }
@keyframes shake{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX( 4px) }
  30%,50%,70%{ transform:translateX(-6px) }
  40%,60%{ transform:translateX( 6px) }
}

/* ====== Brand ====== */
.brand{ display:flex; align-items:center; justify-content:center; gap:.6rem; }
.brand img{ height:40px; width:auto; }
.brand .title{ font-weight:800; letter-spacing:.2px; }

/* ====== Inputs ====== */
.form-label{ font-weight:600; }
.form-control, .form-control:focus{
  background:#0f1629; border-color:#1c2744; color:var(--text);
  box-shadow:none;
}
.form-control::placeholder{ color:var(--muted); }
.input-group-text{
  background:#0f1629; border-color:#1c2744; color:#b7c0d1;
}

/* ====== Button ====== */
.btn-primary{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border:0; font-weight:800; letter-spacing:.2px;
  transition: transform .08s ease-out;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:focus-visible{ box-shadow: var(--focus); }

/* Loading shimmer when submitting */
.btn-loading[disabled]{ position:relative; opacity:.9; }
.btn-loading[disabled]::after{
  content:""; position:absolute; inset:0; display:block;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.hint{ color:var(--muted); font-size:.9rem; }
.caps{ color:#ffd166; font-size:.85rem; display:none; }

@media (max-width:575.98px){
  .brand img{ height:34px; }
  .auth-card{ border-radius:1rem; }
}