.prox-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));gap:14px;margin-top:8px}
.prox-field{display:flex;flex-direction:column;gap:6px}
.prox-fieldset{border:1px solid #ddd;border-radius:8px;padding:10px}
.prox-actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.prox-btn{background:#cc0000;color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600}
.prox-btn[disabled]{opacity:.6;cursor:not-allowed}
.prox-spinner{width:22px;height:22px;border-radius:50%;border:3px solid #ddd;border-top-color:#cc0000;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.prox-register__msg{margin:10px 0}
.prox-alert{border-radius:8px;padding:10px 12px;border:1px solid #ddd;background:#f7f7f7}
.prox-success{border-color:#b7e1cd;background:#e6f4ea}
.prox-error{border-color:#f1b5b5;background:#fdeaea}
.prox-pre{white-space:pre-wrap;background:#111;color:#eee;padding:8px;border-radius:6px;overflow:auto}
/* 1) Render checkbox + label on a single row */
.prox-field.prox-checkbox{
  flex-direction: row;        /* override the default column layout */
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;        /* 2) span across all grid columns (one full-width row) */
}

.prox-field.prox-checkbox input[type="checkbox"]{
  margin: 0;
}

.prox-field.prox-checkbox span{
  white-space: nowrap;        /* keep label on one line when there’s space */
}

/* On very small screens, allow wrapping to avoid overflow */
@media (max-width: 480px){
  .prox-field.prox-checkbox span{
    white-space: normal;
  }
}