feat: add real-time email template preview with variable interpolation

- Introduce preview panel to edit form for rendering subject, HTML, and text with sample values.
- Add support for real-time updates using JavaScript.
- Include supporting styles for preview panel in admin CSS.
- Add optional `Scripts` section rendering to `_EditorLayout`.
- Create `.env.Development` for better development environment configuration.

HrynCo.NotificationService.Web/wwwroot/css/admin.css

@@ -154,6 +154,109 @@ body {
     border-radius: 0 0 .5rem .5rem !important;
 }
 
+/* ── Email template preview ───────────────────────────── */
+.template-preview-panel {
+    border: 1px solid #dce3eb;
+    border-radius: .75rem;
+    background: #fff;
+    overflow: hidden;
+    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
+}
+
+.template-preview-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: linear-gradient(180deg, #f9fbff 0%, #f3f6fb 100%);
+    border-bottom: 1px solid #e1e7ef;
+}
+
+.template-preview-title {
+    font-size: .9rem;
+    font-weight: 700;
+    color: #1f2937;
+}
+
+.template-preview-subtitle {
+    font-size: .82rem;
+    color: #6b7280;
+    margin-top: .15rem;
+}
+
+.template-preview-grid {
+    display: grid;
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+    gap: 1rem;
+    padding: 1rem 1.25rem 1.25rem;
+}
+
+.template-preview-source,
+.template-preview-output {
+    min-width: 0;
+}
+
+.template-preview-section-title {
+    font-size: .7rem;
+    font-weight: 700;
+    letter-spacing: .08em;
+    text-transform: uppercase;
+    color: #6b7280;
+    margin-bottom: .5rem;
+}
+
+.template-preview-variables {
+    display: flex;
+    flex-direction: column;
+    gap: .75rem;
+}
+
+.template-preview-variables .form-control-sm {
+    background: #fff;
+}
+
+.template-preview-subject {
+    padding: .75rem 1rem;
+    border: 1px dashed #cfd8e3;
+    border-radius: .5rem;
+    background: #f8fafc;
+    min-height: 3rem;
+    font-weight: 600;
+    color: #111827;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.template-preview-frame {
+    width: 100%;
+    height: 420px;
+    border: 1px solid #cfd8e3;
+    border-radius: .5rem;
+    background: #eef2f7;
+}
+
+.template-preview-text {
+    padding: .75rem 1rem;
+    border: 1px solid #cfd8e3;
+    border-radius: .5rem;
+    background: #0f172a;
+    color: #e2e8f0;
+    min-height: 120px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+@media (max-width: 992px) {
+    .template-preview-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .template-preview-frame {
+        height: 360px;
+    }
+}
+
 /* ── Form-section divider ─────────────────────────────── */
 .form-section-title {
     font-size: .68rem;