style: apply premium design styles and spellcheck override to CreatorTest developer route

src/NexusReader.UI.Shared/Pages/CreatorTest.razor

@@ -11,7 +11,7 @@
         <p class="subtitle">Verifying secure image upload (drag &amp; drop / paste) and backend XSS sanitization.</p>
     </div>
 
-    <div class="editor-section">
+    <div class="editor-section" spellcheck="false">
         <MarkdownEditor InitialMarkdown="@_initialMarkdown" OnSave="HandleSave" Height="400px" />
     </div>
 

src/NexusReader.UI.Shared/Pages/CreatorTest.razor.css

@@ -83,11 +83,11 @@
 }
 
 .pre-wrapper {
-    background: #09090b;
-    border: 1px solid var(--border);
+    background-color: #121214 !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
     border-radius: var(--radius-md);
     padding: 1.2rem;
-    max-height: 400px;
+    max-height: 300px;
     overflow-y: auto;
 }
 
@@ -95,7 +95,7 @@
     margin: 0;
     white-space: pre-wrap;
     word-break: break-all;
-    font-family: monospace;
+    font-family: 'Azeret Mono', monospace !important;
     font-size: 0.9rem;
     color: #e4e4e7;
     line-height: 1.5;
@@ -106,3 +106,31 @@
     font-size: 0.9rem;
     font-style: italic;
 }
+
+/* 2. Deep target Crepe/ProseMirror to use --bg-base and --text-main */
+::deep .crepe,
+::deep .milkdown,
+::deep .ProseMirror {
+    background-color: var(--bg-base) !important;
+    color: var(--text-main) !important;
+}
+
+/* 3. Deep target heading margins and inline code elements */
+::deep .crepe h1,
+::deep .crepe h2,
+::deep .ProseMirror h1,
+::deep .ProseMirror h2 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 0.75rem !important;
+    color: var(--text-main) !important;
+}
+
+::deep .crepe code,
+::deep .ProseMirror code {
+    background-color: rgba(16, 185, 129, 0.1) !important;
+    color: var(--accent) !important;
+    padding: 0.2rem 0.4rem !important;
+    border-radius: 4px !important;
+    font-family: 'Azeret Mono', monospace !important;
+    font-size: 0.9em !important;
+}