@leeguoo/pwtk-network-debugger 1.3.7 → 1.3.8

package/dist/index.esm.js

@@ -7454,48 +7454,70 @@ function formatJson(obj) {
   return JSON.stringify(obj, null, 2);
 }
 const styles = `
-/* iOS 26 Liquid Glass NetworkDebugger 样式 */
-:root {
-  --liquid-glass-primary: rgba(255, 255, 255, 0.15);
-  --liquid-glass-secondary: rgba(255, 255, 255, 0.08);
-  --liquid-glass-border: rgba(255, 255, 255, 0.18);
-  --liquid-glass-shadow: rgba(31, 38, 135, 0.37);
-  --liquid-glass-highlight: rgba(255, 255, 255, 0.25);
-  --liquid-glass-dark: rgba(13, 17, 23, 0.75);
+/* iOS-style Liquid Glass UI */
+:host {
+  color-scheme: light;
+  --glass-blur: 24px;
+  --glass-sat: 165%;
+  --glass-brightness: 1.05;
+  --glass-base: rgba(255, 255, 255, 0.04);
+  --glass-surface: rgba(255, 255, 255, 0.06);
+  --glass-surface-strong: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.14);
+  --glass-border-weak: rgba(255, 255, 255, 0.08);
+  --glass-shadow: 0 18px 40px rgba(12, 18, 30, 0.14);
+  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  --text-primary: rgba(18, 22, 31, 0.92);
+  --text-secondary: rgba(18, 22, 31, 0.7);
+  --text-tertiary: rgba(18, 22, 31, 0.52);
+  --accent: #0A84FF;
+  --accent-strong: #007AFF;
+  --success: #34C759;
+  --warning: #FF9F0A;
+  --danger: #FF3B30;
+  --purple: #BF5AF2;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
+  line-height: 1.35;
 }
 
 #network-debugger-panel {
   position: fixed;
   z-index: 999999;
+  box-sizing: border-box;
   
   /* 强制 GPU 加速和 3D 变换 */
   transform: translate3d(0, 0, 0);
   will-change: transform, backdrop-filter;
   
   /* iOS 26 Liquid Glass 核心效果 - 增强版 */
-  backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;
-  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.05) !important;
+  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) !important;
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-brightness)) !important;
   
-  /* iOS 浅色毛玻璃背景 */
-  background: rgba(245, 245, 247, 0.8);
-  background-image: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.5) 0%,
-    rgba(255, 255, 255, 0.25) 100%
-  );
+  /* Light glass surface */
+  background:
+    linear-gradient(
+      150deg,
+      rgba(255, 255, 255, 0.16) 0%,
+      rgba(255, 255, 255, 0.04) 100%
+    ),
+    radial-gradient(
+      120% 100% at 10% 0%,
+      rgba(255, 255, 255, 0.1) 0%,
+      rgba(255, 255, 255, 0.02) 45%,
+      transparent 70%
+    ),
+    var(--glass-base);
   
-  /* 玻璃边框 */
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  border: 1px solid var(--glass-border);
   
-  /* 多层阴影创建深度 */
-  box-shadow: 
-    0 10px 40px rgba(31, 38, 135, 0.4),
-    inset 0 2px 4px rgba(255, 255, 255, 0.3),
-    inset 0 -2px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--glass-shadow), var(--glass-inner);
     
   border-radius: 20px;
-  color: #ffffff;
-  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Monaco', 'Menlo', monospace;
+  color: var(--text-primary);
   font-size: 12px;
   overflow: hidden;
   max-width: 90vw;
@@ -7505,6 +7527,10 @@ const styles = `
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+#network-debugger-panel.webgl-active {
+  background: rgba(255, 255, 255, 0.01);
+}
+
 /* 主面板的镜面反射效果 */
 #network-debugger-panel::before {
   content: '';
@@ -7513,14 +7539,19 @@ const styles = `
   border-radius: inherit;
   background: linear-gradient(
     135deg,
-    rgba(255, 255, 255, 0.3) 0%,
-    rgba(255, 255, 255, 0.05) 50%,
+    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 255, 255, 0.03) 45%,
     transparent 100%
   );
   pointer-events: none;
   z-index: 1;
 }
 
+#network-debugger-panel.webgl-active::before,
+#network-debugger-panel.webgl-active::after {
+  opacity: 0.2;
+}
+
 /* 镜面高光效果 */
 #network-debugger-panel::after {
   content: '';
@@ -7529,7 +7560,7 @@ const styles = `
   border-radius: inherit;
   background: radial-gradient(
     circle at 30% 30%,
-    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.06),
     transparent 70%
   );
   pointer-events: none;
@@ -7548,33 +7579,28 @@ const styles = `
   transform: translate3d(0, 0, 0) !important;
   will-change: transform, backdrop-filter !important;
   
-  /* 真正的 iOS Liquid Glass 效果 - 加强版 */
-  background: 
-    /* 顶部高光 */
-    linear-gradient(180deg, 
-      rgba(255, 255, 255, 0.5) 0%, 
-      rgba(255, 255, 255, 0.1) 35%),
-    /* 主玻璃层 */
-    radial-gradient(ellipse at top, 
-      rgba(255, 255, 255, 0.35), 
-      rgba(255, 255, 255, 0.12)),
-    /* iOS 浅色基底 */
-    rgba(245, 245, 247, 0.85) !important;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.12) 0%,
+      rgba(255, 255, 255, 0.04) 45%
+    ),
+    radial-gradient(
+      120% 120% at 30% 0%,
+      rgba(255, 255, 255, 0.07),
+      rgba(255, 255, 255, 0.03)
+    ),
+    rgba(255, 255, 255, 0.08) !important;
     
-  /* 增强毛玻璃效果 */
-  backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;
-  -webkit-backdrop-filter: blur(40px) saturate(220%) brightness(1.1) !important;
+  backdrop-filter: blur(32px) saturate(185%) brightness(1.06) !important;
+  -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06) !important;
   
-  /* iOS 风格边缘光效 - 增强版 */
-  box-shadow: 
-    /* 外发光 */
+  box-shadow:
     0 0 0 0.5px rgba(255, 255, 255, 0.7) !important,
-    /* 内阴影创建玻璃厚度 */
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important,
-    inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important,
-    /* 深度阴影 */
-    0 15px 40px rgba(0, 0, 0, 0.3) !important,
-    0 4px 10px rgba(0, 0, 0, 0.2) !important;
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important,
+    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15) !important,
+    0 14px 30px rgba(9, 14, 22, 0.2) !important,
+    0 4px 10px rgba(9, 14, 22, 0.12) !important;
     
   /* 平滑过渡 */
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
@@ -7598,29 +7624,29 @@ const styles = `
 }
 
 #network-debugger-panel.bottom-right {
-  bottom: 20px;
-  right: 20px;
+  bottom: calc(18px + var(--safe-bottom));
+  right: calc(18px + var(--safe-right));
   width: 600px;
   height: 500px;
 }
 
 #network-debugger-panel.bottom-left {
-  bottom: 20px;
-  left: 20px;
+  bottom: calc(18px + var(--safe-bottom));
+  left: calc(18px + var(--safe-left));
   width: 600px;
   height: 500px;
 }
 
 #network-debugger-panel.top-right {
-  top: 20px;
-  right: 20px;
+  top: calc(18px + var(--safe-top));
+  right: calc(18px + var(--safe-right));
   width: 600px;
   height: 500px;
 }
 
 #network-debugger-panel.top-left {
-  top: 20px;
-  left: 20px;
+  top: calc(18px + var(--safe-top));
+  left: calc(18px + var(--safe-left));
   width: 600px;
   height: 500px;
 }
@@ -7631,30 +7657,24 @@ const styles = `
   width: 100vw !important;
   height: 100vh !important;
   border-radius: 0;
+  padding-top: var(--safe-top);
+  padding-right: var(--safe-right);
+  padding-bottom: var(--safe-bottom);
+  padding-left: var(--safe-left);
 }
 
 .debugger-header {
-  /* 头部 Liquid Glass 效果 */
-  backdrop-filter: blur(15px) brightness(1.1);
-  -webkit-backdrop-filter: blur(15px) brightness(1.1);
-  
-  /* 多层背景效果 */
-  background: 
-    /* 顶部高光 */
-    linear-gradient(180deg, 
-      rgba(255, 255, 255, 0.8) 0%, 
-      rgba(255, 255, 255, 0.4) 60%),
-    /* 基础玻璃层 */
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  background:
     linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.6),
-      rgba(255, 255, 255, 0.4)
+      180deg,
+      rgba(255, 255, 255, 0.14) 0%,
+      rgba(255, 255, 255, 0.05) 100%
     );
-    
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  border-bottom: 1px solid var(--glass-border-weak);
   
-  padding: 12px 16px;
+  padding: 10px 14px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -7669,41 +7689,54 @@ const styles = `
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.webgl-active .debugger-header {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.08) 0%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
+}
+
 .debugger-header:hover {
-  backdrop-filter: blur(18px) brightness(1.15);
-  -webkit-backdrop-filter: blur(18px) brightness(1.15);
+  backdrop-filter: blur(20px) saturate(170%);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
   background: linear-gradient(
     135deg,
-    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0.18),
     rgba(255, 255, 255, 0.08)
   );
 }
 
+.webgl-active .debugger-header:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.12),
+    rgba(255, 255, 255, 0.06)
+  );
+}
+
 .debugger-title {
   font-weight: 600;
-  color: rgba(60, 60, 67, 0.9);
-  font-size: 15px;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
+  color: var(--text-primary);
+  font-size: 14px;
+  letter-spacing: 0.2px;
 }
 
 .debugger-controls {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   position: relative;
   z-index: 3;
 }
 
 /* 搜索栏样式 */
 .debugger-search-bar {
-  padding: 8px 15px;
-  backdrop-filter: blur(10px) brightness(1.08);
-  -webkit-backdrop-filter: blur(10px) brightness(1.08);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.5),
-    rgba(255, 255, 255, 0.3)
-  );
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 6px 12px;
+  backdrop-filter: blur(10px) saturate(150%);
+  -webkit-backdrop-filter: blur(10px) saturate(150%);
+  background: var(--glass-surface);
+  border-bottom: 1px solid var(--glass-border-weak);
   display: flex;
   align-items: center;
   gap: 10px;
@@ -7716,22 +7749,18 @@ const styles = `
   position: relative;
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(12, 16, 24, 0.08);
   border-radius: 12px;
-  padding: 6px 12px;
+  padding: 5px 10px;
   transition: all 0.2s ease;
-  box-shadow: 
-    inset 0 1px 3px rgba(0, 0, 0, 0.08),
-    0 1px 1px rgba(255, 255, 255, 0.5);
+  box-shadow: inset 0 1px 2px rgba(12, 16, 24, 0.08);
 }
 
 .search-input-wrapper:focus-within {
-  background: rgba(255, 255, 255, 0.9);
-  border-color: rgba(0, 122, 255, 0.3);
-  box-shadow: 
-    inset 0 1px 3px rgba(0, 0, 0, 0.1),
-    0 0 0 3px rgba(0, 122, 255, 0.1);
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(10, 132, 255, 0.4);
+  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
 }
 
 .search-icon {
@@ -7744,14 +7773,14 @@ const styles = `
   flex: 1;
   border: none;
   background: transparent;
-  color: rgba(60, 60, 67, 0.9);
+  color: var(--text-primary);
   font-size: 13px;
   outline: none;
   font-family: inherit;
 }
 
 .search-input::placeholder {
-  color: rgba(60, 60, 67, 0.5);
+  color: var(--text-tertiary);
 }
 
 .search-clear-btn {
@@ -7764,7 +7793,7 @@ const styles = `
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: rgba(60, 60, 67, 0.7);
+  color: var(--text-secondary);
   font-size: 16px;
   line-height: 1;
   padding: 0;
@@ -7774,12 +7803,12 @@ const styles = `
 }
 
 .search-clear-btn:hover {
-  background: rgba(0, 0, 0, 0.1);
-  color: rgba(60, 60, 67, 0.9);
+  background: rgba(0, 0, 0, 0.12);
+  color: var(--text-primary);
 }
 
 .search-stats {
-  color: rgba(60, 60, 67, 0.7);
+  color: var(--text-secondary);
   font-size: 12px;
   white-space: nowrap;
   display: none;
@@ -7796,68 +7825,48 @@ const styles = `
 }
 
 .debugger-btn {
-  /* 按钮毛玻璃效果但保证可见性 */
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.5)
-  );
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  color: rgba(60, 60, 67, 0.9);
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
-  padding: 6px 12px;
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(12, 16, 24, 0.1);
+  color: var(--text-primary);
+  padding: 5px 10px;
   border-radius: 12px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 600;
   
-  /* 按钮阴影 */
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  box-shadow: 0 2px 6px rgba(12, 16, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
     
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateZ(0);
 }
 
 .debugger-btn:hover {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.2),
-    rgba(255, 255, 255, 0.12)
-  );
-  transform: scale(1.05) translateZ(5px);
-  box-shadow: 
-    0 4px 16px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.14);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(12, 16, 24, 0.12);
 }
 
 .debugger-btn:active {
-  transform: scale(0.98);
-  transition: transform 0.1s;
+  transform: translateY(0);
+  transition: transform 0.1s ease;
 }
 
 .debugger-btn.active {
-  background: linear-gradient(135deg, #007AFF, #5856D6);
-  color: #ffffff;
-  box-shadow: 
-    0 4px 16px rgba(0, 122, 255, 0.25),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
-  backdrop-filter: blur(12px);
+  background: linear-gradient(135deg, rgba(10, 132, 255, 0.2), rgba(10, 132, 255, 0.08));
+  color: var(--accent-strong);
+  border-color: rgba(10, 132, 255, 0.4);
+  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.2);
+  backdrop-filter: blur(12px) saturate(150%);
 }
 
 .debugger-icon {
   width: 16px;
   height: 16px;
   vertical-align: middle;
-  filter: 
-    brightness(0.8) 
-    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.8));
-  color: rgba(60, 60, 67, 0.8);
+  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6));
+  color: var(--text-secondary);
 }
 
 .debugger-content {
@@ -7869,35 +7878,39 @@ const styles = `
 
 .debugger-tabs {
   display: flex;
-  gap: 8px;
-  padding: 0 12px;
-  margin-bottom: 8px;
+  gap: 4px;
+  padding: 0 10px 6px;
+  margin-bottom: 6px;
+  position: relative;
+  z-index: 2;
 }
 
 .debugger-tab {
   cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  padding: 6px 14px;
+  border: 1px solid var(--glass-border-weak);
+  border-radius: 999px;
+  padding: 6px 12px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.85);
-  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.07);
   transition: all 0.2s ease;
 }
 
 .debugger-tab:hover {
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: rgba(10, 132, 255, 0.3);
 }
 
 .debugger-tab.active {
-  background: rgba(44, 110, 203, 0.7);
-  border-color: rgba(255, 255, 255, 0.35);
-  color: #fff;
+  background: rgba(10, 132, 255, 0.18);
+  border-color: rgba(10, 132, 255, 0.4);
+  color: var(--accent-strong);
 }
 
 .tab-content {
   display: none;
   height: 100%;
+  position: relative;
+  z-index: 2;
 }
 
 .tab-content.active {
@@ -7907,38 +7920,42 @@ const styles = `
 .debugger-panel-content {
   flex: 1;
   overflow: auto;
-  padding: 12px;
+  padding: 10px;
+  position: relative;
+  z-index: 2;
 }
 
 .performance-panel {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   height: 100%;
   overflow-y: auto;
-  padding-right: 6px;
+  padding-right: 4px;
+  position: relative;
+  z-index: 2;
 }
 
 .settings-section {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .settings-toggle {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: flex-start;
-  padding: 10px;
+  padding: 8px;
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--glass-border-weak);
   cursor: pointer;
   transition: border 0.2s ease, background 0.2s ease;
 }
 
 .settings-toggle:hover {
-  border-color: rgba(255, 255, 255, 0.25);
+  border-color: rgba(10, 132, 255, 0.3);
 }
 
 .settings-toggle.disabled {
@@ -7970,16 +7987,16 @@ const styles = `
 .settings-refresh-btn {
   padding: 10px 0;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  background: rgba(44, 110, 203, 0.75);
-  color: #fff;
+  border: 1px solid rgba(10, 132, 255, 0.35);
+  background: rgba(10, 132, 255, 0.18);
+  color: var(--accent-strong);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .settings-refresh-btn:hover:not(:disabled) {
-  background: rgba(44, 110, 203, 0.85);
+  background: rgba(10, 132, 255, 0.28);
 }
 
 .settings-refresh-btn:disabled {
@@ -7989,40 +8006,34 @@ const styles = `
 
 .settings-note {
   font-size: 11px;
-  opacity: 0.65;
+  color: var(--text-tertiary);
   line-height: 1.6;
-  padding-bottom: 8px;
+  padding-bottom: 6px;
 }
 
 .request-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 16px;
+  gap: 10px;
+  padding: 10px 12px 12px;
   position: relative;
   z-index: 2;
 }
 
 .request-item {
-  /* 请求项毛玻璃效果加动态光效 */
   position: relative;
-  backdrop-filter: blur(10px) brightness(1.1);
-  -webkit-backdrop-filter: blur(10px) brightness(1.1);
-  
-  /* 背景极简化，避免遮挡文本 */
-  background: rgba(255, 255, 255, 0.35);
-  border: 1px solid rgba(255, 255, 255, 0.28);
-  border-radius: 16px;
-  padding: 16px;
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  padding: 12px;
   cursor: default;
   
-  /* 深度阴影和玻璃效果 */
-  box-shadow: 
-    0 4px 16px rgba(31, 38, 135, 0.2),
-    inset 0 1px 2px rgba(255, 255, 255, 0.15),
-    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 8px 20px rgba(12, 16, 24, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
     
-  /* 流体动画和光效 */
   transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
   transform: translateZ(0);
   animation: none;
@@ -8036,14 +8047,14 @@ const styles = `
   border-radius: inherit;
   background: radial-gradient(
     circle at var(--mouse-x, 30%) var(--mouse-y, 30%),
-    rgba(255, 255, 255, 0.4) 0%,
-    rgba(255, 255, 255, 0.1) 30%,
+    rgba(255, 255, 255, 0.06) 0%,
+    rgba(255, 255, 255, 0.02) 35%,
     transparent 70%
   );
-  opacity: 0;
+  opacity: 0.12;
   transition: opacity 0.4s ease;
   pointer-events: none;
-  mix-blend-mode: overlay;
+  mix-blend-mode: screen;
   z-index: 1;
 }
 
@@ -8058,7 +8069,7 @@ const styles = `
   border-radius: 16px 16px 0 0;
   background: linear-gradient(
     180deg,
-    rgba(255, 255, 255, 0.2) 0%,
+    rgba(255, 255, 255, 0.04) 0%,
     transparent 100%
   );
   pointer-events: none;
@@ -8066,24 +8077,13 @@ const styles = `
 }
 
 .request-item:hover {
-  backdrop-filter: blur(15px) brightness(1.2);
-  -webkit-backdrop-filter: blur(15px) brightness(1.2);
-  
-  /* 增强 hover 时的光效 - 移除会导致抖动的效果 */
-  background: 
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.2),
-      rgba(255, 255, 255, 0.12)
-    );
-  
-  /* 移除 transform 和 animation 避免抖动 */
+  backdrop-filter: blur(16px) saturate(165%);
+  -webkit-backdrop-filter: blur(16px) saturate(165%);
+  background: rgba(255, 255, 255, 0.14);
   transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
-  
-  box-shadow: 
-    0 8px 24px rgba(31, 38, 135, 0.25),
-    inset 0 2px 4px rgba(255, 255, 255, 0.25),
-    inset 0 -2px 2px rgba(0, 0, 0, 0.08);
+  box-shadow:
+    0 10px 26px rgba(12, 16, 24, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.55);
 }
 
 /* 激活折射效果 */
@@ -8092,24 +8092,20 @@ const styles = `
 }
 
 .request-item.expanded {
-  backdrop-filter: blur(18px) brightness(1.2);
-  -webkit-backdrop-filter: blur(18px) brightness(1.2);
-  background: linear-gradient(
-    135deg,
-    rgba(0, 122, 255, 0.08),
-    rgba(255, 255, 255, 0.05)
-  );
-  border-color: rgba(0, 122, 255, 0.2);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.15),
-    inset 0 2px 4px rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(18px) saturate(170%);
+  -webkit-backdrop-filter: blur(18px) saturate(170%);
+  background: rgba(255, 255, 255, 0.16);
+  border-color: rgba(10, 132, 255, 0.25);
+  box-shadow:
+    0 12px 30px rgba(12, 16, 24, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }
 
 .request-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   cursor: pointer;
 }
 
@@ -8117,44 +8113,37 @@ const styles = `
   /* 方法标签毛玻璃效果 */
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  padding: 4px 10px;
-  border-radius: 10px;
+  padding: 3px 8px;
+  border-radius: 9px;
   font-weight: 600;
   font-size: 10px;
   text-transform: uppercase;
   min-width: 45px;
   text-align: center;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px rgba(12, 16, 24, 0.12);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .method-get { 
-  background: linear-gradient(135deg, #4CAF50, #45a049);
-  color: #ffffff;
-  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
+  background: rgba(52, 199, 89, 0.18);
+  color: #0b3b1c;
 }
 .method-post { 
-  background: linear-gradient(135deg, #2196F3, #1976D2);
-  color: #ffffff;
-  box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
+  background: rgba(10, 132, 255, 0.18);
+  color: #0b2a52;
 }
 .method-put { 
-  background: linear-gradient(135deg, #FF9800, #F57C00);
-  color: #ffffff;
-  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4);
+  background: rgba(255, 159, 10, 0.2);
+  color: #5a3206;
 }
 .method-delete { 
-  background: linear-gradient(135deg, #F44336, #D32F2F);
-  color: #ffffff;
-  box-shadow: 0 0 15px rgba(244, 67, 54, 0.4);
+  background: rgba(255, 59, 48, 0.18);
+  color: #5a0c0c;
 }
 .method-patch { 
-  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
-  color: #ffffff;
-  box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
+  background: rgba(191, 90, 242, 0.18);
+  color: #3b154a;
 }
 
 .request-url {
@@ -8162,7 +8151,7 @@ const styles = `
   margin: 0 8px;
   word-break: break-all;
   white-space: normal;
-  color: rgba(20, 20, 33, 0.98);
+  color: var(--text-primary);
   font-size: 11px;
   line-height: 1.3;
 }
@@ -8171,97 +8160,77 @@ const styles = `
   /* 状态码标签毛玻璃效果 */
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  padding: 4px 10px;
-  border-radius: 10px;
+  padding: 3px 8px;
+  border-radius: 9px;
   font-size: 10px;
   font-weight: 600;
   min-width: 40px;
   text-align: center;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 2px 6px rgba(12, 16, 24, 0.12);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .status-2xx { 
-  background: linear-gradient(135deg, #4CAF50, #45a049);
-  color: #ffffff;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  background: rgba(52, 199, 89, 0.2);
+  color: #0b3b1c;
 }
 .status-3xx { 
-  background: linear-gradient(135deg, #FF9800, #F57C00);
-  color: #ffffff;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 159, 10, 0.2);
+  color: #5a3206;
 }
 .status-4xx { 
-  background: linear-gradient(135deg, #F44336, #D32F2F);
-  color: #ffffff;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 59, 48, 0.2);
+  color: #5a0c0c;
 }
 .status-5xx { 
-  background: linear-gradient(135deg, #9C27B0, #7B1FA2);
-  color: #ffffff;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  background: rgba(191, 90, 242, 0.2);
+  color: #3b154a;
 }
 .status-error { 
-  background: linear-gradient(135deg, #F44336, #D32F2F);
-  color: #ffffff;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 59, 48, 0.2);
+  color: #5a0c0c;
 }
 
 .request-info {
   display: flex;
   justify-content: space-between;
-  font-size: 10px;
-  color: rgba(60, 60, 67, 0.7);
+  font-size: 9px;
+  color: var(--text-secondary);
 }
 
 .request-details {
-  margin-top: 12px;
-  border-top: 1px solid rgba(60, 60, 67, 0.2);
-  padding-top: 12px;
+  margin-top: 10px;
+  border-top: 1px solid rgba(12, 16, 24, 0.12);
+  padding-top: 10px;
   display: none;
 }
 
-/* 默认折叠headers */
-.request-details .detail-section.collapsible {
-  /* 默认折叠状态 */
-}
-
-.request-details .detail-section.collapsible:not(.expanded) .detail-content {
-  display: none;
-}
-
-.request-details .detail-section.collapsible:not(.expanded) .collapse-icon {
-  transform: rotate(-90deg);
-}
-
 .request-item.expanded .request-details {
   display: block;
 }
 
 .detail-section {
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .detail-title {
   font-weight: bold;
-  color: #4CAF50;
-  margin-bottom: 8px;
+  color: var(--accent-strong);
+  margin-bottom: 6px;
   font-size: 11px;
   text-transform: uppercase;
-  border-bottom: 1px solid rgba(60, 60, 67, 0.2);
-  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(12, 16, 24, 0.12);
+  padding-bottom: 3px;
 }
 
 .detail-title.highlight {
-  color: #FFD700;
+  color: #b07900;
   font-size: 12px;
-  background: rgba(255, 215, 0, 0.1);
+  background: rgba(255, 193, 7, 0.16);
   padding: 6px 8px;
   border-radius: 4px;
-  border-bottom: 2px solid #FFD700;
+  border-bottom: 2px solid rgba(255, 193, 7, 0.6);
 }
 
 .detail-title.clickable {
@@ -8273,7 +8242,7 @@ const styles = `
 }
 
 .detail-title.clickable:hover {
-  background: rgba(76, 175, 80, 0.1);
+  background: rgba(10, 132, 255, 0.12);
 }
 
 .collapse-icon {
@@ -8294,27 +8263,24 @@ const styles = `
   transform: rotate(-90deg);
 }
 
+.detail-section.collapsible.collapsed .collapse-icon {
+  transform: rotate(-90deg);
+}
+
 .detail-content {
-  /* 详情内容毛玻璃效果 - 浅色主题 */
-  backdrop-filter: blur(8px) brightness(1.1);
-  -webkit-backdrop-filter: blur(8px) brightness(1.1);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.6),
-    rgba(255, 255, 255, 0.4)
-  );
-  border: 1px solid rgba(60, 60, 67, 0.2);
-  padding: 16px;
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(12, 16, 24, 0.12);
+  padding: 12px;
   border-radius: 12px;
-  max-height: 400px;
-  min-height: 300px;
+  max-height: 320px;
+  min-height: 220px;
   overflow: auto;
   user-select: text;
   
   /* 内部阴影 */
-  box-shadow: 
-    inset 0 2px 4px rgba(0, 0, 0, 0.05),
-    inset 0 -1px 2px rgba(255, 255, 255, 0.15);
+  box-shadow: inset 0 1px 2px rgba(12, 16, 24, 0.06);
     
   /* 平滑滚动 */
   scroll-behavior: smooth;
@@ -8322,10 +8288,10 @@ const styles = `
 
 .json-content {
   white-space: pre-wrap;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 11px;
   line-height: 1.4;
-  color: rgba(60, 60, 67, 0.9);
+  color: var(--text-primary);
 }
 
 .headers-table {
@@ -8336,24 +8302,24 @@ const styles = `
 
 .headers-table th,
 .headers-table td {
-  padding: 4px 8px;
+  padding: 3px 6px;
   text-align: left;
-  border-bottom: 1px solid rgba(60, 60, 67, 0.2);
+  border-bottom: 1px solid rgba(12, 16, 24, 0.12);
 }
 
 .headers-table th {
-  background: rgba(255, 255, 255, 0.3);
-  color: #4CAF50;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text-secondary);
   font-weight: bold;
 }
 
 .headers-table td {
-  color: rgba(20, 20, 33, 0.85);
+  color: var(--text-secondary);
 }
 
 .decrypted-badge {
-  background: #4CAF50;
-  color: #000;
+  background: rgba(52, 199, 89, 0.2);
+  color: #0b3b1c;
   padding: 2px 6px;
   border-radius: 3px;
   font-size: 9px;
@@ -8362,8 +8328,8 @@ const styles = `
 }
 
 .error-badge {
-  background: #F44336;
-  color: #fff;
+  background: rgba(255, 59, 48, 0.2);
+  color: #5a0c0c;
   padding: 2px 6px;
   border-radius: 3px;
   font-size: 9px;
@@ -8372,34 +8338,31 @@ const styles = `
 }
 
 .share-btn {
-  /* 分享按钮毛玻璃效果 */
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  background: linear-gradient(135deg, #2196F3, #1976D2);
-  color: #ffffff;
-  border: 1px solid rgba(33, 150, 243, 0.3);
-  padding: 6px 12px;
+  background: rgba(10, 132, 255, 0.18);
+  color: var(--accent-strong);
+  border: 1px solid rgba(10, 132, 255, 0.35);
+  padding: 5px 10px;
   border-radius: 10px;
   font-size: 10px;
   font-weight: 500;
-  margin-left: 8px;
+  margin-left: 6px;
   cursor: pointer;
   white-space: nowrap;
   
-  box-shadow: 
-    0 2px 8px rgba(33, 150, 243, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 2px 8px rgba(10, 132, 255, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
     
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateZ(0);
 }
 
 .share-btn:hover {
-  background: linear-gradient(135deg, #1976D2, #1565C0);
-  transform: scale(1.05) translateZ(5px);
-  box-shadow: 
-    0 4px 16px rgba(33, 150, 243, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  background: rgba(10, 132, 255, 0.28);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.2);
 }
 
 .share-btn:active {
@@ -8408,34 +8371,31 @@ const styles = `
 }
 
 .api-curl-btn {
-  /* API Curl 按钮毛玻璃效果 */
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
-  background: linear-gradient(135deg, #4CAF50, #45a049);
-  color: #ffffff;
-  border: 1px solid rgba(76, 175, 80, 0.3);
-  padding: 6px 12px;
+  background: rgba(52, 199, 89, 0.18);
+  color: #0b3b1c;
+  border: 1px solid rgba(52, 199, 89, 0.35);
+  padding: 5px 10px;
   border-radius: 10px;
   font-size: 10px;
   font-weight: 500;
-  margin-left: 8px;
+  margin-left: 6px;
   cursor: pointer;
   white-space: nowrap;
   
-  box-shadow: 
-    0 2px 8px rgba(76, 175, 80, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 2px 8px rgba(52, 199, 89, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
     
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateZ(0);
 }
 
 .api-curl-btn:hover {
-  background: linear-gradient(135deg, #45a049, #388E3C);
-  transform: scale(1.05) translateZ(5px);
-  box-shadow: 
-    0 4px 16px rgba(76, 175, 80, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  background: rgba(52, 199, 89, 0.28);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(52, 199, 89, 0.2);
 }
 
 .api-curl-btn:active {
@@ -8480,8 +8440,8 @@ const styles = `
 
 .tools-section {
   padding: 12px;
-  background: #2a2a2a;
-  border-bottom: 1px solid #444;
+  background: rgba(255, 255, 255, 0.65);
+  border-bottom: 1px solid var(--glass-border-weak);
 }
 
 .tool-buttons {
@@ -8492,23 +8452,24 @@ const styles = `
 
 .tool-btn {
   padding: 6px 12px;
-  background: #4CAF50;
-  color: #000;
-  border: none;
-  border-radius: 4px;
+  background: rgba(10, 132, 255, 0.18);
+  color: var(--accent-strong);
+  border: 1px solid rgba(10, 132, 255, 0.3);
+  border-radius: 8px;
   cursor: pointer;
   font-size: 11px;
   font-weight: bold;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, transform 0.2s ease;
 }
 
 .tool-btn:hover {
-  background: #45a049;
+  background: rgba(10, 132, 255, 0.28);
+  transform: translateY(-1px);
 }
 
 .tool-btn:disabled {
-  background: #666;
-  color: #999;
+  background: rgba(12, 16, 24, 0.1);
+  color: var(--text-tertiary);
   cursor: not-allowed;
 }
 
@@ -8562,10 +8523,10 @@ const styles = `
 
 @keyframes liquid-glow {
   0%, 100% { 
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 20px rgba(12, 16, 24, 0.12);
   }
   50% { 
-    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 10px 26px rgba(12, 16, 24, 0.16);
   }
 }
 
@@ -8574,7 +8535,14 @@ const styles = `
 }
 
 .request-item.expanded {
-  animation: liquid-glow 2s ease-in-out infinite;
+  animation: liquid-glow 0.9s ease-out 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .expanding,
+  .request-item.expanded {
+    animation: none;
+  }
 }
 
 /* 移动端响应式 */
@@ -8583,12 +8551,11 @@ const styles = `
   #network-debugger-panel.bottom-left,
   #network-debugger-panel.top-right,
   #network-debugger-panel.top-left {
-    width: calc(100vw - 20px) !important;
-    left: 10px !important;
+    width: calc(100vw - 32px - var(--safe-left) - var(--safe-right)) !important;
+    left: calc(16px + var(--safe-left)) !important;
     right: auto !important;
-    /* 移动端清晰毛玻璃 */
-    backdrop-filter: blur(15px) saturate(150%);
-    -webkit-backdrop-filter: blur(15px) saturate(150%);
+    backdrop-filter: blur(18px) saturate(150%);
+    -webkit-backdrop-filter: blur(18px) saturate(150%);
   }
   
   .request-item {
@@ -16725,8 +16692,8 @@ var parseBackgroundColor = function(context, element, backgroundColorOverride) {
   return element === ownerDocument.documentElement ? isTransparent(documentBackgroundColor) ? isTransparent(bodyBackgroundColor) ? defaultBackgroundColor : bodyBackgroundColor : documentBackgroundColor : defaultBackgroundColor;
 };
 const _LiquidEffects = class _LiquidEffects {
-  static getAdvancedFragmentShader() {
-    return `#version 300 es
+  static getAdvancedFragmentShader(options = {}) {
+    const source = `#version 300 es
       precision highp float;
 
       in vec2 v_uv;
@@ -16750,6 +16717,7 @@ const _LiquidEffects = class _LiquidEffects {
       uniform float u_cornerBoost;
       uniform float u_rippleEffect;
       uniform float u_tintOpacity;
+      uniform float u_glassOpacity;
       uniform float u_time;
 
       out vec4 fragColor;
@@ -16918,8 +16886,8 @@ const _LiquidEffects = class _LiquidEffects {
         vec3 accumulateMid = vec3(0.0);
         vec3 accumulateBottom = vec3(0.0);
 
-        int horizontalSamples = 20;
-        int verticalSamples = 11; // -5..5
+        const int horizontalSamples = 20;
+        const int verticalSamples = 11; // -5..5
 
         float topY = (viewportCenter.y - containerSize.y * 0.4) / u_textureSize.y;
         float midY = viewportCenter.y / u_textureSize.y;
@@ -16976,9 +16944,14 @@ const _LiquidEffects = class _LiquidEffects {
         }
 
         float mask = 1.0 - smoothstep(-1.0, 1.0, maskDistance);
-        fragColor = vec4(color.rgb, mask);
+        float opacity = clamp(u_glassOpacity, 0.02, 0.95);
+        fragColor = vec4(color.rgb, mask * opacity);
       }
     `;
+    if (options.webgl2 === false) {
+      return source.replace("#version 300 es", "").replace("precision highp float;", "precision mediump float;").replace("in vec2 v_uv;", "varying vec2 v_uv;").replace("out vec4 fragColor;", "").replace(/\btexture\(/g, "texture2D(").replace(/\bfragColor\b/g, "gl_FragColor");
+    }
+    return source;
   }
   static getUniformConfig(config) {
     return {
@@ -16992,6 +16965,7 @@ const _LiquidEffects = class _LiquidEffects {
       u_cornerBoost: config.cornerBoost,
       u_rippleEffect: config.rippleEffect,
       u_tintOpacity: config.tintOpacity,
+      u_glassOpacity: config.glassOpacity,
       u_warp: config.warp ? 1 : 0
     };
   }
@@ -17039,8 +17013,10 @@ _LiquidEffects.defaultConfig = {
   // 角落额外高光：营造 iOS 风格角点
   rippleEffect: 0.1,
   // 流动/波纹幅度：越大越活泼
-  tintOpacity: 0.2,
+  tintOpacity: 0.06,
   // 色彩混入比例：越大越浑厚
+  glassOpacity: 0.08,
+  // 玻璃整体透明度：越小越通透
   warp: false
   // 是否启用中心扭曲
 };
@@ -17056,7 +17032,8 @@ _LiquidEffects.presets = {
     baseDistance: 0.12,
     cornerBoost: 0.015,
     rippleEffect: 0.05,
-    tintOpacity: 0.18,
+    tintOpacity: 0.05,
+    glassOpacity: 0.06,
     warp: false
   },
   normal: {
@@ -17069,7 +17046,8 @@ _LiquidEffects.presets = {
     baseDistance: 0.1,
     cornerBoost: 0.02,
     rippleEffect: 0.1,
-    tintOpacity: 0.2,
+    tintOpacity: 0.06,
+    glassOpacity: 0.08,
     warp: false
   },
   dramatic: {
@@ -17082,7 +17060,8 @@ _LiquidEffects.presets = {
     baseDistance: 0.08,
     cornerBoost: 0.035,
     rippleEffect: 0.18,
-    tintOpacity: 0.28,
+    tintOpacity: 0.1,
+    glassOpacity: 0.12,
     warp: true
   },
   psychedelic: {
@@ -17095,7 +17074,8 @@ _LiquidEffects.presets = {
     baseDistance: 0.08,
     cornerBoost: 0.05,
     rippleEffect: 0.26,
-    tintOpacity: 0.4,
+    tintOpacity: 0.16,
+    glassOpacity: 0.2,
     warp: true
   },
   ios26: {
@@ -17109,13 +17089,15 @@ _LiquidEffects.presets = {
     baseDistance: 0.09,
     cornerBoost: 0.045,
     rippleEffect: 0.22,
-    tintOpacity: 0.24,
+    tintOpacity: 0.08,
+    glassOpacity: 0.1,
     warp: true
   }
 };
 let LiquidEffects = _LiquidEffects;
 class LiquidGlassRenderer {
   constructor(config) {
+    this.isWebGL2 = false;
     this.animationId = null;
     this.program = null;
     this.vertexBuffer = null;
@@ -17168,6 +17150,7 @@ class LiquidGlassRenderer {
     if (!gl) {
       throw new Error("Neither WebGL2 nor WebGL1 is supported");
     }
+    this.isWebGL2 = typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext;
     this.gl = gl;
     this.setupGL();
   }
@@ -17194,7 +17177,7 @@ class LiquidGlassRenderer {
   }
   createShaderProgram() {
     const { gl } = this;
-    const vertexShaderSource = `#version 300 es
+    const vertexShaderSource = this.isWebGL2 ? `#version 300 es
       precision highp float;
       in vec2 a_position;
       out vec2 v_uv;
@@ -17204,12 +17187,22 @@ class LiquidGlassRenderer {
         v_uv = uv;
         gl_Position = vec4(a_position, 0.0, 1.0);
       }
+    ` : `
+      precision mediump float;
+      attribute vec2 a_position;
+      varying vec2 v_uv;
+      void main() {
+        vec2 uv = a_position * 0.5 + 0.5;
+        uv.y = 1.0 - uv.y;
+        v_uv = uv;
+        gl_Position = vec4(a_position, 0.0, 1.0);
+      }
     `;
-    let fragmentShaderSource = LiquidEffects.getAdvancedFragmentShader();
+    let fragmentShaderSource = LiquidEffects.getAdvancedFragmentShader({ webgl2: this.isWebGL2 });
     let fragmentShader = this.compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
     if (!fragmentShader) {
       this.usingFallbackShader = true;
-      fragmentShaderSource = this.getFallbackFragmentShader();
+      fragmentShaderSource = this.getFallbackFragmentShader(this.isWebGL2);
       fragmentShader = this.compileShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
       if (!fragmentShader) {
         throw new Error("Failed to compile fallback liquid glass shader");
@@ -17248,7 +17241,8 @@ class LiquidGlassRenderer {
       "u_baseDistance",
       "u_cornerBoost",
       "u_rippleEffect",
-      "u_tintOpacity"
+      "u_tintOpacity",
+      "u_glassOpacity"
     ];
     const fallbackUniforms = ["u_time", "u_background", "u_resolution"];
     const uniformNames = this.usingFallbackShader ? fallbackUniforms : advancedUniforms;
@@ -17512,7 +17506,28 @@ class LiquidGlassRenderer {
         return 0.016;
     }
   }
-  getFallbackFragmentShader() {
+  getFallbackFragmentShader(webgl2) {
+    if (!webgl2) {
+      return `
+        precision mediump float;
+        varying vec2 v_uv;
+        uniform float u_time;
+        uniform vec2 u_resolution;
+        uniform sampler2D u_background;
+        void main() {
+          vec2 uv = v_uv;
+          vec2 noise = vec2(
+            sin(uv.y * 40.0 + u_time * 1.2),
+            cos(uv.x * 40.0 + u_time * 1.1)
+          ) * 0.004;
+          vec4 color = texture2D(u_background, clamp(uv + noise, 0.0, 1.0));
+          float edge = smoothstep(0.0, 0.15, min(min(uv.x, 1.0 - uv.x), min(uv.y, 1.0 - uv.y)));
+          float highlight = pow(1.0 - edge, 6.0);
+          vec3 tint = mix(color.rgb, vec3(1.0), highlight * 0.4);
+          gl_FragColor = vec4(tint, color.a * 0.92);
+        }
+      `;
+    }
     return `#version 300 es
       precision highp float;
       in vec2 v_uv;
@@ -17989,9 +18004,9 @@ class LiquidGlassScene {
     this.backgroundCanvas.height = height;
     this.backgroundCtx.clearRect(0, 0, width, height);
     const gradient = this.backgroundCtx.createLinearGradient(0, 0, width, height);
-    gradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
-    gradient.addColorStop(0.45, "rgba(236, 240, 255, 0.72)");
-    gradient.addColorStop(1, "rgba(210, 217, 245, 0.65)");
+    gradient.addColorStop(0, "rgba(255, 255, 255, 0.1)");
+    gradient.addColorStop(0.45, "rgba(236, 240, 255, 0.06)");
+    gradient.addColorStop(1, "rgba(210, 217, 245, 0.04)");
     this.backgroundCtx.fillStyle = gradient;
     this.backgroundCtx.fillRect(0, 0, width, height);
     const imageData = this.backgroundCtx.getImageData(0, 0, width, height);
@@ -18249,27 +18264,27 @@ const _WebGLManager = class _WebGLManager {
     style.textContent = `
       .enhanced-css-glass {
         /* 增强的 CSS 毛玻璃效果，模拟 WebGL */
-        backdrop-filter: blur(40px) saturate(180%) brightness(1.1) !important;
-        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1) !important;
+        backdrop-filter: blur(40px) saturate(180%) brightness(1.05) !important;
+        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05) !important;
         
         /* 添加动态渐变背景 */
         background: 
           radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
-            rgba(255, 255, 255, 0.4) 0%, 
-            rgba(255, 255, 255, 0.2) 40%, 
-            rgba(255, 255, 255, 0.1) 80%),
+            rgba(255, 255, 255, 0.1) 0%, 
+            rgba(255, 255, 255, 0.04) 40%, 
+            rgba(255, 255, 255, 0.02) 80%),
           linear-gradient(135deg, 
-            rgba(255, 255, 255, 0.6), 
-            rgba(245, 245, 247, 0.4)) !important;
+            rgba(255, 255, 255, 0.12), 
+            rgba(245, 245, 247, 0.05)) !important;
             
         /* 动态边框 */
-        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
         
         /* 增强阴影 */
         box-shadow: 
-          0 20px 50px rgba(31, 38, 135, 0.3),
-          inset 0 2px 6px rgba(255, 255, 255, 0.2),
-          inset 0 -2px 4px rgba(0, 0, 0, 0.1) !important;
+          0 20px 50px rgba(31, 38, 135, 0.12),
+          inset 0 2px 6px rgba(255, 255, 255, 0.06),
+          inset 0 -2px 4px rgba(0, 0, 0, 0.04) !important;
       }
       
       .enhanced-css-glass::before {
@@ -18279,8 +18294,8 @@ const _WebGLManager = class _WebGLManager {
         border-radius: inherit;
         background: radial-gradient(
           circle at var(--mouse-x, 30%) var(--mouse-y, 30%),
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0.1) 50%,
+          rgba(255, 255, 255, 0.08) 0%,
+          rgba(255, 255, 255, 0.03) 50%,
           transparent 100%
         );
         opacity: 0;
@@ -18400,8 +18415,10 @@ const _WebGLManager = class _WebGLManager {
   static checkSupport() {
     try {
       const canvas = document.createElement("canvas");
-      const gl = canvas.getContext("webgl2");
-      return !!gl;
+      const gl2 = canvas.getContext("webgl2");
+      if (gl2) return true;
+      const gl1 = canvas.getContext("webgl");
+      return !!gl1;
     } catch {
       return false;
     }
@@ -18445,7 +18462,7 @@ const _DebugPanel = class _DebugPanel {
       minimized: false,
       isClosed: false,
       webgl: {
-        enabled: true,
+        enabled: false,
         quality: "medium",
         preset: "normal",
         applyToItems: false
@@ -18455,6 +18472,9 @@ const _DebugPanel = class _DebugPanel {
       ...config
       // 再应用传入的配置（优先级最高）
     };
+    if (this.config.webgl) {
+      this.config.webgl.enabled = false;
+    }
     if (this.config.webgl && this.config.webgl.applyToItems === void 0) {
       this.config.webgl.applyToItems = false;
     }
@@ -18497,7 +18517,7 @@ const _DebugPanel = class _DebugPanel {
     this.container.style.pointerEvents = "auto";
     this.container.innerHTML = `
       <div class="debugger-header">
-        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.7"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.8"}</span></div>
         <div class="debugger-controls">
           <button class="debugger-btn" data-action="clear" title="清空"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
           <button class="debugger-btn" data-action="export" title="导出"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></button>
@@ -18514,41 +18534,10 @@ const _DebugPanel = class _DebugPanel {
       <div class="search-stats"></div>
     </div>
     <div class="debugger-content">
-        <div class="debugger-tabs">
-          <button class="debugger-tab active" data-tab="network">网络请求</button>
-          <button class="debugger-tab" data-tab="settings">性能与外观</button>
-        </div>
         <div class="debugger-panel-content">
           <div class="tab-content network-panel active" data-tab-content="network">
             <div class="request-list"></div>
           </div>
-          <div class="tab-content performance-panel" data-tab-content="settings">
-            <div class="settings-section" data-setting-group="enableWebGL">
-              <label class="settings-toggle">
-                <input type="checkbox" data-setting="enableWebGL" />
-                <div class="settings-text">
-                  <div class="settings-title">启用液态玻璃效果</div>
-                  <div class="settings-desc">关闭后使用轻量级 CSS 背景，适合低性能设备</div>
-                </div>
-              </label>
-              <label class="settings-toggle" data-setting-group="autoRefresh">
-                <input type="checkbox" data-setting="autoRefresh" />
-                <div class="settings-text">
-                  <div class="settings-title">自动刷新背景快照</div>
-                  <div class="settings-desc">监听页面变化自动重新截图，关闭后可通过下方按钮手动刷新</div>
-                </div>
-              </label>
-              <label class="settings-toggle" data-setting-group="enableButtonAnimation">
-                <input type="checkbox" data-setting="enableButtonAnimation" />
-                <div class="settings-text">
-                  <div class="settings-title">浮动按钮动效</div>
-                  <div class="settings-desc">更新 WebGL 按钮的实时玻璃动效，关闭可降低 GPU 压力</div>
-                </div>
-              </label>
-            </div>
-            <button class="settings-refresh-btn" data-action="manual-refresh">手动刷新背景</button>
-            <div class="settings-note">提示：当性能受限时可以关闭液态玻璃效果。随时可以重新开启，并手动刷新一次背景同步页面。</div>
-          </div>
         </div>
       </div>
     `;
@@ -19248,6 +19237,10 @@ Created by Leo (@leeguoo)`);
   async createReopenButton() {
     try {
       this.removeReopenButton();
+      if (!this.config.webgl?.enabled) {
+        this.createFallbackButton();
+        return;
+      }
       const timeout = new Promise(
         (_, reject) => setTimeout(() => reject(new Error("Timeout waiting for liquid glass")), 3e3)
       );
@@ -19303,17 +19296,8 @@ Created by Leo (@leeguoo)`);
         glassButton.textElement.style.color = "#ffffff";
         glassButton.textElement.style.textTransform = "none";
       }
-      if (glassButton.canvas) {
-        glassButton.canvas.width = buttonWidth;
-        glassButton.canvas.height = buttonHeight;
-        glassButton.canvas.style.width = `${buttonWidth}px`;
-        glassButton.canvas.style.height = `${buttonHeight}px`;
-        glassButton.canvas.style.borderRadius = `${buttonHeight / 2}px`;
-      }
-      if (glassButton.width !== void 0) {
-        ;
-        glassButton.width = buttonWidth;
-        glassButton.height = buttonHeight;
+      if (typeof glassButton.updateSizeFromDOM === "function") {
+        glassButton.updateSizeFromDOM();
       }
       const pos = this.config.position || "bottom-right";
       if (pos.includes("bottom")) {
@@ -19546,6 +19530,7 @@ Created by Leo (@leeguoo)`);
       this.webglManager.destroy();
       this.webglManager = null;
     }
+    this.container.classList.remove("webgl-active");
     this.requestsCache = [];
     this.filteredRequestsCache = [];
     logger.debug("[PWTK] Panel destroyed and all resources cleaned up");
@@ -19670,15 +19655,18 @@ Created by Leo (@leeguoo)`);
       const initialized = await this.webglManager.initialize(this.container);
       if (initialized) {
         this.webglManager.enableForElement(this.container, "main-panel");
+        this.container.classList.add("webgl-active");
         setTimeout(() => {
           this.enableWebGLForRequestItems();
         }, 500);
         this.scheduleWebGLBackgroundUpdate(true);
         logger.debug("✨ WebGL liquid glass effects initialized");
       } else {
+        this.container.classList.remove("webgl-active");
         logger.debug("🔄 WebGL initialization failed, using CSS fallback");
       }
     } catch (error) {
+      this.container.classList.remove("webgl-active");
       logger.error("WebGL initialization error:", error);
     }
   }
@@ -19756,6 +19744,7 @@ Created by Leo (@leeguoo)`);
     } else if (!enabled && this.webglManager) {
       this.webglManager.destroy();
       this.webglManager = null;
+      this.container.classList.remove("webgl-active");
       logger.debug("WebGL effects disabled");
     }
   }
@@ -19777,8 +19766,8 @@ if (typeof window !== "undefined") {
 }
 function loadLiquidGlass() {
   return new Promise((resolve) => {
-    import("./container-fXvGYIU-.mjs").then(() => {
-      return import("./button-B5OqHDUm.mjs");
+    import("./container-D0255Dzc.mjs").then(() => {
+      return import("./button-CboZyj7j.mjs");
     }).then(() => {
       resolve();
     }).catch((error) => {
@@ -19918,7 +19907,7 @@ const _NetworkDebugger = class _NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.7";
+      const currentVersion = "1.3.8";
       logger.info(`[PWTK Update] Checking for updates... Current version: ${currentVersion}`);
       const response = await fetch("https://registry.npmjs.org/@leeguoo/pwtk-network-debugger/latest");
       const data = await response.json();
@@ -19938,7 +19927,7 @@ const _NetworkDebugger = class _NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.3.7"
+        currentVersion: "1.3.8"
       };
     }
   }