:root{
  --brand:#0d6efd;           /* primary */
  --brand-2:#14d4ff;         /* accent */
  --ink:#0b1220;             /* text */
  --muted:#6b778c;           /* secondary text */
  --card-bg:rgba(255,255,255,.85);
  --ring:rgba(13,110,253,.35);
}
body{
  margin:0; display:grid; place-items:center; min-height:100vh;
  background: radial-gradient(1200px 800px at 85% -10%, rgba(20, 212, 255, .4), transparent 60%), radial-gradient(1200px 900px at -10% 120%, rgba(13, 110, 253, .45), transparent 60%), linear-gradient(135deg, #0087ba 0%, #0f1930 50%, #0b1220 100%);
  font-family: system-ui,-apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
}
.auth-wrap{width:100%; max-width:420px; padding:20px}

.brand{display:flex; align-items:center; gap:.65rem; margin-bottom:1.1rem}
.brand .logo{
  height:42px; display:grid; place-items:center;
}
.brand .name{font-weight:800; letter-spacing:.2px; font-size:1.25rem; color:#eaf2ff}
.card-auth{
  backdrop-filter: blur(10px);
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding:24px; position:relative; overflow:hidden;
}
.card-auth:before{
  content:""; position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  mask: linear-gradient(#fff, transparent 60%);
}
.subtitle{color:#2b3851; font-weight:600; margin:-2px 0 12px}
.form-control{border-radius:14px; padding:.85rem 1rem .85rem 2.6rem; border:1px solid #d9e1ee}
.form-control:focus{box-shadow:0 0 0 .25rem var(--ring); border-color:var(--brand)}
.field{position:relative}
.field .fi{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#7c8aa6}

.btn-primary{
  --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:#0b5ed7; --bs-btn-hover-border-color:#0a58ca;
  border-radius:14px; padding:.85rem 1rem; font-weight:700; letter-spacing:.2px;
  box-shadow:0 14px 28px rgba(13,110,253,.25);
}
.btn-outline-dark{border-radius:14px; padding:.8rem 1rem; font-weight:700}

.links{display:flex; justify-content:space-between; gap:8px; font-size:.92rem}
.links a{color:var(--muted); text-decoration:none}
.links a:hover{color:var(--brand)}

.divider{display:flex; align-items:center; gap:.75rem; color:#7c8aa6; font-size:.9rem; margin:10px 0}
.divider::before,.divider::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent, #dbe3ef, transparent)}

.social .btn{border-radius:12px}

.legal{font-size:.8rem; color:#7c8aa6}

/* small motion */
.fade-in{animation:fade .5s ease-out;}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){ .fade-in{animation:none} }

.btn-signin {
  background-color: #0089bd;
  border-color: #0089bd;
}

.btn-create {
  color: #28bc4f;
  border-color: #28bc4f;
}

.btn-create:hover, .btn-create:active {
  background-color: #28bc4f !important;
  color: #fff !important;
  border-color: #28bc4f !important;
}

/* Keep the button width stable and center icon/spinner */
.btn-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;            /* matches your form controls */
  font-weight: 600;
}

/* Center spans neatly */
.btn-signin .btn-label,
.btn-signin .btn-spinner { display: inline-grid; place-items: center; }

/* Optional: a tiny fade for polish */
.btn-signin .btn-spinner { transition: opacity .15s ease; }

/* Make the create button hold icon/spinner nicely and avoid layout shift */
.btn-create{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px; /* matches your form controls */
  font-weight: 600;
}
.btn-create .btn-label,
.btn-create .btn-spinner{ display: inline-grid; place-items:center; }

/* When busy, prevent double clicks */
.btn-create.is-busy{
  pointer-events: none;
  opacity: .9;
}