后台站点设计UIUX优化

frontend/app/globals.css

@@ -3590,6 +3590,125 @@ a.j13-mention-token:hover {
     font-size: 12.5px;
   }
 
+  /* 站点设置：顶栏横向 tab，窄屏横向滚动 */
+  .admin-settings-tabs {
+    display: flex;
+    align-items: stretch;
+    gap: 0.125rem;
+    overflow-x: auto;
+    margin: 0 0 1.25rem;
+    border-bottom: 1px solid var(--line);
+    scrollbar-width: thin;
+  }
+  .admin-settings-tab {
+    appearance: none;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: none;
+    background: transparent;
+    padding: 0.7rem 0.95rem;
+    margin-bottom: -1px;
+    font-family: inherit;
+    font-size: 13.5px;
+    font-weight: 500;
+    line-height: 1.3;
+    color: var(--ink-2);
+    cursor: pointer;
+    white-space: nowrap;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .admin-settings-tab:hover:not([aria-selected="true"]) {
+    color: var(--ink);
+  }
+  .admin-settings-tab[aria-selected="true"] {
+    color: var(--accent);
+    font-weight: 600;
+    border-bottom-color: var(--accent);
+  }
+  .admin-settings-tab:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+  .admin-settings-tab-soon {
+    font-size: 10.5px;
+    font-weight: 500;
+    color: var(--ink-3);
+  }
+  .admin-settings-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    align-items: start;
+  }
+  @media (min-width: 1024px) {
+    .admin-settings-grid {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+  }
+
+  /* 基本信息里的品牌槽：窄屏单列，宽屏浅色 / 暗色 / Favicon 并排 */
+  .admin-brand-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    align-items: start;
+  }
+  @media (min-width: 900px) {
+    .admin-brand-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .admin-brand-keywords {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .j13-brand-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .j13-brand-slot[data-frame="1"] {
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--panel) 70%, transparent);
+    box-shadow: inset 0 0 0 1px var(--line);
+  }
+  .j13-brand-logo {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    object-fit: contain;
+    display: block;
+  }
+  .j13-brand-slot[data-fit="cover"] > .j13-brand-logo:not(.j13-brand-logo-tile) {
+    object-fit: cover;
+  }
+  .j13-brand-slot[data-fit="stretch"] > .j13-brand-logo:not(.j13-brand-logo-tile) {
+    object-fit: fill;
+  }
+  .j13-brand-logo-tile {
+    background-repeat: repeat;
+    background-size: auto;
+    background-position: left top;
+  }
+  .j13-brand-bubble {
+    width: 36px;
+    height: 36px;
+  }
+  .j13-brand-logo-dark {
+    display: none;
+  }
+  html.dark .j13-brand-logo-light {
+    display: none;
+  }
+  html.dark .j13-brand-logo-dark {
+    display: block;
+  }
+
   .admin-icon-btn {
     display: inline-flex;
     align-items: center;