/* Compact, responsive form styles */
:root {
  --line:#e5e7eb; --bg:#0b1220; --muted:#64748b; --panel:#0f172a; --white:#fff;
  --text:#111827; --brand:#2563eb;
}

* { box-sizing: border-box; }

.form-wrap {
  max-width: 720px;            /* narrower */
  margin: 20px auto;
  padding: 14px;               /* smaller padding */
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(96,165,250,.25);
  border-radius: 12px;         /* smaller radius */
}

.form-wrap h1 { margin: 0 0 8px; font: 700 20px/1.2 system-ui, Segoe UI, Roboto, Arial, sans-serif; color: var(--white); }
.form-wrap h3 { margin: 14px 0 6px; font: 600 14px/1.2 system-ui; color: var(--white); }

p, .muted { color: #9aa6b2; font-size: 13px; margin: 4px 0 12px; }

label {
  display: block;
  margin: 8px 0 3px;
  color: var(--white);
  font: 500 13px/1.4 system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

input, select, textarea, button {
  width: 100%;
  padding: 8px 10px;           /* smaller inputs */
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 13px system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  color: var(--text);
}

textarea { resize: vertical; }

button {
  cursor: pointer;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  padding: 8px 12px;
  font-weight: 600;
}

button:disabled { opacity:.7; cursor:not-allowed; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }

@media (max-width: 900px){
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.help { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* Optional “extra-compact” variant — add class .xs to .form-wrap if needed */
.form-wrap.xs { max-width: 640px; }
.form-wrap.xs input, .form-wrap.xs select, .form-wrap.xs textarea { padding: 7px 9px; font-size: 12.5px; }
.form-wrap.xs label { font-size: 12.5px; }
.form-wrap.xs h1 { font-size: 18px; }