:root{
  --purple:#3b1658;
  --purple2:#5b2a78;
  --card:#ffffff;
  --shadow: 0 18px 40px rgba(17,24,39,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(91,42,120,.18), transparent 60%),
    radial-gradient(900px 450px at 90% 40%, rgba(255,77,61,.12), transparent 55%),
    #f6f6f8;
  color:#111;
}

.signing{
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(520px, 100%);
  background:var(--card);
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px 26px;
  text-align:center;
}

.spinner{
  width:56px;
  height:56px;
  border-radius:999px;
  border:4px solid rgba(91,42,120,.15);
  border-top-color: rgba(91,42,120,.85);
  margin: 6px auto 14px;
  animation: spin .9s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.title{
  font-size:20px;
  font-weight:900;
  color:#161616;
  margin-bottom:6px;
}

.sub{
  color:#6b6b6b;
  font-weight:650;
  margin-bottom:14px;
}

.dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:14px;
}

.dots span{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(91,42,120,.70);
  opacity:.25;
  animation: pulse 1s infinite ease-in-out;
}

.dots span:nth-child(2){ animation-delay:.15s; }
.dots span:nth-child(3){ animation-delay:.30s; }

@keyframes pulse{
  0%, 100% { transform: translateY(0); opacity:.25; }
  50% { transform: translateY(-4px); opacity:.9; }
}

.link{
  appearance:none;
  border:none;
  background:transparent;
  color: var(--purple2);
  font-weight:900;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding:6px 8px;
}
.link:hover{ filter:brightness(.95); }