feat: transform UI to dark cyberpunk theme

- Eliminate all white/light boxes and backgrounds
- Fix drag-drop zone with neon cyberpunk colors (#00f0ff, #ff006e, #16213e)
- Fix restored mnemonic display with matrix green (#39ff14)
- Fix security options panel with dark gradient
- Fix all remaining slate-700/slate-800 labels to cyberpunk neon
- Fix info banners and text colors
- Update badge components with cyberpunk color scheme
- Apply consistent dark theme across all components

src/components/ReadOnly.tsx

@@ -11,26 +11,26 @@ const CSP_POLICY = `default-src 'self'; script-src 'self'; style-src 'self' 'uns
 
 export function ReadOnly({ isReadOnly, onToggle, buildHash, appVersion }: ReadOnlyProps) {
   return (
-    <div className="pt-3 border-t border-slate-300">
+    <div className="pt-3 border-t border-[#00f0ff]/30">
       <label className="flex items-center gap-2 cursor-pointer group">
         <input
           type="checkbox"
           checked={isReadOnly}
           onChange={(e) => onToggle(e.target.checked)}
-          className="rounded text-teal-600 focus:ring-2 focus:ring-teal-500 transition-all"
+          className="rounded text-[#00f0ff] focus:ring-2 focus:ring-[#00f0ff] transition-all"
         />
-        <span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
+        <span className="text-xs font-medium text-[#6ef3f7] group-hover:text-[#00f0ff] transition-colors">
           Read-only Mode
         </span>
       </label>
       {isReadOnly && (
-        <div className="mt-4 p-3 bg-slate-800 text-slate-200 rounded-lg text-xs space-y-2 animate-in fade-in">
+        <div className="mt-4 p-3 bg-[#16213e] text-[#6ef3f7] rounded-lg text-xs space-y-2 animate-in fade-in border-2 border-[#00f0ff]/30">
           <p className="font-bold flex items-center gap-2"><WifiOff size={14} /> Network & Persistence Disabled</p>
           <div className="font-mono text-[10px] space-y-1">
-            <p><span className="font-semibold text-slate-400">Version:</span> {appVersion}</p>
-            <p><span className="font-semibold text-slate-400">Build:</span> {buildHash}</p>
-            <p className="pt-1 font-semibold text-slate-400">Content Security Policy:</p>
-            <p className="text-sky-300 break-words">{CSP_POLICY}</p>
+            <p><span className="font-semibold text-[#9d84b7]">Version:</span> {appVersion}</p>
+            <p><span className="font-semibold text-[#9d84b7]">Build:</span> {buildHash}</p>
+            <p className="pt-1 font-semibold text-[#9d84b7]">Content Security Policy:</p>
+            <p className="text-[#00f0ff] break-words">{CSP_POLICY}</p>
           </div>
         </div>
       )}