.hupa-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap: 1rem; }
.hupa-span-12{ grid-column: span 12; }
.hupa-span-6{ grid-column: span 6; }
.hupa-span-4{ grid-column: span 4; }
.hupa-span-3{ grid-column: span 3; }
.hupa-field{ grid-column: span 12; }
.hupa-label{ display:block; font-weight:600; margin-bottom:.35rem; }
.hupa-input{ width:100%; padding:.6rem .75rem; }
.hupa-actions{ grid-column: span 12; margin-top:.75rem; }
.hupa-submit{padding:.65rem 1rem; cursor:pointer; display:inline-flex;align-items:center;gap:.5rem;position:relative;}
.hupa-notice-slot{ margin-top: .75rem; }
.hupa-notice{ padding:.75rem 1rem; border:1px solid #ddd; }
.hupa-notice-error{ border-color:#c33; }
.hupa-notice-success{ border-color:#3a3; }
.hupa-hp{ position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }
.hupa-hidden{ display:none !important; }
.hupa-choice{ display:flex; gap:.5rem; align-items:flex-start; }
.hupa-choice-input{ margin-top:.25rem; }
.hupa-choice-label{ cursor:pointer; }
.hupa-file-meta{ font-size:.9rem; opacity:.8; margin-top:.35rem; }
.hupa-loading{ opacity:.65; pointer-events:none; }

/* Floating labels */
.hupa-floating{ position:relative; }
.hupa-floating .hupa-input{ padding-top:1.25rem; }
.hupa-floating .hupa-floating-label{
  position:absolute;
  left:.75rem;
  top:.7rem;
  font-size:.9rem;
  opacity:.7;
  pointer-events:none;
  transition: transform .15s ease, opacity .15s ease, font-size .15s ease, top .15s ease;
}
.hupa-floating:focus-within .hupa-floating-label,
.hupa-floating[data-filled="1"] .hupa-floating-label{
  top:.3rem;
  font-size:.75rem;
  opacity:.9;
}

/* Field errors */
.hupa-error{ margin-top:.35rem; font-size:.9rem; }
.hupa-field.is-invalid .hupa-input,
.hupa-field.is-invalid .hupa-choice-input{ outline: 2px solid rgba(204,51,51,.45); outline-offset: 2px; }

/* Optional: custom checkbox / radio if you add classes 'hupa-check' / 'hupa-radio' */
.hupa-check,
.hupa-radio{
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid currentColor;
  border-radius: .25rem;
  display: inline-grid;
  place-content: center;
  margin-top: .2rem;
}
.hupa-check:checked{
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M10.97%204.97a.75.75%200%200%201%201.07%201.05l-3.99%204.99a.75.75%200%200%201-1.08.02L4.324%208.384a.75.75%200%201%201%201.06-1.06l2.094%202.093%203.473-4.425z%27/%3E%3C/svg%3E");
}
.hupa-radio{ border-radius: 999px; }
.hupa-radio:checked{
  background-color: currentColor;
  box-shadow: inset 0 0 0 4px #fff;
}
.hupa-check:focus,
.hupa-radio:focus{
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 3px;
}


/* Loading spinner on submit */
.hupa-submit.hupa-loading::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:999px;animation:hupa-spin .75s linear infinite;}
@keyframes hupa-spin{to{transform:rotate(360deg);}}