.modal-backdrop { position:fixed; top:0; left:0; right:0; bottom:0;
                      background:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; z-index:1000; }
    .modal { background:#fff; border-radius:10px; max-width:600px; width:90%; padding:20px; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
    .modal-header { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
    .form-row { display:flex; gap:16px; flex-wrap:wrap; }
    .mb-4 { margin-bottom:12px; flex:1; display:flex; flex-direction:column; }
    input, select { padding:10px; border:1px solid #cbd5e1; border-radius:6px; font-size:14px; }
    label { font-weight:600; margin-bottom:4px; }
    .modal-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:15px; }
    .alert { padding:10px; border-radius:6px; margin:10px 0; display:none; font-size:14px; }
    .success { background:#dcfce7; color:#166534; }
    .error { background:#fee2e2; color:#991b1b; }
@media (max-width: 768px) {
  .modal {
    width: 95%;
    padding: 16px;
  }

  .modal-header {
    gap: 4px;
    margin-bottom: 10px;
  }

  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .mb-4 {
    flex: 1 1 100%;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}