diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 8572de7..e8edf65 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -207,8 +207,6 @@ export function MainLayout() {
   const { showNotification } = useNotificationStore();
   const location = useLocation();
 
-  const apiBase = useAuthStore((state) => state.apiBase);
-  const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const logout = useAuthStore((state) => state.logout);
 
   const config = useConfigStore((state) => state.config);
@@ -224,18 +222,17 @@ export function MainLayout() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
   const [themeMenuOpen, setThemeMenuOpen] = useState(false);
-  const [brandExpanded, setBrandExpanded] = useState(true);
   const contentRef = useRef<HTMLDivElement | null>(null);
   const languageMenuRef = useRef<HTMLDivElement | null>(null);
   const themeMenuRef = useRef<HTMLDivElement | null>(null);
-  const brandCollapseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
 
   const fullBrandName = 'CLI Proxy API Management Center';
   const abbrBrandName = t('title.abbr');
   const isLogsPage = location.pathname.startsWith('/logs');
+  const showSidebarLabels = !sidebarCollapsed || sidebarOpen;
 
-  // 将顶栏高度写入 CSS 变量，确保侧栏/内容区计算一致，防止滚动时抖动
+  // 将顶部悬浮控制区高度写入 CSS 变量，供移动端粘性元素和浮层避让。
   useLayoutEffect(() => {
     const updateHeaderHeight = () => {
       const height = headerRef.current?.offsetHeight;
@@ -296,19 +293,6 @@ export function MainLayout() {
     };
   }, []);
 
-  // 5秒后自动收起品牌名称
-  useEffect(() => {
-    brandCollapseTimer.current = setTimeout(() => {
-      setBrandExpanded(false);
-    }, 5000);
-
-    return () => {
-      if (brandCollapseTimer.current) {
-        clearTimeout(brandCollapseTimer.current);
-      }
-    };
-  }, []);
-
   useEffect(() => {
     if (!languageMenuOpen) {
       return;
@@ -361,19 +345,6 @@ export function MainLayout() {
     };
   }, [themeMenuOpen]);
 
-  const handleBrandClick = useCallback(() => {
-    if (!brandExpanded) {
-      setBrandExpanded(true);
-      // 点击展开后，5秒后再次收起
-      if (brandCollapseTimer.current) {
-        clearTimeout(brandCollapseTimer.current);
-      }
-      brandCollapseTimer.current = setTimeout(() => {
-        setBrandExpanded(false);
-      }, 5000);
-    }
-  }, [brandExpanded]);
-
   const toggleLanguageMenu = useCallback(() => {
     setLanguageMenuOpen((prev) => !prev);
     setThemeMenuOpen(false);
@@ -409,15 +380,6 @@ export function MainLayout() {
     });
   }, [fetchConfig]);
 
-  const statusClass =
-    connectionStatus === 'connected'
-      ? 'success'
-      : connectionStatus === 'connecting'
-        ? 'warning'
-        : connectionStatus === 'error'
-          ? 'error'
-          : 'muted';
-
   const navItems = [
     { path: '/', label: t('nav.dashboard'), icon: sidebarIcons.dashboard },
     { path: '/config', label: t('nav.config_management'), icon: sidebarIcons.config },
@@ -508,176 +470,157 @@ export function MainLayout() {
   };
 
   return (
-    <div className="app-shell">
+    <div className={`app-shell ${sidebarCollapsed ? 'sidebar-is-collapsed' : ''}`}>
+      <div className="top-gradient-blur" aria-hidden="true" />
+
       <header className="main-header" ref={headerRef}>
-        <div className="left">
-          <button
-            className="sidebar-toggle-header"
-            onClick={() => setSidebarCollapsed((prev) => !prev)}
-            title={
-              sidebarCollapsed
-                ? t('sidebar.expand', { defaultValue: '展开' })
-                : t('sidebar.collapse', { defaultValue: '收起' })
-            }
-          >
-            {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
-          </button>
-          <img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="brand-logo" />
-          <div
-            className={`brand-header ${brandExpanded ? 'expanded' : 'collapsed'}`}
-            onClick={handleBrandClick}
-            title={brandExpanded ? undefined : fullBrandName}
-          >
-            <span className="brand-full">{fullBrandName}</span>
-            <span className="brand-abbr">{abbrBrandName}</span>
-          </div>
-        </div>
+        <button
+          type="button"
+          className="sidebar-toggle-floating"
+          onClick={() => setSidebarCollapsed((prev) => !prev)}
+          title={
+            sidebarCollapsed
+              ? t('sidebar.expand', { defaultValue: '展开' })
+              : t('sidebar.collapse', { defaultValue: '收起' })
+          }
+          aria-label={
+            sidebarCollapsed
+              ? t('sidebar.expand', { defaultValue: '展开' })
+              : t('sidebar.collapse', { defaultValue: '收起' })
+          }
+        >
+          {sidebarCollapsed ? headerIcons.chevronRight : headerIcons.chevronLeft}
+        </button>
 
-        <div className="right">
-          <div className="connection">
-            <span className={`status-badge ${statusClass}`}>
-              {t(
-                connectionStatus === 'connected'
-                  ? 'common.connected_status'
-                  : connectionStatus === 'connecting'
-                    ? 'common.connecting_status'
-                    : 'common.disconnected_status'
-              )}
-            </span>
-            <span className="base">{apiBase || '-'}</span>
-          </div>
-
-          <div className="header-actions">
-            <Button
-              className="mobile-menu-btn"
-              variant="ghost"
-              size="sm"
-              onClick={() => setSidebarOpen((prev) => !prev)}
-            >
-              {headerIcons.menu}
-            </Button>
+        <div className="header-actions floating-actions">
+          <Button
+            className="mobile-menu-btn"
+            variant="ghost"
+            size="sm"
+            onClick={() => setSidebarOpen((prev) => !prev)}
+            title={t('sidebar.toggle_expand', { defaultValue: 'Open navigation' })}
+            aria-label={t('sidebar.toggle_expand', { defaultValue: 'Open navigation' })}
+          >
+            {headerIcons.menu}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleRefreshAll}
+            title={t('header.refresh_all')}
+          >
+            {headerIcons.refresh}
+          </Button>
+          <div className={`language-menu ${languageMenuOpen ? 'open' : ''}`} ref={languageMenuRef}>
             <Button
               variant="ghost"
               size="sm"
-              onClick={handleRefreshAll}
-              title={t('header.refresh_all')}
+              onClick={toggleLanguageMenu}
+              title={t('language.switch')}
+              aria-label={t('language.switch')}
+              aria-haspopup="menu"
+              aria-expanded={languageMenuOpen}
             >
-              {headerIcons.refresh}
+              {headerIcons.language}
             </Button>
-            <div
-              className={`language-menu ${languageMenuOpen ? 'open' : ''}`}
-              ref={languageMenuRef}
-            >
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={toggleLanguageMenu}
-                title={t('language.switch')}
+            {languageMenuOpen && (
+              <div
+                className="notification entering language-menu-popover"
+                role="menu"
                 aria-label={t('language.switch')}
-                aria-haspopup="menu"
-                aria-expanded={languageMenuOpen}
               >
-                {headerIcons.language}
-              </Button>
-              {languageMenuOpen && (
-                <div
-                  className="notification entering language-menu-popover"
-                  role="menu"
-                  aria-label={t('language.switch')}
-                >
-                  {LANGUAGE_ORDER.map((lang) => (
-                    <button
-                      key={lang}
-                      type="button"
-                      className={`language-menu-option ${language === lang ? 'active' : ''}`}
-                      onClick={() => handleLanguageSelect(lang)}
-                      role="menuitemradio"
-                      aria-checked={language === lang}
-                    >
-                      <span>{t(LANGUAGE_LABEL_KEYS[lang])}</span>
-                      {language === lang ? <span className="language-menu-check">✓</span> : null}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-            <div className={`theme-menu ${themeMenuOpen ? 'open' : ''}`} ref={themeMenuRef}>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={toggleThemeMenu}
-                title={t('theme.switch')}
+                {LANGUAGE_ORDER.map((lang) => (
+                  <button
+                    key={lang}
+                    type="button"
+                    className={`language-menu-option ${language === lang ? 'active' : ''}`}
+                    onClick={() => handleLanguageSelect(lang)}
+                    role="menuitemradio"
+                    aria-checked={language === lang}
+                  >
+                    <span>{t(LANGUAGE_LABEL_KEYS[lang])}</span>
+                    {language === lang ? <span className="language-menu-check">✓</span> : null}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className={`theme-menu ${themeMenuOpen ? 'open' : ''}`} ref={themeMenuRef}>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={toggleThemeMenu}
+              title={t('theme.switch')}
+              aria-label={t('theme.switch')}
+              aria-haspopup="menu"
+              aria-expanded={themeMenuOpen}
+            >
+              {theme === 'auto'
+                ? headerIcons.autoTheme
+                : theme === 'dark'
+                  ? headerIcons.moon
+                  : theme === 'white'
+                    ? headerIcons.whiteTheme
+                    : headerIcons.sun}
+            </Button>
+            {themeMenuOpen && (
+              <div
+                className="notification entering theme-menu-popover"
+                role="menu"
                 aria-label={t('theme.switch')}
-                aria-haspopup="menu"
-                aria-expanded={themeMenuOpen}
               >
-                {theme === 'auto'
-                  ? headerIcons.autoTheme
-                  : theme === 'dark'
-                    ? headerIcons.moon
-                    : theme === 'white'
-                      ? headerIcons.whiteTheme
-                      : headerIcons.sun}
-              </Button>
-              {themeMenuOpen && (
-                <div
-                  className="notification entering theme-menu-popover"
-                  role="menu"
-                  aria-label={t('theme.switch')}
-                >
-                  {THEME_CARDS.map((tc) => (
-                    <button
-                      key={tc.key}
-                      type="button"
-                      className={`theme-card ${theme === tc.key ? 'active' : ''}`}
-                      onClick={() => handleThemeSelect(tc.key)}
-                      role="menuitemradio"
-                      aria-checked={theme === tc.key}
+                {THEME_CARDS.map((tc) => (
+                  <button
+                    key={tc.key}
+                    type="button"
+                    className={`theme-card ${theme === tc.key ? 'active' : ''}`}
+                    onClick={() => handleThemeSelect(tc.key)}
+                    role="menuitemradio"
+                    aria-checked={theme === tc.key}
+                  >
+                    <div
+                      className="theme-card-preview"
+                      style={{
+                        background: tc.colors.bg,
+                        border: `1px solid ${tc.colors.border}`,
+                      }}
                     >
                       <div
-                        className="theme-card-preview"
+                        className="theme-card-header"
                         style={{
-                          background: tc.colors.bg,
-                          border: `1px solid ${tc.colors.border}`,
+                          background: tc.colors.card,
+                          borderBottom: `1px solid ${tc.colors.border}`,
                         }}
-                      >
+                      />
+                      <div className="theme-card-body">
                         <div
-                          className="theme-card-header"
+                          className="theme-card-sidebar"
                           style={{
                             background: tc.colors.card,
-                            borderBottom: `1px solid ${tc.colors.border}`,
+                            borderRight: `1px solid ${tc.colors.border}`,
                           }}
                         />
-                        <div className="theme-card-body">
+                        <div className="theme-card-content" style={{ background: tc.colors.bg }}>
                           <div
-                            className="theme-card-sidebar"
-                            style={{
-                              background: tc.colors.card,
-                              borderRight: `1px solid ${tc.colors.border}`,
-                            }}
+                            className="theme-card-line"
+                            style={{ background: tc.colors.textMuted }}
+                          />
+                          <div
+                            className="theme-card-line short"
+                            style={{ background: tc.colors.textMuted }}
                           />
-                          <div className="theme-card-content" style={{ background: tc.colors.bg }}>
-                            <div
-                              className="theme-card-line"
-                              style={{ background: tc.colors.textMuted }}
-                            />
-                            <div
-                              className="theme-card-line short"
-                              style={{ background: tc.colors.textMuted }}
-                            />
-                          </div>
                         </div>
                       </div>
-                      <span className="theme-card-label">{t(tc.labelKey)}</span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-            <Button variant="ghost" size="sm" onClick={logout} title={t('header.logout')}>
-              {headerIcons.logout}
-            </Button>
+                    </div>
+                    <span className="theme-card-label">{t(tc.labelKey)}</span>
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
+          <Button variant="ghost" size="sm" onClick={logout} title={t('header.logout')}>
+            {headerIcons.logout}
+          </Button>
         </div>
       </header>
 
@@ -694,6 +637,11 @@ export function MainLayout() {
         <aside
           className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
         >
+          <div className="sidebar-brand" title={fullBrandName}>
+            <img src={INLINE_LOGO_JPEG} alt="CPAMC logo" className="sidebar-brand-logo" />
+            {showSidebarLabels && <span className="sidebar-brand-title">{abbrBrandName}</span>}
+          </div>
+
           <div className="nav-section">
             {navItems.map((item) => (
               <NavLink
@@ -701,10 +649,10 @@ export function MainLayout() {
                 to={item.path}
                 className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
                 onClick={() => setSidebarOpen(false)}
-                title={sidebarCollapsed ? item.label : undefined}
+                title={showSidebarLabels ? undefined : item.label}
               >
                 <span className="nav-icon">{item.icon}</span>
-                {!sidebarCollapsed && <span className="nav-label">{item.label}</span>}
+                {showSidebarLabels && <span className="nav-label">{item.label}</span>}
               </NavLink>
             ))}
           </div>
diff --git a/src/pages/DashboardPage.module.scss b/src/pages/DashboardPage.module.scss
index 67899a6..574bfd8 100644
--- a/src/pages/DashboardPage.module.scss
+++ b/src/pages/DashboardPage.module.scss
@@ -20,6 +20,8 @@
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
+  opacity: 0.42;
+  filter: blur(16px);
 }
 
 .orb1 {
@@ -29,7 +31,7 @@
   border-radius: 50%;
   background: radial-gradient(
     circle,
-    color-mix(in srgb, var(--primary-color) 8%, transparent),
+    color-mix(in srgb, var(--primary-color) 6%, transparent),
     transparent 70%
   );
   top: -140px;
@@ -44,7 +46,7 @@
   border-radius: 50%;
   background: radial-gradient(
     circle,
-    color-mix(in srgb, var(--success-color) 6%, transparent),
+    color-mix(in srgb, var(--success-color) 4%, transparent),
     transparent 70%
   );
   bottom: 18%;
@@ -97,10 +99,10 @@
   top: 50%;
   left: $spacing-xl;
   transform: translateY(-50%);
-  font-size: clamp(64px, 12vw, 120px);
+  font-size: 104px;
   font-weight: 900;
   line-height: 1;
-  letter-spacing: -0.04em;
+  letter-spacing: 0;
   text-transform: uppercase;
   color: var(--text-primary);
   opacity: 0.04;
@@ -110,7 +112,7 @@
   animation: watermarkEnter 0.8s ease-out 0.1s both;
 
   @media (max-width: $breakpoint-mobile) {
-    font-size: clamp(48px, 14vw, 80px);
+    font-size: 58px;
     left: $spacing-lg;
   }
 }
@@ -137,7 +139,7 @@
 .heroGreeting {
   font-size: 13px;
   font-weight: 600;
-  letter-spacing: 0.08em;
+  letter-spacing: 0;
   text-transform: uppercase;
   color: var(--primary-color);
   animation: fadeSlideUp 0.5s ease-out 0.1s both;
@@ -145,12 +147,16 @@
 
 .heroTitle {
   margin: 0;
-  font-size: clamp(32px, 5vw, 48px);
+  font-size: 44px;
   font-weight: 800;
   line-height: 1.1;
-  letter-spacing: -0.03em;
+  letter-spacing: 0;
   color: var(--text-primary);
   animation: fadeSlideUp 0.5s ease-out 0.2s both;
+
+  @media (max-width: $breakpoint-mobile) {
+    font-size: 34px;
+  }
 }
 
 .heroCaring {
@@ -269,7 +275,7 @@
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0;
   color: var(--text-tertiary);
   margin: 0 0 $spacing-md;
 }
@@ -294,9 +300,19 @@
   flex-direction: column;
   gap: $spacing-md;
   padding: $spacing-lg;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
+  background: linear-gradient(
+    145deg,
+    color-mix(in srgb, var(--bg-primary) 86%, transparent),
+    color-mix(in srgb, var(--bg-secondary) 72%, transparent)
+  );
+  border: 1px solid color-mix(in srgb, var(--border-color) 66%, transparent);
   border-radius: $radius-lg;
+  --glass-blur: 12px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  box-shadow:
+    0 18px 42px rgb(0 0 0 / 0.12),
+    inset 0 1px 0 rgb(255 255 255 / 0.03);
   text-decoration: none;
   transition:
     border-color $transition-fast,
@@ -305,9 +321,11 @@
   animation: cardEnter 0.4s ease-out both;
 
   &:hover {
-    border-color: var(--primary-color);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
-    transform: translateY(-3px);
+    border-color: color-mix(in srgb, var(--border-hover) 82%, transparent);
+    box-shadow:
+      0 22px 48px rgb(0 0 0 / 0.16),
+      inset 0 1px 0 rgb(255 255 255 / 0.04);
+    transform: translateY(-2px);
   }
 }
 
@@ -317,8 +335,8 @@
   justify-content: center;
   background: linear-gradient(
     160deg,
-    color-mix(in srgb, var(--primary-color) 6%, var(--bg-primary)),
-    var(--bg-primary)
+    color-mix(in srgb, var(--primary-color) 8%, var(--bg-primary)),
+    color-mix(in srgb, var(--bg-primary) 84%, transparent)
   );
 
   .bentoValue {
@@ -408,14 +426,17 @@
   align-items: center;
   gap: $spacing-sm;
   padding: 6px 14px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
+  background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
   border-radius: $radius-full;
+  --glass-blur: 10px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
   font-size: 13px;
   transition: border-color $transition-fast;
 
   &:hover {
-    border-color: var(--border-hover);
+    border-color: color-mix(in srgb, var(--border-hover) 82%, transparent);
   }
 }
 
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index c2f3494..7de42e4 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,18 +1,31 @@
 @use './variables.scss' as *;
 
 :root {
-  --header-height: 64px;
+  --header-height: 80px;
+  --shell-gutter: 24px;
+  --sidebar-panel-width: 240px;
+  --sidebar-collapsed-width: 68px;
+  --sidebar-active-width: var(--sidebar-panel-width);
+  --sidebar-gap: 32px;
+  --floating-control-size: 38px;
 }
 
 .app-shell {
+  --sidebar-active-width: var(--sidebar-panel-width);
+
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   height: 100vh;
   overflow: hidden;
-  background: var(--bg-secondary);
+  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-quinary, var(--bg-secondary)));
   color: var(--text-primary);
 
+  &.sidebar-is-collapsed {
+    --sidebar-active-width: var(--sidebar-collapsed-width);
+  }
+
   @media (max-width: $breakpoint-mobile) {
     height: auto;
     min-height: 100vh;
@@ -21,424 +34,326 @@
   }
 }
 
-.main-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: $spacing-md;
-  padding: $spacing-md $spacing-lg;
-  background: var(--bg-primary);
-  border-bottom: 1px solid var(--border-color);
-  position: sticky;
+.top-gradient-blur {
+  position: fixed;
   top: 0;
+  right: 0;
+  left: 0;
+  z-index: $z-dropdown - 2;
+  height: 188px;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-secondary) 88%, #0d0c0a) 0%,
+    color-mix(in srgb, var(--bg-secondary) 54%, transparent) 36%,
+    color-mix(in srgb, var(--bg-secondary) 22%, transparent) 66%,
+    transparent 100%
+  );
+  --glass-blur: 22px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  mask-image: linear-gradient(
+    to bottom,
+    #000 0%,
+    rgb(0 0 0 / 0.9) 24%,
+    rgb(0 0 0 / 0.58) 48%,
+    rgb(0 0 0 / 0.22) 72%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    #000 0%,
+    rgb(0 0 0 / 0.9) 24%,
+    rgb(0 0 0 / 0.58) 48%,
+    rgb(0 0 0 / 0.22) 72%,
+    transparent 100%
+  );
+}
+
+.main-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
   z-index: $z-dropdown + 1;
-  width: 100%;
+  height: var(--header-height);
+  pointer-events: none;
+  background: transparent;
+  border: 0;
 
-  @media (max-width: $breakpoint-mobile) {
-    position: fixed;
-    left: 0;
-    right: 0;
-    padding: $spacing-sm $spacing-md;
-    gap: $spacing-sm;
-  }
-
-  .left {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-    min-width: 0;
-    flex: 0 1 auto;
-
-    .brand-logo {
-      height: 32px;
-      width: 32px;
-      object-fit: contain;
-      flex-shrink: 0;
-      border-radius: $radius-sm;
-    }
-  }
-
-  .right {
-    display: flex;
-    align-items: center;
-    gap: $spacing-md;
-    min-width: 0;
-    flex: 1 1 auto;
-    justify-content: flex-end;
-
-    @media (max-width: $breakpoint-mobile) {
-      flex: 0 1 auto;
-      gap: $spacing-sm;
-    }
-  }
-
-  .sidebar-toggle-header {
+  .sidebar-toggle-floating {
+    position: absolute;
+    top: var(--shell-gutter);
+    left: calc(var(--shell-gutter) + var(--sidebar-active-width) + 22px);
+    width: 44px;
+    height: 44px;
     padding: 0;
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: $radius-md;
+    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
     color: var(--text-secondary);
+    box-shadow:
+      0 16px 38px rgb(0 0 0 / 0.16),
+      inset 0 1px 0 rgb(255 255 255 / 0.04);
+    --glass-blur: 14px;
+    backdrop-filter: var(--glass-backdrop-filter);
+    -webkit-backdrop-filter: var(--glass-backdrop-filter);
     cursor: pointer;
-    font-size: 16px;
-    font-weight: bold;
-    transition:
-      background $transition-fast,
-      color $transition-fast;
-    display: flex;
+    pointer-events: auto;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-    line-height: 1;
+    transition:
+      background $transition-fast,
+      border-color $transition-fast,
+      color $transition-fast,
+      transform $transition-fast,
+      left $transition-normal;
 
     &:hover {
-      background: var(--bg-tertiary, var(--border-color));
+      background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
+      border-color: color-mix(in srgb, var(--border-hover) 80%, transparent);
       color: var(--text-primary);
+      transform: translateY(-1px);
     }
 
-    @media (max-width: $breakpoint-mobile) {
-      display: none;
+    &:active {
+      transform: translateY(0);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px color-mix(in srgb, var(--primary-color) 24%, transparent),
+        0 16px 38px rgb(0 0 0 / 0.16);
     }
   }
 
-  .brand-header {
-    display: flex;
+  .header-actions {
+    position: absolute;
+    top: var(--shell-gutter);
+    right: var(--shell-gutter);
+    display: inline-flex;
     align-items: center;
-    gap: $spacing-xs;
-    font-weight: 800;
-    font-size: 18px;
-    color: var(--text-primary);
-    margin-right: $spacing-md;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-    flex-shrink: 0;
+    gap: 4px;
+    padding: 6px;
+    border: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
+    border-radius: 16px;
+    background: color-mix(in srgb, var(--bg-primary) 68%, transparent);
+    color: var(--text-secondary);
+    box-shadow:
+      0 18px 44px rgb(0 0 0 / 0.17),
+      inset 0 1px 0 rgb(255 255 255 / 0.04);
+    --glass-blur: 16px;
+    backdrop-filter: var(--glass-backdrop-filter);
+    -webkit-backdrop-filter: var(--glass-backdrop-filter);
+    pointer-events: auto;
+  }
 
-    .brand-full {
-      display: inline-block;
-      max-width: 320px;
-      opacity: 1;
-      transform: translateX(0);
-      transition:
-        max-width 0.4s ease,
-        opacity 0.4s ease,
-        transform 0.4s ease;
-    }
+  .header-actions .btn {
+    width: var(--floating-control-size);
+    height: var(--floating-control-size);
+    min-width: var(--floating-control-size);
+    padding: 0;
+    border-radius: 11px;
+    background: transparent;
+    color: var(--text-secondary);
+    border-color: transparent;
 
-    .brand-abbr {
-      display: inline-block;
-      transform: translateX(12px);
-      opacity: 0;
-      pointer-events: none;
-      transition:
-        opacity 0.4s ease,
-        transform 0.4s ease;
-    }
-
-    &.collapsed {
-      .brand-full {
-        max-width: 0;
-        opacity: 0;
-        transform: translateX(-12px);
-      }
-
-      .brand-abbr {
-        transform: translateX(0);
-        opacity: 1;
-        pointer-events: auto;
-      }
+    > span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
     }
 
     &:hover {
-      color: var(--primary-color);
+      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
+      color: var(--text-primary);
+      border-color: transparent;
     }
 
-    // 移动端：禁用动画，只显示缩写
-    @media (max-width: $breakpoint-mobile) {
-      cursor: default;
-      flex-shrink: 1;
-      min-width: 0;
-      margin-right: 0;
-
-      .brand-full,
-      .brand-abbr {
-        transition: none;
-      }
-
-      .brand-full {
-        display: none;
-      }
-
-      .brand-abbr {
-        transform: translateX(0);
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      &:hover {
-        color: var(--text-primary);
-      }
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 26%, transparent);
     }
   }
 
   .mobile-menu-btn {
     display: none;
     flex-shrink: 0;
-
-    @media (max-width: $breakpoint-mobile) {
-      display: inline-flex;
-    }
   }
 
-  .header-actions {
-    display: flex;
+  .language-menu,
+  .theme-menu {
+    position: relative;
+    display: inline-flex;
     align-items: center;
-    gap: $spacing-xs;
-    flex-shrink: 0;
-
-    .language-menu {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-
-      .language-menu-popover {
-        position: absolute;
-        top: calc(100% + 8px);
-        right: 0;
-        z-index: $z-dropdown;
-        min-width: 164px;
-        padding: $spacing-xs;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .language-menu-option {
-        width: 100%;
-        border: none;
-        border-radius: $radius-sm;
-        background: transparent;
-        color: var(--text-primary);
-        cursor: pointer;
-        padding: 8px 10px;
-        font-size: 14px;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        transition:
-          background-color $transition-fast,
-          color $transition-fast;
-
-        &:hover {
-          background: var(--bg-secondary);
-        }
-
-        &:focus-visible {
-          outline: none;
-          background: var(--bg-secondary);
-          box-shadow: 0 0 0 2px rgba($primary-color, 0.22);
-        }
-
-        &.active {
-          color: var(--primary-color);
-          font-weight: 600;
-        }
-      }
-
-      .language-menu-check {
-        font-size: 13px;
-        line-height: 1;
-      }
-
-      @media (max-width: $breakpoint-mobile) {
-        .language-menu-popover {
-          right: auto;
-          left: 0;
-        }
-      }
-    }
-
-    .theme-menu {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-
-      .theme-menu-popover {
-        position: absolute;
-        top: calc(100% + 8px);
-        right: 0;
-        z-index: $z-dropdown;
-        padding: $spacing-sm $spacing-sm $spacing-xs;
-        display: flex;
-        gap: $spacing-xs;
-        width: max-content;
-        max-width: calc(100vw - 16px);
-      }
-
-      .theme-card {
-        border: 2px solid transparent;
-        border-radius: $radius-md;
-        background: transparent;
-        cursor: pointer;
-        padding: 6px 6px 4px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-        transition:
-          border-color $transition-fast,
-          background-color $transition-fast;
-
-        &:hover {
-          background: var(--bg-secondary);
-        }
-
-        &:focus-visible {
-          outline: none;
-          box-shadow: 0 0 0 2px rgba($primary-color, 0.22);
-        }
-
-        &.active {
-          border-color: var(--primary-color);
-        }
-      }
-
-      .theme-card-preview {
-        width: 72px;
-        height: 52px;
-        border-radius: $radius-sm;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .theme-card-header {
-        height: 10px;
-        flex-shrink: 0;
-      }
-
-      .theme-card-body {
-        flex: 1;
-        display: flex;
-        min-height: 0;
-      }
-
-      .theme-card-sidebar {
-        width: 16px;
-        flex-shrink: 0;
-      }
-
-      .theme-card-content {
-        flex: 1;
-        padding: 5px 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-        justify-content: center;
-      }
-
-      .theme-card-line {
-        height: 3px;
-        border-radius: 1px;
-
-        &.short {
-          width: 60%;
-        }
-      }
-
-      .theme-card-label {
-        font-size: 11px;
-        color: var(--text-primary);
-        font-weight: 500;
-        white-space: nowrap;
-      }
-
-      @media (max-width: $breakpoint-mobile) {
-        .theme-menu-popover {
-          right: 0;
-          left: auto;
-          transform: none;
-          display: grid;
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-          justify-content: stretch;
-          width: min(188px, calc(100vw - 16px));
-        }
-
-        .theme-card {
-          width: 100%;
-          min-width: 0;
-        }
-
-        .theme-card-label {
-          white-space: normal;
-          text-align: center;
-          line-height: 1.2;
-        }
-      }
-    }
-
-    svg {
-      display: block;
-    }
-
-    @media (max-width: $breakpoint-mobile) {
-      gap: 2px;
-    }
   }
 
-  .connection {
+  .language-menu-popover,
+  .theme-menu-popover {
+    position: absolute;
+    top: calc(100% + 12px);
+    right: 0;
+    z-index: $z-dropdown + 2;
+    border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
+    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
+    box-shadow: 0 20px 48px rgb(0 0 0 / 0.22);
+    --glass-blur: 16px;
+    backdrop-filter: var(--glass-backdrop-filter);
+    -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  }
+
+  .language-menu-popover {
+    min-width: 164px;
+    padding: $spacing-xs;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .language-menu-option {
+    width: 100%;
+    border: none;
+    border-radius: $radius-sm;
+    background: transparent;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 8px 10px;
+    font-size: 14px;
+    font-weight: 500;
     display: flex;
     align-items: center;
-    gap: $spacing-sm;
-    color: var(--text-secondary);
-    min-width: 0;
-    flex-shrink: 1;
-    overflow: hidden;
+    justify-content: space-between;
+    transition:
+      background-color $transition-fast,
+      color $transition-fast;
 
-    .status-badge {
-      flex-shrink: 0;
-      white-space: nowrap;
-      margin-bottom: 0;
+    &:hover {
+      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
     }
 
-    .base {
+    &:focus-visible {
+      outline: none;
+      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 22%, transparent);
+    }
+
+    &.active {
+      color: var(--primary-color);
       font-weight: 600;
-      color: var(--text-primary);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 80px;
+    }
+  }
+
+  .language-menu-check {
+    font-size: 13px;
+    line-height: 1;
+  }
+
+  .theme-menu-popover {
+    padding: $spacing-sm $spacing-sm $spacing-xs;
+    display: flex;
+    gap: $spacing-xs;
+    width: max-content;
+    max-width: calc(100vw - 16px);
+  }
+
+  .theme-card {
+    border: 2px solid transparent;
+    border-radius: $radius-md;
+    background: transparent;
+    cursor: pointer;
+    padding: 6px 6px 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    transition:
+      border-color $transition-fast,
+      background-color $transition-fast;
+
+    &:hover {
+      background: color-mix(in srgb, var(--text-primary) 8%, transparent);
     }
 
-    @media (max-width: $breakpoint-mobile) {
-      display: none;
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 22%, transparent);
     }
+
+    &.active {
+      border-color: var(--primary-color);
+    }
+  }
+
+  .theme-card-preview {
+    width: 72px;
+    height: 52px;
+    border-radius: $radius-sm;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .theme-card-header {
+    height: 10px;
+    flex-shrink: 0;
+  }
+
+  .theme-card-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+  }
+
+  .theme-card-sidebar {
+    width: 16px;
+    flex-shrink: 0;
+  }
+
+  .theme-card-content {
+    flex: 1;
+    padding: 5px 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    justify-content: center;
+  }
+
+  .theme-card-line {
+    height: 3px;
+    border-radius: 1px;
+
+    &.short {
+      width: 60%;
+    }
+  }
+
+  .theme-card-label {
+    font-size: 11px;
+    color: var(--text-primary);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  svg {
+    display: block;
   }
 }
 
 .main-body {
+  position: relative;
   display: flex;
   flex: 1;
+  gap: var(--sidebar-gap);
   min-height: 0;
-  height: calc(100vh - var(--header-height));
+  height: 100vh;
+  padding: var(--shell-gutter);
   overflow: hidden;
-  position: relative;
 
   @supports (height: 100dvh) {
-    height: calc(100dvh - var(--header-height));
-  }
-
-  @media (max-width: $breakpoint-mobile) {
-    height: auto;
-    min-height: calc(100vh - var(--header-height));
-    overflow: visible;
-    padding-top: var(--header-height);
-
-    @supports (min-height: 100dvh) {
-      min-height: calc(100dvh - var(--header-height));
-    }
+    height: 100dvh;
   }
 }
 
@@ -447,42 +362,59 @@
   border: 0;
   padding: 0;
   margin: 0;
-  background: rgb(15 23 42 / 0.18);
+  background: rgb(8 8 8 / 0.34);
   opacity: 0;
   pointer-events: none;
   transition: opacity $transition-fast;
-
-  @media (max-width: $breakpoint-mobile) {
-    display: block;
-    position: fixed;
-    inset: var(--header-height) 0 0;
-    z-index: $z-dropdown - 1;
-
-    &.visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 .sidebar {
-  width: 240px;
-  background: var(--bg-primary);
-  border-right: 1px solid var(--border-color);
-  padding: $spacing-md;
+  position: relative;
+  z-index: $z-dropdown - 1;
+  width: var(--sidebar-panel-width);
+  height: calc(100vh - var(--shell-gutter) - var(--shell-gutter));
+  padding: 18px 14px;
   display: flex;
   flex-direction: column;
-  gap: $spacing-lg;
+  gap: $spacing-md;
+  flex-shrink: 0;
+  overflow-y: auto;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0)),
+    color-mix(in srgb, var(--bg-primary) 72%, transparent);
+  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
+  border-radius: 18px;
+  box-shadow:
+    0 26px 58px rgb(0 0 0 / 0.22),
+    inset 0 1px 0 rgb(255 255 255 / 0.04);
+  --glass-blur: 18px;
+  backdrop-filter: var(--glass-backdrop-filter);
+  -webkit-backdrop-filter: var(--glass-backdrop-filter);
+  scrollbar-width: none;
   transition:
     width $transition-normal,
-    transform $transition-normal;
-  overflow-y: auto;
-  flex-shrink: 0;
-  height: 100%;
+    transform $transition-normal,
+    padding $transition-normal;
+
+  @supports (height: 100dvh) {
+    height: calc(100dvh - var(--shell-gutter) - var(--shell-gutter));
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   &.collapsed {
-    width: 60px;
-    padding: $spacing-md $spacing-sm;
+    width: var(--sidebar-collapsed-width);
+    padding: 18px 10px;
+
+    .sidebar-brand {
+      justify-content: center;
+      padding-right: 0;
+      padding-left: 0;
+    }
 
     .nav-item {
       justify-content: center;
@@ -490,6 +422,35 @@
     }
   }
 
+  .sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 42px;
+    padding: 0 10px 12px;
+    color: var(--text-primary);
+    flex-shrink: 0;
+  }
+
+  .sidebar-brand-logo {
+    width: 34px;
+    height: 34px;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 18px rgb(0 0 0 / 0.18);
+    flex-shrink: 0;
+  }
+
+  .sidebar-brand-title {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--text-primary);
+    font-size: 18px;
+    font-weight: 800;
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+
   .nav-section {
     display: flex;
     flex-direction: column;
@@ -499,17 +460,20 @@
 
   .nav-item {
     padding: 10px 12px;
-    border-radius: $radius-md;
+    border-radius: 11px;
     border: 1px solid transparent;
     color: var(--text-primary);
-    font-weight: 600;
+    font-weight: 650;
+    text-decoration: none;
     display: flex;
     align-items: center;
     gap: $spacing-sm;
     cursor: pointer;
     transition:
       background $transition-fast,
-      color $transition-fast;
+      border-color $transition-fast,
+      color $transition-fast,
+      transform $transition-fast;
 
     .nav-icon {
       width: 28px;
@@ -518,11 +482,13 @@
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
+      color: currentColor;
       opacity: 0.96;
-      border-radius: 7px;
-      background: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0))
-        var(--bg-secondary);
-      box-shadow: inset 0 0 0 1px var(--border-primary);
+      border-radius: 8px;
+      background:
+        linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0)),
+        color-mix(in srgb, var(--bg-secondary) 84%, transparent);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-primary) 82%, transparent);
       transition:
         background $transition-fast,
         box-shadow $transition-fast,
@@ -536,47 +502,40 @@
     }
 
     .nav-label {
-      white-space: nowrap;
+      min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &:hover {
-      background: var(--bg-secondary);
+      background: color-mix(in srgb, var(--text-primary) 7%, transparent);
+      border-color: color-mix(in srgb, var(--border-color) 58%, transparent);
+      transform: translateX(1px);
 
       .nav-icon {
-        background: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0))
-          var(--bg-primary);
-        box-shadow: inset 0 0 0 1px var(--border-hover);
+        background:
+          linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0)),
+          color-mix(in srgb, var(--bg-primary) 88%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-hover) 86%, transparent);
       }
     }
 
     &.active {
-      background: rgba($primary-color, 0.14);
-      color: var(--primary-color);
-      border: 1px solid rgba($primary-color, 0.35);
+      background: color-mix(in srgb, var(--text-primary) 10%, transparent);
+      color: var(--text-primary);
+      border-color: color-mix(in srgb, var(--border-hover) 70%, transparent);
+      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
 
       .nav-icon {
-        background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0))
-          rgba($primary-color, 0.1);
-        box-shadow: inset 0 0 0 1px rgba($primary-color, 0.26);
+        color: var(--primary-active);
+        background:
+          linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0)),
+          color-mix(in srgb, var(--primary-color) 14%, var(--bg-primary));
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 24%, transparent);
       }
     }
   }
-
-  @media (max-width: $breakpoint-mobile) {
-    position: fixed;
-    z-index: $z-dropdown;
-    left: 0;
-    top: var(--header-height);
-    bottom: 0;
-    transform: translateX(-100%);
-    box-shadow: $shadow-lg;
-
-    &.open {
-      transform: translateX(0);
-    }
-  }
 }
 
 .content {
@@ -584,24 +543,23 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  height: calc(100vh - var(--shell-gutter) - var(--shell-gutter));
   overflow-y: auto;
   scrollbar-gutter: stable;
-  height: 100%;
+
+  @supports (height: 100dvh) {
+    height: calc(100dvh - var(--shell-gutter) - var(--shell-gutter));
+  }
 
   &.content-logs {
     overflow: hidden;
-
-    @media (max-width: $breakpoint-mobile) {
-      overflow: visible;
-      overflow-y: auto;
-      height: auto;
-    }
   }
 }
 
 .main-content {
   flex: 1 0 auto;
-  padding: $spacing-lg;
+  min-height: 100%;
+  padding: 70px clamp(20px, 3vw, 48px) 40px;
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
@@ -611,16 +569,6 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
-
-    @media (max-width: $breakpoint-mobile) {
-      flex: 0 0 auto;
-      min-height: auto;
-      overflow: visible;
-    }
-  }
-
-  @media (max-width: $breakpoint-mobile) {
-    padding: $spacing-md;
   }
 }
 
@@ -634,3 +582,140 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+@media (max-width: $breakpoint-mobile) {
+  :root {
+    --header-height: 74px;
+    --shell-gutter: 12px;
+    --sidebar-panel-width: min(280px, calc(100vw - 24px));
+    --floating-control-size: 36px;
+  }
+
+  .top-gradient-blur {
+    height: 152px;
+  }
+
+  .main-header {
+    .sidebar-toggle-floating {
+      display: none;
+    }
+
+    .header-actions {
+      top: var(--shell-gutter);
+      right: var(--shell-gutter);
+      max-width: calc(100vw - var(--shell-gutter) - var(--shell-gutter));
+      padding: 5px;
+      gap: 2px;
+      border-radius: 14px;
+    }
+
+    .mobile-menu-btn {
+      display: inline-flex;
+    }
+
+    .language-menu-popover {
+      right: auto;
+      left: 0;
+    }
+
+    .theme-menu-popover {
+      right: 0;
+      left: auto;
+      transform: none;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      justify-content: stretch;
+      width: min(188px, calc(100vw - 16px));
+    }
+
+    .theme-card {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .theme-card-label {
+      white-space: normal;
+      text-align: center;
+      line-height: 1.2;
+    }
+  }
+
+  .main-body {
+    height: auto;
+    min-height: 100vh;
+    padding: 0;
+    overflow: visible;
+
+    @supports (min-height: 100dvh) {
+      min-height: 100dvh;
+    }
+  }
+
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: $z-dropdown - 1;
+    background: rgb(8 8 8 / 0.46);
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .sidebar {
+    position: fixed;
+    top: calc(var(--header-height) + 4px);
+    bottom: var(--shell-gutter);
+    left: var(--shell-gutter);
+    z-index: $z-dropdown;
+    width: var(--sidebar-panel-width);
+    height: auto;
+    transform: translateX(calc(-100% - 24px));
+    background:
+      linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0)),
+      color-mix(in srgb, var(--bg-primary) 94%, #0f0e0c);
+    border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
+    box-shadow:
+      0 28px 62px rgb(0 0 0 / 0.34),
+      inset 0 1px 0 rgb(255 255 255 / 0.04);
+
+    &.open {
+      transform: translateX(0);
+    }
+
+    &.collapsed {
+      width: var(--sidebar-panel-width);
+      padding: 18px 14px;
+
+      .sidebar-brand,
+      .nav-item {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .content {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+    overflow-y: auto;
+
+    &.content-logs {
+      overflow: visible;
+      overflow-y: auto;
+      height: auto;
+    }
+  }
+
+  .main-content {
+    padding: calc(var(--header-height) + 16px) $spacing-md $spacing-lg;
+
+    &.main-content-logs {
+      flex: 0 0 auto;
+      min-height: auto;
+      overflow: visible;
+    }
+  }
+}