feat: add Velvet Circuit theme preset and enhance markdown preview styles

- Introduced a new theme preset "Velvet Circuit" with a unique color scheme.
- Updated markdown preview styles for improved readability, including adjustments to font sizes and line heights for code blocks and headers.

Author: BunsDev

components/markdown-preview.tsx

@@ -283,14 +283,14 @@ export function MarkdownPreview({
 
         // Style the <pre> in-place (no reparenting)
         pre.className =
-          'overflow-x-auto p-3 text-[11px] leading-[1.6] font-mono m-0 rounded-b-lg border border-[var(--border)] bg-[var(--bg)]'
+          'overflow-x-auto p-3 text-[12.5px] leading-[1.7] font-mono m-0 rounded-b-lg border border-[var(--border)] bg-[var(--bg)]'
         pre.style.marginTop = '0'
 
         // Insert a header *before* the <pre> as a sibling (not wrapping)
         const header = document.createElement('div')
         header.className =
           'code-block-header flex items-center justify-between h-7 px-3 bg-[var(--bg-secondary)] border border-b-0 border-[var(--border)] rounded-t-lg my-2 mb-0'
-        header.innerHTML = `<span class="text-[9px] font-mono text-[var(--text-disabled)] uppercase tracking-wider">${lang || 'code'}</span><button class="copy-btn flex items-center gap-1 text-[9px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer" title="Copy code">Copy</button>`
+        header.innerHTML = `<span class="text-[10.5px] font-mono text-[var(--text-disabled)] uppercase tracking-[0.16em]">${lang || 'code'}</span><button class="copy-btn flex items-center gap-1 text-[10.5px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer" title="Copy code">Copy</button>`
 
         const copyHandler = () => {
           copyToClipboard(rawText).then((ok) => {

components/settings-panel.tsx

@@ -301,9 +301,11 @@ export function SettingsPanel({ onBack }: { onBack: () => void }) {
                         <div className="mt-1 text-[11px] text-[var(--text-secondary)]">
                           {preset.id === 'supreme'
                             ? 'Metallic accents and luxury shell chrome.'
-                            : preset.group === 'core'
-                              ? 'Native palette tuned for the editor shell.'
-                              : 'Imported palette with custom texture and tone.'}
+                            : preset.id === 'velvet-circuit'
+                              ? 'CyberNord’s femme-tech sister: noir glass, orchid neon, sapphire haze.'
+                              : preset.group === 'core'
+                                ? 'Native palette tuned for the editor shell.'
+                                : 'Imported palette with custom texture and tone.'}
                         </div>
                       </button>
                     )

context/theme-context.tsx

@@ -12,7 +12,14 @@ import {
 
 export type ThemeMode = 'light' | 'dark' | 'system'
 export type ResolvedMode = 'light' | 'dark'
-export type ThemeId = 'obsidian' | 'neon' | 'catppuccin-mocha' | 'bone' | 'supreme' | 'claude' | string
+export type ThemeId =
+  | 'obsidian'
+  | 'neon'
+  | 'catppuccin-mocha'
+  | 'bone'
+  | 'supreme'
+  | 'claude'
+  | string
 export type EditorBgStyle = 'none' | 'grid' | 'dots' | 'gradient' | 'grid-logos'
 
 export interface ThemePreset {
@@ -36,6 +43,7 @@ export const THEME_PRESETS: ThemePreset[] = [
   { id: 'vintage-paper', label: 'Vintage Paper', color: '#8b5e3c', group: 'tweakcn' },
   { id: 'voodoo', label: 'VooDoo', color: '#8b5cf6', group: 'core' },
   { id: 'cybernord', label: 'CyberNord', color: '#00ff41', group: 'tweakcn' },
+  { id: 'velvet-circuit', label: 'Velvet Circuit', color: '#ff4fd8', group: 'core' },
   { id: 'prettypink', label: 'PrettyPink', color: '#F5A9B8', group: 'core' },
   { id: 'field-manual', label: 'Field Manual', color: '#4a6b2a', group: 'manual' },
   { id: 'navy-ops', label: 'Navy Ops', color: '#4682b4', group: 'manual' },
@@ -254,13 +262,17 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 
   const setEditorBgStyle = useCallback((s: EditorBgStyle) => {
     setEditorBgStyleState(s)
-    try { localStorage.setItem('code-editor:editor-bg-style', s) } catch {}
+    try {
+      localStorage.setItem('code-editor:editor-bg-style', s)
+    } catch {}
   }, [])
 
   const setEditorBgOpacity = useCallback((v: number) => {
     const clamped = Math.min(100, Math.max(0, v))
     setEditorBgOpacityState(clamped)
-    try { localStorage.setItem('code-editor:editor-bg-opacity', String(clamped)) } catch {}
+    try {
+      localStorage.setItem('code-editor:editor-bg-opacity', String(clamped))
+    } catch {}
   }, [])
 
   const value = useMemo<ThemeContextValue>(