/* Modal overlay + form */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.modal { width: 380px; max-width: 90vw; border-radius: 14px; overflow: hidden; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 16px; font-weight: 600; }
.btn-close { padding: 4px; color: var(--text-secondary); }
.btn-close:hover { color: var(--text-primary); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.field input, .field select {
  padding: 8px 12px; border-radius: 8px; font-size: 14px;
  background: var(--surface-secondary); border: 1px solid var(--border);
  color: var(--text-primary); outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.btn-primary {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: var(--accent); color: white; border: none; cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; }
.btn-secondary {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  background: var(--surface-secondary); color: var(--text-primary);
  border: 1px solid var(--border); cursor: pointer;
}
.btn-secondary:hover { background: var(--surface-hover); }