src/App.tsx

@@ -263,6 +263,7 @@ function App() {
 
   // Task store
   const tasks = useTaskStore((s) => s.tasks);
+  const setTasks = useTaskStore((s) => s.setTasks);
   const appendTask = useTaskStore((s) => s.appendTask);
   const mergeServerTasks = useTaskStore((s) => s.mergeServerTasks);
   const clearTasks = useTaskStore((s) => s.clearTasks);
@@ -1042,6 +1043,8 @@ function App() {
             onOpenWorkbench={() => handleSetView("workbench")}
             onOpenCommunity={() => handleSetView("community")}
             onDeleteProject={handleDeleteProject}
+            onOpenProject={handleOpenProject}
+            onRemoveWork={(task) => setTasks(tasks.filter((item) => item.id !== task.id))}
           />
         );
       case "community":

src/features/more/MorePage.tsx

@@ -12,7 +12,7 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 
@@ -28,6 +28,8 @@ interface MoreTool {
   id: string;
   title: string;
   text: string;
+  useCase: string;
+  tags: string[];
   icon: ReactNode;
   category: ToolCategory;
   target?: WebViewKey;
@@ -37,23 +39,77 @@ interface MoreTool {
   featured?: boolean;
 }
 
+type CompareScene =
+  | "workbench"
+  | "inpaint"
+  | "camera"
+  | "upscale"
+  | "watermark"
+  | "dialog"
+  | "subtitle"
+  | "digital-human"
+  | "character"
+  | "avatar";
+
+const toolCompareScenes: Record<string, CompareScene> = {
+  workbench: "workbench",
+  inpaint: "inpaint",
+  camera: "camera",
+  upscale: "upscale",
+  watermarkRemoval: "watermark",
+  dialogGenerator: "dialog",
+  subtitleRemoval: "subtitle",
+  digitalHuman: "digital-human",
+  characterMix: "character",
+  avatarConsole: "avatar",
+};
+
+function ToolComparePanel({ scene }: { scene: CompareScene }) {
+  return (
+    <span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
+      <span className="more-card__compare-labels">
+        <span>Before</span>
+        <span>After</span>
+      </span>
+      <span className="more-card__compare-stage">
+        <span className="more-card__compare-side more-card__compare-side--before">
+          <span className="more-card__scene-subject" />
+          <span className="more-card__scene-detail" />
+          <span className="more-card__scene-overlay" />
+        </span>
+        <span className="more-card__compare-divider">
+          <span />
+        </span>
+        <span className="more-card__compare-side more-card__compare-side--after">
+          <span className="more-card__scene-subject" />
+          <span className="more-card__scene-detail" />
+          <span className="more-card__scene-overlay" />
+        </span>
+      </span>
+    </span>
+  );
+}
+
 const tools: MoreTool[] = [
-  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
+  { id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
-  { id: "inpaint", title: "局部重绘", text: "遮罩区域重新生成", icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
+  { id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
-  { id: "camera", title: "镜头实验室", text: "角度、焦段和机位控制", icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
+  { id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
-  { id: "upscale", title: "分辨率提升", text: "图片与视频高清超分", icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
+  { id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
-  { id: "watermarkRemoval", title: "去水印", text: "AI 智能去除图片水印和文字", icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
+  { id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
-  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，添加可拖拽编辑的对话框", icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
+  { id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
-  { id: "subtitleRemoval", title: "字幕去除", text: "AI 智能擦除视频字幕", icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
+  { id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
-  { id: "digitalHuman", title: "数字人", text: "参考人像与音频生成口播视频", icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
+  { id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
-  { id: "characterMix", title: "角色迁移", text: "人物图迁移到参考视频动作", icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
+  { id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
-  { id: "avatarConsole", title: "数字人控制台", text: "形象、播报、互动与接入配置", icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
+  { id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
 ];
 
 interface FeaturedTool {
   id: string;
   title: string;
   desc: string;
+  kicker: string;
+  steps: string[];
+  outcome: string;
   icon: ReactNode;
   imageTool?: WebImageWorkbenchTool;
   target?: WebViewKey;
@@ -65,7 +121,10 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "workbench",
     title: "图片工作台",
-    desc: "融合、修复、局部增强 — 一站式图片创作",
+    desc: "从一张素材开始，完成精修、合成和二次创作。",
+    kicker: "图片精修工作流",
+    steps: ["上传素材", "局部修复", "高清导出"],
+    outcome: "适合商品图、海报图和创意视觉",
     icon: <EditOutlined />,
     imageTool: "workbench",
     category: "image",
@@ -74,7 +133,10 @@ const featuredTools: FeaturedTool[] = [
   {
     id: "digitalHuman",
     title: "数字人",
-    desc: "参考人像与音频，一键生成口播视频",
+    desc: "用参考人像和音频，快速生成可交付口播视频。",
+    kicker: "口播视频工作流",
+    steps: ["选择人像", "上传音频", "生成视频"],
+    outcome: "适合品牌讲解、课程和带货短视频",
     icon: <CustomerServiceOutlined />,
     target: "digitalHuman",
     category: "video",
@@ -136,6 +198,18 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     }
   }, [onOpenImageTool, onSelectView]);
 
+  const openFeaturedTool = useCallback((tool: FeaturedTool) => {
+    pushRecentToolId(tool.id);
+    setRecentIds(getRecentToolIds());
+    if (tool.imageTool && onOpenImageTool) {
+      onOpenImageTool(tool.imageTool);
+      return;
+    }
+    if (tool.target && onSelectView) {
+      onSelectView(tool.target);
+    }
+  }, [onOpenImageTool, onSelectView]);
+
   const filteredTools = tools.filter((t) => {
     if (t.featured) return false;
     if (filter === "all") return true;
@@ -143,6 +217,13 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return t.category === filter;
   });
 
+  const filterCounts: Record<FilterKey, number> = {
+    all: tools.filter((t) => !t.featured).length,
+    image: tools.filter((t) => !t.featured && t.category === "image").length,
+    video: tools.filter((t) => !t.featured && t.category === "video").length,
+    upcoming: tools.filter((t) => !t.featured && !t.ready).length,
+  };
+
   const recentTools = recentIds
     .map((id) => tools.find((t) => t.id === id))
     .filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
@@ -153,19 +234,31 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
     return acc;
   }, {} as Record<ToolCategory, MoreTool[]>);
 
+  const activeFilterLabel = filters.find((item) => item.key === filter)?.label ?? "全部";
+  const hasGroupedTools = (["image", "video"] as ToolCategory[]).some((cat) => groupedTools[cat]?.length);
+
   return (
     <div className="more-page-v2">
       <header className="more-page-v2__header">
-        <h1>工具盒</h1>
+        <div className="more-page-v2__title-group">
-        <nav className="more-page-v2__filters">
+          <span className="more-page-v2__eyebrow">AI Tool Hub</span>
+          <h1>工具盒</h1>
+        </div>
+        <div className="more-page-v2__header-meta" aria-label="工具盒概览">
+          <span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
+          <span>{featuredTools.length} 个核心入口</span>
+        </div>
+        <nav className="more-page-v2__filters" aria-label="工具分类筛选">
           {filters.map((f) => (
             <button
               key={f.key}
               type="button"
               className={filter === f.key ? "is-active" : ""}
+              aria-pressed={filter === f.key}
               onClick={() => setFilter(f.key)}
             >
-              {f.label}
+              <span>{f.label}</span>
+              <em>{filterCounts[f.key]}</em>
             </button>
           ))}
         </nav>
@@ -176,6 +269,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           <section className="more-page-v2__section">
             <h2 className="more-page-v2__section-title">
               <ClockCircleOutlined /> 最近使用
+              <span>继续使用</span>
             </h2>
             <div className="more-page-v2__recent-row">
               {recentTools.map((tool) => (
@@ -183,10 +277,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--recent"
+                  aria-label={`打开最近使用工具：${tool.title}`}
                   onClick={() => openTool(tool)}
                 >
                   <span className="more-card__icon">{tool.icon}</span>
-                  <strong>{tool.title}</strong>
+                  <span className="more-card__recent-body">
+                    <strong>{tool.title}</strong>
+                    <small>{categoryLabels[tool.category]}</small>
+                  </span>
                 </button>
               ))}
             </div>
@@ -204,23 +302,22 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className="more-card more-card--featured"
-                  style={{ "--card-gradient": tool.gradient } as React.CSSProperties}
+                  style={{ "--card-gradient": tool.gradient } as CSSProperties}
-                  onClick={() => {
+                  aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
-                    pushRecentToolId(tool.id);
+                  onClick={() => openFeaturedTool(tool)}
-                    setRecentIds(getRecentToolIds());
-                    if (tool.imageTool && onOpenImageTool) {
-                      onOpenImageTool(tool.imageTool);
-                      return;
-                    }
-                    if (tool.target && onSelectView) {
-                      onSelectView(tool.target);
-                    }
-                  }}
                 >
                   <span className="more-card__featured-icon">{tool.icon}</span>
                   <div className="more-card__featured-body">
+                    <span className="more-card__featured-kicker">{tool.kicker}</span>
                     <strong>{tool.title}</strong>
-                    <span>{tool.desc}</span>
+                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
+                    <span className="more-card__featured-desc">{tool.desc}</span>
+                    <span className="more-card__steps" aria-hidden="true">
+                      {tool.steps.map((step) => (
+                        <span key={step}>{step}</span>
+                      ))}
+                    </span>
+                    <span className="more-card__outcome">{tool.outcome}</span>
                     <span className="more-card__cta">开始使用 →</span>
                   </div>
                 </button>
@@ -229,13 +326,14 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
           </section>
         )}
 
-        {(["image", "video", "template"] as ToolCategory[]).map((cat) => {
+        {(["image", "video"] as ToolCategory[]).map((cat) => {
           const group = groupedTools[cat];
           if (!group || group.length === 0) return null;
           return (
             <section key={cat} className="more-page-v2__section">
               <h2 className="more-page-v2__section-title">
                 {categoryIcons[cat]} {categoryLabels[cat]}
+                <span>{group.length}</span>
               </h2>
               <div className="more-page-v2__grid">
                 {group.map((tool) => (
@@ -243,12 +341,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                     key={tool.id}
                     type="button"
                     className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
+                    aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
                     onClick={() => openTool(tool)}
                     disabled={!tool.ready}
                   >
                     <span className="more-card__icon">{tool.icon}</span>
+                    <span className="more-card__topline">
+                      {tool.tags.slice(0, 2).map((tag) => (
+                        <span key={tag}>{tag}</span>
+                      ))}
+                    </span>
                     <strong>{tool.title}</strong>
+                    <ToolComparePanel scene={toolCompareScenes[tool.id]} />
                     <span className="more-card__desc">{tool.text}</span>
+                    <span className="more-card__use-case">{tool.useCase}</span>
+                    <span className="more-card__action">打开工具 →</span>
                     {tool.badge && <span className="more-card__badge">{tool.badge}</span>}
                   </button>
                 ))}
@@ -256,6 +363,21 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
             </section>
           );
         })}
+
+        {!hasGroupedTools && (
+          <section className="more-page-v2__section">
+            <div className="more-page-v2__empty">
+              <span className="more-page-v2__empty-icon">
+                <ClockCircleOutlined />
+              </span>
+              <strong>{activeFilterLabel}工具正在整理中</strong>
+              <p>当前分类暂无可展示入口，后续能力上线后会在这里集中呈现。</p>
+              <button type="button" className="more-page-v2__empty-action" onClick={() => setFilter("all")}>
+                查看全部可用工具
+              </button>
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );

src/features/profile/ProfilePage.tsx

@@ -4,6 +4,7 @@ import {
   CheckCircleFilled,
   CloseOutlined,
   DeleteOutlined,
+  DownloadOutlined,
   EditOutlined,
   FileImageOutlined,
   FolderOpenOutlined,
@@ -17,7 +18,8 @@ import {
   ShareAltOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import { useEffect, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
+import { createPortal } from "react-dom";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient } from "../../api/assetClient";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
@@ -26,6 +28,7 @@ import { isServerRequestError } from "../../api/serverConnection";
 import { ossAssets } from "../../data/ossAssets";
 import type { WebAuthMode, WebGenerationPreviewTask, WebProjectSummary, WebUsageSummary, WebUserSession } from "../../types";
 import type { SavedAssetItem } from "../assets/localAssetStore";
+import { downloadResultAsset } from "../workbench/workbenchDownload";
 
 interface ProfilePageProps {
   session: WebUserSession | null;
@@ -41,11 +44,16 @@ interface ProfilePageProps {
   onOpenWorkbench: () => void;
   onOpenCommunity: () => void;
   onDeleteProject?: (project: WebProjectSummary) => void;
+  onOpenProject?: (project: WebProjectSummary) => void;
+  onRemoveWork?: (task: WebGenerationPreviewTask) => void;
 }
 
 type AuthTab = "password" | "email" | "phone";
 type ProfilePanel = "works" | "projects" | "assets" | "community";
 type AccountPanel = "credits" | "tasks";
+type ProfileDetailSelection =
+  | { kind: "work"; item: WebGenerationPreviewTask }
+  | { kind: "asset"; item: SavedAssetItem };
 
 const PROFILE_LOCAL_STORAGE_PREFIX = "omniai-web-profile-ui";
 const AUTH_LOGO_URL = ossAssets.brand.logo;
@@ -210,6 +218,8 @@ function ProfilePage({
   onOpenWorkbench,
   onOpenCommunity,
   onDeleteProject,
+  onOpenProject,
+  onRemoveWork,
 }: ProfilePageProps) {
   const isLoggedIn = Boolean(session);
   const userId = session?.user.id;
@@ -253,6 +263,10 @@ function ProfilePage({
   const [bioEditBackup, setBioEditBackup] = useState("");
   const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
+  const [detailSelection, setDetailSelection] = useState<ProfileDetailSelection | null>(null);
+  const [detailNotice, setDetailNotice] = useState<string | null>(null);
+  const [isDeletingDetail, setIsDeletingDetail] = useState(false);
+  const [isDownloadingDetail, setIsDownloadingDetail] = useState(false);
 
   const completedTasks = tasks.filter((task) => task.status === "completed");
   const visibleWorks = completedTasks.length ? completedTasks : tasks.slice(0, 6);
@@ -635,6 +649,213 @@ function ProfilePage({
     setBioStatusNotice(null);
   };
 
+  const handleInteractiveCardKeyDown = (event: KeyboardEvent<HTMLElement>, action: () => void) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    action();
+  };
+
+  const openDetailSelection = (selection: ProfileDetailSelection) => {
+    setDetailNotice(null);
+    setIsDeletingDetail(false);
+    setIsDownloadingDetail(false);
+    setDetailSelection(selection);
+  };
+
+  const closeDetailSelection = () => {
+    if (isDeletingDetail || isDownloadingDetail) return;
+    setDetailSelection(null);
+    setDetailNotice(null);
+  };
+
+  useEffect(() => {
+    if (!detailSelection) return undefined;
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") closeDetailSelection();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [detailSelection, isDeletingDetail, isDownloadingDetail]);
+
+  useEffect(() => {
+    if (!detailSelection || typeof document === "undefined") return undefined;
+
+    const { body, documentElement } = document;
+    const previousBodyOverflow = body.style.overflow;
+    const previousRootOverscroll = documentElement.style.overscrollBehavior;
+
+    body.style.overflow = "hidden";
+    documentElement.style.overscrollBehavior = "contain";
+
+    return () => {
+      body.style.overflow = previousBodyOverflow;
+      documentElement.style.overscrollBehavior = previousRootOverscroll;
+    };
+  }, [detailSelection]);
+
+  const handleDownloadSelectedDetail = async () => {
+    if (!detailSelection || isDownloadingDetail) return;
+
+    const isWork = detailSelection.kind === "work";
+    const item = detailSelection.item;
+    const url = isWork ? item.outputUrl : item.imageUrl || item.url || "";
+    if (!url) {
+      setDetailNotice("暂无可下载的媒体文件");
+      return;
+    }
+
+    const isVideo = isWork ? item.type === "video" : item.type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url);
+    const taskId = isWork ? item.id : item.sourceTaskId || undefined;
+    const name = isWork ? item.title : item.name;
+
+    setIsDownloadingDetail(true);
+    setDetailNotice("正在准备下载...");
+    try {
+      const status = await downloadResultAsset(url, name, isVideo, taskId);
+      setDetailNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") {
+        setDetailNotice("已取消下载");
+      } else {
+        setDetailNotice(error instanceof Error ? error.message : "下载失败，请稍后重试");
+      }
+    } finally {
+      setIsDownloadingDetail(false);
+    }
+  };
+
+  const handleDeleteSelectedDetail = async () => {
+    if (!detailSelection || isDeletingDetail) return;
+
+    if (detailSelection.kind === "work") {
+      onRemoveWork?.(detailSelection.item);
+      setDetailNotice("已从当前代表作列表移除");
+      setDetailSelection(null);
+      return;
+    }
+
+    setIsDeletingDetail(true);
+    setDetailNotice(null);
+    try {
+      await assetClient.delete(detailSelection.item.id, { cleanupUserData: true });
+      setSavedAssets((current) => current.filter((asset) => asset.id !== detailSelection.item.id));
+      setDetailSelection(null);
+      setAssetNotice(`已删除 ${detailSelection.item.name}`);
+    } catch (error) {
+      setDetailNotice(formatProfileLoadError(error, "资产删除失败"));
+    } finally {
+      setIsDeletingDetail(false);
+    }
+  };
+
+  const renderDetailMedia = (url: string | null | undefined, type: "image" | "video" | "asset") => {
+    const mediaUrl = typeof url === "string" ? url.trim() : "";
+    const isVideoPreview = type === "video" || /\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(mediaUrl);
+
+    if (!mediaUrl) {
+      return (
+        <div className="profile-page__detail-placeholder">
+          {type === "video" ? <PlayCircleOutlined /> : <FileImageOutlined />}
+          <span>暂无可预览内容</span>
+        </div>
+      );
+    }
+
+    return isVideoPreview ? (
+      <video className="profile-page__detail-media" src={mediaUrl} controls playsInline />
+    ) : (
+      <img className="profile-page__detail-media" src={mediaUrl} alt="" />
+    );
+  };
+
+  const renderDetailModal = () => {
+    if (!detailSelection) return null;
+    const modalTarget = typeof document === "undefined" ? null : document.querySelector(".web-shell") || document.body;
+    if (!modalTarget) return null;
+
+    const isWork = detailSelection.kind === "work";
+    const title = isWork ? detailSelection.item.title : detailSelection.item.name;
+    const description = isWork ? detailSelection.item.prompt : detailSelection.item.description;
+    const mediaUrl = isWork ? detailSelection.item.outputUrl : detailSelection.item.imageUrl || detailSelection.item.url;
+    const mediaType = isWork
+      ? detailSelection.item.type === "video" ? "video" : "image"
+      : detailSelection.item.type === "video" ? "video" : "asset";
+
+    return createPortal(
+      <div className="profile-page__detail-overlay" role="dialog" aria-modal="true" aria-labelledby="profile-detail-title">
+        <button type="button" className="profile-page__detail-backdrop" aria-label="关闭详情" onClick={closeDetailSelection} />
+        <section className="profile-page__detail-panel">
+          <header className="profile-page__detail-head">
+            <div>
+              <span className="profile-page__detail-eyebrow">{isWork ? "代表作详情" : "资产详情"}</span>
+              <h2 id="profile-detail-title">{title}</h2>
+            </div>
+            <button type="button" className="profile-page__detail-close" aria-label="关闭详情" onClick={closeDetailSelection}>
+              <CloseOutlined />
+            </button>
+          </header>
+
+          <div className="profile-page__detail-body">
+            <div className="profile-page__detail-preview">
+              {renderDetailMedia(mediaUrl, mediaType)}
+            </div>
+            <div className="profile-page__detail-info">
+              <p>{description || "暂无描述"}</p>
+              <dl>
+                <div>
+                  <dt>{isWork ? "类型" : "资产类型"}</dt>
+                  <dd>{isWork ? formatTaskType(detailSelection.item.type) : formatAssetType(detailSelection.item.type)}</dd>
+                </div>
+                <div>
+                  <dt>状态</dt>
+                  <dd>{isWork ? formatTaskStatus(detailSelection.item.status) : formatAssetStatus(detailSelection.item.status)}</dd>
+                </div>
+                <div>
+                  <dt>{isWork ? "创建时间" : "更新时间"}</dt>
+                  <dd>{formatProfileDate(isWork ? detailSelection.item.createdAt : detailSelection.item.updatedAt)}</dd>
+                </div>
+                {!isWork ? (
+                  <div>
+                    <dt>标签</dt>
+                    <dd>{detailSelection.item.tags?.length ? detailSelection.item.tags.join(" / ") : "服务器素材"}</dd>
+                  </div>
+                ) : null}
+              </dl>
+              {detailNotice ? <span className="profile-page__detail-notice">{detailNotice}</span> : null}
+            </div>
+          </div>
+
+          <footer className="profile-page__detail-actions">
+            <button
+              type="button"
+              className="profile-page__detail-action profile-page__detail-action--primary"
+              onClick={() => void handleDownloadSelectedDetail()}
+              disabled={isDownloadingDetail}
+            >
+              <DownloadOutlined />
+              {isDownloadingDetail ? "下载中..." : "下载"}
+            </button>
+            <button type="button" className="profile-page__detail-action profile-page__detail-action--secondary" onClick={onOpenWorkbench}>
+              <EditOutlined />
+              {isWork ? "继续编辑" : "使用素材"}
+            </button>
+            <button
+              type="button"
+              className="profile-page__detail-action profile-page__detail-action--danger"
+              onClick={() => void handleDeleteSelectedDetail()}
+              disabled={isDeletingDetail}
+            >
+              <DeleteOutlined />
+              {isDeletingDetail ? "删除中..." : isWork ? "移除代表作" : "删除资产"}
+            </button>
+          </footer>
+        </section>
+      </div>,
+      modalTarget,
+    );
+  };
+
   const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
     <div className="profile-page__empty-state">
       <span className="profile-page__empty-mark" aria-hidden="true">
@@ -680,7 +901,15 @@ function ProfilePage({
         <div className="profile-page__works-scroll">
           <div className="profile-page__list-grid motion-stagger">
             {visibleWorks.map((task) => (
-              <article key={task.id} className="profile-page__list-card profile-page__media-card">
+              <article
+                key={task.id}
+                className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+                role="button"
+                tabIndex={0}
+                aria-label={`查看代表作 ${task.title}`}
+                onClick={() => openDetailSelection({ kind: "work", item: task })}
+                onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "work", item: task }))}
+              >
                 {renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
                 <div className="profile-page__list-card-body">
                   <div className="profile-page__list-card-head">
@@ -705,7 +934,17 @@ function ProfilePage({
       return projects.length ? (
         <div className="profile-page__list-grid motion-stagger">
           {projects.map((project) => (
-            <article key={project.id} className="profile-page__list-card profile-page__media-card">
+            <article
+              key={project.id}
+              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+              role="button"
+              tabIndex={0}
+              aria-label={`打开项目 ${project.name}`}
+              onClick={() => (onOpenProject ? onOpenProject(project) : onOpenWorkbench())}
+              onKeyDown={(event) =>
+                handleInteractiveCardKeyDown(event, () => (onOpenProject ? onOpenProject(project) : onOpenWorkbench()))
+              }
+            >
               {renderCardPreview(project.thumbnailUrl, "project", "项目")}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -715,7 +954,10 @@ function ProfilePage({
                       type="button"
                       className="profile-page__delete-project"
                       aria-label={`删除项目 ${project.name}`}
-                      onClick={() => onDeleteProject(project)}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        onDeleteProject(project);
+                      }}
                     >
                       <DeleteOutlined />
                     </button>
@@ -739,7 +981,15 @@ function ProfilePage({
       return savedAssets.length ? (
         <div className="profile-page__list-grid">
           {savedAssets.map((asset) => (
-            <article key={asset.id} className="profile-page__list-card profile-page__media-card">
+            <article
+              key={asset.id}
+              className="profile-page__list-card profile-page__media-card profile-page__interactive-card"
+              role="button"
+              tabIndex={0}
+              aria-label={`查看资产 ${asset.name}`}
+              onClick={() => openDetailSelection({ kind: "asset", item: asset })}
+              onKeyDown={(event) => handleInteractiveCardKeyDown(event, () => openDetailSelection({ kind: "asset", item: asset }))}
+            >
               {renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
               <div className="profile-page__list-card-body">
                 <div className="profile-page__list-card-head">
@@ -959,6 +1209,7 @@ function ProfilePage({
             </div>
           </main>
         </div>
+        {renderDetailModal()}
       </section>
     );
   }

src/styles/pages/profile.css

@@ -22,3 +22,431 @@
   overflow: visible;
   scrollbar-width: auto;
 }
+
+.profile-page__interactive-card {
+  cursor: pointer;
+  user-select: none;
+}
+
+.profile-page__interactive-card:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
+  outline-offset: 3px;
+}
+
+.profile-page__detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  display: grid;
+  place-items: center;
+  padding: clamp(18px, 3vw, 32px);
+  isolation: isolate;
+  overscroll-behavior: contain;
+}
+
+.profile-page__detail-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgba(0, 0, 0, 0.62);
+  cursor: pointer;
+}
+
+.profile-page__detail-panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 16px;
+  width: min(1080px, calc(100vw - 48px));
+  max-height: min(820px, calc(100dvh - 48px));
+  overflow: hidden;
+  padding: clamp(16px, 2vw, 22px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+    color-mix(in srgb, var(--bg-panel) 94%, #000);
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
+}
+
+.profile-page__detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  min-width: 0;
+  padding-bottom: 2px;
+}
+
+.profile-page__detail-head h2 {
+  max-width: 760px;
+  margin: 5px 0 0;
+  color: var(--text);
+  font-size: clamp(18px, 2vw, 25px);
+  line-height: 1.25;
+}
+
+.profile-page__detail-eyebrow {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.profile-page__detail-close {
+  display: inline-grid;
+  flex: 0 0 38px;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.profile-page__detail-close:hover,
+.profile-page__detail-close:focus-visible {
+  border-color: rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.075);
+  color: var(--text);
+  outline: none;
+}
+
+.profile-page__detail-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.78fr);
+  gap: 18px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.profile-page__detail-preview {
+  display: grid;
+  place-items: center;
+  align-self: stretch;
+  min-height: min(500px, 54dvh);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 58%),
+    rgba(255, 255, 255, 0.024);
+}
+
+.profile-page__detail-media {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: min(640px, 56dvh);
+  object-fit: contain;
+}
+
+video.profile-page__detail-media {
+  height: 100%;
+  min-height: 320px;
+  background: #050607;
+}
+
+.profile-page__detail-placeholder {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.profile-page__detail-placeholder .anticon {
+  display: grid;
+  place-items: center;
+  width: 50px;
+  height: 50px;
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+  border-radius: 16px;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 20px;
+}
+
+.profile-page__detail-info {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+.profile-page__detail-info p {
+  margin: 0;
+  max-height: min(230px, 28dvh);
+  overflow: auto;
+  padding: 13px 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+  scrollbar-gutter: stable;
+}
+
+.profile-page__detail-info dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.profile-page__detail-info dl div {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.profile-page__detail-info dt {
+  color: var(--text-soft);
+  font-size: 11px;
+  font-weight: 760;
+}
+
+.profile-page__detail-info dd {
+  margin: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.profile-page__detail-notice {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  padding: 7px 10px;
+  border: 1px solid rgba(243, 170, 38, 0.28);
+  border-radius: 999px;
+  background: rgba(243, 170, 38, 0.08);
+  color: var(--warning);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.profile-page__detail-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  justify-content: stretch;
+  gap: 10px;
+  min-width: 0;
+  padding-top: 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.profile-page__detail-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 40px;
+  padding: 0 16px;
+  border: 1px solid rgba(var(--accent-rgb), 0.36);
+  border-radius: 12px;
+  background: rgba(var(--accent-rgb), 0.11);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.profile-page__detail-action--primary {
+  justify-self: start;
+  min-width: 132px;
+}
+
+.profile-page__detail-action--secondary,
+.profile-page__detail-action--danger {
+  min-width: 118px;
+}
+
+.profile-page__detail-action:hover,
+.profile-page__detail-action:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.54);
+  background: rgba(var(--accent-rgb), 0.16);
+  outline: none;
+}
+
+.profile-page__detail-action--danger {
+  border-color: rgba(255, 90, 95, 0.24);
+  background: rgba(255, 90, 95, 0.08);
+  color: #ffadb0;
+}
+
+.profile-page__detail-action--danger:hover,
+.profile-page__detail-action--danger:focus-visible {
+  border-color: rgba(255, 90, 95, 0.42);
+  background: rgba(255, 90, 95, 0.13);
+}
+
+.profile-page__detail-action:disabled {
+  cursor: wait;
+  opacity: 0.62;
+}
+
+@media (max-width: 760px) {
+  .profile-page__detail-overlay {
+    align-items: end;
+    padding: 10px 10px 0;
+  }
+
+  .profile-page__detail-panel {
+    width: 100%;
+    max-height: calc(100dvh - 10px);
+    padding: 16px;
+    border-radius: 18px 18px 0 0;
+  }
+
+  .profile-page__detail-body {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    overflow: auto;
+    padding-right: 0;
+  }
+
+  .profile-page__detail-preview {
+    align-items: start;
+    min-height: 260px;
+    max-height: 42dvh;
+    overflow: auto;
+  }
+
+  .profile-page__detail-media {
+    width: 100%;
+    height: auto;
+    max-height: none;
+  }
+
+  video.profile-page__detail-media {
+    align-self: center;
+    height: auto;
+    min-height: 220px;
+    max-height: 42dvh;
+  }
+
+  .profile-page__detail-info {
+    overflow: auto;
+    padding-right: 0;
+  }
+
+  .profile-page__detail-info p {
+    min-height: 96px;
+    max-height: 30dvh;
+  }
+
+  .profile-page__detail-info dl {
+    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+    gap: 8px;
+  }
+
+  .profile-page__detail-info dl div {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    min-height: 40px;
+    padding: 8px 10px;
+  }
+
+  .profile-page__detail-info dt {
+    display: none;
+  }
+
+  .profile-page__detail-info dd {
+    min-width: 0;
+    color: var(--text);
+    font-weight: 800;
+    text-align: left;
+  }
+
+  .profile-page__detail-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .profile-page__detail-action--primary {
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  }
+
+  .profile-page__detail-action--secondary,
+  .profile-page__detail-action--danger {
+    min-width: 0;
+  }
+}
+
+@media (max-width: 420px) {
+  .profile-page__detail-overlay {
+    padding: 0;
+  }
+
+  .profile-page__detail-panel {
+    max-height: 94dvh;
+    padding: 14px;
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: 18px 18px 0 0;
+  }
+
+  .profile-page__detail-head {
+    gap: 12px;
+  }
+
+  .profile-page__detail-head h2 {
+    font-size: 18px;
+  }
+
+  .profile-page__detail-close {
+    flex-basis: 36px;
+    width: 36px;
+    height: 36px;
+  }
+
+  .profile-page__detail-info dl {
+    gap: 8px;
+  }
+
+  .profile-page__detail-info p {
+    min-height: 108px;
+  }
+
+  .profile-page__detail-preview {
+    min-height: 240px;
+    max-height: 40dvh;
+  }
+
+  .profile-page__detail-info dl {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .profile-page__detail-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-page__detail-action--primary {
+    grid-column: auto;
+  }
+
+  .profile-page__detail-action {
+    min-height: 42px;
+  }
+}

src/styles/themes/dark-green.css

@@ -8516,6 +8516,789 @@
   overflow-y: hidden;
 }
 
+/* Personal center design-taste pass: keep the black-green product language, but unify spacing, surfaces, and responsive behavior. */
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
+  --profile-page: #08090b;
+  --profile-panel: #121416;
+  --profile-panel-soft: #16191b;
+  --profile-control: #181b1e;
+  --profile-control-strong: #1d2124;
+  --profile-border: rgba(255, 255, 255, 0.085);
+  --profile-border-strong: rgba(255, 255, 255, 0.15);
+  --profile-text: #f4f7f5;
+  --profile-muted: rgba(225, 235, 231, 0.64);
+  --profile-soft: rgba(225, 235, 231, 0.42);
+  --profile-accent: #00ff88;
+  --profile-accent-soft: rgba(0, 255, 136, 0.12);
+  --profile-accent-border: rgba(0, 255, 136, 0.34);
+  --profile-radius-lg: 18px;
+  --profile-radius-md: 14px;
+  --profile-radius-sm: 10px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 260px),
+    var(--profile-page);
+  color: var(--profile-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
+  height: clamp(148px, 18vw, 210px);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
+    var(--profile-panel);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
+  background:
+    linear-gradient(180deg, rgba(8, 9, 11, 0.24) 0%, rgba(8, 9, 11, 0.7) 68%, var(--profile-page) 100%),
+    linear-gradient(90deg, rgba(8, 9, 11, 0.76), rgba(8, 9, 11, 0.28) 48%, rgba(8, 9, 11, 0.68));
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
+  grid-template-columns: minmax(272px, 304px) minmax(0, 1fr);
+  gap: clamp(18px, 2.2vw, 28px);
+  width: min(1220px, calc(100% - 48px));
+  margin-top: -54px;
+  padding-bottom: clamp(44px, 5vw, 72px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard :is(
+  .profile-page__sidebar,
+  .profile-page__account-card,
+  .profile-page__main-tabs,
+  .profile-page__section,
+  .profile-page__list-card,
+  .profile-page__review-item,
+  .profile-page__empty-state
+) {
+  border: 1px solid var(--profile-border);
+  border-radius: var(--profile-radius-lg);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)),
+    var(--profile-panel);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
+  gap: 16px;
+  padding: clamp(16px, 1.8vw, 22px);
+}
+
+@media (min-width: 1024px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
+    position: sticky;
+    top: 18px;
+    align-self: start;
+  }
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
+  gap: 10px;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring {
+  width: 90px;
+  height: 90px;
+  padding: 3px;
+  border-color: var(--profile-accent-border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
+    var(--profile-accent-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
+  width: 82px;
+  height: 82px;
+  border-color: rgba(5, 8, 13, 0.94);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
+  color: var(--profile-text);
+  font-size: clamp(19px, 1.5vw, 22px);
+  line-height: 1.2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display {
+  width: min(268px, 100%);
+  min-height: 38px;
+  border-color: var(--profile-border);
+  background: rgba(255, 255, 255, 0.035);
+  color: var(--profile-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display:focus-visible {
+  border-color: var(--profile-accent-border);
+  background: var(--profile-accent-soft);
+  color: var(--profile-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
+  min-width: 0;
+  padding: 12px 8px;
+  border: 1px solid var(--profile-border);
+  border-radius: var(--profile-radius-sm);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
+    var(--profile-control);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count strong {
+  color: var(--profile-text);
+  font-size: 20px;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count span {
+  color: var(--profile-muted);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
+  gap: 12px;
+  padding: 12px;
+  border-radius: var(--profile-radius-md);
+  background:
+    radial-gradient(circle at 14% 0%, rgba(0, 255, 136, 0.11), transparent 32%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016)),
+    rgba(10, 14, 13, 0.72);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
+  gap: 5px;
+  padding: 5px;
+  border: 1px solid var(--profile-border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.026);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
+  min-height: 44px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active {
+  border-color: var(--profile-accent-border);
+  background: var(--profile-accent-soft);
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding: 12px;
+  border-color: var(--profile-border);
+  border-radius: 13px;
+  background:
+    linear-gradient(135deg, rgba(0, 255, 136, 0.06), transparent 60%),
+    rgba(255, 255, 255, 0.026);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary small,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary em {
+  color: var(--profile-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary strong {
+  color: var(--profile-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric strong {
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
+  display: grid;
+  gap: 9px;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
+  min-height: 42px;
+  border-color: var(--profile-border);
+  border-radius: var(--profile-radius-sm);
+  background: var(--profile-control);
+  color: var(--profile-muted);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:focus-visible {
+  border-color: var(--profile-border-strong);
+  background: var(--profile-control-strong);
+  color: var(--profile-text);
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary {
+  border-color: rgba(0, 255, 136, 0.74);
+  background:
+    linear-gradient(180deg, rgba(88, 255, 172, 0.98), rgba(0, 216, 116, 0.92));
+  color: #061014;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn.profile-page__share-btn--primary:focus-visible {
+  border-color: #35ffa2;
+  background:
+    linear-gradient(180deg, rgba(115, 255, 187, 1), rgba(0, 216, 116, 0.96));
+  color: #061014;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--plan {
+  min-height: 34px;
+  border-color: var(--profile-accent-border);
+  border-style: dashed;
+  background: var(--profile-accent-soft);
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--danger {
+  border-color: rgba(255, 90, 95, 0.18);
+  background: rgba(255, 90, 95, 0.045);
+  color: rgba(255, 165, 168, 0.84);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main {
+  gap: 16px;
+  min-width: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  min-height: 52px;
+  margin: 0;
+  padding: 6px;
+  border-radius: var(--profile-radius-lg);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
+  min-width: 0;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--profile-muted);
+  font-weight: 760;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: clamp(14px, 1.8vw, 20px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-head {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "title meta"
+    "desc meta";
+  row-gap: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
+  color: var(--profile-text);
+  font-size: 16px;
+  font-weight: 820;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-desc {
+  color: var(--profile-muted);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-meta {
+  border-color: var(--profile-accent-border);
+  background: var(--profile-accent-soft);
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid {
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
+  border-radius: var(--profile-radius-md);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent),
+    rgba(255, 255, 255, 0.018);
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__interactive-card:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__interactive-card:focus-visible {
+  border-color: rgba(0, 255, 136, 0.28);
+  background:
+    linear-gradient(180deg, rgba(0, 255, 136, 0.046), transparent),
+    rgba(255, 255, 255, 0.024);
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
+  grid-template-columns: 94px minmax(0, 1fr);
+  height: auto;
+  min-height: 128px;
+  max-height: none;
+  padding: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
+  width: 94px;
+  height: 98px;
+  min-height: 98px;
+  max-height: 98px;
+  border-color: var(--profile-border);
+  border-radius: 12px;
+  background:
+    linear-gradient(135deg, rgba(0, 255, 136, 0.06), transparent 64%),
+    var(--profile-control);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
+  height: 98px;
+  min-height: 98px;
+  max-height: 98px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
+  border-color: rgba(0, 255, 136, 0.24);
+  background: rgba(5, 10, 8, 0.78);
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 7px;
+  height: 98px;
+  min-height: 98px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
+  min-height: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
+  color: var(--profile-text);
+  font-size: 14px;
+  line-height: 1.28;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head span {
+  max-width: 76px;
+  overflow: hidden;
+  padding: 3px 7px;
+  border: 1px solid rgba(0, 255, 136, 0.22);
+  border-radius: 999px;
+  background: var(--profile-accent-soft);
+  color: var(--profile-accent);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
+  display: -webkit-box;
+  min-height: 0;
+  max-height: none;
+  overflow: hidden;
+  color: var(--profile-muted);
+  line-height: 1.45;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
+  min-height: 0;
+  color: var(--profile-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state {
+  min-height: 240px;
+  border-style: dashed;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent),
+    rgba(255, 255, 255, 0.014);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-mark,
+.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-btn {
+  border-color: var(--profile-accent-border);
+  background: var(--profile-accent-soft);
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-overlay {
+  --profile-page: #08090b;
+  --profile-panel: #121416;
+  --profile-control: #181b1e;
+  --profile-border: rgba(255, 255, 255, 0.085);
+  --profile-border-strong: rgba(255, 255, 255, 0.15);
+  --profile-text: #f4f7f5;
+  --profile-muted: rgba(225, 235, 231, 0.64);
+  --profile-accent: #00ff88;
+  --profile-accent-soft: rgba(0, 255, 136, 0.12);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-backdrop {
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(8px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-panel {
+  border-color: var(--profile-border-strong);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.014)),
+    var(--profile-panel);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-eyebrow,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action {
+  color: var(--profile-accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-head h2 {
+  color: var(--profile-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-preview,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info p,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dl div,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-close,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action {
+  border-color: var(--profile-border);
+  background: var(--profile-control);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-actions {
+  border-top-color: var(--profile-border);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
+    var(--profile-panel);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action--primary {
+  border-color: rgba(0, 255, 136, 0.62);
+  background:
+    linear-gradient(180deg, rgba(0, 255, 136, 0.18), rgba(0, 255, 136, 0.11)),
+    var(--profile-control);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-action--secondary {
+  color: var(--profile-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info p,
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dt {
+  color: var(--profile-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__detail-info dd {
+  color: var(--profile-text);
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
+    grid-template-columns: 1fr;
+    width: min(760px, calc(100% - 32px));
+    margin-top: -42px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.95fr);
+    align-items: start;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
+    grid-row: span 4;
+    align-items: flex-start;
+    text-align: left;
+  }
+}
+
+@media (max-width: 640px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
+    height: 138px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
+    width: min(100% - 22px, 560px);
+    gap: 14px;
+    margin-top: -28px;
+    padding-bottom: 84px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
+    display: flex;
+    gap: 12px;
+    padding: 14px;
+    border-radius: 16px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
+    align-items: center;
+    text-align: center;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring {
+    width: 82px;
+    height: 82px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
+    width: 76px;
+    height: 76px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary-metric {
+    justify-items: start;
+    padding-top: 10px;
+    padding-left: 0;
+    border-top: 1px solid var(--profile-border);
+    border-left: 0;
+    text-align: left;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
+    display: flex;
+    min-height: 48px;
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
+    flex: 0 0 auto;
+    min-width: 92px;
+    scroll-snap-align: start;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
+    padding: 13px;
+    border-radius: 16px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-head {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "title"
+      "desc"
+      "meta";
+    align-items: start;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-desc {
+    white-space: normal;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
+    grid-template-columns: 84px minmax(0, 1fr);
+    min-height: 112px;
+    padding: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
+    width: 84px;
+    height: 84px;
+    min-height: 84px;
+    max-height: 84px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
+    height: 84px;
+    min-height: 84px;
+    max-height: 84px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
+    height: 84px;
+    min-height: 84px;
+  }
+}
+
+@media (max-width: 380px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
+    width: min(100% - 16px, 380px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
+    padding: 9px 4px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
+    grid-template-columns: 74px minmax(0, 1fr);
+    gap: 9px;
+    padding: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
+    width: 74px;
+    height: 74px;
+    min-height: 74px;
+    max-height: 74px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
+    height: 74px;
+    min-height: 74px;
+    max-height: 74px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
+    gap: 5px;
+    height: 74px;
+    min-height: 74px;
+  }
+}
+
+/* Personal center mobile comfort pass: compact account controls and keep library navigation reachable. */
+@media (max-width: 640px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
+    background:
+      linear-gradient(180deg, rgba(0, 255, 136, 0.035), transparent 180px),
+      var(--profile-page);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
+    gap: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
+    gap: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
+    font-size: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display {
+    min-height: 34px;
+    padding: 7px 11px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
+    min-height: 58px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
+    gap: 9px;
+    padding: 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
+    min-height: 40px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn {
+    min-height: 40px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--plan,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--primary {
+    grid-column: 1 / -1;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
+    position: sticky;
+    top: 0;
+    z-index: 12;
+    margin-top: -1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-color: rgba(255, 255, 255, 0.11);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
+      rgba(18, 20, 22, 0.96);
+    box-shadow:
+      0 1px 0 rgba(0, 255, 136, 0.1) inset,
+      0 16px 34px rgba(0, 0, 0, 0.32);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
+    gap: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
+    font-size: 15px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
+    border-radius: 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
+    font-size: 13px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 420px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--plan,
+  .web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__actions .profile-page__share-btn--primary {
+    grid-column: auto;
+  }
+}
+
 /* Ecommerce generation page: keep its carousel and composer independent from
    the community carousel rules that share class names. */
 .web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {