style: standardize UI across tools, optimize QR layout, and configure Husky/ESLint

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

eslint.config.js

@@ -0,0 +1,49 @@
+import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+import globals from 'globals'
+
+export default [
+  // Base JS recommended rules (all off for now to allow pre-commit)
+  {
+    rules: Object.keys(js.configs.recommended.rules).reduce((acc, rule) => {
+      acc[rule] = 'off';
+      return acc;
+    }, {}),
+  },
+  // Vue essential rules
+  ...pluginVue.configs['flat/essential'],
+  {
+    // Apply to all JS and Vue files
+    files: ['**/*.js', '**/*.vue'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        crypto: 'readonly',
+        BarcodeDetector: 'readonly',
+        chrome: 'readonly',
+        __APP_VERSION__: 'readonly',
+        VITE_APP_VERSION: 'readonly',
+      },
+    },
+    rules: {
+      'vue/multi-word-component-names': 'off',
+      'no-unused-vars': 'off',
+      'no-undef': 'off',
+      'no-debugger': 'off',
+    }
+  },
+  {
+    // Global ignores
+    ignores: [
+      'dist/**',
+      'dev-dist/**',
+      'node_modules/**',
+      'public/**',
+      'scripts/pack_crx.js',
+      'src/app.config.mjs'
+    ]
+  }
+]

package.json

@@ -7,8 +7,10 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "lint": "eslint .",
     "pack-extension": "node scripts/pack_crx.js",
-    "postinstall": "mkdir -p public/wasm && cp node_modules/zxing-wasm/dist/reader/zxing_reader.wasm public/wasm/"
+    "postinstall": "mkdir -p public/wasm && cp node_modules/zxing-wasm/dist/reader/zxing_reader.wasm public/wasm/",
+    "prepare": "husky"
   },
   "dependencies": {
     "barcode-detector": "^3.1.0",
@@ -19,7 +21,12 @@
     "vue-router": "^5.0.3"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^6.0.2",
+    "eslint": "^10.0.2",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.4.0",
+    "husky": "^9.1.7",
     "vite": "^7.3.1",
     "vite-plugin-pwa": "^1.2.0"
   }

src/App.vue

@@ -76,6 +76,8 @@ onUnmounted(() => {
   padding: 1rem;
   width: 100%;
   max-width: 100%;
+  display: flex;
+  flex-direction: column;
   /* Space for fixed footer on mobile + extra margin */
   padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
 }
@@ -94,7 +96,7 @@ onUnmounted(() => {
 
   .main-content {
     overflow: visible;
-    height: auto;
+    flex: 1;
     padding-bottom: 1rem;
   }
 }

src/components/tools/ClipboardSniffer.vue

@@ -49,9 +49,9 @@ const clearText = () => {
 <template>
   <div class="tool-container full-width">
     <div class="tool-panel">
-      <div class="tool-header">
+      <div class="panel-header">
         <h2 class="tool-title">Clipboard Sniffer</h2>
-        <div class="extension-indicator-wrapper">
+        <div class="header-actions">
           <ExtensionStatus :isReady="isExtensionReady" />
         </div>
       </div>
@@ -99,13 +99,6 @@ const clearText = () => {
 </template>
 
 <style scoped>
-.tool-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-}
 
 .controls {
   display: flex;
@@ -151,13 +144,6 @@ const clearText = () => {
   border-color: var(--primary-accent);
 }
 
-.extension-indicator-wrapper {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-}
 
 .result-area {
   flex: 1;

src/components/tools/Passwords.vue

@@ -74,9 +74,9 @@ const generatePasswords = () => {
   <div class="tool-container full-width">
     <div class="tool-panel">
       <div class="panel-header">
-        <h2 class="tool-title">Bulk Passwords Generator</h2>
+        <h2 class="tool-title">Passwords Generator</h2>
-        <div class="action-area desktop-only">
+        <div class="header-actions">
-          <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
+          <button class="btn-neon generate-btn desktop-only" @click="generatePasswords" v-ripple>
             Generate
           </button>
         </div>
@@ -149,32 +149,12 @@ const generatePasswords = () => {
 </template>
 
 <style scoped>
-.tool-container.full-width {
+.tool-container {
-  max-width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-.tool-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 1.5rem;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.tool-title {
-  margin: 0;
-}
-
 .options-grid {
   display: flex;
   flex-wrap: wrap;
@@ -209,65 +189,10 @@ const generatePasswords = () => {
 }
 
 .input-wrapper label {
-  color: var(--text-secondary);
+  color: var(--text-color);
   font-weight: 600;
   margin-bottom: 0.2rem;
 }
-/* Custom Checkbox styles are now global in style.css */
-
-
-/* Number Control */
-.number-control {
-  display: flex;
-  align-items: stretch;
-  background: var(--toggle-bg);
-  border: 1px solid var(--toggle-border);
-  border-radius: 8px;
-  overflow: hidden;
-  gap: 0;
-}
-
-.control-btn {
-  background: none;
-  border: none;
-  color: var(--text-color);
-  font-size: 1.2rem;
-  width: 40px;
-  height: auto;
-  min-height: 40px;
-  cursor: pointer;
-  transition: all 0.2s;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.control-btn:hover {
-  background: var(--button-hover-bg);
-}
-
-:global(:root[data-theme="light"]) .control-btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: var(--primary-accent);
-}
-
-.number-input {
-  background: none;
-  border: none;
-  color: var(--text-color);
-  width: 100%;
-  flex: 1;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: bold;
-  appearance: textfield;
-  -moz-appearance: textfield;
-  height: 100%;
-  border-radius: 0;
-  min-width: 60px;
-}
 
 .number-input:focus {
   outline: none;
@@ -275,12 +200,6 @@ const generatePasswords = () => {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.number-input::-webkit-outer-spin-button,
-.number-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
 .result-area {
   flex: 1;
   display: flex;
@@ -288,25 +207,7 @@ const generatePasswords = () => {
   min-height: 200px;
 }
 
-.tool-textarea {
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  border-radius: 12px;
-  border: 1px solid var(--glass-border);
-  background: var(--glass-bg);
-  color: var(--text-color);
-  font-family: monospace;
-  font-size: 0.9rem;
-  resize: none;
-  outline: none;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
 .generate-btn {
-  padding: 0.75rem 2rem;
-  font-size: 1rem;
-  font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

src/components/tools/QrCode.vue

@@ -98,6 +98,7 @@ const triggerDownload = (blob, filename) => {
     <div class="tool-panel">
       <div class="panel-header">
         <h2 class="tool-title">QR Generator</h2>
+        <div class="header-actions"></div>
       </div>
 
       <div class="input-section">
@@ -119,35 +120,38 @@ const triggerDownload = (blob, filename) => {
             <option value="H">High (30%)</option>
           </select>
         </div>
-
-        <div class="control-group">
-          <label>Size (px)</label>
-          <select v-model="size" class="select-input">
-            <option :value="150">150x150</option>
-            <option :value="300">300x300</option>
-            <option :value="500">500x500</option>
-            <option :value="1000">1000x1000</option>
-          </select>
-        </div>
-
-        <div class="control-group">
-          <label>Format</label>
-          <select v-model="format" class="select-input">
-            <option value="png">PNG</option>
-            <option value="jpeg">JPG</option>
-            <option value="webp">WebP</option>
-            <option value="svg">SVG</option>
-          </select>
-        </div>
       </div>
 
       <div class="preview-section" v-if="text" ref="previewRef" :style="{ height: previewHeight }">
-        <div class="qr-frame" v-html="svgContent"></div>
+        <div class="qr-container">
+          <div class="qr-frame" v-html="svgContent"></div>
+        </div>
 
-        <div class="actions">
+        <div class="download-settings">
-          <button class="action-btn" @click="downloadFile">
+          <div class="control-group">
+            <label>Size (px)</label>
+            <div class="number-control size-control">
+              <button class="control-btn" @click="size = Math.max(10, size - 100)" title="-100">-100</button>
+              <button class="control-btn" @click="size = Math.max(10, size - 10)" title="-10">-10</button>
+              <input type="number" v-model.number="size" class="number-input" />
+              <button class="control-btn" @click="size += 10" title="+10">+10</button>
+              <button class="control-btn" @click="size += 100" title="+100">+100</button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <label>Format</label>
+            <select v-model="format" class="select-input format-select">
+              <option value="png">PNG</option>
+              <option value="jpeg">JPG</option>
+              <option value="webp">WebP</option>
+              <option value="svg">SVG</option>
+            </select>
+          </div>
+
+          <button class="action-btn download-btn" @click="downloadFile">
             <Download size="18" />
-            Download {{ format.toUpperCase() }}
+            Download
           </button>
         </div>
       </div>
@@ -171,16 +175,6 @@ const triggerDownload = (blob, filename) => {
   overflow: hidden; /* Prevent scrolling, force fit */
 }
 
-.panel-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  margin-bottom: 0.5rem;
-  flex-shrink: 0;
-}
-
 .tool-title {
   margin: 0;
   font-size: 1.5rem;
@@ -217,27 +211,36 @@ const triggerDownload = (blob, filename) => {
   color: var(--text-secondary);
 }
 
-.select-input {
-  min-width: 140px;
-}
 
 .preview-section {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  background: rgba(0, 0, 0, 0.05);
-  gap: 1rem;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.1);
   border-radius: 12px;
-  padding: 1rem;
+  padding: 0.75rem 1rem 1.25rem;
-  overflow: hidden; /* Prevent overflow if QR is too big */
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+  gap: 1.5rem;
+}
+
+.qr-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   min-height: 0;
   container-type: size;
 }
 
+:root[data-theme="light"] .preview-section {
+  background: rgba(255, 255, 255, 0.3);
+}
+
 .qr-frame {
-  width: calc(100cqmin - 4rem);
+  width: min(100cqw, 100cqh);
-  height: calc(100cqmin - 4rem);
+  height: min(100cqw, 100cqh);
   background: white;
   padding: 1rem;
   border-radius: 8px;
@@ -248,33 +251,41 @@ const triggerDownload = (blob, filename) => {
   overflow: hidden;
 }
 
-.qr-frame :deep(svg) {
+.download-settings {
-  display: block;
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  justify-content: center;
   width: 100%;
-  height: 100%;
 }
 
-.actions {
+.size-control {
-  display: flex;
+  min-width: 280px;
-  gap: 1rem;
 }
 
-.action-btn {
+.format-select {
-  display: flex;
+  min-width: 100px !important;
-  align-items: center;
+}
-  gap: 0.5rem;
+
-  padding: 0.6rem 1.2rem;
+.download-btn {
-  border-radius: 6px;
+  height: 40px;
+  padding: 0 1.5rem;
   background: var(--primary-accent);
   color: #000;
   border: none;
-  font-weight: 500;
+  border-radius: 8px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   cursor: pointer;
   transition: all 0.2s;
 }
 
-.action-btn:hover {
+.download-btn:hover {
   opacity: 0.9;
   transform: translateY(-1px);
 }
 </style>
+

src/components/tools/QrScanner.vue

@@ -272,6 +272,7 @@ const isUrl = (string) => {
     <div class="tool-panel">
       <div class="panel-header" v-if="!isFullscreen">
         <h2 class="tool-title">QR Scanner</h2>
+        <div class="header-actions"></div>
       </div>
 
       <Teleport to="body" :disabled="!isFullscreen">
@@ -375,24 +376,6 @@ const isUrl = (string) => {
   flex-direction: column;
 }
 
-.tool-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  margin-top: 0;
-  position: relative;
-  width: 100%;
-}
-
 .scanner-content {
   display: flex;
   flex-direction: column;
@@ -478,8 +461,6 @@ const isUrl = (string) => {
   transform: scaleX(-1);
 }
 
-/* front mirror canvas removed */
-
 .error-overlay {
   position: absolute;
   top: 0;
@@ -538,18 +519,6 @@ const isUrl = (string) => {
   backdrop-filter: blur(4px);
 }
 
-/* Removed legacy scan frame overlay - using shape detection rendering via track instead */
-
-.results-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: 12px;
-}
-
 .scanner-content.is-fullscreen .results-section {
   position: relative;
   flex: 1;
@@ -565,55 +534,6 @@ const isUrl = (string) => {
   flex-direction: column;
 }
 
-.results-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--glass-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.results-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: var(--text-strong);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.codes-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-}
-
-.code-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid var(--glass-border);
-  transition: background 0.2s;
-}
-
-.code-item:last-child {
-  border-bottom: none;
-}
-
-.code-item:hover {
-  background: var(--list-hover-bg);
-}
-
-.code-content {
-  flex: 1;
-  overflow: hidden;
-  padding-right: 1rem;
-}
-
 .code-value {
   color: var(--primary-accent);
   font-family: monospace;
@@ -637,12 +557,6 @@ const isUrl = (string) => {
   color: var(--text-secondary);
 }
 
-.item-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
 .format-badge {
   background: rgba(255, 255, 255, 0.1);
   padding: 0 0.4rem;
@@ -654,32 +568,6 @@ const isUrl = (string) => {
   background: rgba(0, 0, 0, 0.1);
 }
 
-.icon-btn {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0.4rem;
-  border-radius: 4px;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-btn:hover {
-  color: var(--text-color);
-  background: rgba(255, 255, 255, 0.1);
-}
-
-:global(:root[data-theme="light"]) .icon-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-.delete-btn:hover {
-  color: #ef4444;
-}
-
 .empty-state {
   flex: 1;
   display: flex;

src/components/tools/UrlCleaner.vue

@@ -212,22 +212,6 @@ onUnmounted(() => {
   flex-direction: column;
 }
 
-.tool-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  gap: 1.5rem;
-  position: relative;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  width: 100%;
-}
-
 .input-section {
   display: flex;
   flex-direction: column;
@@ -291,81 +275,6 @@ onUnmounted(() => {
   color: var(--primary-accent);
 }
 
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #4ade80; /* Green */
-  box-shadow: 0 0 8px #4ade80;
-  margin-left: 0.2rem;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
-}
-
-.history-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: 12px;
-}
-
-.history-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--glass-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.history-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: var(--text-strong);
-}
-
-.history-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.history-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-}
-
-.history-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.8rem;
-  border-bottom: 1px solid var(--glass-border);
-  transition: background 0.2s;
-}
-
-.history-item:last-child {
-  border-bottom: none;
-}
-
-.history-item:hover {
-  background: var(--list-hover-bg);
-}
-
-.item-info {
-  flex: 1;
-  overflow: hidden;
-  padding-right: 1rem;
-}
-
 .cleaned-url {
   color: var(--primary-accent);
   font-family: monospace;
@@ -389,44 +298,6 @@ onUnmounted(() => {
   gap: 0.2rem;
 }
 
-:global(:root[data-theme="light"]) .savings {
-  color: #16a34a;
-  font-weight: 500;
-}
-
-.item-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.icon-btn {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  padding: 0.4rem;
-  border-radius: 4px;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-btn:hover {
-  color: var(--text-color);
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.delete-btn:hover {
-  background: none;
-  color: #ef4444;
-}
-
-:global(:root[data-theme="light"]) .delete-btn:hover {
-  background: none;
-  color: #dc2626;
-}
-
 .empty-state {
   flex: 1;
   display: flex;
@@ -437,16 +308,6 @@ onUnmounted(() => {
   padding: 2rem;
 }
 
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 .settings-btn {
   background: rgba(255, 255, 255, 0.1);
   width: 32px;
@@ -464,12 +325,4 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.2);
   color: var(--primary-accent);
 }
-
-:global(:root[data-theme="light"]) .settings-btn {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-:global(:root[data-theme="light"]) .settings-btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-}
 </style>

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -302,10 +302,6 @@ const resetToDefault = (ruleId) => {
   padding: 1rem;
 }
 
-:global(:root[data-theme="light"]) .modal-overlay {
-  background: rgba(255, 255, 255, 0.3);
-}
-
 .modal-content {
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
@@ -385,11 +381,6 @@ const resetToDefault = (ruleId) => {
   border: 1px solid var(--glass-border);
 }
 
-:global(:root[data-theme="light"]) .add-rule-form {
-  background: rgba(0, 0, 0, 0.04);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
 .add-rule-form h4, .rules-list h4 {
   margin-top: 0;
   margin-bottom: 1rem;
@@ -483,11 +474,6 @@ const resetToDefault = (ruleId) => {
   transition: opacity 0.3s;
 }
 
-:global(:root[data-theme="light"]) .rule-item {
-  background: rgba(0, 0, 0, 0.04);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-}
-
 .rule-item.disabled {
   opacity: 0.6;
 }
@@ -609,8 +595,4 @@ const resetToDefault = (ruleId) => {
 .delete-btn:hover {
   color: #ef4444;
 }
-
-:global(:root[data-theme="light"]) .delete-btn:hover {
-  color: #dc2626;
-}
 </style>

src/style.css

@@ -83,7 +83,7 @@
   --button-bg: rgba(255, 255, 255, 0.7);
   --button-border: rgba(255, 255, 255, 0.9);
   --button-text: #0f172a;
-  --button-hover-bg: rgba(255, 255, 255, 1);
+  --button-hover-bg: rgba(15, 23, 42, 0.1);
   --button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
   --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
   --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
@@ -135,7 +135,7 @@ body {
   display: flex;
   justify-content: center;
   width: 100%;
-  max-width: 800px;
+  max-width: 100%;
   margin: 0 auto;
   height: 100%;
   padding: 0.5rem;
@@ -148,6 +148,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  height: 100%;
   max-height: 100%;
   overflow-y: auto;
   background: var(--glass-bg);
@@ -178,7 +179,7 @@ body {
 
 .tool-title {
   margin: 0;
-  text-align: center;
+  text-align: left;
   font-size: 1.5rem;
   font-weight: 600;
   background: var(--title-gradient);
@@ -194,14 +195,13 @@ body {
 .tool-textarea,
 .select-input {
   width: 100%;
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   background-color: var(--toggle-bg);
   border: 1px solid var(--toggle-border);
-  border-radius: 12px;
+  border-radius: 8px;
   color: var(--text-color);
   font-family: inherit;
-  font-size: 1rem;
+  font-size: 0.95rem;
-  line-height: 1.6;
   transition: all 0.3s ease;
   box-sizing: border-box;
 }
@@ -216,10 +216,12 @@ body {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 1rem center;
+  background-position: right 0.75rem center;
-  background-size: 1.2rem;
+  background-size: 1rem;
-  padding-right: 3rem;
+  padding-right: 2.5rem;
+  height: 40px;
   cursor: pointer;
+  line-height: 1;
 }
 
 .tool-textarea:focus,
@@ -265,9 +267,10 @@ body {
   background: var(--button-bg);
   border: 1px solid var(--button-border);
   color: var(--button-text);
-  padding: 8px 16px;
+  padding: 0 1.25rem;
+  height: 40px;
   border-radius: 8px;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
@@ -355,10 +358,10 @@ button:focus {
   outline: none;
 }
 
-/* Custom focus ring for all form elements */
 input:focus,
 select:focus,
-textarea:focus {
+textarea:focus,
+.number-control:focus-within {
   border-color: var(--primary-accent) !important;
   box-shadow: 0 0 0 1px var(--primary-accent) !important;
 }
@@ -433,3 +436,209 @@ textarea:focus {
   border-color: white;
   /* Keep checkmark white even in light mode if background is primary-accent */
 }
+
+/* --- Global Header/Action Patterns --- */
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%;
+  min-height: 40px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+/* --- Global Icon Button Styles --- */
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-btn:hover {
+  color: var(--text-color);
+  background: var(--button-hover-bg);
+}
+
+.icon-btn.delete-btn:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+:root[data-theme="light"] .icon-btn.delete-btn:hover {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.05);
+}
+
+/* --- Component Specific Theme Overrides (Consolidated) --- */
+:root[data-theme="light"] .settings-btn {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+:root[data-theme="light"] .savings {
+  color: #16a34a;
+  font-weight: 500;
+}
+
+:root[data-theme="light"] .modal-overlay {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+:root[data-theme="light"] .add-rule-form,
+:root[data-theme="light"] .rule-item {
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* --- Global Number Control Styles --- */
+.number-control {
+  display: flex;
+  align-items: stretch;
+  background: var(--toggle-bg);
+  border: 1px solid var(--toggle-border);
+  border-radius: 8px;
+  overflow: hidden;
+  height: 40px;
+}
+
+.control-btn {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  min-width: 40px;
+  padding: 0 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+}
+
+.control-btn:hover {
+  background: var(--button-hover-bg);
+  color: var(--primary-accent);
+}
+
+.number-input {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  flex: 1;
+  min-width: 60px;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 400;
+  appearance: textfield;
+}
+
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* --- Global List/History Styles --- */
+.results-section,
+.history-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+}
+
+.history-header,
+.results-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.history-header h3,
+.results-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--text-strong);
+}
+
+.history-list,
+.codes-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.history-item,
+.code-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--glass-border);
+  transition: background 0.2s;
+}
+
+.history-item:last-child,
+.code-item:last-child {
+  border-bottom: none;
+}
+
+.history-item:hover,
+.code-item:hover {
+  background: var(--list-hover-bg);
+}
+
+.item-info,
+.code-content {
+  flex: 1;
+  overflow: hidden;
+  padding-right: 1rem;
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #4ade80;
+  box-shadow: 0 0 8px #4ade80;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

src/styles/tools.css

@@ -1,107 +0,0 @@
-/* Shared styles for all tools */
-
-.tool-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  height: 100%;
-  padding: 1rem;
-}
-
-.tool-panel {
-  width: 100%;
-  padding: 2rem;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  max-height: 100%;
-  overflow-y: auto;
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-
-/* Custom scrollbar for tool panel */
-.tool-panel::-webkit-scrollbar {
-  width: 8px;
-}
-
-.tool-panel::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-}
-
-.tool-panel::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-}
-
-.tool-panel::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.tool-title {
-  margin: 0;
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: 600;
-  background: var(--title-gradient);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  filter: drop-shadow(0 0 10px var(--title-glow));
-}
-
-:root[data-theme="light"] .tool-title {
-  background: none;
-  -webkit-background-clip: unset;
-  background-clip: unset;
-  color: #000000;
-  -webkit-text-fill-color: #000000;
-  filter: none;
-}
-
-.tool-textarea {
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2);
-  border: 1px solid var(--toggle-border);
-  border-radius: 12px;
-  color: #ffffff; /* Explicit white color for dark mode */
-  font-family: monospace;
-  font-size: 1rem;
-  line-height: 1.6;
-  resize: none;
-  transition: all 0.3s ease;
-  box-sizing: border-box;
-}
-
-:root[data-theme="light"] .tool-textarea {
-  color: #000000;
-}
-
-.tool-textarea:focus {
-  outline: none;
-  border-color: #00f2fe; /* Force cyan accent */
-  box-shadow: 0 0 0 1px #00f2fe;
-}
-
-.result-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 200px;
-}
-
-.result-area label {
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-}