feat: add elsa form with a modular addition of content type

app/static/styles.css

@@ -598,3 +598,130 @@ input[type="radio"] { accent-color: var(--control-accent); }
     transform: translateY(0);
   }
 }
+
+/* ELSA specific styles */
+.legal-notice {
+  background: #eff6ff;
+  border: 1px solid #93c5fd;
+  border-radius: 12px;
+  padding: 16px 20px;
+  margin-bottom: 24px;
+}
+
+[data-theme="dark"] .legal-notice {
+  background: #0f2942;
+  border-color: #1e3a52;
+}
+
+.legal-notice h3 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+  font-size: 1rem;
+  color: #1e40af;
+}
+
+[data-theme="dark"] .legal-notice h3 {
+  color: #93c5fd;
+}
+
+.legal-notice p {
+  margin: 0;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.media-controls {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.media-section {
+  background: var(--table-head-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.media-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.media-section-header h3 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 1.15rem;
+}
+
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  color: var(--text);
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.btn-icon:hover {
+  background: var(--table-head-bg);
+  color: #ef4444;
+}
+
+.btn-sm {
+  font-size: 0.9rem;
+  padding: 8px 14px;
+}
+
+.media-table {
+  margin-bottom: 12px;
+}
+
+.media-table th {
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+.media-table td {
+  padding: 8px 10px;
+}
+
+.media-table input[type="text"],
+.media-table input[type="number"] {
+  font-size: 0.9rem;
+  padding: 8px 10px;
+}
+
+.media-table input[type="number"] {
+  width: 80px;
+}
+
+@media (max-width: 1024px) {
+  .media-controls {
+    flex-direction: column;
+  }
+  
+  .media-table {
+    font-size: 0.85rem;
+  }
+  
+  .media-table th,
+  .media-table td {
+    padding: 6px 8px;
+  }
+}