.supa-oo {
  --oo-green: #50B748;
  --oo-green-dark: #3f9a39;
  --oo-slate: #3F5865;
  --oo-ink: #1a1a1a;
  --oo-line: #d6dbe0;
  --oo-err: #c0392b;
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 0 24px;
  font-family: museo-sans, sans-serif;
  color: var(--oo-slate);
}
.supa-oo *, .supa-oo *::before, .supa-oo *::after { box-sizing: border-box; }
.supa-oo .oo-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.supa-oo h2 {
  font-size: 22px; line-height: 1.3; margin: 0 0 8px; padding-bottom: 8px;
  color: var(--oo-ink); border-bottom: 2px solid var(--oo-green);
}
.supa-oo .oo-intro { font-size: 16px; line-height: 1.6; margin: 12px 0 18px; }
.supa-oo .oo-field { margin: 0 0 16px; }
.supa-oo label { display: block; font-weight: 600; margin: 0 0 6px; color: var(--oo-ink); }
.supa-oo input[type="text"], .supa-oo input[type="tel"] {
  width: 100%; padding: 12px; font: inherit; color: var(--oo-ink);
  border: 1px solid var(--oo-line); border-radius: 6px; background: #fff;
}
.supa-oo input[type="text"]:focus, .supa-oo input[type="tel"]:focus {
  outline: 2px solid var(--oo-green); outline-offset: 1px; border-color: var(--oo-green);
}
.supa-oo .oo-hint { font-size: 13px; margin-top: 4px; color: #6b7a84; }
.supa-oo .oo-error { font-size: 13px; margin-top: 4px; color: var(--oo-err); }
.supa-oo .has-error input[type="text"], .supa-oo .has-error input[type="tel"] { border-color: var(--oo-err); }
.supa-oo .oo-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; line-height: 1.5; }
.supa-oo .oo-check input { margin-top: 4px; flex: none; }
.supa-oo .oo-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.supa-oo .oo-btn {
  display: inline-block; padding: 12px 28px; font: inherit; font-weight: 700; color: #fff;
  background: var(--oo-green); border: 0; border-radius: 6px; cursor: pointer;
}
.supa-oo .oo-btn:hover:not(:disabled) { background: var(--oo-green-dark); }
.supa-oo .oo-btn:disabled { opacity: .6; cursor: not-allowed; }
.supa-oo .oo-status { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.supa-oo .oo-status.err { color: var(--oo-err); }
.supa-oo .oo-done { text-align: center; padding: 16px 0; }
.supa-oo .oo-done strong { display: block; font-size: 20px; color: var(--oo-green-dark); margin-bottom: 6px; }