diff --git a/web/style.css b/web/style.css
index 2aa2005..34f3fec 100644
--- a/web/style.css
+++ b/web/style.css
@@ -3,22 +3,22 @@ body {
     font-family: 'Roboto', Arial, sans-serif;
     height: 100vh;
     overflow: hidden;
-    background: #e6ecf3;
+    background: #fff;
 }
 
 .container {
     display: flex;
     height: 100vh;
-    background: #e6ecf3;
+    background: #fff;
 }
 
 /* 左侧用户信息区 */
 .sidebar-user {
     display: flex;
     align-items: center;
-    padding: 18px 18px 10px 18px;
+    padding: 17.2px 18px 10px 18px;
     background: #fff;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid #dcdcdc;
 }
 .sidebar-username {
     font-weight: 600;
@@ -28,7 +28,7 @@ body {
 
 .sidebar {
     width: 300px;
-    background: #f6f6f6;
+    background: #fff;
     border-right: 1px solid #e0e0e0;
     display: flex;
     flex-direction: column;
@@ -36,56 +36,63 @@ body {
 }
 
 .sidebar .join-room {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 18px 0 18px 0;
-  background: #fff;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 1.13rem;
-  font-weight: 600;
-  color: #30a8f7;
-  letter-spacing: 1px;
-  cursor: pointer;
-  user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 18px 0 18px 0;
+    background: #fff;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 1.13rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    cursor: pointer;
+    user-select: none;
 }
 
+
 .sidebar .join-room input,
 .sidebar .join-room .menu-icon {
     display: none !important;
 }
 
 .sidebar .join-room:hover {
-    box-shadow: 0 2px 12px 0 #30a8f733, 0 1.5px 6px 0 #30a8f71a;
-    background: #f3faff;
+    background: #f5f5f5;
     transition: box-shadow 0.18s, background 0.18s;
 }
 
 .sidebar .rooms {
     flex: 1;
     overflow-y: auto;
-    background: #f6f6f6;
+    background: #fff;
 }
 
 .room {
     display: flex;
     align-items: center;
-    padding: 15px 15px;
-    border-bottom: 1px solid #eee;
+    padding: 20px 15px;
+    border-bottom: 1px solid #ffffff;
     cursor: pointer;
-    background: #f6f6f6;
+    background: #fff;
     transition: background 0.2s;
-    border-radius: 12px;
+    border-radius: 10px;
     margin: 6px 8px;
     box-sizing: border-box;
     position: relative;
     box-shadow: none;
 }
 
-.room.active,
-.room:hover {
-    background: #d0e6fa;
-    box-shadow: 0 2px 8px #b3d8f7a0;
+.room.active {
+  background: #7bc0ff;
+}
+
+/* 激活状态下 hover 也保持激活色 */
+.room.active:hover {
+  background: #7bc0ff;
+}
+
+/* 只有未激活时 hover 才变灰色 */
+.room:hover:not(.active) {
+  background: #f5f5f5;
 }
 
 .room .info {
@@ -120,25 +127,34 @@ body {
 }
 
 .main {
-    flex: 2.5;
-    display: flex;
-    flex-direction: column;
-    background: linear-gradient(135deg, #f7faff 60%, #e6ecf3 100%);
-    position: relative;
-    border-radius: 0 0 0 0;
-    box-shadow: 0 0 16px #d0e6fa40;
+  flex: 2.5;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #e098ff 0%, #ffc2c2 53%);
+  background-repeat: no-repeat;
+  position: relative;
 }
 
-.main-header {
+    .main::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: url(./wallpaper.png) left top / auto 100% no-repeat;
+      opacity: 0.22; /* 可根据实际效果调整 */
+      mix-blend-mode: multiply;
+      pointer-events: none;
+      z-index: 0;
+  }
+
+  .main-header {
     display: flex;
     align-items: center;
-    padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
+    padding: 14.6px;
     background: #fff;
     justify-content: space-between;
     min-height: 30px;
-    border-radius: 0 0 0 0;
-    box-shadow: 0 2px 8px #e0e0e040;
+    position: relative;
+    z-index: 1;
 }
 
 .main-header .group-title {
@@ -164,7 +180,7 @@ body {
 
 .pinned {
     padding: 2px 24px;
-    background: #f7faff;
+    background: #fff;
     font-size: 13px;
     color: #2a5d8f;
     border-bottom: 1px solid #eee;
@@ -185,15 +201,12 @@ body {
 .bubble {
     max-width: 80%;
     padding: 12px 18px;
-    border-radius: 18px;
-    margin-top: 12px;
+    border-radius: 13px;
+    margin-bottom: .375rem;
     font-size: 15px;
     line-height: 1.6;
     position: relative;
-    box-shadow: 0 2px 8px #e0e0e080;
     word-break: break-all;
-    border: 1px solid #e0e0e0;
-    background: #f8fbff;
     display: flex;
     flex-direction: column;
 }
@@ -211,33 +224,27 @@ body {
     align-self: flex-end;
     position: absolute;
     right: 3px;
-    bottom: 3px;
+    bottom: 7px;
     display: inline-block;
     background: transparent;
     line-height: 1;
 }
 
 .bubble.me {
-    background: #d0e6fa;
-    color: #222;
-    margin-left: auto;
-    border-bottom-right-radius: 6px;
-    border: 1px solid #b3d8f7;
+  background: #e3fee0;
+  color: #222;
+  margin-left: auto;
+  border-bottom-right-radius: 0px;
+  padding: 10px 39px 7px 10px;
 }
 
 .bubble.other {
-    background: #fff;
-    color: #222;
-    margin-right: auto;
-    border-bottom-left-radius: 6px;
-    border: 1px solid #e0e0e0;
-    margin-right: 0;
-    margin-left: 0;
-    padding: 4px 18px 13px 18px;
-}
-
-.bubble.other .bubble-meta {
-    right: 8px;
+  background: #fff;
+  color: #222;
+  border-bottom-left-radius: 0px;
+  margin-bottom: 0;
+  margin-left: 0px;
+  padding: 1px 40px 5px 10px;
 }
 
 .bubble .bubble-meta {
@@ -258,7 +265,8 @@ body {
 .bubble-other-wrap {
   display: flex;
   align-items: flex-end;
-  margin-bottom: 12px;
+  position: relative;
+  z-index: 2;
 }
 .bubble-other-main {
   display: flex;
@@ -269,12 +277,11 @@ body {
   font-size: 13px;
   color: #30a8f7;
   font-weight: 500;
-  margin-left: -5px;
 }
 
 /* Telegram风格输入区样式 */
 :root {
-  --chat-input-border-radius: 1.5rem;
+  --chat-input-border-radius: 1rem;
   --chat-input-size: 3.25rem;
   --chat-input-inner-padding: 1.25rem;
   --surface-color: #fff;
@@ -361,7 +368,7 @@ body {
   transition: background 0.2s;
 }
 .btn-icon.toggle-emoticons:hover {
-  background: #e3f1fd;
+  background: #f5f5f5;
 }
 
 .btn-icon.rp.btn-menu-toggle {
@@ -380,7 +387,6 @@ body {
 }
 .btn-icon.rp.btn-menu-toggle:hover {
   background: rgba(48,168,247,0.10);
-  box-shadow: 0 2px 8px 0 rgba(48,168,247,0.12);
 }
 .c-ripple {
   position: absolute;
@@ -485,8 +491,7 @@ body {
   gap: 3px;
 }
 .more-btn:hover {
-  background: rgba(48,168,247,0.13);
-  box-shadow: 0 2px 8px 0 rgba(48,168,247,0.18);
+  background: #f5f5f5;
 }
 .more-btn:active::after {
   content: '';
@@ -508,7 +513,7 @@ body {
 .more-btn-dot {
   width: 6px;
   height: 6px;
-  background: #30a8f7;
+  background: #707579;
   border-radius: 50%;
   display: block;
   margin: 0;
@@ -569,12 +574,12 @@ body {
     margin: 5px 5px;
 }
 .more-menu-item:hover {
-  background: #e3f1fd;
+  background: #f5f5f5;
 }
 
 .rightbar {
     width: 250px;
-    background: #f7faff;
+    background: #fff;
     border-left: 1px solid #e0e0e0;
     display: flex;
     flex-direction: column;
@@ -582,10 +587,10 @@ body {
 }
 
 .rightbar-header {
-    padding: 25px 18px 25px 18px;
-    border-bottom: 1px solid #e0e0e0;
-    background: #e6ecf3;
-    border-radius: 0 12px 0 0;
+  padding: 23.27px 18px 24px 18px;
+  border-bottom: 1px solid #dcdcdc;
+  background: #fff;
+  border-radius: 0 12px 0 0;
 }
 
 .rightbar-group {
@@ -606,14 +611,14 @@ body {
 }
 
 .rightbar-tabs {
-    background: #e6ecf3;
+    background: #fff;
     border-radius: 0 0 0 0;
     box-shadow: 0 2px 8px #e0e0e020;
 }
 
 .rightbar .tabs {
     display: flex;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #f3f3f3;
     margin: 0 18px;
 }
 
@@ -623,7 +628,7 @@ body {
     font-size: 15px;
     color: #30a8f7;
     font-weight: 500;
-    border-bottom: 2px solid transparent;
+    border-bottom: 1px solid #f3f3f3;
     border-radius: 8px 8px 0 0;
     margin-right: 8px;
     transition: background 0.2s, color 0.2s;
@@ -639,7 +644,7 @@ body {
     flex: 1;
     overflow-y: auto;
     padding: 10px 0;
-    background: #f7faff;
+    background: #fff;
 }
 
 .member {
@@ -652,8 +657,7 @@ body {
 }
 
 .member:hover {
-    background: #d0e6fa;
-    box-shadow: 0 2px 8px #b3d8f7a0;
+    background: #f5f5f5;
 }
 
 .member .member-info {
@@ -673,7 +677,7 @@ body {
 
 ::-webkit-scrollbar {
     width: 4px;
-    background: #f6f6f6;
+    background: #fff;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -811,7 +815,6 @@ body {
   width: 42px !important;
   height: 42px !important;
   border-radius: 50% !important;
-  background: #30a8f7 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -822,8 +825,10 @@ body {
   overflow: hidden !important;
   flex-shrink: 0 !important;
   object-fit: cover !important;
-  margin-right: 12px !important;
+  margin-right: 8px !important;
   box-sizing: border-box !important;
+  z-index: 2 !important;
+  position: relative !important;
 }
 
 .avatar img {
@@ -832,6 +837,8 @@ body {
   border-radius: 50% !important;
   object-fit: cover !important;
   display: block !important;
+  z-index: 2 !important;
+  position: relative !important;
 }
 
 /* 聊天图片全屏预览弹窗样式优化 */
diff --git a/web/wallpaper.png b/web/wallpaper.png
new file mode 100644
index 0000000..9ce7f2d
Binary files /dev/null and b/web/wallpaper.png differ