111

popup.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   width: 100%;
   min-width: 0;
@@ -214,35 +218,37 @@ h2 {
   line-height: 0;
 }
 
-/* 悬浮搜索框 */
-.search-box {
-  position: absolute;
-  top: 38px;
-  right: 0;
-  z-index: 50;
+/* 内联展开式搜索框：点击搜索图标后向左展开 */
+.search-box-inline {
   align-items: center;
-  gap: 4px;
+  gap: 0;
   background: #16213e;
   border: 1px solid #0f3460;
   border-radius: 6px;
-  padding: 6px 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  width: 220px;
+  padding: 0 2px;
+  width: 190px;
+  height: 24px;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
-.search-box:not([hidden]) {
+.search-box-inline:not([hidden]) {
   display: flex;
 }
 
-.search-box input {
+.search-box-inline .btn-icon {
+  padding: 2px;
+}
+
+.search-box-inline input {
   flex: 1;
   min-width: 0;
   background: transparent;
   border: none;
   color: #e0e0e0;
-  font-size: 13px;
+  font-size: 12px;
   outline: none;
+  padding: 2px 2px;
 }
 
 .search-clear {
@@ -251,7 +257,7 @@ h2 {
   color: #888;
   cursor: pointer;
   font-size: 16px;
-  padding: 0 4px;
+  padding: 0 2px;
   line-height: 1;
 }
 
@@ -746,12 +752,13 @@ h2 {
 
 .list-actions {
   display: flex;
+  align-items: center;
   gap: 6px;
 }
 
 .btn-io {
   padding: 4px 10px;
-  background: #0f3460;
+  background: transparent;
   border: none;
   border-radius: 6px;
   color: #e0e0e0;
@@ -761,7 +768,7 @@ h2 {
 }
 
 .btn-io:hover {
-  background: #1a4a8a;
+  background: #0f3460;
 }
 
 .config-item {