fix: normalize font-weight for Length/Count labels in Passwords; refactor QR scanner composables; style fixes

src/components/tools/Passwords.vue

@@ -190,7 +190,7 @@ const generatePasswords = () => {
 
 .input-wrapper label {
   color: var(--text-color);
-  font-weight: 600;
+  font-weight: 400;
   margin-bottom: 0.2rem;
 }
 

src/components/tools/QrScanner.vue

@@ -391,6 +391,10 @@ const isUrl = (string) => {
   gap: 0;
 }
 
+:global(:root[data-theme="light"] .scanner-content.is-fullscreen) {
+  background: #fff;
+}
+
 .camera-wrapper {
   width: 100%;
   max-width: 500px;
@@ -405,6 +409,10 @@ const isUrl = (string) => {
   transition: all 0.3s ease;
 }
 
+:global(:root[data-theme="light"] .camera-wrapper) {
+  background: #f1f5f9;
+}
+
 .camera-wrapper.clickable {
   cursor: pointer;
 }
@@ -529,11 +537,15 @@ const isUrl = (string) => {
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   border: none;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid var(--glass-border);
   display: flex;
   flex-direction: column;
 }
 
+:global(:root[data-theme="light"] .scanner-content.is-fullscreen .results-section) {
+  background: rgba(255, 255, 255, 0.75);
+}
+
 .code-value {
   color: var(--primary-accent);
   font-family: monospace;

src/components/tools/UrlCleaner.vue

@@ -126,12 +126,12 @@ onUnmounted(() => {
             @keydown.enter.prevent="handleClean"
             rows="1"
           ></textarea>
-          <button class="btn-neon" @click="handleClean">
-            Clean
-          </button>
         </div>
 
         <div class="watch-toggle">
+          <button class="btn-neon" @click="handleClean">
+            Clean
+          </button>
           <button
             class="btn-neon toggle-btn"
             :class="{ 'active': isWatchEnabled && isExtensionReady }"
@@ -259,7 +259,8 @@ onUnmounted(() => {
 
 .watch-toggle {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  gap: 0.75rem;
 }
 
 .toggle-btn {

src/composables/useQrDetection.js

@@ -1,26 +1,24 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 
 export function useQrDetection(videoRef, overlayCanvasRef) {
-    const barcodeDetector = ref(null)
+  let barcodeDetector = null  // must be plain variable, NOT a Vue ref (Proxy breaks native private fields)
   const isDetecting = ref(false)
   const error = ref('')
   let scanRafId = null
 
   // Function to initialize detector
   const initDetector = async () => {
-        if (!barcodeDetector.value) {
+    if (!barcodeDetector) {
       if ('BarcodeDetector' in window) {
         try {
-                    // Formats are optional, but specifying qr_code might be faster
           const formats = await window.BarcodeDetector.getSupportedFormats()
           if (formats.includes('qr_code')) {
-                        barcodeDetector.value = new window.BarcodeDetector({ formats: ['qr_code'] })
+            barcodeDetector = new window.BarcodeDetector({ formats: ['qr_code'] })
           } else {
-                        barcodeDetector.value = new window.BarcodeDetector()
+            barcodeDetector = new window.BarcodeDetector()
           }
         } catch (e) {
-                    // Fallback
-                    barcodeDetector.value = new window.BarcodeDetector()
+          barcodeDetector = new window.BarcodeDetector()
         }
       } else {
         error.value = 'Barcode Detection API not supported on this device/browser.'
@@ -117,7 +115,7 @@ export function useQrDetection(videoRef, overlayCanvasRef) {
     error.value = ''
     try {
       await initDetector()
-            if (!barcodeDetector.value) {
+      if (!barcodeDetector) {
         if (!error.value) error.value = 'Barcode Detector failed to initialize'
         return
       }
@@ -125,13 +123,15 @@ export function useQrDetection(videoRef, overlayCanvasRef) {
       isDetecting.value = true
 
       const detectLoop = async () => {
-                if (!isDetecting.value || !videoRef.value || videoRef.value.paused || videoRef.value.ended) {
+        const video = videoRef.value
+        if (!isDetecting.value) return
+        if (!video || video.readyState < 2) {
           scanRafId = requestAnimationFrame(detectLoop)
           return
         }
 
         try {
-                    const codes = await barcodeDetector.value.detect(videoRef.value)
+          const codes = await barcodeDetector.detect(video)
           paintDetections(codes)
           if (codes.length > 0 && onDetectCallback) {
             onDetectCallback(codes)

src/style.css

@@ -44,6 +44,7 @@
   --ripple-color: rgba(255, 255, 255, 0.3);
   --nav-item-weight: 400;
   --list-hover-bg: rgba(255, 255, 255, 0.05);
+  --list-border: rgba(255, 255, 255, 0.12);
   --header-bg: rgba(0, 0, 0, 0.6);
 
   color: var(--text-color);
@@ -61,7 +62,7 @@
 :root[data-theme="light"] {
   --bg-gradient: radial-gradient(circle at center, #f8fafc 0%, #e2e8f0 100%);
   --glass-bg: rgba(255, 255, 255, 0.85);
-  --glass-border: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(15, 23, 42, 0.12);
   --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
   --text-color: #0f172a;
   --text-strong: #020617;
@@ -88,7 +89,8 @@
   --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
   --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
   --ripple-color: rgba(0, 0, 0, 0.1);
-  --list-hover-bg: rgba(255, 255, 255, 0.5);
+  --list-hover-bg: rgba(15, 23, 42, 0.05);
+  --list-border: rgba(15, 23, 42, 0.08);
   --header-bg: rgba(255, 255, 255, 0.6);
 }
 
@@ -580,6 +582,14 @@ textarea:focus,
   color: var(--text-strong);
 }
 
+.history-actions,
+.results-actions,
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 .history-list,
 .codes-list {
   flex: 1;
@@ -593,7 +603,7 @@ textarea:focus,
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  border-bottom: 1px solid var(--glass-border);
+  border-bottom: 1px solid var(--list-border);
   transition: background 0.2s;
 }