.sqf-form { max-width: 760px; margin: 0 auto; }
.sqf-form .sqf-body { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.sqf-form .full-grid { grid-column: span 4; }
.sqf-form .sqf-field { padding: 0.75rem; display: grid; grid-template-columns: subgrid; gap: 0.5rem 1.5rem; }
.sqf-form .sqf-field h3 { margin: 1rem 0 3rem; padding-bottom: 1rem; border-bottom: 1px solid #aaa; }
.sqf-form label { text-align: right; align-content: center; grid-column: auto / span 2; }
.sqf-form input[type], .sqf-form select, .sqf-form textarea { width: 100%; box-sizing: border-box; padding: 0.5rem; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; font-size: 1rem; transition: none; grid-column: span 2; }
.sqf-form input[type="checkbox"] { width: auto; }
.sqf-form .sqf-field .sqf-static { background: #fafafa; padding: 1.5rem; border: 1px solid #f0f0f0; border-radius: 3px }

.sqf-form .sqf-footer { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #aaa; text-align: right; }
.sqf-form button { background: #0073aa; color: #fff; border: none; margin-top: 2rem; padding: 0.5rem 1.5rem; border-radius: 3px; cursor: pointer; font-family: inherit; font-size: 1rem; }
.sqf-form button:hover { background:#00608f }

.sqf-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99999; width: 720px; max-width: calc(100% - 2rem); background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; }
.sqf-modal .sqf-error { color: #b00020; }
.sqf-modal .sqf-success { color: #007a2f; font-size: 2rem; }
.sqf-modal--open { opacity: 1; visibility: visible; }
.sqf-modal__dialog { padding: 0; }
.sqf-modal__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding: 0.5rem 1rem; }
.sqf-modal__title { margin: 0; }
.sqf-modal__close { background: transparent; border: 0; font-size: 1.5rem; cursor: pointer; color: #333; }
.sqf-modal__body { max-height: 60vh; overflow: auto; color: #222; padding: 1.5rem 2rem; text-align: center; }
.sqf-modal-backdrop { position: fixed; left: 0; top: 0; right: 0; bottom: 0; max-width: none; background: rgba(0,0,0,.45); z-index: 99998; opacity: 0; visibility: hidden; transition: opacity .18s ease; }
.sqf-modal-backdrop--open { opacity: 1; visibility: visible; }

@media (max-width: 600px) {
  .sqf-form .sqf-body, .sqf-form .sqf-footer { grid-template-columns: auto 1fr; }
  .sqf-form .full-grid { grid-column: span 2; }
  .sqf-form .sqf-body label { text-align: left; }
  .sqf-form label:has(+ .checkbox), .sqf-form .checkbox { grid-column: auto; }

  .sqf-modal { width: 90%; }
}