feat: improve url cleaner modal ui (light mode) and enable rule editing

src/components/tools/UrlCleaner.vue

@@ -476,7 +476,7 @@ onUnmounted(() => {
 }
 
 .history-item:hover {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--list-hover-bg);
 }
 
 .item-info {

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -80,6 +80,15 @@ const addRule = () => {
   }
 }
 
+const editRule = (rule) => {
+  newRule.value = {
+    domainPattern: rule.domainPattern,
+    keepParams: Array.isArray(rule.keepParams) ? rule.keepParams.join(', ') : '',
+    keepHash: !!rule.keepHash,
+    keepAllParams: !!rule.keepAllParams
+  }
+}
+
 const removeRule = (id) => {
   localExceptions.value = localExceptions.value.filter(r => r.id !== id)
 }
@@ -145,7 +154,7 @@ const resetToDefault = (ruleId) => {
 <template>
   <Teleport to="body">
     <div v-if="isOpen" class="modal-overlay" @click.self="$emit('close')">
-      <div class="modal-content glass-panel">
+      <div class="modal-content">
         <div class="modal-header">
           <h3>URL Cleaning Exceptions</h3>
           <button class="close-btn" @click="$emit('close')">
@@ -200,7 +209,7 @@ const resetToDefault = (ruleId) => {
 
             <div v-for="rule in localExceptions" :key="rule.id" class="rule-item" :class="{ disabled: !rule.isEnabled }">
               <div class="rule-info">
-                <div class="rule-domain">{{ rule.domainPattern }}</div>
+                <div class="rule-domain" @click="editRule(rule)" title="Click to edit">{{ rule.domainPattern }}</div>
                 <div class="rule-details">
                   <div class="params-list">
                     <template v-if="rule.keepAllParams">
@@ -275,6 +284,10 @@ const resetToDefault = (ruleId) => {
   padding: 1rem;
 }
 
+:global(:root[data-theme="light"]) .modal-overlay {
+  background: rgba(0, 0, 0, 0.15);
+}
+
 .modal-content {
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
@@ -291,6 +304,11 @@ const resetToDefault = (ruleId) => {
   color: var(--text-color);
 }
 
+:global(:root[data-theme="light"]) .modal-content {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+}
+
 .modal-header {
   padding: 1.5rem;
   border-bottom: 1px solid var(--glass-border);
@@ -352,6 +370,11 @@ 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;
@@ -445,6 +468,11 @@ 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;
 }
@@ -457,6 +485,13 @@ const resetToDefault = (ruleId) => {
   font-weight: 600;
   color: var(--primary-accent);
   margin-bottom: 0.3rem;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.rule-domain:hover {
+  opacity: 0.8;
+  text-decoration: underline;
 }
 
 .rule-details {

src/style.css

@@ -42,6 +42,7 @@
   --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
   --ripple-color: rgba(255, 255, 255, 0.3);
   --nav-item-weight: 400;
+  --list-hover-bg: rgba(255, 255, 255, 0.05);
 
   color: var(--text-color);
   background-color: #242424; /* Fallback */
@@ -84,6 +85,7 @@
   --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(0, 0, 0, 0.05);
 }
 
 body {