.card {
  background: linear-gradient(180deg, #fff 0%, #fbfefb 100%);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 580px;
  backdrop-filter: blur(2px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  background: linear-gradient(135deg, var(--primary), #1f8b53);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  margin-top: 16px;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 109, 54, 0.22); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.form-group { width: 100%; text-align: left; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 700; color: #2f3b31; }
.form-group input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c8ddcc;
  border-radius: 12px;
  font-size: .96rem;
  background: #fbfefb;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 109, 54, .14); }

.role-selector { display: flex; gap: 9px; margin: 8px 0; }
.role-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #c8ddcc;
  background: #fff;
  color: #2f3b31;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: all .2s ease;
}
.role-btn.active {
  background: linear-gradient(135deg, var(--primary), #2f9f64);
  color: #fff;
  border-color: var(--primary);
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  z-index: 1000;
  transform: translateY(100px);
  transition: transform 0.28s ease;
}
.toast.show { transform: translateY(0); }
.toast.success { background: #2e7d32; }
.toast.error { background: #c62828; }
.toast.warning { background: #c77800; }

.progress-bar { width: 100%; height: 10px; background: #deebdf; border-radius: 999px; overflow: hidden; margin: 14px 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #27b46c); width: 0%; transition: width .25s ease; }