feat: 个人中心仪表盘视觉打磨与交互优化

本次提交对个人中心（Profile Dashboard）进行了全面的 UI/UX 升级：

## AppShell 导航修复
- 修复浮动导航栏显示逻辑：移除未登录状态下多余的 session 判断条件，确保登录页不显示导航

## ProfilePage 功能增强
- 新增面板标题、描述和计数变量，动态展示不同面板（代表作/服务器项目/我的资产/社区审核）的上下文信息
- 背景图更换按钮增加 aria-label 无障碍支持，文字使用独立 span 便于移动端隐藏
- 积分与任务切换按钮拆分为标签+数值结构，信息层级更清晰
- 账号摘要卡片新增套餐名称和已完成任务数展示
- 操作按钮（工作台/社区/退出登录）包裹至 actions 容器，统一布局管理
- 主面板标签页文字包裹 span，支持响应式隐藏

## profile.css 滚动模型调整
- Dashboard 视图改用页面自然滚动，替代嵌套区域滚动，避免双滚动条问题

## dark-green.css 主题样式（约 1160 行新增）
- 背景图与头像区域：毛玻璃按钮、头像环绿边光晕、hover 编辑覆盖层
- 个性签名：圆角胶囊展示态 + 编辑态双向布局，状态提示条
- 账号卡片：标签按钮网格化布局、积分摘要面板、套餐标签
- 操作按钮组：主按钮渐变绿色、次要按钮低对比、退出按钮红色警示
- 内容标签页：胶囊切换 + 计数徽章，激活态绿边高亮
- 列表卡片：hover 微上浮 + 绿色边框过渡，空状态虚线面板
- 多轮视觉迭代：从 graphite 灰调到最终 black+green 参考色调
- 响应式适配：移动端头像环缩小、背景按钮圆形、标签页紧凑排列
- 页面级滚动：让 body 自然滚动，取消 content 内部滚动容器

src/components/AppShell.tsx

@@ -75,7 +75,7 @@ function AppShell({
   const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
-  const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
+  const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
   const toolSurfaceViews = [
     "workbench",
     "canvas",

src/features/profile/ProfilePage.tsx

@@ -260,6 +260,30 @@ function ProfilePage({
   const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
   const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
   const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
+  const activePanelTitle =
+    activePanel === "works"
+      ? "代表作"
+      : activePanel === "projects"
+        ? "服务器项目"
+        : activePanel === "assets"
+          ? "我的资产"
+          : "社区审核";
+  const activePanelDescription =
+    activePanel === "works"
+      ? "最近完成的高质量生成内容"
+      : activePanel === "projects"
+        ? "云端同步的创作项目"
+        : activePanel === "assets"
+          ? "可复用的图片、视频与素材"
+          : "已提交社区的案例状态";
+  const activePanelCount =
+    activePanel === "works"
+      ? visibleWorks.length
+      : activePanel === "projects"
+        ? projects.length
+        : activePanel === "assets"
+          ? savedAssets.length
+          : communityCases.length;
   const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
   const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
   const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
@@ -765,9 +789,9 @@ function ProfilePage({
           className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
           style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
         >
-          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()}>
+          <button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
             <CameraOutlined />
-            更换背景
+            <span className="profile-page__banner-btn-label">更换背景</span>
           </button>
           <div className="profile-page__banner-overlay" />
         </header>
@@ -847,14 +871,16 @@ function ProfilePage({
                   className={accountPanel === "credits" ? "is-active" : ""}
                   onClick={() => setAccountPanel("credits")}
                 >
-                  积分 {(totalBalance / 100).toFixed(2)}
+                  <span>可用积分</span>
+                  <strong>{(totalBalance / 100).toFixed(2)}</strong>
                 </button>
                 <button
                   type="button"
                   className={accountPanel === "tasks" ? "is-active" : ""}
                   onClick={() => setAccountPanel("tasks")}
                 >
-                  任务 {tasks.length}
+                  <span>生成任务</span>
+                  <strong>{tasks.length}</strong>
                 </button>
               </div>
               <div className="profile-page__account-summary">
@@ -863,6 +889,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>当前账号</small>
                       <strong>{displayName}</strong>
+                      <em>{packageLabel}</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>积分剩余</small>
@@ -874,6 +901,7 @@ function ProfilePage({
                     <span className="profile-page__account-summary-main">
                       <small>任务概览</small>
                       <strong>{tasks.length} 个任务</strong>
+                      <em>{completedTasks.length} 个已完成</em>
                     </span>
                     <span className="profile-page__account-summary-metric">
                       <small>已完成</small>
@@ -884,51 +912,49 @@ function ProfilePage({
               </div>
             </div>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
+            <div className="profile-page__actions">
-              <ShareAltOutlined />
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
-              {packageLabel}
+                <ShareAltOutlined />
-            </button>
+                {packageLabel}
+              </button>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
-              <PlusOutlined />
+                <PlusOutlined />
-              进入工作台
+                进入工作台
-            </button>
+              </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
-              <ShareAltOutlined />
+                <ShareAltOutlined />
-              打开社区
+                打开社区
-            </button>
+              </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+              <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
-              <LockOutlined />
+                <LockOutlined />
-              退出登录
+                退出登录
-            </button>
+              </button>
+            </div>
           </aside>
 
           <main className="profile-page__main">
             <div className="profile-page__main-tabs">
               <button type="button" className={activePanel === "works" ? "is-active" : ""} onClick={() => setActivePanel("works")}>
-                我的作品
+                <span>我的作品</span>
               </button>
               <button type="button" className={activePanel === "projects" ? "is-active" : ""} onClick={() => setActivePanel("projects")}>
-                我的项目
+                <span>我的项目</span>
               </button>
               <button type="button" className={activePanel === "assets" ? "is-active" : ""} onClick={() => setActivePanel("assets")}>
-                我的资产
+                <span>我的资产</span>
               </button>
               <button type="button" className={activePanel === "community" ? "is-active" : ""} onClick={() => setActivePanel("community")}>
-                社区发布
+                <span>社区发布</span>
               </button>
             </div>
 
             <div className="profile-page__section">
-              <span className="profile-page__section-label">
+              <div className="profile-page__section-head">
-                {activePanel === "works"
+                <span className="profile-page__section-label">{activePanelTitle}</span>
-                  ? "代表作"
+                <span className="profile-page__section-desc">{activePanelDescription}</span>
-                  : activePanel === "projects"
+                <span className="profile-page__section-meta">{activePanelCount} 项</span>
-                    ? "服务器项目"
+              </div>
-                    : activePanel === "assets"
-                      ? "我的资产"
-                      : "社区审核"}
-              </span>
               {renderActivePanel()}
             </div>
           </main>

src/styles/pages/agent.css

@@ -1,13 +1 @@
 /* Agent page rules move here as they are retired from legacy-pages.css. */
-
-@media (max-width: 900px) {
-  .agent-page {
-    padding: 16px 16px 80px;
-  }
-}
-
-@media (max-width: 560px) {
-  .agent-page {
-    padding: 12px 10px 80px;
-  }
-}

src/styles/pages/assets.css

@@ -243,24 +243,3 @@
     max-height: calc(100vh - 190px);
   }
 }
-
-@media (max-width: 560px) {
-  .asset-preview-modal {
-    padding: 8px;
-  }
-
-  .asset-preview-modal__panel {
-    width: calc(100vw - 16px);
-    max-height: calc(100vh - 16px);
-    border-radius: 12px;
-  }
-
-  .asset-preview-modal__body {
-    padding: 8px;
-  }
-
-  .asset-preview-modal__body img,
-  .asset-preview-modal__body video {
-    max-height: calc(100vh - 160px);
-  }
-}

src/styles/pages/avatar-console.css

@@ -4211,30 +4211,3 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
-
-@media (max-width: 560px) {
-  .avatar-console-page {
-    height: auto;
-    min-height: 100%;
-    overflow: auto;
-  }
-
-  .avatar-console-main {
-    min-height: 100vh;
-    padding-bottom: 80px;
-  }
-
-  .avatar-console-scroll {
-    padding: 10px;
-  }
-
-  .avatar-console-toolbar {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .avatar-console-video-actions {
-    flex-direction: column;
-    gap: 8px;
-  }
-}

src/styles/pages/canvas.css

@@ -910,94 +910,3 @@
   height: 100%;
   cursor: crosshair;
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Canvas
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-@media (max-width: 900px) {
-  .studio-canvas-page {
-    flex-direction: column;
-  }
-
-  .studio-canvas-toolbar {
-    flex: 0 0 auto;
-    flex-direction: row;
-    width: 100%;
-    padding: 8px 12px;
-    gap: 6px;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-weak);
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .studio-canvas-toolbar__group {
-    flex-direction: row;
-    flex-shrink: 0;
-    gap: 4px;
-  }
-
-  .studio-canvas-toolbar button {
-    min-width: 36px;
-    height: 36px;
-    font-size: 14px;
-  }
-
-  .studio-canvas-main {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .studio-canvas-node {
-    min-width: 140px;
-    min-height: 60px;
-  }
-}
-
-@media (max-width: 560px) {
-  .studio-canvas-page {
-    flex-direction: column;
-  }
-
-  .studio-canvas-toolbar {
-    flex: 0 0 auto;
-    padding: 6px 8px;
-    gap: 4px;
-    border-bottom: 1px solid var(--border-weak);
-  }
-
-  .studio-canvas-toolbar button {
-    min-width: 30px;
-    height: 30px;
-    padding: 0 6px;
-    font-size: 12px;
-    border-radius: 8px;
-  }
-
-  .studio-canvas-main {
-    flex: 1;
-    min-height: 0;
-  }
-
-  .studio-canvas-node {
-    min-width: 110px;
-    min-height: 48px;
-    border-radius: 10px;
-    padding: 8px;
-  }
-
-  .studio-canvas-project-bar {
-    right: 8px;
-    left: 8px;
-    bottom: 80px;
-    gap: 4px;
-    border-radius: 10px;
-    padding: 8px 10px;
-  }
-
-  .studio-canvas-project-bar__name-form {
-    font-size: 12px;
-  }
-}

src/styles/pages/community.css

@@ -117,52 +117,3 @@
   font-weight: 600;
   line-height: 1.6;
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Community
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-@media (max-width: 900px) {
-  .community-page {
-    padding: 12px 16px 80px;
-  }
-
-  .community-carousel__slide--video {
-    min-height: 200px;
-  }
-
-  .community-carousel__video {
-    max-height: 220px;
-  }
-
-  .community-case-card__preview {
-    min-height: 140px;
-  }
-}
-
-@media (max-width: 560px) {
-  .community-page {
-    padding: 10px 10px 80px;
-  }
-
-  .community-carousel__slide--video {
-    min-height: 160px;
-  }
-
-  .community-carousel__video {
-    max-height: 180px;
-  }
-
-  .community-case-card__preview {
-    min-height: 110px;
-  }
-
-  .community-case-empty {
-    padding: 32px 16px;
-  }
-
-  .community-case-empty__icon {
-    font-size: 18px;
-  }
-}

src/styles/pages/ecommerce.css

@@ -8382,147 +8382,6 @@
 .clone-ai-adwizard__risk.is-low { color: #52c41a; }
 .clone-ai-adwizard__risk.is-medium { color: #faad14; }
 .clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Ecommerce Tools
-   Breakpoints: 1180px / 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-/* ── 1180px: Narrower panels ── */
-@media (max-width: 1180px) {
-  .product-clone-page[data-tool="clone"] > .product-clone-shell {
-    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
-  }
-  .product-clone-page[data-tool="set"] > .product-clone-shell {
-    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
-  }
-}
-
-/* ── 900px: Tablet — stacked layout ── */
-@media (max-width: 900px) {
-  /* All tools: collapse shell to single column */
-  .product-clone-page > .product-clone-shell,
-  .product-clone-page[data-tool="clone"] > .product-clone-shell,
-  .product-clone-page[data-tool="set"] > .product-clone-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  /* Rail becomes horizontal tab bar */
-  .product-clone-rail {
-    display: flex !important;
-    flex-direction: row;
-    gap: 4px;
-    width: 100%;
-    height: auto;
-    padding: 8px 12px;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-weak, #2a3032);
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .product-clone-rail button {
-    flex-shrink: 0;
-    white-space: nowrap;
-    flex-direction: row;
-    gap: 6px;
-    padding: 8px 14px;
-    font-size: 12px;
-  }
-
-  /* Panel: full-width, reduced height */
-  .product-clone-panel {
-    width: 100%;
-    max-height: 45vh;
-    overflow-y: auto;
-  }
-
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    --clone-settings-panel-width: 100%;
-    max-height: 45vh;
-  }
-
-  /* Preview: independent scroll area */
-  .product-clone-preview {
-    min-height: 40vh;
-    overflow-y: auto;
-    padding: 20px 16px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-clone-preview {
-    padding: 20px 16px;
-  }
-
-  /* Collapse toggle tweak */
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    transition: max-height 320ms ease, opacity 320ms ease;
-  }
-
-  .product-clone-page.is-settings-collapsed .product-clone-panel {
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-/* ── 560px: Phone — further compression ── */
-@media (max-width: 560px) {
-  .product-clone-page {
-    grid-template-rows: 44px minmax(0, 1fr);
-  }
-
-  .product-clone-rail {
-    padding: 6px 8px;
-    gap: 2px;
-  }
-
-  .product-clone-rail button {
-    padding: 6px 10px;
-    font-size: 11px;
-    gap: 4px;
-  }
-
-  .product-clone-panel {
-    max-height: 38vh;
-  }
-
-  .product-clone-page[data-tool="clone"] .product-clone-panel {
-    max-height: 38vh;
-  }
-
-  .product-clone-page[data-tool="set"] .product-clone-panel__scroll {
-    padding: 20px 14px 24px;
-  }
-
-  .product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
-    padding: 18px;
-    border-radius: 14px;
-    margin-bottom: 18px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload {
-    min-height: 180px;
-    padding: 16px;
-    gap: 8px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload-title {
-    font-size: 15px;
-  }
-
-  .product-clone-page[data-tool="set"] .product-set-upload strong {
-    height: 42px;
-    min-width: 140px;
-    font-size: 16px;
-  }
-
-  /* Preview full-width */
-  .product-clone-preview {
-    padding: 12px 10px !important;
-    min-height: 50vh;
-  }
-}
 .clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
 
 /* ===== Ecommerce Template Apple Carousel ===== */

src/styles/pages/image-workbench.css

@@ -1776,28 +1776,3 @@ textarea.image-workbench-prompt {
 .image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
 .image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
 .image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
-
-@media (max-width: 900px) {
-  .image-workbench-page {
-    padding: 12px;
-  }
-  .image-workbench-toolbar {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-}
-
-@media (max-width: 560px) {
-  .image-workbench-page {
-    padding: 8px 8px 80px;
-  }
-  .image-workbench-toolbar {
-    gap: 4px;
-  }
-  .image-workbench-toolbar button {
-    min-width: 36px;
-    height: 36px;
-    padding: 0 10px;
-    font-size: 12px;
-  }
-}

src/styles/pages/more-tools.css

@@ -1286,23 +1286,3 @@ textarea.image-workbench-prompt,
     justify-items: start;
   }
 }
-
-@media (max-width: 560px) {
-  .token-usage-page {
-    padding: 0 8px 80px;
-  }
-
-  .token-usage-page .script-token-page__scroll,
-  .script-token-page__scroll {
-    padding-inline: 8px;
-  }
-
-  .token-member-card {
-    padding: 14px;
-    gap: 8px;
-  }
-
-  .token-member-card__head {
-    gap: 8px;
-  }
-}

src/styles/pages/more.css

@@ -313,39 +313,3 @@
     font-size: 15px;
   }
 }
-
-@media (max-width: 560px) {
-  .more-page-v2 {
-    padding-left: 0;
-  }
-
-  .more-page-v2__header {
-    padding: 10px 12px 8px;
-    gap: 8px;
-  }
-
-  .more-page-v2__scroll {
-    padding: 12px 10px 72px;
-  }
-
-  .more-page-v2__grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .more-page-v2__featured-grid {
-    gap: 10px;
-  }
-
-  .more-card--featured {
-    padding: 14px;
-    gap: 10px;
-  }
-
-  .more-card__featured-icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    font-size: 18px;
-  }
-}

src/styles/pages/profile.css

@@ -2,32 +2,23 @@
 
 /* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
 .profile-page__works-scroll {
-  max-height: 390px;
+  max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
   overflow-y: auto;
-  scrollbar-width: none;
+  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none;
+  -ms-overflow-style: none; /* IE/Edge */
 }
 
 .profile-page__works-scroll::-webkit-scrollbar {
-  display: none;
+  display: none; /* Chrome/Safari/Edge */
 }
 
 .profile-page__works-scroll .profile-page__list-grid {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
 }
 
-@media (max-width: 900px) {
+/* Dashboard uses natural page scrolling instead of a nested works scroller. */
-  .profile-page,
+.profile-page--dashboard .profile-page__works-scroll {
-  .auth-page,
+  max-height: none;
-  .settings-page {
+  overflow: visible;
-    padding: 16px 16px 80px;
+  scrollbar-width: auto;
-  }
-}
-
-@media (max-width: 560px) {
-  .profile-page,
-  .auth-page,
-  .settings-page {
-    padding: 12px 10px 80px;
-  }
 }

src/styles/pages/provider-health.css

@@ -164,40 +164,3 @@
 .provider-health-table tr:hover td {
   background: var(--surface-elevated);
 }
-
-@media (max-width: 900px) {
-  .provider-health-page__inner {
-    padding: 16px;
-    gap: 16px;
-  }
-
-  .provider-health-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  }
-}
-
-@media (max-width: 560px) {
-  .provider-health-page__inner {
-    padding: 12px 12px 80px;
-    gap: 12px;
-  }
-
-  .provider-health-grid {
-    grid-template-columns: 1fr;
-    gap: 10px;
-  }
-
-  .provider-health-toolbar {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .provider-health-table {
-    font-size: 11px;
-  }
-
-  .provider-health-table th,
-  .provider-health-table td {
-    padding: 6px 8px;
-  }
-}

src/styles/pages/size-template.css

@@ -474,24 +474,3 @@
     width: min(100%, 430px);
   }
 }
-
-@media (max-width: 560px) {
-  .size-template-page {
-    padding: 12px 10px 80px;
-  }
-
-  .size-template-main-frame {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .size-template-spec-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .size-template-preview-note,
-  .size-template-detail-card {
-    width: 100%;
-  }
-}

src/styles/pages/studio-layout.css

@@ -674,19 +674,3 @@
     max-height: 320px;
   }
 }
-
-@media (max-width: 560px) {
-  .studio-tool-layout {
-    grid-template-rows: 40px auto minmax(200px, 1fr) 32px;
-  }
-
-  .studio-tool-layout__toolstrip {
-    padding: 6px 8px;
-    gap: 4px;
-  }
-
-  .studio-panel {
-    max-height: 240px;
-    padding: 12px;
-  }
-}

src/styles/pages/subtitle-removal.css

@@ -133,15 +133,3 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-
-@media (max-width: 900px) {
-  .subtitle-removal-page {
-    padding: 12px;
-  }
-}
-
-@media (max-width: 560px) {
-  .subtitle-removal-page {
-    padding: 8px 8px 80px;
-  }
-}

src/styles/pages/workbench.css

@@ -440,137 +440,3 @@
     grid-template-columns: 1fr;
   }
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive: Workbench Launch & Active State
-   Breakpoints: 900px / 560px
-   ═══════════════════════════════════════════════════════ */
-
-/* ── 900px: Tablet — launch state ── */
-@media (max-width: 900px) {
-  .wb-home {
-    padding: 36px 16px 80px;
-    gap: 18px;
-  }
-
-  .wb-home__title {
-    font-size: clamp(24px, 6vw, 36px);
-  }
-
-  .wb-home__composer {
-    max-width: 100%;
-  }
-
-  .wb-home__suggestions {
-    max-width: 100%;
-  }
-
-  .wb-showcase {
-    max-width: 100%;
-  }
-
-  .wb-showcase__grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 10px;
-  }
-
-  /* Active state: message thread */
-  .ai-workbench-content-scroll {
-    width: 100%;
-    padding: 16px 12px;
-  }
-
-  .ai-chat-message-stack {
-    max-width: 86%;
-  }
-
-  .ai-chat-message-bubble {
-    padding: 10px 12px;
-    font-size: 13px;
-  }
-
-  /* Composer in active state */
-  .wb-composer {
-    width: 100%;
-    padding: 8px 0 12px;
-  }
-}
-
-/* ── 560px: Phone — full-width compact ── */
-@media (max-width: 560px) {
-  .wb-home {
-    padding: 24px 10px 72px;
-    gap: 14px;
-  }
-
-  .wb-home__title {
-    font-size: clamp(20px, 7vw, 28px);
-  }
-
-  .wb-home__glow {
-    width: 240px;
-    height: 120px;
-    top: -40px;
-  }
-
-  .wb-showcase__grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  .wb-suggestion-chip {
-    font-size: 12px;
-    padding: 7px 12px;
-  }
-
-  /* Active state: messages fill screen */
-  .ai-workbench-content-scroll {
-    padding: 12px 8px;
-  }
-
-  .ai-workbench-thread-shell {
-    max-width: 100%;
-  }
-
-  .ai-chat-message-list {
-    gap: 8px;
-  }
-
-  .ai-chat-message-stack {
-    max-width: 90%;
-  }
-
-  .ai-chat-message-bubble {
-    padding: 8px 10px;
-    font-size: 13px;
-    border-radius: 12px;
-  }
-
-  .ai-chat-message-bubble--user {
-    border-radius: 12px 12px 4px 12px;
-  }
-
-  .ai-chat-message-bubble--ai {
-    border-radius: 12px 12px 12px 4px;
-  }
-
-  .ai-chat-avatar {
-    width: 26px;
-    height: 26px;
-    flex: 0 0 26px;
-    font-size: 10px;
-  }
-
-  .ai-chat-message-row {
-    gap: 6px;
-  }
-
-  /* Composer at bottom */
-  .wb-composer {
-    padding: 6px 0 10px;
-  }
-
-  .wb-chat-scroll-actions {
-    display: none;
-  }
-}

src/styles/shell/app-shell.css

@@ -896,21 +896,6 @@
   cursor: pointer;
 }
 
-@media (max-width: 1180px) {
-  .brand-lockup__tone {
-    display: none;
-  }
-  .creator-button {
-    display: none;
-  }
-  .member-button {
-    max-width: 148px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
 @media (max-width: 900px) {
   .web-shell {
     overflow: hidden;
@@ -977,7 +962,6 @@
   }
 }
 
-/* ── 640px: Narrower topbar adjustments ── */
 @media (max-width: 640px) {
   .brand-lockup__name {
     font-size: 14px;
@@ -997,33 +981,3 @@
     justify-content: space-between;
   }
 }
-
-/* ── 560px: Phone-sized compact layout ── */
-@media (max-width: 560px) {
-  .web-topbar {
-    flex: 0 0 44px;
-    padding: 6px 10px;
-    gap: 6px;
-  }
-
-  .brand-lockup {
-    gap: 6px;
-  }
-
-  .brand-lockup__mark {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
-  }
-
-  .brand-lockup__name {
-    font-size: 13px;
-    max-width: 80px;
-  }
-
-  .profile-button,
-  .icon-button {
-    min-width: 36px;
-    height: 36px;
-  }
-}

src/styles/tokens.css

@@ -84,14 +84,3 @@
   --danger: var(--error);
   --shadow-soft: var(--shadow-panel);
 }
-
-/* ═══════════════════════════════════════════════════════
-   Responsive Breakpoints (standardized)
-   Reference-only — CSS custom properties cannot be used
-   inside @media queries, but all pages should align to
-   these three breakpoints for consistency.
-
-   Phone  : 560px  (max-width — portrait / landscape)
-   Tablet : 900px  (max-width — tablet / small desktop)
-   Desktop: 1180px (max-width — large desktop)
-   ═══════════════════════════════════════════════════════ */