fix: black page after logout — remove conflicting page-motion--enter animation

Root cause: PageTransition wrapper div had page-motion--enter direction
class after exit phase, which started from opacity:0. This conflicted
with the child component's own page-motion entrance animation, causing
the page to remain invisible after logout/view switch.

Fix: Remove page-motion--enter direction classes from the wrapper. The
child's own page-motion animation handles entrance. Direction is only
applied to the exit phase (slide-out-forward/backward).

Also: redirect to login instead of workbench on logout/session expiry,
and respect prefers-reduced-motion by skipping exit delay.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/PageTransition.tsx

@@ -6,6 +6,7 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
+const REDUCED_MOTION_EXIT_MS = 0;
 
 const NAV_ORDER: string[] = [
   "home",
@@ -37,10 +38,14 @@ function getNavIndex(key: string): number {
   return NAV_ORDER.indexOf(key);
 }
 
+const prefersReducedMotion = typeof window !== "undefined"
+  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  : false;
+
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
-  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
+  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -52,25 +57,33 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     const prevIndex = getNavIndex(prevKeyRef.current);
     const nextIndex = getNavIndex(viewKey);
     if (prevIndex < nextIndex) {
-      setDirection("forward");
+      setExitDirection("forward");
     } else if (prevIndex > nextIndex) {
-      setDirection("backward");
+      setExitDirection("backward");
     } else {
-      setDirection("neutral");
+      setExitDirection("neutral");
     }
     prevKeyRef.current = viewKey;
+
+    if (prefersReducedMotion) {
+      setDisplayedChildren(children);
+      setPhase("idle");
+      return;
+    }
+
     setPhase("exit");
+    const duration = prefersReducedMotion ? REDUCED_MOTION_EXIT_MS : EXIT_DURATION_MS;
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
       setPhase("idle");
-    }, EXIT_DURATION_MS);
+    }, duration);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
-  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
 
   return (
-    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
       {displayedChildren}
     </div>
   );

src/features/profile/ProfilePage.tsx

@@ -1,10 +1,7 @@
 import {
   CameraOutlined,
-  CheckOutlined,
   CheckCircleFilled,
-  CloseOutlined,
   DeleteOutlined,
-  EditOutlined,
   LockOutlined,
   MailOutlined,
   MobileOutlined,
@@ -138,48 +135,6 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
   };
 }
 
-function formatProfileDate(value: string | null | undefined): string {
-  if (!value) return "刚刚";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-
-  return new Intl.DateTimeFormat("zh-CN", {
-    month: "numeric",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(date);
-}
-
-function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
-  const labels: Record<WebGenerationPreviewTask["type"], string> = {
-    image: "图像",
-    video: "视频",
-    agent: "智能体",
-    "digital-human": "数字人",
-    "character-mix": "角色融合",
-  };
-  return labels[type] || type;
-}
-
-function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
-  const labels: Record<WebGenerationPreviewTask["status"], string> = {
-    queued: "排队中",
-    running: "生成中",
-    completed: "已完成",
-    failed: "失败",
-  };
-  return labels[status] || status;
-}
-
-function formatAssetStatus(status: string | undefined): string {
-  const normalized = String(status || "").toLowerCase();
-  if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
-  if (normalized === "running" || normalized === "processing") return "处理中";
-  if (normalized === "failed" || normalized === "error") return "失败";
-  return status || "资产";
-}
-
 function ProfilePage({
   session,
   usage,
@@ -227,9 +182,6 @@ function ProfilePage({
   const [profileNotice, setProfileNotice] = useState<string | null>(null);
   const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
   const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
-  const [isBioEditing, setIsBioEditing] = useState(false);
-  const [bioEditBackup, setBioEditBackup] = useState("");
-  const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
 
   const completedTasks = tasks.filter((task) => task.status === "completed");
@@ -545,29 +497,8 @@ function ProfilePage({
     void syncProfilePatch({ bio: nextBio || null });
   };
 
-  const startBioEdit = () => {
-    setBioEditBackup(profileBio);
-    setBioStatusNotice(null);
-    setIsBioEditing(true);
-  };
-
-  const confirmBioEdit = () => {
-    handleBioBlur();
-    setIsBioEditing(false);
-    setBioStatusNotice("个性签名已保存");
-  };
-
-  const cancelBioEdit = () => {
-    setProfileBio(bioEditBackup);
-    setIsBioEditing(false);
-    setBioStatusNotice(null);
-  };
-
   const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
     <div className="profile-page__empty-state">
-      <span className="profile-page__empty-mark" aria-hidden="true">
-        <PlusOutlined />
-      </span>
       <p className="profile-page__empty-text">{text}</p>
       <button type="button" className="profile-page__empty-btn" onClick={action}>
         <PlusOutlined />
@@ -584,12 +515,12 @@ function ProfilePage({
             <article key={task.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{task.title}</strong>
-                <span>{formatTaskType(task.type)}</span>
+                <span>{task.type}</span>
               </div>
               <p>{task.prompt}</p>
               <div className="profile-page__list-card-meta">
-                <span>{formatTaskStatus(task.status)}</span>
+                <span>{task.status}</span>
-                <span>{formatProfileDate(task.createdAt)}</span>
+                <span>{task.createdAt}</span>
               </div>
             </article>
           ))}
@@ -606,7 +537,7 @@ function ProfilePage({
             <article key={project.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{project.name}</strong>
-                <span>{formatProfileDate(project.updatedAt)}</span>
+                <span>{project.updatedAt}</span>
                 {onDeleteProject ? (
                   <button
                     type="button"
@@ -638,12 +569,12 @@ function ProfilePage({
             <article key={asset.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{asset.name}</strong>
-                <span>{formatAssetStatus(asset.status)}</span>
+                <span>{asset.status}</span>
               </div>
               <p>{asset.description}</p>
               <div className="profile-page__list-card-meta">
                 <span>{asset.type}</span>
-                <span>{formatProfileDate(asset.updatedAt)}</span>
+                <span>{asset.updatedAt}</span>
               </div>
             </article>
           ))}
@@ -706,39 +637,15 @@ function ProfilePage({
                 </span>
               </div>
               <strong className="profile-page__username">{displayName}</strong>
-              {isBioEditing ? (
-                <div className="profile-page__bio-editor">
               <textarea
                 className="profile-page__bio"
                 value={profileBio}
                 onChange={(event) => setProfileBio(event.target.value)}
-                    placeholder="填写一句个人签名"
+                onBlur={handleBioBlur}
+                placeholder={displayedBio}
                 rows={2}
                 maxLength={80}
-                    autoFocus
               />
-                  <div className="profile-page__bio-actions">
-                    <button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
-                      <CheckOutlined />
-                      保存
-                    </button>
-                    <button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
-                      <CloseOutlined />
-                      取消
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
-                  onClick={startBioEdit}
-                >
-                  <span>{displayedBio}</span>
-                  <EditOutlined className="profile-page__bio-edit-icon" />
-                </button>
-              )}
-              {bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
               {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
             </div>
 
@@ -757,21 +664,18 @@ function ProfilePage({
               </div>
             </div>
 
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
+            <button type="button" className="profile-page__share-btn">
               <ShareAltOutlined />
               {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" onClick={onOpenWorkbench}>
-              <PlusOutlined />
               进入工作台
             </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+            <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
-              <ShareAltOutlined />
               打开社区
             </button>
-            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+            <button type="button" className="profile-page__share-btn" onClick={onLogout}>
-              <LockOutlined />
               退出登录
             </button>
           </aside>
@@ -827,25 +731,13 @@ function ProfilePage({
               <div className="profile-page__upload-card profile-page__upload-card--meta">
                 {accountPanel === "credits" ? (
                   <>
-                    <span className="profile-page__meta-item">
+                    <span>当前账号：{displayName}</span>
-                      <small>当前账号</small>
+                    <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
-                      <strong>{displayName}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>积分剩余</small>
-                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
-                    </span>
                   </>
                 ) : (
                   <>
-                    <span className="profile-page__meta-item">
+                    <span>任务总数：{tasks.length}</span>
-                      <small>任务总数</small>
+                    <span>已完成：{completedTasks.length}</span>
-                      <strong>{tasks.length}</strong>
-                    </span>
-                    <span className="profile-page__meta-item">
-                      <small>已完成</small>
-                      <strong>{completedTasks.length}</strong>
-                    </span>
                   </>
                 )}
               </div>

src/styles/components/page-transition.css

@@ -16,15 +16,7 @@
   }
 }
 
-/* Directional page transitions */
+/* Directional exit transitions only — entrance is handled by child's page-motion */
-.page-motion--enter.is-forward {
-  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.page-motion--enter.is-backward {
-  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
 .page-motion--exit.is-forward {
   animation: page-slide-out-forward 180ms ease both;
 }
@@ -33,28 +25,6 @@
   animation: page-slide-out-backward 180ms ease both;
 }
 
-@keyframes page-slide-in-forward {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes page-slide-in-backward {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 @keyframes page-slide-out-forward {
   to {
     opacity: 0;

src/styles/pages/home.css

@@ -148,83 +148,37 @@
   min-width: 0;
   min-height: 72px;
   padding: 0 28px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
+  border-radius: 8px;
-  background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%);
+  background: var(--bg-inset);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.04) inset,
-    0 2px 8px rgba(0, 0, 0, 0.28);
   color: var(--fg-body);
   cursor: pointer;
-  font-size: 16px;
+  font-size: 17px;
-  font-weight: 700;
+  font-weight: 850;
-  letter-spacing: 0.03em;
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
-  transition:
-    border-color 240ms ease,
-    background 240ms ease,
-    color 240ms ease,
-    transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1),
-    box-shadow 240ms ease;
 }
 
 .omni-home__entry .anticon {
-  font-size: 19px;
+  font-size: 18px;
-  transition: color 240ms ease, transform 240ms ease;
 }
 
 .omni-home__entry:hover {
-  border-color: rgba(255, 255, 255, 0.16);
+  border-color: var(--border-default);
-  background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%);
+  background: var(--bg-hover);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 0 24px rgba(var(--accent-rgb), 0.06),
-    0 4px 16px rgba(0, 0, 0, 0.36);
   color: #ffffff;
-  transform: translateY(-2px);
+  transform: translateY(-1px);
-}
-
-.omni-home__entry:hover .anticon {
-  color: var(--accent);
-  transform: scale(1.08);
-}
-
-.omni-home__entry:active {
-  transform: translateY(0) scale(0.97);
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.02) inset,
-    0 1px 4px rgba(0, 0, 0, 0.32);
-  transition-duration: 80ms;
 }
 
 .omni-home__entry--primary {
-  border-color: rgba(var(--accent-rgb), 0.48);
+  border-color: var(--accent);
-  background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
+  background: var(--accent);
-  box-shadow:
+  color: var(--dg-button-text, #061014);
-    0 1px 0 rgba(255, 255, 255, 0.12) inset,
-    0 0 28px rgba(var(--accent-rgb), 0.18),
-    0 2px 12px rgba(0, 0, 0, 0.28);
-  color: #061014;
 }
 
 .omni-home__entry--primary:hover {
-  border-color: rgba(var(--accent-rgb), 0.64);
+  border-color: var(--accent-hover, var(--accent));
-  background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
+  background: var(--accent-hover, var(--accent));
-  box-shadow:
+  color: var(--dg-button-text, #061014);
-    0 1px 0 rgba(255, 255, 255, 0.16) inset,
-    0 0 40px rgba(var(--accent-rgb), 0.28),
-    0 6px 24px rgba(0, 0, 0, 0.36);
-  color: #061014;
-}
-
-.omni-home__entry--primary .anticon {
-  color: #061014;
-}
-
-.omni-home__entry--primary:hover .anticon {
-  color: #061014;
-  transform: scale(1.12);
 }
 
 .omni-home__carousel {

src/styles/pages/script-tokens.css

@@ -3400,7 +3400,6 @@
   width: 100%;
   height: 100%;
   min-height: 520px;
-  max-height: 520px;
   padding: 18px 22px;
   border: none;
   outline: none;
@@ -3410,7 +3409,6 @@
   font-size: 14px;
   line-height: 1.9;
   resize: none;
-  overflow-y: auto;
 }
 
 .script-eval-v4-text-input::placeholder {
@@ -4270,11 +4268,6 @@
 .script-eval-v4-text-shell,
 .script-eval-v4-text-input {
   min-height: calc(100vh - 422px);
-  max-height: calc(100vh - 422px);
-}
-
-.script-eval-v4-text-input {
-  overflow-y: auto;
 }
 
 .script-eval-v4-score-card {

src/styles/themes/dark-green.css

@@ -5394,787 +5394,6 @@
   aspect-ratio: auto;
 }
 
-/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
-.web-shell[data-ui-theme="dark-green"] .profile-page {
-  background:
-    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
-    var(--dg-page);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
-  height: 214px;
-  background:
-    linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
-    linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
-  content: "";
-  position: absolute;
-  inset: auto 0 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
-  opacity: 0.7;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
-  background-position: center;
-  background-size: cover;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
-  background:
-    linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
-    radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
-  height: 36px;
-  padding: 0 14px;
-  border-color: rgba(255, 255, 255, 0.2);
-  background: rgba(10, 12, 13, 0.66);
-  backdrop-filter: blur(14px);
-  flex-direction: row;
-  justify-content: center;
-  min-width: 104px;
-  line-height: 1;
-  font-weight: 600;
-  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  font-size: 13px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
-  top: 18px;
-  right: max(18px, calc((100vw - 1240px) / 2 + 18px));
-  bottom: auto;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
-  border-color: rgba(var(--accent-rgb), 0.45);
-  background: rgba(12, 18, 16, 0.86);
-  transform: translateY(-1px);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__body {
-  grid-template-columns: 292px minmax(0, 1fr);
-  gap: 34px;
-  width: min(1240px, calc(100% - 56px));
-  margin-top: -72px;
-  padding-bottom: 56px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
-.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
-  border-color: rgba(255, 255, 255, 0.075);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
-    var(--bg-surface);
-  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
-  gap: 18px;
-  padding: 22px;
-  border-radius: var(--radius-lg);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
-  gap: 10px;
-  width: 100%;
-  padding-bottom: 4px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
-  content: "";
-  position: absolute;
-  inset: -7px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
-  opacity: 0.9;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
-  position: relative;
-  width: 88px;
-  height: 88px;
-  border: 4px solid var(--dg-page);
-  background:
-    linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
-    var(--bg-elevated);
-  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
-  left: 50%;
-  top: 50%;
-  width: 88px;
-  height: 88px;
-  border-color: rgba(255, 255, 255, 0.18);
-  background: rgba(8, 10, 11, 0.68);
-  color: #fff;
-  font-size: 20px;
-  opacity: 0;
-  transform: translate(-50%, -50%);
-  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
-  right: -3px;
-  bottom: 10px;
-  z-index: 4;
-  border: 2px solid var(--bg-surface);
-  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
-  opacity: 1;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
-.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
-  background: rgba(8, 10, 11, 0.82);
-  transform: translate(-50%, -50%) scale(1.02);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__username {
-  max-width: 100%;
-  overflow: hidden;
-  font-size: 21px;
-  letter-spacing: 0;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
-  width: 100%;
-  min-height: 56px;
-  padding: 10px 12px;
-  border-color: rgba(255, 255, 255, 0.07);
-  background: rgba(255, 255, 255, 0.025);
-  color: var(--fg-muted);
-  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
-  background: var(--bg-elevated);
-  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
-  display: grid;
-  gap: 8px;
-  width: 100%;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  min-width: 68px;
-  height: 30px;
-  padding: 0 10px;
-  border: 1px solid rgba(255, 255, 255, 0.075);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.025);
-  color: var(--fg-muted);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
-  border-color: rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.045);
-  color: var(--fg-body);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
-  border-color: rgba(var(--accent-rgb), 0.34);
-  background: rgba(var(--accent-rgb), 0.1);
-  color: var(--accent);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
-  border-color: rgba(var(--accent-rgb), 0.5);
-  background: rgba(var(--accent-rgb), 0.16);
-  color: var(--accent-hover);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  min-height: 48px;
-  padding: 10px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.055);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.018);
-  color: var(--fg-muted);
-  cursor: pointer;
-  text-align: left;
-  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
-  overflow: hidden;
-  font-size: 13px;
-  line-height: 1.45;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
-  color: var(--fg-soft);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: rgba(var(--accent-rgb), 0.08);
-  color: var(--accent);
-  font-size: 12px;
-  opacity: 0.78;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
-  border-color: rgba(var(--accent-rgb), 0.28);
-  background: rgba(var(--accent-rgb), 0.055);
-  color: var(--fg-body);
-  outline: none;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
-  opacity: 1;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
-  color: var(--accent);
-  font-size: 11px;
-  line-height: 1.3;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
-  gap: 0;
-  width: 100%;
-  padding: 12px 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.065);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
-  font-size: 19px;
-  line-height: 1.1;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
-  margin-top: 4px;
-  color: var(--fg-soft);
-  font-size: 12px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
-  min-height: 40px;
-  padding: 0 15px;
-  border-radius: var(--radius-sm);
-  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
-  justify-content: center;
-  border-color: rgba(var(--accent-rgb), 0.24);
-  background: rgba(var(--accent-rgb), 0.07);
-  color: var(--accent);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
-  border-color: rgba(var(--accent-rgb), 0.62);
-  background: var(--accent);
-  color: var(--dg-button-text);
-  font-weight: 700;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
-  background: rgba(255, 255, 255, 0.025);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
-  margin-top: 2px;
-  border-color: transparent;
-  color: var(--fg-soft);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
-  transform: translateY(-1px);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
-  border-color: var(--accent-hover);
-  background: var(--accent-hover);
-  color: var(--dg-button-text);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
-  border-color: rgba(255, 90, 95, 0.36);
-  background: rgba(255, 90, 95, 0.1);
-  color: #ff9a9d;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__main {
-  gap: 22px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
-  min-height: 52px;
-  margin-bottom: 2px;
-  padding: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.022);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
-  min-height: 42px;
-  padding: 0 18px;
-  border: 0;
-  border-radius: var(--radius-sm);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
-  background: rgba(var(--accent-rgb), 0.12);
-  color: var(--accent);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
-  content: none;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__section {
-  gap: 14px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
-  margin-bottom: 0;
-  color: var(--fg-body);
-  font-size: 15px;
-  letter-spacing: 0;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
-  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
-  gap: 14px;
-  max-height: min(470px, 48vh);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-right: 6px;
-  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
-  scrollbar-width: thin;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb), 0.28);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(var(--accent-rgb), 0.42);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
-  min-height: 136px;
-  padding: 16px;
-  border-radius: var(--radius-md);
-  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
-  border-color: rgba(var(--accent-rgb), 0.28);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
-    var(--bg-surface);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
-  min-width: 0;
-  font-size: 14px;
-  line-height: 1.35;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb), 0.1);
-  color: var(--accent);
-  font-size: 11px;
-  line-height: 1;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
-  display: -webkit-box;
-  min-height: 38px;
-  overflow: hidden;
-  color: var(--fg-muted);
-  font-size: 12px;
-  line-height: 1.55;
-  text-overflow: ellipsis;
-  white-space: normal;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
-  padding-top: 10px;
-  border-top: 1px solid rgba(255, 255, 255, 0.055);
-  color: var(--fg-soft);
-  line-height: 1.35;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
-  position: relative;
-  min-height: 280px;
-  overflow: hidden;
-  padding: 46px 28px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
-  pointer-events: none;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 52px;
-  height: 52px;
-  border: 1px solid rgba(var(--accent-rgb), 0.22);
-  border-radius: 50%;
-  background: rgba(var(--accent-rgb), 0.08);
-  color: var(--accent);
-  font-size: 18px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
-  position: relative;
-  color: var(--fg-muted);
-  font-size: 13px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
-  position: relative;
-  min-height: 38px;
-  border-color: rgba(var(--accent-rgb), 0.32);
-  background: rgba(var(--accent-rgb), 0.08);
-  color: var(--accent);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: 14px;
-  max-height: min(470px, 48vh);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-right: 6px;
-  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
-  scrollbar-width: thin;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
-  min-height: 74px;
-  padding: 10px;
-  border-radius: var(--radius-md);
-  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
-  transform: translateY(-2px);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
-  flex-basis: 70px;
-  width: 70px;
-  height: 52px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
-  font-size: 13px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
-  margin-bottom: 0;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
-  gap: 4px;
-  padding: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
-  min-height: 32px;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 8px;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
-  background: rgba(var(--accent-rgb), 0.1);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-  padding: 14px;
-  border-radius: var(--radius-md);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.055);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.025);
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
-  overflow: hidden;
-  color: var(--fg-soft);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
-  overflow: hidden;
-  color: var(--fg-body);
-  font-size: 17px;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (max-width: 900px) {
-  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
-    grid-template-columns: 1fr;
-    width: min(100% - 36px, 760px);
-    margin-top: -54px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
-    align-items: stretch;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
-    overflow-x: auto;
-  }
-}
-
-@media (max-width: 560px) {
-  .web-shell[data-ui-theme="dark-green"] .profile-page__banner {
-    height: 152px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
-    top: 10px;
-    right: 12px;
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-    padding: 0;
-    border-radius: 999px;
-    font-size: 0;
-    gap: 0;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
-    width: 24px;
-    height: 24px;
-    background: transparent;
-    font-size: 14px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
-    width: min(100% - 28px, 560px);
-    margin-top: -32px;
-    padding-bottom: 88px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
-    gap: 13px;
-    padding: 18px;
-    border-radius: var(--radius-md);
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
-    gap: 7px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
-  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
-    width: 76px;
-    height: 76px;
-    border-width: 3px;
-    font-size: 24px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
-    width: 76px;
-    height: 76px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
-    bottom: 6px;
-    width: 18px;
-    height: 18px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__username {
-    font-size: 20px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__bio {
-    min-height: 46px;
-    padding: 8px 10px;
-    font-size: 12px;
-    line-height: 1.45;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
-    min-height: 42px;
-    padding: 8px 10px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
-    font-size: 12px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__counts {
-    padding: 9px 0;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
-    font-size: 18px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
-    min-height: 36px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
-    flex: 0 0 auto;
-    padding: 0 14px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
-    grid-template-columns: 1fr;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 8px;
-    max-height: min(312px, 46vh);
-    padding-right: 4px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
-    min-height: 112px;
-    padding: 9px;
-    gap: 8px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
-    width: 100%;
-    font-size: 12px;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
-    max-width: 100%;
-    overflow: hidden;
-    padding: 3px 7px;
-    font-size: 10px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
-    min-height: 30px;
-    font-size: 11px;
-    line-height: 1.45;
-  }
-
-  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 4px;
-    padding-top: 8px;
-    font-size: 10px;
-  }
-}
-
 /* 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 {