:root{
  --cerf-primary:#2363eb; --cerf-accent:#0f172a; --cerf-bg:#ffffff; --cerf-text:#0f172a;
}
.cerf-wrap{ font-family: inherit; color: var(--cerf-text); }
.cerf-form{ background: var(--cerf-bg); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding: 20px; }
.cerf-steps{ display:block; }
.cerf-step{ display:none; }
.cerf-step.is-active{ display:block; }

.cerf-step h3{ margin:0 0 12px; font-size: 1.25rem; color: var(--cerf-accent); }
.cerf-grid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.cerf-field{ grid-column: span 6 / span 6; }
.cerf-col-span-2{ grid-column: span 12 / span 12; }

.cerf-field label{ display:block; margin-bottom: 6px; font-weight: 600; }
.cerf-field input[type=text],
.cerf-field input[type=email],
.cerf-field input[type=url],
.cerf-field input[type=file],
.cerf-field textarea{
  width:100%; box-sizing:border-box;
  border:1px solid rgba(15,23,42,.15);
  border-radius:10px; padding:12px 14px;
  font: inherit; color: inherit; background: #fff;
}
.cerf-field input:focus,
.cerf-field textarea:focus{ outline:2px solid color-mix(in srgb, var(--cerf-primary) 30%, transparent); border-color: var(--cerf-primary); }

.cerf-nav{ margin-top: 16px; display:flex; justify-content: space-between; gap: 12px; }
.cerf-nav .cerf-prev,
.cerf-nav .cerf-next,
.cerf-submit{
  appearance:none; border: none; cursor:pointer;
  background: var(--cerf-primary); color:#fff; font-weight:600;
  padding: 12px 16px; border-radius: 10px;
  transition: transform .06s ease-in-out, opacity .2s;
}
.cerf-nav .cerf-prev{ background: rgba(15,23,42,.075); color: var(--cerf-accent); }
.cerf-nav button:active{ transform: translateY(1px); }

@media (max-width: 1024px){
  .cerf-field{ grid-column: span 12 / span 12; }
}
@media (max-width: 640px){
  .cerf-form{ padding: 16px; border-radius: 12px; }
}

.cerf-success{ background: #f6ffed; border: 1px solid #b7eb8f; color: #135200; padding: 16px; border-radius: 10px; margin-top: 16px; }