feat: Implement UI polish and layout fixes

src/App.tsx

@@ -333,6 +333,7 @@ function App() {
         setActiveTab={setActiveTab}
         encryptedMnemonicCache={encryptedMnemonicCache}
         handleLockAndClear={handleLockAndClear}
+        appVersion={__APP_VERSION__}
       />
       <main className="max-w-7xl mx-auto px-6 py-4">
         <div className="p-6 md:p-8 space-y-6">
@@ -358,7 +359,7 @@ function App() {
              )}
  
              {/* Main Content Grid */}
-             <div className="grid gap-6 md:grid-cols-3">
+             <div className="grid gap-6 md:grid-cols-3 md:items-start">
                <div className="md:col-span-2 space-y-6">
                  {activeTab === 'backup' ? (
                    <>
@@ -441,11 +442,13 @@ function App() {
                </div>
  
                {/* Security Panel */}
-               <div className="space-y-6">
+               <div className="space-y-2"> {/* Added space-y-2 wrapper */}
+                 <label className="text-sm font-semibold text-slate-700 flex items-center gap-2">
+                   <Lock size={14} /> SECURITY OPTIONS
+                 </label>
+                 
                  <div className="p-5 bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border-2 border-slate-200 shadow-inner space-y-4">
-                   <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2">
-                     <Lock size={14} /> Security Options
-                   </h3>
+                   {/* Removed h3 */}
  
                    <div className="space-y-2">
                      <label className="text-xs font-bold text-slate-500 uppercase tracking-wider">Message Password</label>

src/components/Header.tsx

@@ -28,6 +28,7 @@ interface HeaderProps {
   setActiveTab: (tab: 'backup' | 'restore') => void;
   encryptedMnemonicCache: any;
   handleLockAndClear: () => void;
+  appVersion: string;
 }
 
 const Header: React.FC<HeaderProps> = ({ 
@@ -40,7 +41,8 @@ const Header: React.FC<HeaderProps> = ({
     activeTab,
     setActiveTab,
     encryptedMnemonicCache,
-    handleLockAndClear 
+    handleLockAndClear,
+    appVersion
 }) => {
   return (
     <header className="sticky top-0 z-50 bg-slate-900 border-b border-slate-800 backdrop-blur-sm">
@@ -53,7 +55,7 @@ const Header: React.FC<HeaderProps> = ({
             </div>
             <div>
               <h1 className="text-lg font-semibold text-white">
-                SeedPGP <span className="text-blue-400">v1.4.2</span>
+                SeedPGP <span className="text-blue-400">v{appVersion}</span>
               </h1>
               <p className="text-xs text-slate-400">OpenPGP-secured BIP39 backup</p>
             </div>