feat(ui): refine input states, add tokenized params & ripple effects

- Refactored Url Cleaner Exception 'Keep params' into a tokenized input array (pills/badges)
- Standardized UI contrast: ensured proper label highlighting in light/dark themes
- Expanded v-ripple interaction effect to buttons across all remaining tools, header, and modals
- Moved base .detail-tag styles into global CSS variables
- Web worker generation for QR codes (WIP)

src/style.css

@@ -47,12 +47,6 @@
   --list-border: rgba(255, 255, 255, 0.12);
   --header-bg: rgba(0, 0, 0, 0.6);
 
-  color: var(--text-color);
-  background-color: #242424;
-  /* Fallback */
-  background: var(--bg-gradient);
-  background-attachment: fixed;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -60,9 +54,9 @@
 }
 
 :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(15, 23, 42, 0.12);
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #ddd 100%);
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-border: rgba(15, 23, 42, 0.2);
   --glass-shadow: 0 8px 32px 0 rgba(30, 41, 59, 0.15);
   --text-color: #0f172a;
   --text-strong: #020617;
@@ -102,6 +96,12 @@ body {
   overflow-x: hidden;
   user-select: none;
   -webkit-user-select: none;
+
+  color: var(--text-color);
+  background-color: var(--bg-gradient);
+  /* fallback but works if variable contains simple color */
+  background: var(--bg-gradient);
+  background-attachment: fixed;
 }
 
 .selectable {
@@ -143,6 +143,10 @@ body {
   padding: 0.5rem;
 }
 
+.tool-container.full-width {
+  flex-direction: column;
+}
+
 .tool-panel {
   width: 100%;
   padding: 1rem;
@@ -302,6 +306,24 @@ button:focus {
   border-color: var(--accent-cyan);
 }
 
+.btn-neon.primary {
+  background: var(--primary-accent);
+  color: #000;
+  border-color: var(--primary-accent);
+  font-weight: 600;
+}
+
+.btn-neon.primary:hover {
+  background: var(--primary-accent);
+  opacity: 0.9;
+  box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
+}
+
+:root[data-theme="light"] .btn-neon.primary:hover {
+  box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
+}
+
+
 .btn-neon:active {
   transform: translateY(1px);
   box-shadow: var(--button-active-shadow);
@@ -360,12 +382,20 @@ button:focus {
   outline: none;
 }
 
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--primary-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 input:focus,
 select:focus,
 textarea:focus,
 .number-control:focus-within {
   border-color: var(--primary-accent) !important;
   box-shadow: 0 0 0 1px var(--primary-accent) !important;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 /* --- Global Checkbox Styles --- */
@@ -505,6 +535,19 @@ textarea:focus,
   border: 1px solid rgba(0, 0, 0, 0.06);
 }
 
+.detail-tag {
+  font-size: 0.8rem;
+  background: var(--list-hover-bg);
+  border: 1px solid var(--list-border);
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all 0.2s ease;
+}
+
 /* --- Global Number Control Styles --- */
 .number-control {
   display: flex;
@@ -513,7 +556,10 @@ textarea:focus,
   border: 1px solid var(--toggle-border);
   border-radius: 8px;
   overflow: hidden;
-  height: 40px;
+  height: auto;
+  min-height: 40px;
+  flex-wrap: wrap;
+  /* allow wrapping on very small screens */
 }
 
 .control-btn {
@@ -541,11 +587,12 @@ textarea:focus,
   border: none;
   color: var(--text-color);
   flex: 1;
-  min-width: 60px;
+  min-width: 40px;
   text-align: center;
   font-size: 1rem;
   font-weight: 400;
   appearance: textfield;
+  padding: 0.2rem;
 }
 
 .number-input::-webkit-outer-spin-button,