Component reuse, Dialog component

src/styles/campaign-workspace.css

@@ -1701,7 +1701,8 @@
   background: var(--panel-soft);
 }
 
-.file-dialog-header h3 {
+.file-dialog-header h3,
+.file-dialog-header .file-dialog-title {
   margin: 0;
   color: var(--text-strong);
   font-size: 18px;

src/styles/components.css

@@ -512,6 +512,80 @@
   font-weight: 600;
 }
 
+
+/* Reusable dialog -------------------------------------------------------- */
+.dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 12000;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  background: rgba(15, 23, 42, 0.36);
+  backdrop-filter: blur(2px);
+}
+
+.dialog-panel {
+  width: min(560px, 100%);
+  max-height: min(760px, calc(100vh - 3rem));
+  overflow: auto;
+  border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
+  border-radius: var(--radius-lg, 18px);
+  background: var(--surface, #fff);
+  color: var(--text, #172033);
+  box-shadow: var(--shadow-strong, 0 24px 64px rgba(15, 23, 42, 0.25));
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.dialog-title {
+  margin: 0;
+  color: var(--text-strong, #111827);
+  font-size: 1.05rem;
+}
+
+.dialog-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted, #5f6b7a);
+  cursor: pointer;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.dialog-close:hover,
+.dialog-close:focus-visible {
+  background: rgba(15, 23, 42, 0.07);
+  color: var(--text-strong, #111827);
+  outline: none;
+}
+
+.dialog-close:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.dialog-body {
+  color: var(--text, #172033);
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+}
+
 /* Reusable confirm dialog ------------------------------------------------ */
 .confirm-backdrop {
   position: fixed;
@@ -534,8 +608,13 @@
   box-shadow: var(--shadow-strong, 0 24px 64px rgba(15, 23, 42, 0.25));
 }
 
+.confirm-dialog-header {
+  margin-bottom: 0.55rem;
+}
+
+.confirm-dialog-header .dialog-title,
 .confirm-dialog h2 {
-  margin: 0 0 0.55rem;
+  margin: 0;
   color: var(--text-strong, #111827);
   font-size: 1.05rem;
 }