diff --git a/src/app/sidebar/components/sidebar-screen.module.css b/src/app/sidebar/components/sidebar-screen.module.css
index 008326cf..ffb97d70 100644
--- a/src/app/sidebar/components/sidebar-screen.module.css
+++ b/src/app/sidebar/components/sidebar-screen.module.css
@@ -1,21 +1,21 @@
 .shell {
   display: flex;
   flex-direction: column;
-  background: var(--color-page-background, #ffffff);
-  color: #000;
+  background: var(--color-sidebar-background, #0d0b14);
+  color: var(--color-text-primary, #ffffff);
   min-height: 100dvh;
-  padding: var(--spacing-xxl, 24px);
+  padding: var(--spacing-xxl, 24px) var(--spacing-lg, 16px);
 }
 
 .backRow {
-  padding: var(--spacing-md, 12px);
+  padding: var(--spacing-md, 12px) 0;
 }
 
 .backLink {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs, 4px);
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   text-decoration: none;
   font-size: var(--font-size-lg, 16px);
   font-weight: 400;
@@ -30,34 +30,55 @@
 }
 
 .backIcon {
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   flex-shrink: 0;
 }
 
 .backText {
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-lg, 16px);
   font-weight: 400;
 }
 
 .settingsArea {
-  padding: 0 var(--spacing-md, 12px);
+  padding: 0;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
   gap: var(--spacing-lg, 16px);
 }
 
+/* 让 SettingsSection 适配深色侧边栏背景（覆盖 _components/core 里的硬编码浅色） */
+.settingsArea :global(section) > h3 {
+  color: var(--color-text-secondary, #9e9e9e);
+}
+.settingsArea :global(ul) {
+  background: var(--color-bubble-background, #1a1625);
+}
+.settingsArea :global(li) {
+  background: transparent;
+}
+.settingsArea :global(button) {
+  color: var(--color-text-primary, #ffffff);
+}
+.settingsArea :global(button) span {
+  color: var(--color-text-primary, #ffffff);
+}
+.settingsArea :global(svg) {
+  color: var(--color-text-primary, #ffffff);
+}
+
 /* ============================================================
  * 用户信息区
  * ============================================================ */
 .profileArea {
-  padding: 0 var(--spacing-md, 12px);
+  padding: 0;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: var(--spacing-lg, 16px);
   width: 100%;
+  margin-top: var(--spacing-md, 12px);
 }
 
 .userInfoCard {
@@ -65,9 +86,9 @@
   align-items: center;
   gap: var(--spacing-md, 12px);
   padding: var(--spacing-lg, 16px);
-  background: var(--color-settings-card-background, #ffffff);
-  border-radius: var(--radius-lg, 12px);
-  color: #000;
+  background: var(--color-bubble-background, #1a1625);
+  border-radius: var(--radius-xl, 16px);
+  color: var(--color-text-primary, #ffffff);
   width: 100%;
   box-sizing: border-box;
 }
@@ -82,8 +103,8 @@
   width: 64px;
   height: 64px;
   border-radius: var(--radius-full, 999px);
-  background: var(--color-settings-row-background, #f2f2f2);
-  color: #000;
+  background: var(--color-dark-gray, #2a2a2a);
+  color: var(--color-text-primary, #ffffff);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -110,7 +131,7 @@
 .userInfoName {
   font-size: var(--font-size-lg, 16px);
   font-weight: 600;
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -118,8 +139,8 @@
 }
 
 .userInfoEmail {
-  font-size: var(--font-size-sm, 14px);
-  color: var(--color-text-secondary, #666);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--color-text-secondary, #9e9e9e);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -129,8 +150,9 @@
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs, 4px);
-  font-size: var(--font-size-sm, 14px);
-  color: var(--color-text-secondary, #666);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--color-text-secondary, #9e9e9e);
+  margin-top: 2px;
 }
 
 .vipBadge {
@@ -138,12 +160,13 @@
   align-items: center;
   padding: 2px var(--spacing-sm, 8px);
   border-radius: var(--radius-full, 999px);
-  background: var(--color-accent, #7c5cff);
+  background: var(--color-accent, #f84d96);
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-xs, 12px);
-  font-weight: 600;
+  font-size: var(--font-size-xs, 10px);
+  font-weight: 700;
   letter-spacing: 0.5px;
   flex-shrink: 0;
+  text-transform: uppercase;
 }
 
 .vipCta {
@@ -154,8 +177,8 @@
   border-radius: var(--radius-full, 999px);
   background: linear-gradient(
     90deg,
-    var(--color-button-gradient-start, #7c5cff),
-    var(--color-button-gradient-end, #b48bff)
+    var(--color-button-gradient-start, #ff67e0),
+    var(--color-button-gradient-end, #ff52a2)
   );
   color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-lg, 16px);
@@ -164,6 +187,7 @@
   cursor: pointer;
   width: 100%;
   text-decoration: none;
+  box-sizing: border-box;
 }
 
 .vipCta:hover {
@@ -171,7 +195,7 @@
 }
 
 .vipCta:focus-visible {
-  outline: 2px solid var(--color-accent, #7c5cff);
+  outline: 2px solid var(--color-accent, #f84d96);
   outline-offset: 2px;
 }
 
@@ -181,33 +205,34 @@
 .guestPanel {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md, 12px);
-  padding: var(--spacing-lg, 16px);
-  background: var(--color-settings-card-background, #ffffff);
-  border-radius: var(--radius-lg, 12px);
-  color: #000;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-xl, 20px);
+  background: var(--color-bubble-background, #1a1625);
+  border-radius: var(--radius-xl, 16px);
+  color: var(--color-text-primary, #ffffff);
   width: 100%;
   box-sizing: border-box;
 }
 
 .guestTitle {
-  font-size: var(--font-size-xl, 20px);
+  font-size: var(--font-size-xl, 18px);
   font-weight: 600;
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   margin: 0;
 }
 
 .guestSubtitle {
-  font-size: var(--font-size-sm, 14px);
-  color: var(--color-text-secondary, #666);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--color-text-secondary, #9e9e9e);
   margin: 0;
+  line-height: 1.5;
 }
 
 .guestActions {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm, 8px);
-  margin-top: var(--spacing-sm, 8px);
+  margin-top: var(--spacing-md, 12px);
 }
 
 .guestPrimaryLink {
@@ -218,14 +243,15 @@
   border-radius: var(--radius-full, 999px);
   background: linear-gradient(
     90deg,
-    var(--color-button-gradient-start, #7c5cff),
-    var(--color-button-gradient-end, #b48bff)
+    var(--color-button-gradient-start, #ff67e0),
+    var(--color-button-gradient-end, #ff52a2)
   );
   color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-lg, 16px);
   font-weight: 600;
   text-decoration: none;
   border: 0;
+  box-sizing: border-box;
 }
 
 .guestPrimaryLink:hover {
@@ -239,15 +265,16 @@
   padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
   border-radius: var(--radius-full, 999px);
   background: transparent;
-  color: #000;
+  color: var(--color-text-primary, #ffffff);
   font-size: var(--font-size-lg, 16px);
   font-weight: 600;
   text-decoration: none;
-  border: 1px solid var(--color-auth-border, #d0d0d0);
+  border: 1px solid var(--color-dialog-border, rgba(255, 255, 255, 0.1));
+  box-sizing: border-box;
 }
 
 .guestSecondaryLink:hover {
-  background: var(--color-settings-row-background, #f2f2f2);
+  background: var(--color-dark-gray, #2a2a2a);
 }
 
 /* ============================================================
@@ -255,7 +282,7 @@
  * ============================================================ */
 .skeleton {
   display: block;
-  background: var(--color-settings-row-background, #e5e5e5);
+  background: var(--color-dark-gray, #2a2a2a);
   border-radius: var(--radius-md, 8px);
 }