Refactor localization strings for Antigravity Credits and update ConfigPage styles

- Updated English, Russian, Simplified Chinese, and Traditional Chinese localization files to change "Antigravity Credits Retry" to "Use Antigravity Credits" and removed associated descriptions.
- Modified ConfigPage.module.scss to improve layout and styling, including adjustments to widths, gaps, paddings, and border-radius for various elements.
- Simplified the structure of the ConfigPage component by removing unused variables and streamlining the JSX.

src/components/config/ConfigSection.module.scss

@@ -1,44 +1,53 @@
 @use '../../styles/mixins' as *;
-@use '../../styles/variables' as *;
 
 .section {
   display: grid;
-  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
-  gap: 24px;
-  padding: 26px 0;
-  border-top: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
-  scroll-margin-top: 112px;
-
-  &:first-child {
-    border-top: none;
-    padding-top: 0;
-  }
+  grid-template-columns: minmax(0, 178px) minmax(0, 1fr);
+  gap: clamp(18px, 2.2vw, 30px);
+  height: clamp(520px, calc(100dvh - var(--header-height, 64px) - 250px), 780px);
+  min-width: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overscroll-behavior: auto;
+  padding: clamp(20px, 2.4vw, 28px);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
+  scroll-margin-top: 104px;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  scrollbar-width: thin;
 
   @include mobile {
     grid-template-columns: minmax(0, 1fr);
-    gap: 18px;
-    padding: 22px 0;
-    scroll-margin-top: 88px;
+    gap: 14px;
+    height: clamp(420px, calc(100dvh - var(--header-height, 64px) - 260px), 680px);
+    padding: 16px;
+    scroll-margin-top: 92px;
   }
 }
 
 .header {
   position: sticky;
-  top: 104px;
+  top: 0;
   align-self: start;
   display: flex;
   flex-direction: column;
   gap: 14px;
+  z-index: 1;
+  padding-bottom: 4px;
+  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
 
   @include mobile {
     position: static;
+    background: transparent;
   }
 }
 
 .titleRow {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   min-width: 0;
 }
 
@@ -46,17 +55,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 42px;
-  height: 42px;
-  padding: 0 12px;
-  border-radius: 14px;
-  background:
-    linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 92%, transparent), transparent),
-    color-mix(in srgb, var(--primary-color) 11%, var(--bg-secondary));
-  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
-  color: var(--primary-hover);
-  font-size: 12px;
-  font-weight: 700;
+  min-width: 32px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 750;
   letter-spacing: 0.08em;
 }
 
@@ -64,11 +70,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
   color: var(--text-secondary);
   flex: 0 0 auto;
 }
@@ -82,18 +86,19 @@
 
 .title {
   margin: 0;
-  font-size: clamp(20px, 2vw, 25px);
-  line-height: 1.08;
-  font-weight: 700;
   color: var(--text-primary);
+  font-size: clamp(18px, 1.6vw, 22px);
+  font-weight: 680;
+  line-height: 1.18;
+  letter-spacing: 0;
 }
 
 .description {
   margin: 0;
-  max-width: 34ch;
+  max-width: 30ch;
   color: var(--text-secondary);
-  font-size: 14px;
-  line-height: 1.7;
+  font-size: 13px;
+  line-height: 1.65;
 
   @include mobile {
     max-width: none;

src/components/config/VisualConfigEditor.module.scss

@@ -4,10 +4,10 @@
 .visualEditor {
   display: flex;
   flex-direction: column;
-  gap: $spacing-xl;
+  gap: 18px;
 
   :global(.form-group) {
-    gap: 8px;
+    gap: 7px;
     margin-bottom: 0;
   }
 
@@ -15,46 +15,47 @@
     color: var(--text-secondary);
     font-size: 12px;
     font-weight: 700;
-    letter-spacing: 0.04em;
+    letter-spacing: 0.02em;
   }
 
   :global(.input) {
-    min-height: 48px;
-    border-radius: 16px;
-    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 84%, transparent);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    min-height: 42px;
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+    box-shadow: none;
   }
 
   :global(.input:focus) {
     background: var(--bg-primary);
-    border-color: var(--primary-color);
+    border-color: var(--text-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-primary) 12%, transparent);
   }
 
   :global(textarea.input) {
-    min-height: 120px;
+    min-height: 112px;
   }
 
   :global(.hint) {
     color: var(--text-secondary);
     font-size: 12px;
-    line-height: 1.6;
+    line-height: 1.55;
   }
 
   :global(.error-box) {
-    border-radius: 14px;
+    border-radius: 8px;
   }
 
   :global(.item-list) {
-    gap: 12px;
-    margin-top: 10px;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   :global(.item-row) {
-    border-radius: 18px;
-    padding: 14px 16px;
-    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 86%, transparent);
+    border-radius: 8px;
+    padding: 12px;
+    background: transparent;
+    border-color: var(--border-color);
   }
 
   :global(.item-row .item-meta) {
@@ -66,8 +67,9 @@
   }
 
   :global(.pill) {
-    background: color-mix(in srgb, var(--bg-secondary) 84%, transparent);
-    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: transparent;
     color: var(--text-secondary);
   }
 }
@@ -97,19 +99,19 @@
 
 .expandableToggle {
   position: absolute;
-  right: 6px;
+  right: 7px;
   top: 50%;
+  z-index: 1;
   transform: translateY(-50%);
+  padding: 2px;
+  border: 0;
   background: none;
-  border: none;
-  cursor: pointer;
+  color: var(--text-secondary);
   font-size: 10px;
   line-height: 1;
-  padding: 2px;
-  color: var(--text-secondary, #999);
-  opacity: 0.5;
-  transition: opacity 0.15s;
-  z-index: 1;
+  cursor: pointer;
+  opacity: 0.58;
+  transition: opacity 0.15s ease;
 
   &:hover {
     opacity: 1;
@@ -122,76 +124,46 @@
 }
 
 .expandableInputExpanded .expandableToggle {
-  top: 8px;
+  top: 9px;
+  right: 12px;
   transform: none;
-  right: 14px;
 }
 
 .overview {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  border-radius: 30px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
-  background:
-    radial-gradient(
-      circle at top right,
-      color-mix(in srgb, var(--primary-color) 12%, transparent),
-      transparent 36%
-    ),
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--bg-primary) 94%, transparent),
-      color-mix(in srgb, var(--bg-secondary) 96%, transparent)
-    );
-  padding: clamp(22px, 3vw, 30px);
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0 auto auto 0;
-    width: min(220px, 44vw);
-    height: min(220px, 44vw);
-    background: radial-gradient(
-      circle,
-      color-mix(in srgb, var(--primary-color) 16%, transparent),
-      transparent 72%
-    );
-    opacity: 0.6;
-    pointer-events: none;
-  }
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  padding: 0 0 18px;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .overviewHeader {
-  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
   min-width: 0;
+
+  @include mobile {
+    align-items: stretch;
+  }
 }
 
 .overviewMeta {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 6px;
 }
 
 .overviewPill {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  min-height: 34px;
-  padding: 0 14px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
+  min-height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
   color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  line-height: 1.2;
 }
 
 .overviewPillWarning {
@@ -200,93 +172,14 @@
   background: var(--warning-bg);
 }
 
-.overviewFocusList {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-
-  @media (max-width: 1200px) {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  @include mobile {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-.overviewFocusLink {
-  @include button-reset;
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  width: 100%;
-  padding: 14px 16px;
-  border-radius: 20px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
-  text-align: left;
-  transition:
-    transform 0.18s ease,
-    border-color 0.18s ease,
-    background-color 0.18s ease;
-
-  &:hover {
-    transform: translateY(-1px);
-    border-color: color-mix(in srgb, var(--primary-color) 26%, var(--border-color));
-    background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
-  }
-}
-
-.overviewFocusLinkActive {
-  border-color: color-mix(in srgb, var(--primary-color) 28%, var(--border-color));
-  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
-}
-
-.focusIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
-  color: var(--primary-hover);
-  flex: 0 0 auto;
-}
-
-.focusCopy {
+.workspace {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 14px;
   min-width: 0;
-}
-
-.focusTitle {
-  color: var(--text-primary);
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.focusDescription {
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.workspace {
-  display: grid;
-  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
-  gap: 24px;
-  align-items: start;
-
-  @media (max-width: 1024px) {
-    grid-template-columns: minmax(0, 1fr);
-  }
 
   @include mobile {
-    gap: 16px;
+    gap: 12px;
   }
 }
 
@@ -295,57 +188,45 @@
 
   @include mobile {
     position: sticky;
-    top: calc(var(--header-height, 64px) + 12px);
+    top: calc(var(--header-height, 64px) + 10px);
     z-index: 4;
     display: block;
     margin-bottom: 4px;
+    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
   }
 }
 
 .mobileSectionNavScroller {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  padding: 4px 2px 10px;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  overflow: visible;
+  padding: 2px 0 8px;
 }
 
 .mobileSectionNavButton {
   @include button-reset;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  min-width: max-content;
-  flex: 0 0 auto;
-  padding: 10px 14px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
-  box-shadow: 0 18px 36px -30px rgba(0, 0, 0, 0.28);
-  white-space: nowrap;
+  gap: 7px;
+  min-width: 0;
+  width: 100%;
+  padding: 9px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--bg-primary);
+  text-align: left;
 }
 
 .mobileSectionNavButtonActive {
-  border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
-  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
+  border-color: var(--text-primary);
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
 }
 
 .mobileSectionNavIndex {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   letter-spacing: 0.08em;
 }
 
@@ -353,16 +234,17 @@
   color: var(--text-primary);
   font-size: 13px;
   font-weight: 700;
+  line-height: 1.25;
 }
 
 .mobileSectionNavBadge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 22px;
-  height: 22px;
+  min-width: 20px;
+  height: 20px;
   padding: 0 6px;
-  border-radius: 999px;
+  border-radius: 6px;
   background: var(--warning-bg);
   border: 1px solid var(--warning-border);
   color: var(--warning-text);
@@ -371,142 +253,68 @@
 }
 
 .sidebar {
-  position: relative;
-  align-self: start;
-
-  @media (max-width: 1024px) {
-    position: static;
-  }
+  position: sticky;
+  top: calc(var(--header-height, 64px) + 12px);
+  z-index: 5;
+  align-self: stretch;
+  min-width: 0;
 
   @include mobile {
     display: none;
   }
 }
 
-.sidebarPlaceholder {
-  min-height: 1px;
-}
-
 .sidebarRail {
-  max-height: calc(100vh - var(--header-height, 64px) - 36px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 12px;
-  border-radius: 26px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
-  --glass-blur: 14px;
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.floatingSidebarContainer {
-  position: fixed;
-  left: 0;
-  top: 0;
-  will-change: transform, width, max-height;
-  z-index: 45;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.18s ease;
-
-  @media (max-width: 1024px) {
-    display: none;
-  }
-}
-
-.floatingSidebarRail {
-  max-height: inherit;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 12px;
-  border-radius: 26px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
-  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  padding: 0 0 12px;
+  border-bottom: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
 }
 
 .navList {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
+  min-width: 0;
 
-  @media (max-width: 1024px) {
-    flex-direction: row;
-    overflow-x: auto;
-    padding-bottom: 4px;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  @include tablet {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 .navButton {
   @include button-reset;
   display: flex;
-  align-items: flex-start;
-  gap: 14px;
+  align-items: center;
+  gap: 10px;
   width: 100%;
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid transparent;
+  min-height: 48px;
+  padding: 9px 11px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   background: transparent;
   color: inherit;
   text-align: left;
   transition:
-    transform 0.18s ease,
-    background-color 0.18s ease,
-    border-color 0.18s ease;
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
 
   &:hover {
-    transform: translateX(2px);
-    background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
-  }
-
-  @media (max-width: 1024px) {
-    min-width: 232px;
-    flex: 0 0 auto;
-
-    &:hover {
-      transform: translateY(-1px);
-    }
+    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
   }
 }
 
 .navButtonActive {
-  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
-  border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
-  box-shadow: 0 18px 36px -30px rgba(0, 0, 0, 0.32);
+  border-color: var(--text-primary);
+  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
 }
 
 .navIndex {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 34px;
-  height: 34px;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  color: var(--text-secondary);
+  min-width: 24px;
+  padding-top: 2px;
+  color: var(--text-tertiary);
   font-size: 11px;
-  font-weight: 700;
+  font-weight: 750;
   letter-spacing: 0.08em;
   flex: 0 0 auto;
 }
@@ -514,7 +322,6 @@
 .navMain {
   display: flex;
   flex-direction: column;
-  gap: 6px;
   min-width: 0;
   flex: 1;
 }
@@ -522,14 +329,14 @@
 .navHeadingRow {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   min-width: 0;
 }
 
 .navLabelWrap {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   min-width: 0;
 }
 
@@ -537,53 +344,64 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--primary-hover);
+  width: 16px;
+  color: var(--text-secondary);
   flex: 0 0 auto;
 }
 
 .navLabel {
   color: var(--text-primary);
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 700;
-  line-height: 1.2;
-}
-
-.navDescription {
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.55;
+  line-height: 1.25;
 }
 
 .navBadge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 6px;
   background: var(--warning-bg);
   border: 1px solid var(--warning-border);
   color: var(--warning-text);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   flex: 0 0 auto;
 }
 
 .sections {
   display: flex;
-  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: 100%;
   min-width: 0;
-  padding: clamp(20px, 3vw, 30px);
-  border-radius: 32px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
+  overflow-x: auto;
+  overflow-y: hidden;
+  align-items: stretch;
+  padding: 0 0 12px;
+  scroll-padding-left: 0;
+  scroll-snap-type: x mandatory;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+
+  @include mobile {
+    padding-bottom: 10px;
+  }
+
+  > * {
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+  }
 }
 
 .sectionGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 14px;
 
   @include mobile {
     grid-template-columns: minmax(0, 1fr);
@@ -593,23 +411,24 @@
 .sectionStack {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }
 
 .divider {
   height: 1px;
-  background: color-mix(in srgb, var(--border-color) 84%, transparent);
+  background: var(--border-color);
 }
 
 .toggleRow {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px;
+  gap: 14px;
   align-items: center;
-  padding: 16px 18px;
-  border-radius: 18px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
+  min-height: 74px;
+  padding: 14px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: transparent;
 
   @include mobile {
     grid-template-columns: minmax(0, 1fr);
@@ -619,27 +438,27 @@
 .toggleCopy {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
   min-width: 0;
 }
 
 .toggleTitle {
   color: var(--text-primary);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.25;
 }
 
 .toggleDescription {
   color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.6;
+  font-size: 12px;
+  line-height: 1.55;
 }
 
 .fieldShell {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 7px;
   min-width: 0;
 }
 
@@ -647,7 +466,7 @@
   color: var(--text-secondary);
   font-size: 12px;
   font-weight: 700;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.02em;
 }
 
 .fieldControl {
@@ -657,47 +476,46 @@
 .fieldHint {
   color: var(--text-secondary);
   font-size: 12px;
-  line-height: 1.6;
+  line-height: 1.55;
 }
 
 .inlinePill {
   position: absolute;
-  right: 10px;
+  right: 8px;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
-  min-height: 26px;
-  padding: 0 10px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-primary);
   color: var(--text-secondary);
   font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.04em;
 }
 
 .subsection {
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  padding: 18px 20px;
-  border-radius: 24px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: transparent;
 }
 
 .subsectionHeader {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 5px;
 }
 
 .subsectionTitle {
   margin: 0;
   color: var(--text-primary);
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 700;
   line-height: 1.25;
 }
@@ -705,62 +523,47 @@
 .subsectionDescription {
   margin: 0;
   color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.65;
-}
-
-.sectionIssueBadge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 28px;
-  height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: var(--warning-bg);
-  border: 1px solid var(--warning-border);
-  color: var(--warning-text);
   font-size: 12px;
-  font-weight: 700;
+  line-height: 1.6;
 }
 
 .blockHeaderRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .blockStack {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
 .ruleCard {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 14px;
-  border-radius: 20px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
+  padding: 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-secondary) 64%, transparent);
 }
 
 .ruleCardHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .ruleCardTitle {
   color: var(--text-primary);
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.25;
 }
 
 .blockLabel {
@@ -768,7 +571,6 @@
   font-size: 12px;
   font-weight: 700;
   line-height: 1.4;
-  letter-spacing: 0.04em;
 }
 
 .actionRow {
@@ -777,12 +579,12 @@
 }
 
 .emptyState {
-  border: 1px dashed color-mix(in srgb, var(--border-color) 84%, transparent);
-  border-radius: 18px;
-  padding: 18px 16px;
+  border: 1px dashed var(--border-color);
+  border-radius: 8px;
+  padding: 16px;
   color: var(--text-secondary);
   text-align: center;
-  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+  background: transparent;
 }
 
 .stringList {
@@ -813,7 +615,7 @@
   display: grid;
   grid-template-columns: 1fr 140px 1fr auto;
   gap: 8px;
-  align-items: center;
+  align-items: start;
 }
 
 .payloadRuleParamGroup {
@@ -823,7 +625,7 @@
 }
 
 .payloadJsonInput {
-  min-height: 120px;
+  min-height: 112px;
   resize: vertical;
   font-family:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
@@ -841,6 +643,10 @@
   align-items: center;
 }
 
+.payloadRowActionButton {
+  flex: 0 0 auto;
+}
+
 .apiKeyModalInputRow {
   display: flex;
   gap: 8px;
@@ -871,27 +677,13 @@
 
 @include mobile {
   .overview {
-    gap: 14px;
-    padding: 18px;
-    border-radius: 24px;
-  }
-
-  .overviewFocusLink {
-    padding: 12px 14px;
-  }
-
-  .sections {
-    border-radius: 26px;
-    padding: 16px;
-  }
-
-  .subsection {
-    padding: 16px;
-    border-radius: 20px;
+    padding-bottom: 14px;
   }
 
+  .subsection,
+  .ruleCard,
   .toggleRow {
-    padding: 14px 16px;
+    padding: 14px;
   }
 
   .blockHeaderRow,
@@ -917,14 +709,9 @@
 }
 
 @media (max-width: 380px) {
-  .overview,
-  .sections {
-    padding: 14px;
-  }
-
   .subsection,
   .ruleCard,
   .toggleRow {
-    padding: 14px;
+    padding: 12px;
   }
 }

src/components/config/VisualConfigEditor.tsx

@@ -1,5 +1,4 @@
 import {
-  useLayoutEffect,
   useCallback,
   useEffect,
   useId,
@@ -9,7 +8,6 @@ import {
   type ComponentType,
   type ReactNode,
 } from 'react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { usePageTransitionLayer } from '@/components/common/PageTransitionLayer';
 import { Input } from '@/components/ui/Input';
@@ -21,9 +19,7 @@ import {
   IconKey,
   IconSatellite,
   IconSettings,
-  IconShield,
   IconTimer,
-  IconTrendingUp,
   type IconProps,
 } from '@/components/ui/icons';
 import { ConfigSection } from '@/components/config/ConfigSection';
@@ -46,11 +42,8 @@ import styles from './VisualConfigEditor.module.scss';
 
 type VisualSectionId =
   | 'server'
-  | 'tls'
-  | 'remote'
   | 'auth'
   | 'system'
-  | 'network'
   | 'quota'
   | 'streaming'
   | 'payload';
@@ -58,7 +51,6 @@ type VisualSectionId =
 type VisualSection = {
   id: VisualSectionId;
   title: string;
-  description: string;
   icon: ComponentType<IconProps>;
   errorCount: number;
 };
@@ -181,8 +173,6 @@ export function VisualConfigEditor({
   const pageTransitionLayer = usePageTransitionLayer();
   const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.isCurrentLayer : true;
   const isMobile = useMediaQuery('(max-width: 768px)');
-  const isFloatingSidebar = useMediaQuery('(min-width: 1025px)');
-  const shouldRenderFloatingSidebar = !isMobile && isFloatingSidebar && isCurrentLayer;
   const routingStrategyLabelId = useId();
   const routingStrategyHintId = `${routingStrategyLabelId}-hint`;
   const keepaliveInputId = useId();
@@ -192,9 +182,6 @@ export function VisualConfigEditor({
   const nonstreamKeepaliveHintId = `${nonstreamKeepaliveInputId}-hint`;
   const nonstreamKeepaliveErrorId = `${nonstreamKeepaliveInputId}-error`;
   const [activeSectionId, setActiveSectionId] = useState<VisualSectionId>('server');
-  const workspaceRef = useRef<HTMLDivElement | null>(null);
-  const sidebarAnchorRef = useRef<HTMLElement | null>(null);
-  const floatingSidebarRef = useRef<HTMLDivElement | null>(null);
   const sectionRefs = useRef<Partial<Record<VisualSectionId, HTMLElement | null>>>({});
   const mobileNavScrollerRef = useRef<HTMLDivElement | null>(null);
   const mobileNavButtonRefs = useRef<Partial<Record<VisualSectionId, HTMLButtonElement | null>>>(
@@ -258,56 +245,35 @@ export function VisualConfigEditor({
       {
         id: 'server',
         title: t('config_management.visual.sections.server.title'),
-        description: t('config_management.visual.sections.server.description'),
         icon: IconSettings,
         errorCount: countErrors(['port']),
       },
-      {
-        id: 'tls',
-        title: t('config_management.visual.sections.tls.title'),
-        description: t('config_management.visual.sections.tls.description'),
-        icon: IconShield,
-        errorCount: 0,
-      },
-      {
-        id: 'remote',
-        title: t('config_management.visual.sections.remote.title'),
-        description: t('config_management.visual.sections.remote.description'),
-        icon: IconSatellite,
-        errorCount: 0,
-      },
       {
         id: 'auth',
         title: t('config_management.visual.sections.auth.title'),
-        description: t('config_management.visual.sections.auth.description'),
         icon: IconKey,
         errorCount: 0,
       },
       {
         id: 'system',
         title: t('config_management.visual.sections.system.title'),
-        description: t('config_management.visual.sections.system.description'),
         icon: IconDiamond,
-        errorCount: countErrors(['logsMaxTotalSizeMb']),
-      },
-      {
-        id: 'network',
-        title: t('config_management.visual.sections.network.title'),
-        description: t('config_management.visual.sections.network.description'),
-        icon: IconTrendingUp,
-        errorCount: countErrors(['requestRetry', 'maxRetryCredentials', 'maxRetryInterval']),
+        errorCount: countErrors([
+          'logsMaxTotalSizeMb',
+          'requestRetry',
+          'maxRetryCredentials',
+          'maxRetryInterval',
+        ]),
       },
       {
         id: 'quota',
         title: t('config_management.visual.sections.quota.title'),
-        description: t('config_management.visual.sections.quota.description'),
         icon: IconTimer,
         errorCount: 0,
       },
       {
         id: 'streaming',
         title: t('config_management.visual.sections.streaming.title'),
-        description: t('config_management.visual.sections.streaming.description'),
         icon: IconSatellite,
         errorCount: countErrors([
           'streaming.keepaliveSeconds',
@@ -318,7 +284,6 @@ export function VisualConfigEditor({
       {
         id: 'payload',
         title: t('config_management.visual.sections.payload.title'),
-        description: t('config_management.visual.sections.payload.description'),
         icon: IconCode,
         errorCount: hasPayloadValidationErrors ? 1 : 0,
       },
@@ -328,10 +293,7 @@ export function VisualConfigEditor({
 
   const hasValidationIssues =
     sections.some((section) => section.errorCount > 0) || hasPayloadValidationErrors;
-  const focusSections = useMemo(
-    () => sections.filter((section) => ['server', 'network', 'payload'].includes(section.id)),
-    [sections]
-  );
+  const activeSection = sections.find((section) => section.id === activeSectionId) ?? sections[0];
 
   useEffect(() => {
     if (!isCurrentLayer) return undefined;
@@ -383,104 +345,13 @@ export function VisualConfigEditor({
 
   const handleSectionJump = useCallback((sectionId: VisualSectionId) => {
     setActiveSectionId(sectionId);
-    sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    sectionRefs.current[sectionId]?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start',
+    });
   }, []);
 
-  useLayoutEffect(() => {
-    const floatingElement = floatingSidebarRef.current;
-    const anchorElement = sidebarAnchorRef.current;
-    const workspaceElement = workspaceRef.current;
-    if (!floatingElement) return undefined;
-
-    const clearFloatingStyles = () => {
-      floatingElement.style.removeProperty('transform');
-      floatingElement.style.removeProperty('width');
-      floatingElement.style.removeProperty('max-height');
-      floatingElement.style.removeProperty('opacity');
-      floatingElement.style.removeProperty('pointer-events');
-    };
-
-    if (!shouldRenderFloatingSidebar || !anchorElement || !workspaceElement) {
-      clearFloatingStyles();
-      return undefined;
-    }
-
-    /* ---- Cache header height – recomputed only on resize ---- */
-    const computeHeaderHeight = () => {
-      const header = document.querySelector('.main-header') as HTMLElement | null;
-      if (header) return header.getBoundingClientRect().height;
-
-      const raw = getComputedStyle(document.documentElement).getPropertyValue('--header-height');
-      const parsed = Number.parseFloat(raw);
-      return Number.isFinite(parsed) ? parsed : 64;
-    };
-    let headerHeight = computeHeaderHeight();
-
-    /* ---- Cache content scroller – resolved once ---- */
-    const contentScroller = document.querySelector('.content') as HTMLElement | null;
-
-    /* ---- Cache floating height from previous frame ---- */
-    let cachedFloatingHeight = floatingElement.getBoundingClientRect().height || 200;
-
-    let frameId = 0;
-
-    const updateFloatingPosition = () => {
-      frameId = 0;
-
-      const anchorRect = anchorElement.getBoundingClientRect();
-      const workspaceRect = workspaceElement.getBoundingClientRect();
-      const stickyTop = headerHeight + 20;
-      const viewportPadding = 16;
-      const maxTop = workspaceRect.bottom - cachedFloatingHeight;
-      const unclampedTop = Math.min(Math.max(anchorRect.top, stickyTop), maxTop);
-      const top = Math.max(unclampedTop, viewportPadding);
-      const left = Math.max(anchorRect.left, viewportPadding);
-      const width = Math.max(
-        Math.min(anchorRect.width, window.innerWidth - left - viewportPadding),
-        220
-      );
-      const maxHeight = Math.max(window.innerHeight - top - viewportPadding, 160);
-      const isVisible = workspaceRect.bottom > stickyTop + 24 && anchorRect.top < window.innerHeight;
-
-      floatingElement.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-      floatingElement.style.width = `${width}px`;
-      floatingElement.style.maxHeight = `${maxHeight}px`;
-      floatingElement.style.opacity = isVisible ? '1' : '0';
-      floatingElement.style.pointerEvents = isVisible ? 'auto' : 'none';
-    };
-
-    const requestPositionUpdate = () => {
-      if (frameId) cancelAnimationFrame(frameId);
-      frameId = requestAnimationFrame(updateFloatingPosition);
-    };
-
-    const handleResize = () => {
-      headerHeight = computeHeaderHeight();
-      cachedFloatingHeight = floatingElement.getBoundingClientRect().height || cachedFloatingHeight;
-      requestPositionUpdate();
-    };
-
-    requestPositionUpdate();
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('scroll', requestPositionUpdate, { passive: true });
-    contentScroller?.addEventListener('scroll', requestPositionUpdate, { passive: true });
-
-    const resizeObserver =
-      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(requestPositionUpdate);
-    resizeObserver?.observe(anchorElement);
-    resizeObserver?.observe(workspaceElement);
-
-    return () => {
-      if (frameId) cancelAnimationFrame(frameId);
-      resizeObserver?.disconnect();
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('scroll', requestPositionUpdate);
-      contentScroller?.removeEventListener('scroll', requestPositionUpdate);
-      clearFloatingStyles();
-    };
-  }, [shouldRenderFloatingSidebar]);
-
   const navContent = (
     <div className={styles.navList}>
       {sections.map((section, index) => {
@@ -510,7 +381,6 @@ export function VisualConfigEditor({
                   </span>
                 ) : null}
               </span>
-              <span className={styles.navDescription}>{section.description}</span>
             </span>
           </button>
         );
@@ -526,6 +396,7 @@ export function VisualConfigEditor({
             <span className={styles.overviewPill}>
               {t('config_management.visual.quick_jump', { defaultValue: '快速跳转' })}
             </span>
+            <span className={styles.overviewPill}>{activeSection?.title}</span>
             {hasValidationIssues ? (
               <span className={`${styles.overviewPill} ${styles.overviewPillWarning}`}>
                 {t('config_management.visual.validation.validation_blocked')}
@@ -533,39 +404,9 @@ export function VisualConfigEditor({
             ) : null}
           </div>
         </div>
-
-        <div className={styles.overviewFocusList}>
-          {focusSections.map((section) => {
-            const Icon = section.icon;
-
-            return (
-              <button
-                key={section.id}
-                type="button"
-                className={`${styles.overviewFocusLink} ${
-                  activeSectionId === section.id ? styles.overviewFocusLinkActive : ''
-                }`}
-                onClick={() => handleSectionJump(section.id)}
-              >
-                <span className={styles.focusIcon}>
-                  <Icon size={16} />
-                </span>
-                <span className={styles.focusCopy}>
-                  <span className={styles.focusTitle}>{section.title}</span>
-                  <span className={styles.focusDescription}>{section.description}</span>
-                </span>
-                {section.errorCount > 0 ? (
-                  <span className={styles.navBadge} aria-hidden="true">
-                    {section.errorCount}
-                  </span>
-                ) : null}
-              </button>
-            );
-          })}
-        </div>
       </div>
 
-      <div ref={workspaceRef} className={styles.workspace}>
+      <div className={styles.workspace}>
         {isMobile ? (
           <div className={styles.mobileSectionNav}>
             <div
@@ -600,12 +441,8 @@ export function VisualConfigEditor({
           </div>
         ) : null}
 
-        <aside ref={sidebarAnchorRef} className={styles.sidebar}>
-          {isFloatingSidebar ? (
-            <div className={styles.sidebarPlaceholder} aria-hidden="true" />
-          ) : (
-            <div className={styles.sidebarRail}>{navContent}</div>
-          )}
+        <aside className={styles.sidebar}>
+          <div className={styles.sidebarRail}>{navContent}</div>
         </aside>
 
         <div className={styles.sections}>
@@ -618,112 +455,106 @@ export function VisualConfigEditor({
             icon={<IconSettings size={16} />}
             title={t('config_management.visual.sections.server.title')}
             description={t('config_management.visual.sections.server.description')}
-          >
-            <SectionGrid>
-              <Input
-                label={t('config_management.visual.sections.server.host')}
-                placeholder="0.0.0.0"
-                value={values.host}
-                onChange={(e) => onChange({ host: e.target.value })}
-                disabled={disabled}
-              />
-              <Input
-                label={t('config_management.visual.sections.server.port')}
-                type="number"
-                placeholder="8317"
-                value={values.port}
-                onChange={(e) => onChange({ port: e.target.value })}
-                disabled={disabled}
-                error={portError}
-              />
-            </SectionGrid>
-          </ConfigSection>
-
-          <ConfigSection
-            id="tls"
-            ref={(node) => {
-              sectionRefs.current.tls = node;
-            }}
-            indexLabel="02"
-            icon={<IconShield size={16} />}
-            title={t('config_management.visual.sections.tls.title')}
-            description={t('config_management.visual.sections.tls.description')}
           >
             <SectionStack>
-              <ToggleRow
-                title={t('config_management.visual.sections.tls.enable')}
-                description={t('config_management.visual.sections.tls.enable_desc')}
-                checked={values.tlsEnable}
-                disabled={disabled}
-                onChange={(tlsEnable) => onChange({ tlsEnable })}
-              />
+              <SectionGrid>
+                <Input
+                  label={t('config_management.visual.sections.server.host')}
+                  placeholder="0.0.0.0"
+                  value={values.host}
+                  onChange={(e) => onChange({ host: e.target.value })}
+                  disabled={disabled}
+                />
+                <Input
+                  label={t('config_management.visual.sections.server.port')}
+                  type="number"
+                  placeholder="8317"
+                  value={values.port}
+                  onChange={(e) => onChange({ port: e.target.value })}
+                  disabled={disabled}
+                  error={portError}
+                />
+              </SectionGrid>
 
-              {values.tlsEnable ? (
-                <>
-                  <Divider />
+              <SectionSubsection
+                title={t('config_management.visual.sections.tls.title')}
+                description={t('config_management.visual.sections.tls.description')}
+              >
+                <SectionStack>
+                  <ToggleRow
+                    title={t('config_management.visual.sections.tls.enable')}
+                    description={t('config_management.visual.sections.tls.enable_desc')}
+                    checked={values.tlsEnable}
+                    disabled={disabled}
+                    onChange={(tlsEnable) => onChange({ tlsEnable })}
+                  />
+
+                  {values.tlsEnable ? (
+                    <>
+                      <Divider />
+                      <SectionGrid>
+                        <Input
+                          label={t('config_management.visual.sections.tls.cert')}
+                          placeholder="/path/to/cert.pem"
+                          value={values.tlsCert}
+                          onChange={(e) => onChange({ tlsCert: e.target.value })}
+                          disabled={disabled}
+                        />
+                        <Input
+                          label={t('config_management.visual.sections.tls.key')}
+                          placeholder="/path/to/key.pem"
+                          value={values.tlsKey}
+                          onChange={(e) => onChange({ tlsKey: e.target.value })}
+                          disabled={disabled}
+                        />
+                      </SectionGrid>
+                    </>
+                  ) : null}
+                </SectionStack>
+              </SectionSubsection>
+
+              <SectionSubsection
+                title={t('config_management.visual.sections.remote.title')}
+                description={t('config_management.visual.sections.remote.description')}
+              >
+                <SectionStack>
+                  <SectionGrid>
+                    <ToggleRow
+                      title={t('config_management.visual.sections.remote.allow_remote')}
+                      description={t('config_management.visual.sections.remote.allow_remote_desc')}
+                      checked={values.rmAllowRemote}
+                      disabled={disabled}
+                      onChange={(rmAllowRemote) => onChange({ rmAllowRemote })}
+                    />
+                    <ToggleRow
+                      title={t('config_management.visual.sections.remote.disable_panel')}
+                      description={t('config_management.visual.sections.remote.disable_panel_desc')}
+                      checked={values.rmDisableControlPanel}
+                      disabled={disabled}
+                      onChange={(rmDisableControlPanel) => onChange({ rmDisableControlPanel })}
+                    />
+                  </SectionGrid>
                   <SectionGrid>
                     <Input
-                      label={t('config_management.visual.sections.tls.cert')}
-                      placeholder="/path/to/cert.pem"
-                      value={values.tlsCert}
-                      onChange={(e) => onChange({ tlsCert: e.target.value })}
+                      label={t('config_management.visual.sections.remote.secret_key')}
+                      type="password"
+                      placeholder={t(
+                        'config_management.visual.sections.remote.secret_key_placeholder'
+                      )}
+                      value={values.rmSecretKey}
+                      onChange={(e) => onChange({ rmSecretKey: e.target.value })}
                       disabled={disabled}
                     />
                     <Input
-                      label={t('config_management.visual.sections.tls.key')}
-                      placeholder="/path/to/key.pem"
-                      value={values.tlsKey}
-                      onChange={(e) => onChange({ tlsKey: e.target.value })}
+                      label={t('config_management.visual.sections.remote.panel_repo')}
+                      placeholder="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+                      value={values.rmPanelRepo}
+                      onChange={(e) => onChange({ rmPanelRepo: e.target.value })}
                       disabled={disabled}
                     />
                   </SectionGrid>
-                </>
-              ) : null}
-            </SectionStack>
-          </ConfigSection>
-
-          <ConfigSection
-            id="remote"
-            ref={(node) => {
-              sectionRefs.current.remote = node;
-            }}
-            indexLabel="03"
-            icon={<IconSatellite size={16} />}
-            title={t('config_management.visual.sections.remote.title')}
-            description={t('config_management.visual.sections.remote.description')}
-          >
-            <SectionStack>
-              <ToggleRow
-                title={t('config_management.visual.sections.remote.allow_remote')}
-                description={t('config_management.visual.sections.remote.allow_remote_desc')}
-                checked={values.rmAllowRemote}
-                disabled={disabled}
-                onChange={(rmAllowRemote) => onChange({ rmAllowRemote })}
-              />
-              <ToggleRow
-                title={t('config_management.visual.sections.remote.disable_panel')}
-                description={t('config_management.visual.sections.remote.disable_panel_desc')}
-                checked={values.rmDisableControlPanel}
-                disabled={disabled}
-                onChange={(rmDisableControlPanel) => onChange({ rmDisableControlPanel })}
-              />
-              <SectionGrid>
-                <Input
-                  label={t('config_management.visual.sections.remote.secret_key')}
-                  type="password"
-                  placeholder={t('config_management.visual.sections.remote.secret_key_placeholder')}
-                  value={values.rmSecretKey}
-                  onChange={(e) => onChange({ rmSecretKey: e.target.value })}
-                  disabled={disabled}
-                />
-                <Input
-                  label={t('config_management.visual.sections.remote.panel_repo')}
-                  placeholder="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
-                  value={values.rmPanelRepo}
-                  onChange={(e) => onChange({ rmPanelRepo: e.target.value })}
-                  disabled={disabled}
-                />
-              </SectionGrid>
+                </SectionStack>
+              </SectionSubsection>
             </SectionStack>
           </ConfigSection>
 
@@ -732,7 +563,7 @@ export function VisualConfigEditor({
             ref={(node) => {
               sectionRefs.current.auth = node;
             }}
-            indexLabel="04"
+            indexLabel="02"
             icon={<IconKey size={16} />}
             title={t('config_management.visual.sections.auth.title')}
             description={t('config_management.visual.sections.auth.description')}
@@ -761,7 +592,7 @@ export function VisualConfigEditor({
             ref={(node) => {
               sectionRefs.current.system = node;
             }}
-            indexLabel="05"
+            indexLabel="03"
             icon={<IconDiamond size={16} />}
             title={t('config_management.visual.sections.system.title')}
             description={t('config_management.visual.sections.system.description')}
@@ -802,118 +633,118 @@ export function VisualConfigEditor({
                   error={logsMaxSizeError}
                 />
               </SectionGrid>
-            </SectionStack>
-          </ConfigSection>
 
-          <ConfigSection
-            id="network"
-            ref={(node) => {
-              sectionRefs.current.network = node;
-            }}
-            indexLabel="06"
-            icon={<IconTrendingUp size={16} />}
-            title={t('config_management.visual.sections.network.title')}
-            description={t('config_management.visual.sections.network.description')}
-          >
-            <SectionStack>
-              <SectionGrid>
-                <Input
-                  label={t('config_management.visual.sections.network.proxy_url')}
-                  placeholder="socks5://user:pass@127.0.0.1:1080/"
-                  value={values.proxyUrl}
-                  onChange={(e) => onChange({ proxyUrl: e.target.value })}
-                  disabled={disabled}
-                />
-                <Input
-                  label={t('config_management.visual.sections.network.request_retry')}
-                  type="number"
-                  placeholder="3"
-                  value={values.requestRetry}
-                  onChange={(e) => onChange({ requestRetry: e.target.value })}
-                  disabled={disabled}
-                  error={requestRetryError}
-                />
-                <Input
-                  label={t('config_management.visual.sections.network.max_retry_credentials')}
-                  type="number"
-                  placeholder="0"
-                  value={values.maxRetryCredentials}
-                  onChange={(e) => onChange({ maxRetryCredentials: e.target.value })}
-                  disabled={disabled}
-                  hint={t('config_management.visual.sections.network.max_retry_credentials_hint')}
-                  error={maxRetryCredentialsError}
-                />
-                <Input
-                  label={t('config_management.visual.sections.network.max_retry_interval')}
-                  type="number"
-                  placeholder="30"
-                  value={values.maxRetryInterval}
-                  onChange={(e) => onChange({ maxRetryInterval: e.target.value })}
-                  disabled={disabled}
-                  error={maxRetryIntervalError}
-                />
-                <FieldShell
-                  label={t('config_management.visual.sections.network.routing_strategy')}
-                  labelId={routingStrategyLabelId}
-                  hint={t('config_management.visual.sections.network.routing_strategy_hint')}
-                  hintId={routingStrategyHintId}
-                >
-                  <Select
-                    value={values.routingStrategy}
-                    options={[
-                      {
-                        value: 'round-robin',
-                        label: t('config_management.visual.sections.network.strategy_round_robin'),
-                      },
-                      {
-                        value: 'fill-first',
-                        label: t('config_management.visual.sections.network.strategy_fill_first'),
-                      },
-                    ]}
-                    id={`${routingStrategyLabelId}-select`}
-                    disabled={disabled}
-                    ariaLabelledBy={routingStrategyLabelId}
-                    ariaDescribedBy={routingStrategyHintId}
-                    onChange={(nextValue) =>
-                      onChange({
-                        routingStrategy: nextValue as VisualConfigValues['routingStrategy'],
-                      })
-                    }
-                  />
-                </FieldShell>
-                <Input
-                  label={t('config_management.visual.sections.network.session_affinity_ttl')}
-                  placeholder="1h"
-                  value={values.routingSessionAffinityTTL}
-                  onChange={(e) => onChange({ routingSessionAffinityTTL: e.target.value })}
-                  disabled={disabled}
-                />
-              </SectionGrid>
+              <SectionSubsection
+                title={t('config_management.visual.sections.network.title')}
+                description={t('config_management.visual.sections.network.description')}
+              >
+                <SectionStack>
+                  <SectionGrid>
+                    <Input
+                      label={t('config_management.visual.sections.network.proxy_url')}
+                      placeholder="socks5://user:pass@127.0.0.1:1080/"
+                      value={values.proxyUrl}
+                      onChange={(e) => onChange({ proxyUrl: e.target.value })}
+                      disabled={disabled}
+                    />
+                    <Input
+                      label={t('config_management.visual.sections.network.request_retry')}
+                      type="number"
+                      placeholder="3"
+                      value={values.requestRetry}
+                      onChange={(e) => onChange({ requestRetry: e.target.value })}
+                      disabled={disabled}
+                      error={requestRetryError}
+                    />
+                    <Input
+                      label={t('config_management.visual.sections.network.max_retry_credentials')}
+                      type="number"
+                      placeholder="0"
+                      value={values.maxRetryCredentials}
+                      onChange={(e) => onChange({ maxRetryCredentials: e.target.value })}
+                      disabled={disabled}
+                      hint={t(
+                        'config_management.visual.sections.network.max_retry_credentials_hint'
+                      )}
+                      error={maxRetryCredentialsError}
+                    />
+                    <Input
+                      label={t('config_management.visual.sections.network.max_retry_interval')}
+                      type="number"
+                      placeholder="30"
+                      value={values.maxRetryInterval}
+                      onChange={(e) => onChange({ maxRetryInterval: e.target.value })}
+                      disabled={disabled}
+                      error={maxRetryIntervalError}
+                    />
+                    <FieldShell
+                      label={t('config_management.visual.sections.network.routing_strategy')}
+                      labelId={routingStrategyLabelId}
+                      hint={t('config_management.visual.sections.network.routing_strategy_hint')}
+                      hintId={routingStrategyHintId}
+                    >
+                      <Select
+                        value={values.routingStrategy}
+                        options={[
+                          {
+                            value: 'round-robin',
+                            label: t(
+                              'config_management.visual.sections.network.strategy_round_robin'
+                            ),
+                          },
+                          {
+                            value: 'fill-first',
+                            label: t(
+                              'config_management.visual.sections.network.strategy_fill_first'
+                            ),
+                          },
+                        ]}
+                        id={`${routingStrategyLabelId}-select`}
+                        disabled={disabled}
+                        ariaLabelledBy={routingStrategyLabelId}
+                        ariaDescribedBy={routingStrategyHintId}
+                        onChange={(nextValue) =>
+                          onChange({
+                            routingStrategy: nextValue as VisualConfigValues['routingStrategy'],
+                          })
+                        }
+                      />
+                    </FieldShell>
+                    <Input
+                      label={t('config_management.visual.sections.network.session_affinity_ttl')}
+                      placeholder="1h"
+                      value={values.routingSessionAffinityTTL}
+                      onChange={(e) => onChange({ routingSessionAffinityTTL: e.target.value })}
+                      disabled={disabled}
+                    />
+                  </SectionGrid>
 
-              <SectionGrid>
-                <ToggleRow
-                  title={t('config_management.visual.sections.network.force_model_prefix')}
-                  description={t(
-                    'config_management.visual.sections.network.force_model_prefix_desc'
-                  )}
-                  checked={values.forceModelPrefix}
-                  disabled={disabled}
-                  onChange={(forceModelPrefix) => onChange({ forceModelPrefix })}
-                />
-                <ToggleRow
-                  title={t('config_management.visual.sections.network.session_affinity')}
-                  checked={values.routingSessionAffinity}
-                  disabled={disabled}
-                  onChange={(routingSessionAffinity) => onChange({ routingSessionAffinity })}
-                />
-                <ToggleRow
-                  title={t('config_management.visual.sections.network.ws_auth')}
-                  description={t('config_management.visual.sections.network.ws_auth_desc')}
-                  checked={values.wsAuth}
-                  disabled={disabled}
-                  onChange={(wsAuth) => onChange({ wsAuth })}
-                />
-              </SectionGrid>
+                  <SectionGrid>
+                    <ToggleRow
+                      title={t('config_management.visual.sections.network.force_model_prefix')}
+                      description={t(
+                        'config_management.visual.sections.network.force_model_prefix_desc'
+                      )}
+                      checked={values.forceModelPrefix}
+                      disabled={disabled}
+                      onChange={(forceModelPrefix) => onChange({ forceModelPrefix })}
+                    />
+                    <ToggleRow
+                      title={t('config_management.visual.sections.network.session_affinity')}
+                      checked={values.routingSessionAffinity}
+                      disabled={disabled}
+                      onChange={(routingSessionAffinity) => onChange({ routingSessionAffinity })}
+                    />
+                    <ToggleRow
+                      title={t('config_management.visual.sections.network.ws_auth')}
+                      description={t('config_management.visual.sections.network.ws_auth_desc')}
+                      checked={values.wsAuth}
+                      disabled={disabled}
+                      onChange={(wsAuth) => onChange({ wsAuth })}
+                    />
+                  </SectionGrid>
+                </SectionStack>
+              </SectionSubsection>
             </SectionStack>
           </ConfigSection>
 
@@ -922,7 +753,7 @@ export function VisualConfigEditor({
             ref={(node) => {
               sectionRefs.current.quota = node;
             }}
-            indexLabel="07"
+            indexLabel="04"
             icon={<IconTimer size={16} />}
             title={t('config_management.visual.sections.quota.title')}
             description={t('config_management.visual.sections.quota.description')}
@@ -944,9 +775,6 @@ export function VisualConfigEditor({
               />
               <ToggleRow
                 title={t('config_management.visual.sections.quota.antigravity_credits')}
-                description={t(
-                  'config_management.visual.sections.quota.antigravity_credits_desc'
-                )}
                 checked={values.quotaAntigravityCredits}
                 disabled={disabled}
                 onChange={(quotaAntigravityCredits) => onChange({ quotaAntigravityCredits })}
@@ -959,7 +787,7 @@ export function VisualConfigEditor({
             ref={(node) => {
               sectionRefs.current.streaming = node;
             }}
-            indexLabel="08"
+            indexLabel="05"
             icon={<IconSatellite size={16} />}
             title={t('config_management.visual.sections.streaming.title')}
             description={t('config_management.visual.sections.streaming.description')}
@@ -1060,7 +888,7 @@ export function VisualConfigEditor({
             ref={(node) => {
               sectionRefs.current.payload = node;
             }}
-            indexLabel="09"
+            indexLabel="06"
             icon={<IconCode size={16} />}
             title={t('config_management.visual.sections.payload.title')}
             description={t('config_management.visual.sections.payload.description')}
@@ -1128,15 +956,6 @@ export function VisualConfigEditor({
           </ConfigSection>
         </div>
       </div>
-
-      {shouldRenderFloatingSidebar && typeof document !== 'undefined'
-        ? createPortal(
-            <div ref={floatingSidebarRef} className={styles.floatingSidebarContainer}>
-              <div className={styles.floatingSidebarRail}>{navContent}</div>
-            </div>,
-            document.body
-          )
-        : null}
     </div>
   );
 }

src/i18n/locales/en.json

@@ -1139,8 +1139,7 @@
           "switch_project_desc": "Automatically switch to another project when quota is exceeded",
           "switch_preview_model": "Switch to Preview Model",
           "switch_preview_model_desc": "Switch to preview model version when quota is exceeded",
-          "antigravity_credits": "Antigravity Credits Retry",
-          "antigravity_credits_desc": "Retry once with enabledCreditTypes=[\"GOOGLE_ONE_AI\"] when Antigravity returns quota_exhausted 429"
+          "antigravity_credits": "Use Antigravity Credits"
         },
         "streaming": {
           "title": "Streaming Configuration",

src/i18n/locales/ru.json

@@ -1136,8 +1136,7 @@
           "switch_project_desc": "Автоматически переходить на другой проект при превышении квоты",
           "switch_preview_model": "Переключить на preview-модель",
           "switch_preview_model_desc": "Переключаться на preview-версию модели при превышении квоты",
-          "antigravity_credits": "Повтор Antigravity Credits",
-          "antigravity_credits_desc": "При ответе Antigravity quota_exhausted 429 повторять запрос один раз с enabledCreditTypes=[\"GOOGLE_ONE_AI\"]"
+          "antigravity_credits": "Использовать Antigravity Credits"
         },
         "streaming": {
           "title": "Настройки стриминга",

src/i18n/locales/zh-CN.json

@@ -1139,8 +1139,7 @@
           "switch_project_desc": "配额耗尽时自动切换到其他项目",
           "switch_preview_model": "切换预览模型",
           "switch_preview_model_desc": "配额耗尽时切换到预览版本模型",
-          "antigravity_credits": "Antigravity Credits 重试",
-          "antigravity_credits_desc": "Antigravity 返回 quota_exhausted 429 时，使用 enabledCreditTypes=[\"GOOGLE_ONE_AI\"] 重试一次"
+          "antigravity_credits": "使用Antigravity Credits"
         },
         "streaming": {
           "title": "流式传输配置",

src/i18n/locales/zh-TW.json

@@ -1165,8 +1165,7 @@
           "switch_project_desc": "配額耗盡時自動切換到其他專案",
           "switch_preview_model": "切換預覽模型",
           "switch_preview_model_desc": "配額耗盡時切換到預覽版本模型",
-          "antigravity_credits": "Antigravity Credits 重試",
-          "antigravity_credits_desc": "Antigravity 回傳 quota_exhausted 429 時，使用 enabledCreditTypes=[\"GOOGLE_ONE_AI\"] 重試一次"
+          "antigravity_credits": "使用Antigravity Credits"
         },
         "streaming": {
           "title": "串流傳輸設定",

src/pages/ConfigPage.module.scss

@@ -2,11 +2,12 @@
 @use '../styles/variables' as *;
 
 .container {
-  width: 100%;
+  width: min(100%, 1480px);
   min-height: 100%;
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: clamp(18px, 2.4vw, 28px);
+  margin: 0 auto;
   overflow-y: auto;
   padding-bottom: calc(
     var(--config-action-bar-height, 0px) + 16px + env(safe-area-inset-bottom) + #{$spacing-md}
@@ -14,189 +15,73 @@
 }
 
 .pageHeader {
-  position: relative;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) auto;
-  gap: 24px;
-  align-items: end;
-  padding: clamp(22px, 3vw, 30px);
-  border-radius: 30px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background:
-    radial-gradient(
-      circle at top right,
-      color-mix(in srgb, var(--primary-color) 14%, transparent),
-      transparent 34%
-    ),
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--bg-primary) 94%, transparent),
-      color-mix(in srgb, var(--bg-secondary) 96%, transparent)
-    );
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0 auto auto 0;
-    width: min(260px, 48vw);
-    height: min(260px, 48vw);
-    background: radial-gradient(
-      circle,
-      color-mix(in srgb, var(--primary-color) 12%, transparent),
-      transparent 70%
-    );
-    pointer-events: none;
-    opacity: 0.7;
-  }
-
-  @include mobile {
-    grid-template-columns: minmax(0, 1fr);
-    align-items: stretch;
-    gap: 16px;
-  }
+  display: flex;
+  align-items: flex-start;
 }
 
 .pageHeaderCopy {
-  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   min-width: 0;
-}
-
-.pageEyebrow {
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  width: min(100%, 360px);
 }
 
 .pageTitle {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: clamp(32px, 4vw, 52px);
-  line-height: 0.95;
-  letter-spacing: -0.04em;
-}
-
-.description {
-  margin: 0;
-  max-width: 46rem;
-  color: var(--text-secondary);
-  font-size: 15px;
-  line-height: 1.7;
-}
-
-.pageMeta {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 12px;
-  min-width: 0;
-
-  @include mobile {
-    align-items: stretch;
-  }
-}
-
-.statusBadge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 38px;
-  padding: 0 14px;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
-  color: var(--text-primary);
-  font-size: 13px;
+  font-size: 28px;
   font-weight: 700;
-  text-align: center;
-
-  @include mobile {
-    width: 100%;
-  }
+  color: var(--text-primary);
+  margin: 0;
 }
 
 .tabBar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  width: fit-content;
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  @include mobile {
-    width: 100%;
-  }
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
 }
 
 .tabItem {
   @include button-reset;
-  padding: 10px 16px;
-  border-radius: 999px;
+  min-height: 38px;
+  padding: 0 12px;
+  border-radius: 6px;
   border: 1px solid transparent;
   color: var(--text-secondary);
-  font-size: 14px;
-  font-weight: 700;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.25;
   white-space: nowrap;
   transition:
     color 0.15s ease,
     background-color 0.15s ease,
-    border-color 0.15s ease,
-    transform 0.15s ease;
+    border-color 0.15s ease;
 
   &:hover:not(:disabled) {
     color: var(--text-primary);
-    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
-    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
+    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
   }
 
   &:disabled {
-    opacity: 0.6;
+    opacity: 0.58;
     cursor: not-allowed;
-    transform: none;
-  }
-
-  @include mobile {
-    flex: 1;
-    text-align: center;
   }
 }
 
 .tabActive {
-  color: var(--text-primary);
-  background: var(--bg-primary);
-  border-color: color-mix(in srgb, var(--primary-color) 24%, var(--border-color));
-  box-shadow: 0 16px 32px -28px rgba(0, 0, 0, 0.3);
+  color: var(--bg-primary);
+  background: var(--text-primary);
+  border-color: var(--text-primary);
 }
 
 .workspaceShell {
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
-  padding: clamp(18px, 3vw, 28px);
-  border-radius: 32px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
-  background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
-  box-shadow: var(--shadow);
-
-  @include mobile {
-    padding: 16px;
-    border-radius: 28px;
-  }
+  min-width: 0;
 }
 
 .content {
@@ -209,25 +94,26 @@
 .sourceWorkspace {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
   min-height: 0;
 }
 
 .sourceToolbar {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
   align-items: center;
-  gap: $spacing-sm;
-  padding-bottom: 16px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
 
   @include mobile {
-    flex-direction: column;
-    align-items: stretch;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
 .searchInputWrapper {
-  flex: 1;
   min-width: 0;
   position: relative;
   display: flex;
@@ -240,28 +126,28 @@
 }
 
 .searchInput {
-  flex: 1;
-  border-radius: 16px !important;
-  padding-right: 132px !important;
+  min-height: 38px !important;
+  border-radius: 6px !important;
+  padding-right: 128px !important;
+  background: var(--bg-secondary) !important;
 }
 
 .searchRight {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .searchCount {
   display: inline-flex;
   align-items: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
+  min-height: 26px;
+  padding: 0 8px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
   color: var(--text-secondary);
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 650;
   pointer-events: none;
   white-space: nowrap;
 }
@@ -271,12 +157,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 999px;
-  background: var(--primary-color);
-  border: 1px solid var(--primary-color);
-  color: #fff;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: 1px solid var(--text-primary);
+  background: var(--text-primary);
+  color: var(--bg-primary);
   transition:
     background-color $transition-fast,
     border-color $transition-fast,
@@ -288,7 +174,7 @@
   }
 
   &:disabled {
-    opacity: 0.5;
+    opacity: 0.45;
     cursor: not-allowed;
   }
 }
@@ -299,11 +185,11 @@
   flex-shrink: 0;
 
   button {
-    min-width: 36px;
-    width: 36px;
-    height: 36px;
+    min-width: 38px;
+    width: 38px;
+    height: 38px;
     padding: 0 !important;
-    border-radius: 999px;
+    border-radius: 6px;
   }
 
   @include mobile {
@@ -319,21 +205,23 @@
 .editorWrapper {
   width: 100%;
   flex: 0 0 auto;
-  height: clamp(420px, 64vh, 980px);
-  border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-  border-radius: 28px;
+  height: clamp(500px, 70vh, 1040px);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   overflow: hidden;
-  background: color-mix(in srgb, var(--bg-primary) 90%, transparent);
+  background: var(--bg-primary);
 
   @supports (height: 100dvh) {
-    height: clamp(420px, 64dvh, 980px);
+    height: clamp(500px, 70dvh, 1040px);
   }
 
   :global {
     .cm-editor {
       height: 100%;
-      font-size: 14px;
-      font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
+      font-size: 13px;
+      font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+        monospace;
       background: transparent;
     }
 
@@ -345,8 +233,8 @@
     }
 
     .cm-gutters {
-      border-right: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
-      background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
+      border-right: 1px solid var(--border-color);
+      background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
     }
 
     .cm-lineNumbers .cm-gutterElement {
@@ -355,35 +243,22 @@
       color: var(--text-muted);
     }
 
-    .cm-activeLine {
-      background: var(--bg-hover);
-    }
-
+    .cm-activeLine,
     .cm-activeLineGutter {
-      background: var(--bg-hover);
+      background: color-mix(in srgb, var(--text-primary) 5%, transparent);
     }
 
     .cm-selectionMatch {
-      background: rgba(255, 193, 7, 0.3);
+      background: rgba(224, 170, 20, 0.24);
     }
 
     .cm-searchMatch {
-      background: rgba(255, 193, 7, 0.4);
-      outline: 1px solid rgba(255, 193, 7, 0.6);
+      background: rgba(224, 170, 20, 0.32);
+      outline: 1px solid rgba(224, 170, 20, 0.48);
     }
 
     .cm-searchMatch-selected {
-      background: rgba(255, 152, 0, 0.5);
-    }
-
-    [data-theme='dark'] & {
-      .cm-gutters {
-        background: var(--bg-tertiary);
-      }
-
-      .cm-selectionMatch {
-        background: rgba(255, 193, 7, 0.2);
-      }
+      background: rgba(198, 87, 70, 0.32);
     }
   }
 }
@@ -396,8 +271,8 @@
 
 .saved {
   color: var(--success-color);
-  background: color-mix(in srgb, var(--success-color) 12%, var(--bg-primary));
-  border-color: color-mix(in srgb, var(--success-color) 28%, var(--border-color));
+  background: color-mix(in srgb, var(--success-color) 10%, transparent);
+  border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-color));
 }
 
 .error {
@@ -420,17 +295,14 @@
 .floatingActionList {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  --glass-blur: 12px;
-  background: var(--glass-bg);
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  border: 1px solid var(--glass-border);
-  border-radius: 999px;
-  box-shadow: var(--shadow-lg);
+  gap: 6px;
+  padding: 6px;
   max-width: inherit;
   overflow-x: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
+  box-shadow: var(--shadow-lg);
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -442,16 +314,16 @@
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  min-height: 28px;
+  min-height: 34px;
   padding: 0 10px;
-  border-radius: 999px;
+  border-radius: 6px;
   border: 1px solid transparent;
-  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
   color: var(--text-primary);
   font-size: 11px;
   font-weight: 700;
+  line-height: 1.2;
   text-align: center;
-  max-width: min(280px, 46vw);
+  max-width: min(300px, 46vw);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -469,28 +341,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 999px;
-  cursor: pointer;
+  width: 38px;
+  height: 38px;
+  border-radius: 6px;
   color: var(--text-primary);
+  cursor: pointer;
   transition:
-    background-color 0.2s ease,
-    transform 0.15s ease;
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
 
   &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
-    transform: scale(1.08);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
+    background: var(--text-primary);
+    color: var(--bg-primary);
   }
 
   &:disabled {
-    opacity: 0.5;
+    opacity: 0.45;
     cursor: not-allowed;
-    transform: none;
   }
 }
 
@@ -502,7 +370,7 @@
   height: 7px;
   border-radius: 999px;
   background: var(--warning-color);
-  box-shadow: 0 0 0 2px rgba($warning-color, 0.25);
+  box-shadow: 0 0 0 2px var(--bg-primary);
 }
 
 @media (max-width: 1200px) {
@@ -511,21 +379,8 @@
     max-width: calc(100vw - 16px);
   }
 
-  .floatingActionList {
-    gap: 6px;
-    padding: 8px 10px;
-  }
-
   .floatingStatus {
     max-width: min(180px, 40vw);
-    font-size: 10px;
-    padding: 0 8px;
-  }
-
-  .floatingActionButton {
-    width: 38px;
-    height: 38px;
-    flex: 0 0 auto;
   }
 }
 
@@ -533,11 +388,8 @@
   .floatingStatus {
     max-width: min(132px, 38vw);
   }
-}
 
-@media (max-width: 380px) {
-  .pageHeader,
-  .workspaceShell {
-    padding: 14px;
+  .searchInput {
+    padding-right: 108px !important;
   }
 }

src/pages/ConfigPage.tsx

@@ -500,26 +500,11 @@ export function ConfigPage() {
     </div>
   );
 
-  const pageEyebrow =
-    activeTab === 'visual'
-      ? t('config_management.tabs.visual', { defaultValue: '可视化编辑' })
-      : t('config_management.tabs.source', { defaultValue: '源文件编辑' });
-  const pageDescription =
-    activeTab === 'visual'
-      ? t('config_management.visual.notice')
-      : t('config_management.description');
-
   return (
     <div className={styles.container}>
       <div className={styles.pageHeader}>
         <div className={styles.pageHeaderCopy}>
-          <span className={styles.pageEyebrow}>{pageEyebrow}</span>
           <h1 className={styles.pageTitle}>{t('config_management.title')}</h1>
-          <p className={styles.description}>{pageDescription}</p>
-        </div>
-
-        <div className={styles.pageMeta}>
-          <div className={`${styles.statusBadge} ${getStatusClass()}`}>{getStatusText()}</div>
           <div className={styles.tabBar}>
             <button
               type="button"