.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.h1{font-size:28px; margin:0}
.small{font-size:12px; color:var(--muted)}

.field{margin:0 0 14px 0}

.label{
  display:block;
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  margin:0 0 8px 0;
}

.input{
  width:100%;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:12px 14px;
  outline:none;
  font-size:14px;
}
.input:focus{
  border-color: rgba(124,58,237,.35);
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:var(--r-md);
  font-weight:900;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.98}
.btn:active{transform:translateY(0);opacity:1}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand-1), rgba(124,58,237,.85));
  box-shadow: 0 14px 30px rgba(124,58,237,.18);
}

.btn-secondary{
  background:rgba(124,58,237,.06);
  color:var(--brand-2);
  border-color:rgba(124,58,237,.18);
}

.btn-block{width:100%}

.alert{
  padding:10px 12px;
  border-radius:var(--r-md);
  font-weight:900;
  margin:0 0 14px 0;
  white-space:pre-line;
}
.alert-ok{
  border:1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.08);
  color:#115a2a;
}
.alert-err{
  border:1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color:#7a1a1a;
}