diff --git a/bun.lock b/bun.lock
index f277329..b14a14c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -27,6 +27,7 @@
         "@types/qrcode-generator": "^1.0.6",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-basic-ssl": "^1.1.0",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.49",
@@ -263,6 +264,8 @@
 
     "@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
 
+    "@vitejs/plugin-basic-ssl": ["@vitejs/plugin-basic-ssl@1.2.0", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" } }, "sha512-mkQnxTkcldAzIsomk1UuLfAu9n+kpQ3JbHcpCp7d2Oo6ITtji8pHS3QToOWjhPFvNQSnhlkAjmGbhv2QvwO/7Q=="],
+
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
 
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
diff --git a/package.json b/package.json
index ab9de6e..7450983 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
diff --git a/src/App.tsx b/src/App.tsx
index fa1057b..a1e7c44 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -565,328 +565,326 @@ function App() {
 
 
   return (
-    <div className="min-h-screen bg-[#0a0a0f] bg-[radial-gradient(ellipse_at_top,_#1a1a2e_0%,_#0a0a0f_100%)] relative">
-      {/* Cyberpunk grid overlay */}
-      <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px] pointer-events-none" />
+    <div className="min-h-screen bg-black">
+      <div className="max-w-md mx-auto min-h-screen bg-[#0a0a0f] bg-[radial-gradient(ellipse_at_top,#1a1a2e_0%,#0a0a0f_100%)] relative">
+        {/* Cyberpunk grid overlay */}
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px] pointer-events-none" />
 
-      {/* Content wrapper */}
-      <div className="relative z-10">
-        <Header
-          onOpenSecurityModal={() => setShowSecurityModal(true)}
-          localItems={localItems}
-          sessionItems={sessionItems}
-          onOpenStorageModal={() => setShowStorageModal(true)}
-          events={clipboardEvents}
-          onOpenClipboardModal={() => setShowClipboardModal(true)}
-          activeTab={activeTab}
-          onRequestTabChange={handleRequestTabChange}
-          encryptedMnemonicCache={encryptedMnemonicCache}
-          handleLockAndClear={handleLockAndClear}
-          appVersion={__APP_VERSION__}
-          isLocked={isReadOnly}
-          onToggleLock={handleToggleLock}
-          onResetAll={handleResetAll}
-        />
-        <main className="max-w-7xl mx-auto px-6 py-4">
-          <div className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 shadow-[0_0_30px_rgba(0,240,255,0.3)] p-8">
-            <div className="p-6 md:p-8 space-y-6">
-              {/* Error Display */}
-              {error && (
-                <div
-                  className="p-4 bg-[#1a1a2e] border-2 border-[#ff006e] rounded-lg text-[#ff006e] text-sm shadow-[0_0_20px_rgba(255,0,110,0.3)] flex gap-3 items-start animate-in slide-in-from-top-2"
-                  style={{ textShadow: '0 0 5px rgba(255,0,110,0.5)' }}
-                >
-                  <AlertCircle className="shrink-0 mt-0.5" size={20} />
-                  <div>
-                    <p className="font-bold mb-1">Error</p>
-                    <p className="whitespace-pre-wrap">{error}</p>
-                  </div>
-                </div>
-              )}
+        {/* Content wrapper */}
+        <div className="relative z-10">
 
-              {/* Info Banner */}
-              {recipientFpr && activeTab === 'backup' && (
-                <div className="p-3 bg-[#16213e] border border-[#9d84b7] rounded-lg text-[#6ef3f7] text-xs shadow-[0_0_10px_rgba(157,132,183,0.3)] flex items-start gap-3 animate-in fade-in">
-                  <Info size={16} className="shrink-0 mt-0.5" />
-                  <div>
-                    <strong>Recipient Key:</strong> <code className="bg-[#16213e] border border-[#00f0ff]/50 px-1.5 py-0.5 rounded font-mono text-[#00f0ff]">{recipientFpr}</code>
-                  </div>
-                </div>
-              )}
-
-              {/* Main Content Grid */}
-              <div className="grid gap-6 md:grid-cols-3 md:items-start">
-                <div className="md:col-span-2 space-y-6">
-                  <div className={activeTab === 'create' ? 'block' : 'hidden'}>
-                    <div className="space-y-6">
-                      <div className="text-center space-y-4">
-                        <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#16213e] border border-[#00f0ff]/50 rounded-lg">
-                          <span className="text-sm font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
-                            Generate New Seed
-                          </span>
-                        </div>
-
-                        <p className="text-sm text-[#6ef3f7]">
-                          Create a fresh BIP39 mnemonic for a new wallet
-                        </p>
-                      </div>
-
-                      {/* Word count selector */}
-                      <div className="space-y-3">
-                        <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
-                          Seed Length
-                        </label>
-                        <div className="flex gap-4 justify-center">
-                          <button
-                            onClick={() => setSeedWordCount(12)}
-                            className={`px-8 py-3 rounded-lg font-medium transition-all ${seedWordCount === 12
-                              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                              : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
-                              }`}
-                            style={seedWordCount === 12 ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
-                          >
-                            12 Words
-                          </button>
-                          <button
-                            onClick={() => setSeedWordCount(24)}
-                            className={`px-8 py-3 rounded-lg font-medium transition-all ${seedWordCount === 24
-                              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                              : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
-                              }`}
-                            style={seedWordCount === 24 ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
-                          >
-                            24 Words
-                          </button>
-                        </div>
-                      </div>
-
-                      {/* Destination selector */}
-                      <div className="space-y-3">
-                        <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
-                          Send Generated Seed To
-                        </label>
-                        <div className="flex gap-4 justify-center">
-                          <label className={`flex-1 p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup'
-                            ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                            : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'
-                            }`}>
-                            <input
-                              type="radio"
-                              name="destination"
-                              value="backup"
-                              checked={seedDestination === 'backup'}
-                              onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')}
-                              className="hidden"
-                            />
-                            <div className="text-center space-y-1">
-                              <div className={`text-lg font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}
-                                style={seedDestination === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}>
-                                📦 Backup
-                              </div>
-                              <p className="text-xs text-[#6ef3f7]">
-                                Encrypt immediately
-                              </p>
-                            </div>
-                          </label>
-
-                          <label className={`flex-1 p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender'
-                            ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
-                            : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'
-                            }`}>
-                            <input
-                              type="radio"
-                              name="destination"
-                              value="seedblender"
-                              checked={seedDestination === 'seedblender'}
-                              onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')}
-                              className="hidden"
-                            />
-                            <div className="text-center space-y-1">
-                              <div className={`text-lg font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}
-                                style={seedDestination === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}>
-                                🎲 Seed Blender
-                              </div>
-                              <p className="text-xs text-[#6ef3f7]">
-                                Use for XOR blending
-                              </p>
-                            </div>
-                          </label>
-                        </div>
-                      </div>
-
-                      {/* Generate button */}
-                      <button
-                        onClick={generateNewSeed}
-                        disabled={loading || isReadOnly}
-                        className="w-full py-4 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
-                        style={{ textShadow: '0 0 10px rgba(255,255,255,0.8)' }}
-                      >
-                        {loading ? (
-                          <>
-                            <RefreshCw className="animate-spin" size={20} />
-                            Generating...
-                          </>
-                        ) : (
-                          <>
-                            <RefreshCw size={20} />
-                            Generate {seedWordCount}-Word Seed
-                          </>
-                        )}
-                      </button>
-
-                      {/* Display generated seed */}
-                      {generatedSeed && (
-                        <div className="p-6 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-lg shadow-[0_0_30px_rgba(57,255,20,0.4)] space-y-4 animate-in zoom-in-95">
-                          <div className="flex items-center justify-between">
-                            <span className="font-bold text-[#39ff14] flex items-center gap-2" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}>
-                              <CheckCircle2 size={20} /> Generated Successfully
-                            </span>
-                          </div>
-                          <div className="p-4 bg-[#16213e] rounded-lg border border-[#39ff14]/50">
-                            <p className="font-mono text-sm text-[#39ff14] break-words leading-relaxed" style={{ textShadow: '0 0 5px rgba(57,255,20,0.5)' }}>
-                              {generatedSeed}
-                            </p>
-                          </div>
-                          <p className="text-xs text-[#6ef3f7] text-center">
-                            ✨ Switching to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'} tab...
-                          </p>
-                        </div>
-                      )}
+          <Header
+            onOpenSecurityModal={() => setShowSecurityModal(true)}
+            localItems={localItems}
+            sessionItems={sessionItems}
+            onOpenStorageModal={() => setShowStorageModal(true)}
+            events={clipboardEvents}
+            onOpenClipboardModal={() => setShowClipboardModal(true)}
+            activeTab={activeTab}
+            onRequestTabChange={handleRequestTabChange}
+            encryptedMnemonicCache={encryptedMnemonicCache}
+            handleLockAndClear={handleLockAndClear}
+            appVersion={__APP_VERSION__}
+            isLocked={isReadOnly}
+            onToggleLock={handleToggleLock}
+            onResetAll={handleResetAll}
+          />
+          <main className="w-full px-4 py-3">
+            <div className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 shadow-[0_0_30px_rgba(0,240,255,0.3)] p-8">
+              <div className="p-6 md:p-8 space-y-6">
+                {/* Error Display */}
+                {error && (
+                  <div
+                    className="p-4 bg-[#1a1a2e] border-2 border-[#ff006e] rounded-lg text-[#ff006e] text-sm shadow-[0_0_20px_rgba(255,0,110,0.3)] flex gap-3 items-start animate-in slide-in-from-top-2"
+                    style={{ textShadow: '0 0 5px rgba(255,0,110,0.5)' }}
+                  >
+                    <AlertCircle className="shrink-0 mt-0.5" size={20} />
+                    <div>
+                      <p className="font-bold mb-1">Error</p>
+                      <p className="whitespace-pre-wrap">{error}</p>
                     </div>
                   </div>
-                  <div className={activeTab === 'backup' ? 'block' : 'hidden'}>
-                    <div className="space-y-2">
-                      <label className="text-sm font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>BIP39 Mnemonic</label>
-                      <textarea
-                        className={`w-full h-32 p-4 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-sm text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden ${isReadOnly ? 'blur-sm select-none' : ''
-                          }`}
-                        style={{
-                          backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
-                          textShadow: '0 0 5px rgba(0,240,255,0.5)'
-                        }}
+                )}
 
-                        data-sensitive="BIP39 Mnemonic"
-                        placeholder="Enter your 12 or 24 word seed phrase..."
-                        value={mnemonic}
-                        onChange={(e) => setMnemonic(e.target.value)}
+                {/* Info Banner */}
+                {recipientFpr && activeTab === 'backup' && (
+                  <div className="p-3 bg-[#16213e] border border-[#9d84b7] rounded-lg text-[#6ef3f7] text-xs shadow-[0_0_10px_rgba(157,132,183,0.3)] flex items-start gap-3 animate-in fade-in">
+                    <Info size={16} className="shrink-0 mt-0.5" />
+                    <div>
+                      <strong>Recipient Key:</strong> <code className="bg-[#16213e] border border-[#00f0ff]/50 px-1.5 py-0.5 rounded font-mono text-[#00f0ff]">{recipientFpr}</code>
+                    </div>
+                  </div>
+                )}
+
+                {/* Main Content Grid */}
+                <div className="space-y-6">
+                  <div className="space-y-6">
+                    <div className={activeTab === 'create' ? 'block' : 'hidden'}>
+                      <div className="space-y-6">
+                        <div className="space-y-4">
+                          <div className="w-full px-6 py-3 bg-gradient-to-r from-[#16213e] to-[#1a1a2e] border-l-4 border-[#00f0ff] rounded-r-lg">
+                            <h2 className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest text-left" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                              Generate New Seed
+                            </h2>
+                            <p className="text-xs text-[#6ef3f7] mt-1 text-left">Create a fresh BIP39 mnemonic for a new wallet</p>
+                          </div>
+                        </div>
+
+                        {/* Word count selector */}
+                        <div className="space-y-3">
+                          <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest block text-center" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                            Seed Length
+                          </label>
+                          <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
+                            <button
+                              onClick={() => setSeedWordCount(12)}
+                              className={`py-2.5 text-sm rounded-lg font-medium transition-all ${seedWordCount === 12
+                                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                                : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
+                                }`}
+                              style={seedWordCount === 12 ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+                            >
+                              12 Words
+                            </button>
+                            <button
+                              onClick={() => setSeedWordCount(24)}
+                              className={`py-2.5 text-sm rounded-lg font-medium transition-all ${seedWordCount === 24
+                                ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                                : 'bg-[#16213e] text-[#9d84b7] border-2 border-[#00f0ff]/30 hover:text-[#6ef3f7] hover:border-[#00f0ff]/50'
+                                }`}
+                              style={seedWordCount === 24 ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+                            >
+                              24 Words
+                            </button>
+                          </div>
+                        </div>
+
+                        {/* Destination selector */}
+                        <div className="space-y-3">
+                          <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest block text-center" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                            Send Generated Seed To
+                          </label>
+                          <div className="grid grid-cols-2 gap-3 max-w-sm mx-auto">
+                            <label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'backup'
+                              ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                              : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'
+                              }`}>
+                              <input
+                                type="radio"
+                                name="destination"
+                                value="backup"
+                                checked={seedDestination === 'backup'}
+                                onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')}
+                                className="hidden"
+                              />
+                              <div className="text-center space-y-1">
+                                <div className={`text-sm font-bold ${seedDestination === 'backup' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}
+                                  style={seedDestination === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}>
+                                  📦 Backup
+                                </div>
+                                <p className="text-[10px] text-[#6ef3f7]">
+                                  Encrypt immediately
+                                </p>
+                              </div>
+                            </label>
+
+                            <label className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${seedDestination === 'seedblender'
+                              ? 'bg-[#1a1a2e] border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+                              : 'bg-[#16213e] border-[#00f0ff]/30 hover:border-[#00f0ff]/50'
+                              }`}>
+                              <input
+                                type="radio"
+                                name="destination"
+                                value="seedblender"
+                                checked={seedDestination === 'seedblender'}
+                                onChange={(e) => setSeedDestination(e.target.value as 'backup' | 'seedblender')}
+                                className="hidden"
+                              />
+                              <div className="text-center space-y-1">
+                                <div className={`text-sm font-bold ${seedDestination === 'seedblender' ? 'text-[#00f0ff]' : 'text-[#9d84b7]'}`}
+                                  style={seedDestination === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}>
+                                  🎲 Seed Blender
+                                </div>
+                                <p className="text-[10px] text-[#6ef3f7]">
+                                  Use for XOR blending
+                                </p>
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+
+                        {/* Generate button */}
+                        <button
+                          onClick={generateNewSeed}
+                          disabled={loading || isReadOnly}
+                          className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
+                          style={{ textShadow: '0 0 10px rgba(255,255,255,0.8)' }}
+                        >
+                          {loading ? (
+                            <>
+                              <RefreshCw className="animate-spin" size={20} />
+                              Generating...
+                            </>
+                          ) : (
+                            <>
+                              <RefreshCw size={20} />
+                              Generate {seedWordCount}-Word Seed
+                            </>
+                          )}
+                        </button>
+
+                        {/* Display generated seed */}
+                        {generatedSeed && (
+                          <div className="p-6 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-lg shadow-[0_0_30px_rgba(57,255,20,0.4)] space-y-4 animate-in zoom-in-95">
+                            <div className="flex items-center justify-between">
+                              <span className="font-bold text-sm text-[#39ff14] flex items-center gap-2" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}>
+                                <CheckCircle2 size={20} /> Generated Successfully
+                              </span>
+                            </div>
+                            <div className="p-4 bg-[#16213e] rounded-lg border border-[#39ff14]/50">
+                              <p className="font-mono text-xs text-[#39ff14] break-words leading-relaxed" style={{ textShadow: '0 0 5px rgba(57,255,20,0.5)' }}>
+                                {generatedSeed}
+                              </p>
+                            </div>
+                            <p className="text-xs text-[#6ef3f7] text-center">
+                              ✨ Switching to {seedDestination === 'backup' ? 'Backup' : 'Seed Blender'} tab...
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={activeTab === 'backup' ? 'block' : 'hidden'}>
+                      <div className="space-y-2">
+                        <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>BIP39 Mnemonic</label>
+                        <textarea
+                          className={`w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden ${isReadOnly ? 'blur-sm select-none' : ''
+                            }`}
+                          style={{
+                            backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
+                            textShadow: '0 0 5px rgba(0,240,255,0.5)'
+                          }}
+
+                          data-sensitive="BIP39 Mnemonic"
+                          placeholder="Enter your 12 or 24 word seed phrase..."
+                          value={mnemonic}
+                          onChange={(e) => setMnemonic(e.target.value)}
+                          readOnly={isReadOnly}
+                        />
+                      </div>
+
+                      <PgpKeyInput
+                        label="PGP Public Key (Optional)"
+                        icon={FileKey}
+                        placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----&#10;&#10;Paste or drag & drop your public key..."
+                        value={publicKeyInput}
+                        onChange={setPublicKeyInput}
                         readOnly={isReadOnly}
                       />
                     </div>
-
-                    <PgpKeyInput
-                      label="PGP Public Key (Optional)"
-                      icon={FileKey}
-                      placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----&#10;&#10;Paste or drag & drop your public key..."
-                      value={publicKeyInput}
-                      onChange={setPublicKeyInput}
-                      readOnly={isReadOnly}
-                    />
-                  </div>
-                  <div className={activeTab === 'restore' ? 'block' : 'hidden'}>
-                    <div className="space-y-4">
-                      {/* File Upload Zone */}
-                      <div
-                        className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${isDragging ? 'border-[#ff006e] bg-[#16213e] shadow-[0_0_30px_rgba(255,0,110,0.5)]' : 'border-[#00f0ff]/50 bg-[#16213e]'
-                          }`}
-                        onDrop={handleDrop}
-                        onDragOver={handleDragOver}
-                        onDragLeave={handleDragLeave}
-                      >
-                        <div className="space-y-3">
-                          <FileKey size={48} className="mx-auto text-[#00f0ff]" />
-                          <p className="text-sm text-[#00f0ff] font-medium" style={{ textShadow: '0 0 10px rgba(0,240,255,0.5)' }}>
-                            Drag & drop QR image or text file
-                          </p>
-                          <p className="text-xs text-[#6ef3f7]">
-                            Supports: PNG/JPG (QR), TXT/ASC (PGP armor, hex, numeric)
-                          </p>
-                          <div className="flex gap-3 justify-center pt-2">
-                            <label className="px-4 py-2 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-sm font-medium text-[#00f0ff] hover:bg-[#1a1a2e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)] cursor-pointer transition-all">
-                              📁 Browse Files
-                              <input
-                                type="file"
-                                accept="image/*,.txt,.asc"
-                                className="hidden"
-                                onChange={(e) => e.target.files?.length && handleFileUpload(e.target.files[0])}
-                              />
-                            </label>
-                            <button
-                              onClick={() => setShowQRScanner(true)}
-                              className="px-4 py-2 bg-transparent text-[#00f0ff] rounded-lg font-medium border-2 border-[#00f0ff] hover:bg-[#00f0ff]/10 hover:shadow-[0_0_20px_rgba(0,240,255,0.5)] transition-all flex items-center gap-2"
-                            >
-                              📷 Scan QR
-                            </button>                        </div>
+                    <div className={activeTab === 'restore' ? 'block' : 'hidden'}>
+                      <div className="space-y-4">
+                        {/* File Upload Zone */}
+                        <div
+                          className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${isDragging
+                            ? 'border-[#ff006e] bg-[#1a1a2e] shadow-[0_0_30px_rgba(255,0,110,0.5)]'
+                            : 'border-[#00f0ff50] bg-[#16213e] hover:border-[#00f0ff] hover:bg-[#1a1a2e]'
+                            }`}
+                          onDrop={handleDrop}
+                          onDragOver={handleDragOver}
+                          onDragLeave={handleDragLeave}
+                        >
+                          <div className="space-y-2">
+                            <div className="text-4xl">📎</div>
+                            <p className="text-xs text-[#00f0ff] font-medium" style={{ textShadow: '0 0 10px rgba(0,240,255,0.5)' }}>
+                              Drag & drop file or click Browse
+                            </p>
+                            <p className="text-[10px] text-[#6ef3f7]">QR image, PGP armor, hex, numeric</p>
+                            <div className="flex gap-2 justify-center pt-1">
+                              <label className="px-3 py-1.5 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-xs font-medium text-[#00f0ff] hover:bg-[#1a1a2e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)] cursor-pointer transition-all flex items-center gap-2">
+                                📁 Browse
+                                <input
+                                  type="file"
+                                  accept="image/*,.txt,.asc"
+                                  className="hidden"
+                                  onChange={(e) => e.target.files?.length && handleFileUpload(e.target.files[0])}
+                                />
+                              </label>
+                              <button
+                                onClick={() => setShowQRScanner(true)}
+                                className="px-3 py-1.5 bg-transparent text-[#00f0ff] rounded-lg font-medium border-2 border-[#00f0ff] hover:bg-[#00f0ff]/10 hover:shadow-[0_0_20px_rgba(0,240,255,0.5)] transition-all flex items-center gap-2 text-xs"
+                              >
+                                📷 Scan QR
+                              </button>                        </div>
+                          </div>
                         </div>
+
+                        {/* Existing restore input textarea stays here */}
+                        <textarea
+                          className={`w-full p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden`}
+                          rows={6}
+                          placeholder="Or paste encrypted data here..."
+                          value={restoreInput}
+                          onChange={(e) => setRestoreInput(e.target.value)}
+                          style={{
+                            backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
+                            textShadow: '0 0 5px rgba(0,240,255,0.5)'
+                          }}
+                        />
+
+                        {/* Auto-detection hint */}
+                        {detectedMode && (
+                          <p className="text-xs text-[#00f0ff] flex items-center gap-1">
+                            <Info size={14} />
+                            Detected: {detectedMode.toUpperCase()} format
+                          </p>
+                        )}
                       </div>
 
-                      {/* Existing restore input textarea stays here */}
-                      <textarea
-                        className={`w-full p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden`}
-                        rows={6}
-                        placeholder="Or paste encrypted data here..."
-                        value={restoreInput}
-                        onChange={(e) => setRestoreInput(e.target.value)}
-                        style={{
-                          backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
-                          textShadow: '0 0 5px rgba(0,240,255,0.5)'
-                        }}
+                      <PgpKeyInput
+                        label="PGP Private Key (Optional)"
+                        icon={FileKey}
+                        data-sensitive="PGP Private Key"
+                        placeholder="-----BEGIN PGP PRIVATE KEY BLOCK-----&#10;&#10;Paste or drag & drop your private key..."
+                        value={privateKeyInput}
+                        onChange={setPrivateKeyInput}
+                        readOnly={isReadOnly}
                       />
 
-                      {/* Auto-detection hint */}
-                      {detectedMode && (
-                        <p className="text-xs text-[#00f0ff] flex items-center gap-1">
-                          <Info size={14} />
-                          Detected: {detectedMode.toUpperCase()} format
-                        </p>
+                      {privateKeyInput && (
+                        <div className="space-y-2">
+                          <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Private Key Passphrase</label>
+                          <div className="relative">
+                            <Lock className="absolute left-3 top-3 text-[#6ef3f7]" size={16} />
+                            <input
+                              type="password"
+                              data-sensitive="Message Password"
+                              className={`w-full pl-10 pr-4 py-2 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-xs placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${isReadOnly ? 'blur-sm select-none' : ''
+                                }`}
+                              style={{ textShadow: '0 0 5px rgba(0,240,255,0.5)' }}
+                              placeholder="Unlock private key..."
+                              value={privateKeyPassphrase}
+                              onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
+                              readOnly={isReadOnly}
+                            />
+                          </div>
+                        </div>
                       )}
                     </div>
-
-                    <PgpKeyInput
-                      label="PGP Private Key (Optional)"
-                      icon={FileKey}
-                      data-sensitive="PGP Private Key"
-                      placeholder="-----BEGIN PGP PRIVATE KEY BLOCK-----&#10;&#10;Paste or drag & drop your private key..."
-                      value={privateKeyInput}
-                      onChange={setPrivateKeyInput}
-                      readOnly={isReadOnly}
-                    />
-
-                    {privateKeyInput && (
-                      <div className="space-y-2">
-                        <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Private Key Passphrase</label>
-                        <div className="relative">
-                          <Lock className="absolute left-3 top-3 text-[#6ef3f7]" size={16} />
-                          <input
-                            type="password"
-                            data-sensitive="Message Password"
-                            className={`w-full pl-10 pr-4 py-2.5 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-sm placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${isReadOnly ? 'blur-sm select-none' : ''
-                              }`}
-                            style={{ textShadow: '0 0 5px rgba(0,240,255,0.5)' }}
-                            placeholder="Unlock private key..."
-                            value={privateKeyPassphrase}
-                            onChange={(e) => setPrivateKeyPassphrase(e.target.value)}
-                            readOnly={isReadOnly}
-                          />
-                        </div>
-                      </div>
-                    )}
+                    <div className={activeTab === 'seedblender' ? 'block' : 'hidden'}>
+                      <SeedBlender
+                        key={blenderResetKey}
+                        onDirtyStateChange={setIsBlenderDirty}
+                        setMnemonicForBackup={setMnemonic}
+                        requestTabChange={handleRequestTabChange}
+                        incomingSeed={seedForBlender}
+                        onSeedReceived={() => setSeedForBlender('')}
+                      />
+                    </div>
                   </div>
-                  <div className={activeTab === 'seedblender' ? 'block' : 'hidden'}>
-                    <SeedBlender
-                      key={blenderResetKey}
-                      onDirtyStateChange={setIsBlenderDirty}
-                      setMnemonicForBackup={setMnemonic}
-                      requestTabChange={handleRequestTabChange}
-                      incomingSeed={seedForBlender}
-                      onSeedReceived={() => setSeedForBlender('')}
-                    />
-                  </div>
-                </div>
 
-                {/* Security Panel */}
-                {activeTab !== 'seedblender' && activeTab !== 'create' && (
-                  <div className="space-y-2"> {/* Added space-y-2 wrapper */}
-                    <label className="text-sm font-semibold text-[#00f0ff] flex items-center gap-2" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                  {/* Security Panel */}
+                  {activeTab !== 'seedblender' && activeTab !== 'create' && (<div className="space-y-2"> {/* Added space-y-2 wrapper */}
+                    <label className="text-xs font-semibold text-[#00f0ff] flex items-center gap-2" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
                       <Lock size={14} /> SECURITY OPTIONS
                     </label>
 
@@ -895,12 +893,12 @@ function App() {
 
                       {/* Encryption Mode Toggle */}
                       <div className="space-y-2">
-                        <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Encryption Mode</label>
+                        <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Encryption Mode</label>
                         <select
                           value={encryptionMode}
                           onChange={(e) => setEncryptionMode(e.target.value as 'pgp' | 'krux' | 'seedqr')}
                           disabled={isReadOnly}
-                          className="w-full px-3 py-2.5 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-sm focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgPHBhdGggZD0iTTEgMUw2IDZMMTEgMSIgc3Ryb2tlPSIjMDBmMGZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:12px] bg-[position:right_12px_center] bg-no-repeat pr-10"
+                          className="w-full px-3 py-2 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-xs focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgPHBhdGggZD0iTTEgMUw2IDZMMTEgMSIgc3Ryb2tlPSIjMDBmMGZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:12px] bg-[position:right_12px_center] bg-no-repeat pr-10"
                           style={{ textShadow: '0 0 5px rgba(0,240,255,0.5)' }}
                         >
                           <option value="pgp">PGP (Asymmetric)</option>
@@ -917,12 +915,12 @@ function App() {
                       {/* SeedQR Format Toggle */}
                       {encryptionMode === 'seedqr' && (
                         <div className="space-y-2 pt-2">
-                          <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>SeedQR Format</label>
+                          <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>SeedQR Format</label>
                           <select
                             value={seedQrFormat}
                             onChange={(e) => setSeedQrFormat(e.target.value as 'standard' | 'compact')}
                             disabled={isReadOnly}
-                            className="w-full px-3 py-2.5 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-sm focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgPHBhdGggZD0iTTEgMUw2IDZMMTEgMSIgc3Ryb2tlPSIjMDBmMGZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:12px] bg-[position:right_12px_center] bg-no-repeat pr-10"
+                            className="w-full px-3 py-2 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-xs focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgPHBhdGggZD0iTTEgMUw2IDZMMTEgMSIgc3Ryb2tlPSIjMDBmMGZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:12px] bg-[position:right_12px_center] bg-no-repeat pr-10"
                             style={{ textShadow: '0 0 5px rgba(0,240,255,0.5)' }}
                           >
                             <option value="standard">Standard (Numeric)</option>
@@ -946,12 +944,12 @@ function App() {
                       )}
 
                       <div className="space-y-2">
-                        <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>MESSAGE PASSWORD</label>
+                        <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>MESSAGE PASSWORD</label>
                         <div className="relative">
                           <Lock className="absolute left-3 top-3 text-[#6ef3f7]" size={16} />
                           <input
                             type="password"
-                            className={`w-full pl-10 pr-4 py-2.5 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-sm placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${isReadOnly ? 'blur-sm select-none' : ''
+                            className={`w-full pl-10 pr-4 py-2 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-[#00f0ff] text-xs placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${isReadOnly ? 'blur-sm select-none' : ''
                               }`}
                             style={{ textShadow: '0 0 5px rgba(0,240,255,0.5)' }}
                             placeholder={encryptionMode === 'krux' ? "Required for Krux encryption" : "Optional password..."}
@@ -1001,7 +999,7 @@ function App() {
                       <button
                         onClick={handleBackup}
                         disabled={!mnemonic || loading || isReadOnly}
-                        className="w-full py-4 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
+                        className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
                         style={{ textShadow: '0 0 10px rgba(255,255,255,0.8)' }}
                       >
                         {loading ? (
@@ -1015,7 +1013,7 @@ function App() {
                       <button
                         onClick={handleRestore}
                         disabled={!restoreInput || loading || isReadOnly}
-                        className="w-full py-4 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
+                        className="w-full py-3 bg-gradient-to-r from-[#ff006e] to-[#ff4d8f] text-white text-sm rounded-xl font-bold uppercase tracking-wider flex items-center justify-center gap-2 hover:shadow-[0_0_30px_rgba(255,0,110,0.8)] active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed border border-[#ff006e]"
                         style={{ textShadow: '0 0 10px rgba(255,255,255,0.8)' }}
                       >
                         {loading ? (
@@ -1027,188 +1025,189 @@ function App() {
                       </button>
                     )}
                   </div>
-                )}             </div>
+                  )}             </div>
 
-              {/* QR Output */}
-              {qrPayload && activeTab === 'backup' && (
-                <div className="pt-6 border-t border-[#00f0ff]/20 space-y-6 animate-in fade-in slide-in-from-bottom-4">
-                  <div className={isReadOnly ? 'blur-lg' : ''}>
-                    <QrDisplay value={qrPayload} />
-                  </div>
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between gap-3">
-                      <label className="text-xs font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
-                        Raw payload (copy for backup)
-                      </label>
-
-                      <button
-                        type="button"
-                        onClick={() => copyToClipboard(qrPayload)}
-                        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#16213e] border-2 border-[#00f0ff]/50 text-[#00f0ff] text-xs font-semibold hover:bg-[#1a1a2e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)] transition-all"
-                      >
-                        {copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />}
-                        {copied ? "Copied" : "Copy"}
-                      </button>
+                {/* QR Output */}
+                {qrPayload && activeTab === 'backup' && (
+                  <div className="pt-6 border-t border-[#00f0ff]/20 space-y-6 animate-in fade-in slide-in-from-bottom-4">
+                    <div className={isReadOnly ? 'blur-lg' : ''}>
+                      <QrDisplay value={qrPayload} />
                     </div>
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between gap-3">
+                        <label className="text-[10px] font-bold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+                          Raw payload (copy for backup)
+                        </label>
 
-                    <textarea
-                      readOnly
-                      value={typeof qrPayload === 'string' ? qrPayload : Array.from(qrPayload).map(b => b.toString(16).padStart(2, '0')).join('')}
-                      onFocus={(e) => e.currentTarget.select()}
-                      className="w-full h-28 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden"
-                      style={{
-                        backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
-                        textShadow: '0 0 5px rgba(0,240,255,0.5)'
-                      }}
-                    />
-                    <p className="text-[11px] text-[#6ef3f7]">
-                      Tip: click the box to select all, or use Copy.
-                    </p>
-                  </div>
-                </div>
-              )}
+                        <button
+                          type="button"
+                          onClick={() => copyToClipboard(qrPayload)}
+                          className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[#16213e] border-2 border-[#00f0ff]/50 text-[#00f0ff] text-xs font-medium hover:bg-[#1a1a2e] hover:shadow-[0_0_15px_rgba(0,240,255,0.3)] transition-all"
+                        >
+                          {copied ? <CheckCircle2 size={14} /> : <QrCode size={14} />}
+                          {copied ? "Copied" : "Copy"}
+                        </button>
+                      </div>
 
-              {/* Restored Mnemonic */}
-              {decryptedRestoredMnemonic && activeTab === 'restore' && (
-                <div className="pt-6 border-t border-[#00f0ff]/20 animate-in zoom-in-95">
-                  <div className="p-6 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-lg shadow-[0_0_30px_rgba(57,255,20,0.4)] relative overflow-hidden">
-                    <div className="flex items-center justify-between mb-4">
-                      <span className="font-bold text-[#39ff14] flex items-center gap-2 text-lg" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}>
-                        <CheckCircle2 size={22} /> Mnemonic Recovered
-                      </span>
-                      <button
-                        onClick={() => setDecryptedRestoredMnemonic(null)}
-                        className="p-2.5 hover:bg-[#16213e] rounded-xl transition-all text-[#39ff14] hover:shadow-[0_0_15px_rgba(57,255,20,0.5)] flex items-center gap-2"
-                      >
-                        <EyeOff size={22} /> Hide
-                      </button>
-                    </div>
-
-                    <div className="p-6 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_20px_rgba(57,255,20,0.3)]">
-                      <p className={`font-mono text-center text-lg break-words text-[#39ff14] selection:bg-[#39ff14] selection:text-[#0a0a0f] ${isReadOnly ? 'blur-md select-none' : ''
-                        }`}
-                        style={{ textShadow: '0 0 8px rgba(57,255,20,0.8)' }}>
-                        {decryptedRestoredMnemonic}
+                      <textarea
+                        readOnly
+                        value={typeof qrPayload === 'string' ? qrPayload : Array.from(qrPayload).map(b => b.toString(16).padStart(2, '0')).join('')}
+                        onFocus={(e) => e.currentTarget.select()}
+                        className="w-full h-28 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-[10px] text-[#00f0ff] placeholder-[#9d84b7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all relative overflow-hidden"
+                        style={{
+                          backgroundImage: 'repeating-linear-gradient(0deg, rgba(0,240,255,0.03) 0px, transparent 1px, transparent 2px, rgba(0,240,255,0.03) 3px)',
+                          textShadow: '0 0 5px rgba(0,240,255,0.5)'
+                        }}
+                      />
+                      <p className="text-[11px] text-[#6ef3f7]">
+                        Tip: click the box to select all, or use Copy.
                       </p>
                     </div>
                   </div>
-                </div>
-              )}
-            </div>
-          </div> {/* Close new cyberpunk main container */}
-        </main>
-        <Footer
-          appVersion={__APP_VERSION__}
-          buildHash={__BUILD_HASH__}
-          buildTimestamp={__BUILD_TIMESTAMP__}
-        />
+                )}
 
-        {/* QR Scanner Modal */}
-        {showQRScanner && (
-          <QRScanner
-            onScanSuccess={handleRestoreScanSuccess}
-            onClose={handleRestoreClose}
-            onError={handleRestoreError}
+                {/* Restored Mnemonic */}
+                {decryptedRestoredMnemonic && activeTab === 'restore' && (
+                  <div className="pt-6 border-t border-[#00f0ff]/20 animate-in zoom-in-95">
+                    <div className="p-6 bg-[#0a0a0f] border-2 border-[#39ff14] rounded-lg shadow-[0_0_30px_rgba(57,255,20,0.4)] relative overflow-hidden">
+                      <div className="flex items-center justify-between mb-3">
+                        <span className="font-bold text-[#39ff14] flex items-center gap-2 text-lg" style={{ textShadow: '0 0 10px rgba(57,255,20,0.8)' }}>
+                          <CheckCircle2 size={22} /> Mnemonic Recovered
+                        </span>
+                        <button
+                          onClick={() => setDecryptedRestoredMnemonic(null)}
+                          className="p-2.5 hover:bg-[#16213e] rounded-xl transition-all text-[#39ff14] hover:shadow-[0_0_15px_rgba(57,255,20,0.5)] flex items-center gap-2"
+                        >
+                          <EyeOff size={22} /> Hide
+                        </button>
+                      </div>
+
+                      <div className="p-4 bg-[#0a0a0f] rounded-xl border-2 border-[#39ff14] shadow-[0_0_20px_rgba(57,255,20,0.3)]">
+                        <p className={`font-mono text-center text-base break-words text-[#39ff14] selection:bg-[#39ff14] selection:text-[#0a0a0f] ${isReadOnly ? 'blur-md select-none' : ''
+                          }`}
+                          style={{ textShadow: '0 0 8px rgba(57,255,20,0.8)' }}>
+                          {decryptedRestoredMnemonic}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div> {/* Close new cyberpunk main container */}
+          </main >
+          <Footer
+            appVersion={__APP_VERSION__}
+            buildHash={__BUILD_HASH__}
+            buildTimestamp={__BUILD_TIMESTAMP__}
           />
-        )}
 
-        {/* Security Modal */}
-        {showSecurityModal && (
-          <div
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-            onClick={() => setShowSecurityModal(false)}
-          >
+          {/* QR Scanner Modal */}
+          {showQRScanner && (
+            <QRScanner
+              onScanSuccess={handleRestoreScanSuccess}
+              onClose={handleRestoreClose}
+              onError={handleRestoreError}
+            />
+          )}
+
+          {/* Security Modal */}
+          {showSecurityModal && (
             <div
-              className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
-              onClick={(e) => e.stopPropagation()}
+              className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+              onClick={() => setShowSecurityModal(false)}
             >
-              <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Security Limitations</h3>
-              <div className="text-sm text-[#6ef3f7] space-y-2">
-                <SecurityWarnings />
+              <div
+                className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Security Limitations</h3>
+                <div className="text-sm text-[#6ef3f7] space-y-2">
+                  <SecurityWarnings />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* Storage Modal */}
-        {showStorageModal && (
-          <div
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-            onClick={() => setShowStorageModal(false)}
-          >
+          {/* Storage Modal */}
+          {showStorageModal && (
             <div
-              className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
-              onClick={(e) => e.stopPropagation()}
+              className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+              onClick={() => setShowStorageModal(false)}
             >
-              <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Storage Details</h3>
-              <div className="text-sm text-[#6ef3f7] space-y-2">
-                <StorageDetails localItems={localItems} sessionItems={sessionItems} />
+              <div
+                className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Storage Details</h3>
+                <div className="text-sm text-[#6ef3f7] space-y-2">
+                  <StorageDetails localItems={localItems} sessionItems={sessionItems} />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* Clipboard Modal */}
-        {showClipboardModal && (
-          <div
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-            onClick={() => setShowClipboardModal(false)}
-          >
+          {/* Clipboard Modal */}
+          {showClipboardModal && (
             <div
-              className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
-              onClick={(e) => e.stopPropagation()}
+              className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+              onClick={() => setShowClipboardModal(false)}
             >
-              <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Clipboard Activity</h3>
-              <div className="text-sm text-[#6ef3f7] space-y-2">
-                <ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
+              <div
+                className="bg-[#1a1a2e] rounded-xl border-2 border-[#00f0ff]/30 p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(0,240,255,0.3)]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <h3 className="text-lg font-semibold text-[#00f0ff] mb-4">Clipboard Activity</h3>
+                <div className="text-sm text-[#6ef3f7] space-y-2">
+                  <ClipboardDetails events={clipboardEvents} onClear={clearClipboard} />
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {/* Lock Confirmation Modal */}
-        {showLockConfirm && (
-          <div
-            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
-            onClick={() => setShowLockConfirm(false)}
-          >
+          {/* Lock Confirmation Modal */}
+          {showLockConfirm && (
             <div
-              className="bg-[#1a1a2e] rounded-xl border-2 border-[#ff006e] p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(255,0,110,0.3)]"
-              onClick={(e) => e.stopPropagation()}
+              className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
+              onClick={() => setShowLockConfirm(false)}
             >
-              <h3 className="text-lg font-semibold text-[#ff006e] mb-4 flex items-center gap-2">
-                <Lock className="w-5 h-5 text-[#ff006e]" />
-                Lock Sensitive Data?
-              </h3>
-              <div className="text-sm text-[#6ef3f7] space-y-3 mb-6">
-                <p>This will:</p>
-                <ul className="list-disc list-inside space-y-1 text-[#9d84b7]">
-                  <li>Blur all sensitive data (mnemonics, keys, passwords)</li>
-                  <li>Disable all inputs</li>
-                  <li>Prevent clipboard operations</li>
-                </ul>
-                <p className="text-xs text-[#6ef3f7] mt-2">
-                  Use this when showing the app to others or stepping away from your device.
-                </p>
-              </div>
-              <div className="flex gap-3">
-                <button
-                  className="flex-1 py-2 bg-[#16213e] hover:bg-[#1a1a2e] text-[#6ef3f7] rounded-lg transition-all border-2 border-[#00f0ff]/30 hover:border-[#00f0ff]/50"
-                  onClick={() => setShowLockConfirm(false)}
-                >
-                  Cancel
-                </button>
-                <button
-                  className="flex-1 py-2 bg-[#ff006e] hover:bg-[#ff4d8f] text-white font-semibold rounded-lg transition-all hover:shadow-[0_0_15px_rgba(255,0,110,0.5)]"
-                  onClick={confirmLock}
-                >
-                  Lock Data
-                </button>
+              <div
+                className="bg-[#1a1a2e] rounded-xl border-2 border-[#ff006e] p-6 max-w-md w-full mx-4 shadow-[0_0_30px_rgba(255,0,110,0.3)]"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <h3 className="text-lg font-semibold text-[#ff006e] mb-4 flex items-center gap-2">
+                  <Lock className="w-5 h-5 text-[#ff006e]" />
+                  Lock Sensitive Data?
+                </h3>
+                <div className="text-sm text-[#6ef3f7] space-y-3 mb-6">
+                  <p>This will:</p>
+                  <ul className="list-disc list-inside space-y-1 text-[#9d84b7]">
+                    <li>Blur all sensitive data (mnemonics, keys, passwords)</li>
+                    <li>Disable all inputs</li>
+                    <li>Prevent clipboard operations</li>
+                  </ul>
+                  <p className="text-xs text-[#6ef3f7] mt-2">
+                    Use this when showing the app to others or stepping away from your device.
+                  </p>
+                </div>
+                <div className="flex gap-3">
+                  <button
+                    className="flex-1 py-2 bg-[#16213e] hover:bg-[#1a1a2e] text-[#6ef3f7] rounded-lg transition-all border-2 border-[#00f0ff]/30 hover:border-[#00f0ff]/50"
+                    onClick={() => setShowLockConfirm(false)}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="flex-1 py-2 bg-[#ff006e] hover:bg-[#ff4d8f] text-white font-semibold rounded-lg transition-all hover:shadow-[0_0_15px_rgba(255,0,110,0.5)]"
+                    onClick={confirmLock}
+                  >
+                    Lock Data
+                  </button>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-      </div> {/* Close relative z-10 content wrapper */}
+          )}
+        </div> {/* Close relative z-10 content wrapper */}
+      </div>
     </div> /* Close root min-h-screen */
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 618fd5a..b7069a9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Shield, Lock, RefreshCw } from 'lucide-react';
+import { Shield, RefreshCw, Lock, Unlock } from 'lucide-react';
 import SecurityBadge from './badges/SecurityBadge';
 import StorageBadge from './badges/StorageBadge';
 import ClipboardBadge from './badges/ClipboardBadge';
@@ -52,24 +52,28 @@ const Header: React.FC<HeaderProps> = ({
   onResetAll
 }) => {
   return (
-    <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">
+    <header className="sticky top-0 z-50 bg-[#0a0a0f] border-b border-[#00f0ff30] backdrop-blur-sm">
+      <div className="w-full px-4 py-3 space-y-3">
+
+        {/* ROW 1: Logo + App Info */}
         <div className="flex items-center justify-between">
-          {/* Left: Logo & Title */}
           <div className="flex items-center gap-3">
             <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-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
-                SeedPGP <span className="text-[#ff006e]">v{appVersion}</span>
+                SeedPGP <span className="text-[#ff006e]">{appVersion}</span>
               </h1>
               <p className="text-xs text-[#6ef3f7]">OpenPGP-secured BIP39 backup</p>
             </div>
           </div>
+        </div>
 
-          {/* Center: Monitoring Badges */}
-          <div className="hidden md:flex items-center gap-3">
+        {/* ROW 2: Monitoring Badges + Action Buttons */}
+        <div className="flex items-center justify-between gap-2 pb-2 border-b border-[#00f0ff20]">
+          {/* Left: Badges */}
+          <div className="flex items-center gap-2">
             <SecurityBadge onClick={onOpenSecurityModal} />
             <div onClick={onOpenStorageModal} className="cursor-pointer">
               <StorageBadge localItems={localItems} sessionItems={sessionItems} />
@@ -81,70 +85,89 @@ const Header: React.FC<HeaderProps> = ({
           </div>
 
           {/* Right: Action Buttons */}
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
             {encryptedMnemonicCache && (
               <button
-                onClick={handleLockAndClear}
-                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)]"
+                onClick={onToggleLock}
+                className="px-2 py-1.5 text-base bg-[#16213e] border border-[#00f0ff] text-[#00f0ff] rounded-lg font-medium hover:bg-[#00f0ff20] transition-all"
+                title={isLocked ? "Show sensitive data" : "Hide sensitive data"}
               >
-                <Lock size={16} />
-                <span>Lock/Clear</span>
+                {isLocked ? '🔓' : '🙈'}
               </button>
             )}
-            {/* Reset All button - left side */}
+            <button
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText('');
+                } catch { }
+                localStorage.clear();
+                sessionStorage.clear();
+              }}
+              className="px-2 py-1.5 text-base bg-[#16213e] border border-[#00f0ff] text-[#00f0ff] rounded-lg font-medium hover:bg-[#00f0ff20] transition-all"
+              title="Clear clipboard and storage"
+            >
+              📋
+            </button>
+
             <button
               onClick={onResetAll}
-              className="px-4 py-2 bg-[#16213e] border-2 border-[#ff006e] text-[#ff006e] rounded-lg font-medium hover:bg-[#ff006e] hover:text-white transition-all flex items-center gap-2"
+              className="px-2 py-1.5 text-xs bg-[#16213e] border border-[#ff006e] text-[#ff006e] rounded-lg font-medium hover:bg-[#ff006e20] transition-all whitespace-nowrap flex items-center gap-1"
             >
-              <RefreshCw size={16} />
-              Reset All
+              <RefreshCw size={12} />
+              Reset
             </button>
-            {encryptedMnemonicCache && (
-              <div className="h-8 w-px bg-[#00f0ff]/30 mx-2"></div>
-            )}
-            <button
-              className={`px-4 py-2 rounded-lg font-medium ${activeTab === 'create' ? '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 === 'create' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
-              onClick={() => onRequestTabChange('create')}
-            >
-              Create
-            </button>
-            <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 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>
         </div>
 
-        {/* Mobile: Stack monitoring badges */}
-        <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} />
-          </div>
-          <div onClick={onOpenClipboardModal} className="cursor-pointer">
-            <ClipboardBadge events={events} onOpenClipboardModal={onOpenClipboardModal} />
-          </div>
-          <EditLockBadge isLocked={isLocked} onToggle={onToggleLock} />
+        {/* ROW 3: Navigation Tabs */}
+        <div className="grid grid-cols-4 gap-2">
+          <button
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'create'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              }`}
+            style={activeTab === 'create' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+            onClick={() => onRequestTabChange('create')}
+          >
+            Create
+          </button>
+
+          <button
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'backup'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              }`}
+            style={activeTab === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+            onClick={() => onRequestTabChange('backup')}
+          >
+            Backup
+          </button>
+
+          <button
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'restore'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              }`}
+            style={activeTab === 'restore' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+            onClick={() => onRequestTabChange('restore')}
+          >
+            Restore
+          </button>
+
+          <button
+            className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'seedblender'
+              ? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
+              : 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
+              }`}
+            style={activeTab === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
+            onClick={() => onRequestTabChange('seedblender')}
+          >
+            Blender
+          </button>
         </div>
       </div>
     </header>
   );
 };
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/PgpKeyInput.tsx b/src/components/PgpKeyInput.tsx
index e33b355..ddd72a0 100644
--- a/src/components/PgpKeyInput.tsx
+++ b/src/components/PgpKeyInput.tsx
@@ -52,7 +52,7 @@ export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
 
     return (
         <div className="space-y-2">
-            <label className="text-sm font-semibold text-[#00f0ff] flex items-center justify-between" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
+            <label className="text-[12px] font-bold text-[#00f0ff] uppercase tracking-widest flex items-center justify-between" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>
                 <span className="flex items-center gap-2">
                     {Icon && <Icon size={14} />} {label}
                 </span>
@@ -69,9 +69,8 @@ export const PgpKeyInput: React.FC<PgpKeyInputProps> = ({
                 onDrop={handleDrop}
             >
                 <textarea
-                    className={`w-full h-40 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-xl text-xs font-mono text-[#00f0ff] placeholder-[#9d84b7] transition-colors resize-none focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] ${isDragging && !readOnly ? 'border-[#ff006e] bg-[#16213e]' : 'border-[#00f0ff]/50'} ${
-                        readOnly ? 'blur-sm select-none' : ''
-                      }`}
+                    className={`w-full h-40 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-xl text-xs font-mono text-[#00f0ff] placeholder-[#9d84b7] transition-colors resize-none focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] ${isDragging && !readOnly ? 'border-[#ff006e] bg-[#16213e]' : 'border-[#00f0ff]/50'} ${readOnly ? 'blur-sm select-none' : ''
+                        }`}
                     placeholder={placeholder}
                     value={value}
                     onChange={(e) => onChange(e.target.value)}
diff --git a/src/components/SeedBlender.tsx b/src/components/SeedBlender.tsx
index 6c8dce5..e0e6c88 100644
--- a/src/components/SeedBlender.tsx
+++ b/src/components/SeedBlender.tsx
@@ -319,17 +319,32 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                                         {entry.error && <p className="text-xs text-[#ff006e]">{entry.error}</p>}
                                     </div>
                                 ) : (
-                                    <div className="space-y-1">
-                                        <div className="flex flex-col sm:flex-row items-start gap-2">
-                                            <div className="relative w-full">
-                                                <textarea value={entry.rawInput} onChange={(e) => updateEntry(index, { rawInput: e.target.value, decryptedMnemonic: e.target.value, isValid: null, error: null })} placeholder={`Mnemonic #${index + 1} (12 or 24 words)`} className={`w-full h-28 sm:h-24 p-3 pr-10 bg-[#16213e] border-2 rounded-lg text-sm font-mono text-[#00f0ff] placeholder-[#9d84b7] ${getBorderColor(entry.isValid)}`} />
-                                                {entry.isValid === true && <CheckCircle2 className="absolute top-3 right-3 text-[#39ff14]" />}
-                                                {entry.isValid === false && <AlertTriangle className="absolute top-3 right-3 text-[#ff006e]" />}
-                                            </div>
-                                            <div className="flex items-center gap-2 shrink-0">
-                                                <button onClick={() => handleScan(index)} className="p-3 h-full bg-[#ff006e]/20 text-[#ff006e] hover:bg-[#ff006e]/50 hover:text-white rounded-md border-2 border-[#ff006e]/30"><QrCode size={20} /></button>
-                                                <button onClick={() => handleRemoveEntry(entry.id)} className="p-3 h-full bg-[#ff006e]/20 text-[#ff006e] hover:bg-[#ff006e]/50 hover:text-white rounded-md border-2 border-[#ff006e]/30"><X size={20} /></button>
-                                            </div>
+                                    <div className="space-y-2">
+                                        {/* Row 1: Textarea only */}
+                                        <textarea
+                                            value={entry.rawInput}
+                                            onChange={(e) => updateEntry(index, { rawInput: e.target.value, decryptedMnemonic: e.target.value, isValid: null, error: null })}
+                                            placeholder={`Mnemonic #${index + 1} (12 or 24 words)`}
+                                            className={`w-full h-24 p-3 bg-[#0a0a0f] border-2 rounded-lg font-mono text-xs placeholder:text-[10px] placeholder:text-[#6ef3f7] focus:outline-none focus:border-[#ff006e] focus:shadow-[0_0_20px_rgba(255,0,110,0.5)] transition-all ${getBorderColor(entry.isValid)}`}
+                                        />
+                                        {/* Row 2: QR button (left) and X button (right) */}
+                                        <div className="flex items-center justify-between">
+                                            <button
+                                                onClick={() => handleScan(index)}
+                                                className="flex items-center gap-1.5 px-3 py-1.5 bg-[#16213e] border border-[#00f0ff] text-[#00f0ff] text-xs rounded-lg hover:bg-[#00f0ff20] transition-all"
+                                                title="Scan QR code"
+                                            >
+                                                <QrCode size={14} />
+                                                <span>Scan QR</span>
+                                            </button>
+
+                                            <button
+                                                onClick={() => handleRemoveEntry(entry.id)}
+                                                className="p-1.5 bg-[#16213e] border border-[#ff006e] text-[#ff006e] rounded-lg hover:bg-[#ff006e20] transition-all"
+                                                title="Remove mnemonic"
+                                            >
+                                                <X size={14} />
+                                            </button>
                                         </div>
                                         {entry.error && <p className="text-xs text-[#ff006e] px-1">{entry.error}</p>}
                                     </div>
@@ -348,7 +363,7 @@ export function SeedBlender({ onDirtyStateChange, setMnemonicForBackup, requestT
                 <div className="p-6 bg-[#16213e] rounded-xl border-2 border-[#00f0ff]/30">
                     <h3 className="font-semibold text-lg mb-4 text-[#00f0ff]" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Step 3: Input Dice Rolls</h3>
                     <div className="space-y-4">
-                        <textarea value={diceRolls} onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))} placeholder="Enter 99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg text-lg font-mono text-[#00f0ff] placeholder-[#9d84b7]" />
+                        <textarea value={diceRolls} onChange={(e) => setDiceRolls(e.target.value.replace(/[^1-6]/g, ''))} placeholder="99+ dice rolls (e.g., 16345...)" className="w-full h-32 p-3 bg-[#16213e] border-2 border-[#00f0ff]/50 rounded-lg font-mono text-xs placeholder:text-[10px] placeholder:text-[#6ef3f7]" />
                         {dicePatternWarning && (<div className="p-3 bg-[#ff006e]/10 border-2 border-[#ff006e]/30 text-[#ff006e] rounded-lg text-sm flex gap-3"><AlertTriangle /><p><span className="font-bold">Warning:</span> {dicePatternWarning}</p></div>)}
                         {diceStats && diceStats.length > 0 && (<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Rolls</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.length}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Entropy (bits)</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.estimatedEntropyBits.toFixed(1)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Mean</p><p className="text-lg font-bold text-[#00f0ff]">{diceStats.mean.toFixed(2)}</p></div><div className="p-3 bg-[#1a1a2e] rounded-lg border-2 border-[#00f0ff]/30"><p className="text-xs text-[#6ef3f7]">Chi-Square</p><p className={`text-lg font-bold ${diceStats.chiSquare > 11.07 ? 'text-[#ff006e]' : 'text-[#00f0ff]'}`}>{diceStats.chiSquare.toFixed(2)}</p></div></div>)}
                         {diceOnlyMnemonic && (<div className="space-y-1 pt-2"><label className="text-xs font-semibold text-[#00f0ff] uppercase tracking-widest" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>Dice-Only Preview Mnemonic</label><p data-sensitive="Dice-Only Preview Mnemonic" className="p-3 bg-[#1a1a2e] rounded-md font-mono text-sm text-[#00f0ff] break-words border-2 border-[#00f0ff]/30">{diceOnlyMnemonic}</p></div>)}
diff --git a/src/index.css b/src/index.css
index 4bf1c5d..a1b1f70 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,24 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Mobile-first: constrain to phone width on all devices */
+#root {
+  max-width: 448px;
+  /* max-w-md = 28rem = 448px */
+  margin: 0 auto;
+  background: black;
+}
+
+body {
+  background: black;
+  overflow-x: hidden;
+}
+
+/* Ensure all content respects mobile width */
+* {
+  max-width: 100%;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/lib/seedblend.ts b/src/lib/seedblend.ts
index 590653d..966c96a 100644
--- a/src/lib/seedblend.ts
+++ b/src/lib/seedblend.ts
@@ -26,7 +26,6 @@ import wordlistTxt from '../bip39_wordlist.txt?raw';
 
 // --- Isomorphic Crypto Setup ---
 
-let cryptoPromise: Promise<SubtleCrypto>;
 /**
  * Asynchronously gets the appropriate SubtleCrypto interface, using a singleton
  * pattern to ensure the module is loaded only once.
diff --git a/vite.config.ts b/vite.config.ts
index 7c90067..266a627 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 import wasm from 'vite-plugin-wasm'
 import topLevelAwait from 'vite-plugin-top-level-await'
 import { execSync } from 'child_process'
@@ -16,6 +17,7 @@ export default defineConfig({
   plugins: [
     wasm(),
     topLevelAwait(),
+    basicSsl(),
     react(),
     {
       name: 'html-transform',
@@ -24,6 +26,12 @@ export default defineConfig({
       }
     }
   ],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    strictPort: true,
+    https: true,
+  },
   resolve: {
     alias: {
       buffer: 'buffer',