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/Header.tsx

@@ -50,19 +50,19 @@ const Header: React.FC<HeaderProps> = ({
     onToggleLock
 }) => {
   return (
-    <header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
+    <header className="sticky top-0 z-50 bg-[#0a0a0f] border-b border-[#00f0ff]/30 backdrop-blur-sm">
       <div className="max-w-7xl mx-auto px-6 py-4">
         <div className="flex items-center justify-between">
           {/* Left: Logo & Title */}
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-teal-500 rounded-lg flex items-center justify-center">
-              <Shield className="w-6 h-6 text-white" />
+            <div className="w-10 h-10 bg-[#00f0ff] rounded-lg flex items-center justify-center shadow-[0_0_15px_rgba(0,240,255,0.5)]">
+              <Shield className="w-6 h-6 text-[#0a0a0f]" />
             </div>
             <div>
-              <h1 className="text-lg font-semibold text-white">
-                SeedPGP <span className="text-teal-400">v{appVersion}</span>
+              <h1 className="text-lg font-semibold text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                SeedPGP <span className="text-[#ff006e]">v{appVersion}</span>
               </h1>
-              <p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
+              <p className="text-xs text-[#6ef3f7]">OpenPGP-secured BIP39 backup</p>
             </div>
           </div>
 
@@ -83,35 +83,36 @@ const Header: React.FC<HeaderProps> = ({
             {encryptedMnemonicCache && (
                 <button
                     onClick={handleLockAndClear}
-                    className="flex items-center gap-2 text-sm text-red-400 bg-slate-800/50 px-3 py-1.5 rounded-lg hover:bg-red-900/50 transition-colors"
+                    className="flex items-center gap-2 text-sm text-[#ff006e] bg-[#16213e] px-3 py-1.5 rounded-lg hover:bg-[#ff006e]/20 border-2 border-[#ff006e]/50 transition-all hover:shadow-[0_0_15px_rgba(255,0,110,0.5)]"
                 >
                     <Lock size={16} />
                     <span>Lock/Clear</span>
                 </button>
             )}
-            <button 
-              className={`px-4 py-2 rounded-lg ${activeTab === 'backup' ? 'bg-teal-500 hover:bg-teal-600' : 'bg-slate-700 hover:bg-slate-600'}`}
-              onClick={() => onRequestTabChange('backup')}
-            >
-              Backup
-            </button>
-            <button 
-              className={`px-4 py-2 rounded-lg ${activeTab === 'restore' ? 'bg-teal-500 hover:bg-teal-600' : 'bg-slate-700 hover:bg-slate-600'}`}
+                        <button
+                          className={`px-4 py-2 rounded-lg font-medium ${activeTab === 'backup' ? 'bg-[#1a1a2e] text-[#00f0ff] border-b-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)] relative' : 'bg-[#0a0a0f] text-[#9d84b7] hover:text-[#6ef3f7] hover:bg-[#16213e] transition-all'}`}
+                          style={activeTab === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+                          onClick={() => onRequestTabChange('backup')}
+                        >
+                          Backup
+                        </button>            <button 
+              className={`px-4 py-2 rounded-lg font-medium ${activeTab === 'restore' ? 'bg-[#1a1a2e] text-[#00f0ff] border-b-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)] relative' : 'bg-[#0a0a0f] text-[#9d84b7] hover:text-[#6ef3f7] hover:bg-[#16213e] transition-all'}`}
+              style={activeTab === 'restore' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
               onClick={() => onRequestTabChange('restore')}
             >
               Restore
             </button>
-            <button 
-              className={`px-4 py-2 rounded-lg ${activeTab === 'seedblender' ? 'bg-teal-500 hover:bg-teal-600' : 'bg-slate-700 hover:bg-slate-600'}`}
-              onClick={() => onRequestTabChange('seedblender')}
-            >
-              Seed Blender
-            </button>
-          </div>
+                        <button
+                          className={`px-4 py-2 rounded-lg font-medium ${activeTab === 'seedblender' ? 'bg-[#1a1a2e] text-[#00f0ff] border-b-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)] relative' : 'bg-[#0a0a0f] text-[#9d84b7] hover:text-[#6ef3f7] hover:bg-[#16213e] transition-all'}`}
+                          style={activeTab === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+                          onClick={() => onRequestTabChange('seedblender')}
+                        >
+                          Seed Blender
+                        </button>          </div>
         </div>
 
         {/* Mobile: Stack monitoring badges */}
-        <div className="md:hidden flex items-center gap-3 mt-3 pt-3 border-t border-slate-800">
+        <div className="md:hidden flex items-center gap-3 mt-3 pt-3 border-t border-[#00f0ff]/30">
           <SecurityBadge onClick={onOpenSecurityModal} />
           <div onClick={onOpenStorageModal} className="cursor-pointer">
             <StorageBadge localItems={localItems} sessionItems={sessionItems} />