Merge pull request 'feat: 首页响应式视觉升级与全局UI细节打磨' (#30) from feat/home-responsive-polish-and-ui-refinements into master

Reviewed-on: #30

src/features/home/HomePage.tsx

@@ -195,10 +195,18 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
   const depth = Math.abs(offset);
   const direction = Math.sign(offset);
   const isActive = depth === 0;
-  const xByDepth = [0, 190, 320, 430, 520, 590];
+  const xByDepth = [
+    "0px",
+    "clamp(52px, 13.5vw, 198px)",
+    "clamp(90px, 22.5vw, 334px)",
+    "clamp(122px, 30.5vw, 448px)",
+    "clamp(148px, 37vw, 542px)",
+    "clamp(170px, 42vw, 614px)",
+  ];
   const yByDepth = [8, -2, -8, -13, -18, -24];
   const scaleByDepth = [1, 1, 1, 1, 1, 1];
-  const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
+  const xDistance = xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!;
+  const x = direction < 0 ? `calc(0px - ${xDistance})` : xDistance;
   const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
   const z = isActive ? 90 : 28 - depth;
   const scale = scaleByDepth[depth] ?? scaleByDepth[scaleByDepth.length - 1]!;
@@ -207,7 +215,7 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
     "--apple-card-offset": offset,
     "--apple-card-depth": depth,
     "--apple-card-z": 80 - depth,
-    "--apple-card-x": `${x}px`,
+    "--apple-card-x": x,
     "--apple-card-y": `${y}px`,
     "--apple-card-z-offset": `${z}px`,
     "--apple-card-rotate-y": "0deg",
@@ -623,15 +631,24 @@ function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcomm
           <div className="omni-home__actions" aria-label="首页入口">
             <button type="button" className="omni-home__entry" onClick={onStartOnboarding || onOpenGenerate}>
               <PlusOutlined />
-              <span>新手</span>
+              <span>
+                快速生成
+                <small>新手友好</small>
+              </span>
             </button>
             <button type="button" className="omni-home__entry omni-home__entry--primary" onClick={onOpenCanvas || onOpenGenerate}>
               <PlayCircleOutlined />
-              <span>老手</span>
+              <span>
+                专业创作
+                <small>画布工作流</small>
+              </span>
             </button>
             <button type="button" className="omni-home__entry" onClick={onOpenEcommerce}>
               <ShoppingOutlined />
-              <span>电商</span>
+              <span>
+                电商出图
+                <small>商品视觉</small>
+              </span>
             </button>
           </div>
         </section>

src/features/more/MorePage.tsx

@@ -345,11 +345,12 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                   key={tool.id}
                   type="button"
                   className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
-                  style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
+                  style={{
+                    "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))",
+                  } as CSSProperties}
                   aria-label={`打开核心工具：${tool.title}，${tool.text}`}
                   onClick={() => openTool(tool)}
                 >
-                  <span className="more-card__featured-icon">{tool.icon}</span>
                   <div className="more-card__featured-body">
                     <span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
                     <strong>{tool.title}</strong>
@@ -388,7 +389,6 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
                     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>

src/styles/pages/home.css

@@ -402,21 +402,6 @@
   transform: translateZ(20px) scale(1.02);
 }
 
-.omni-home__carousel-card-label {
-  position: absolute;
-  bottom: 12px;
-  left: 14px;
-  z-index: 2;
-  padding: 4px 12px;
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
-  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
-  color: var(--fg-body, #f3f5f2);
-  font-size: 12px;
-  font-weight: 900;
-  white-space: nowrap;
-}
-
 .omni-home__carousel-card:hover {
   box-shadow:
     0 28px 58px rgb(0 0 0 / 34%),
@@ -2479,3 +2464,536 @@
     font-size: 12px;
   }
 }
+
+/* ===== Home page product polish and responsive hardening ===== */
+.web-shell[data-view="home"] .omni-home {
+  --home-card-radius: 14px;
+  --home-panel-radius: 18px;
+  --home-safe-inline: clamp(16px, 4.6vw, 72px);
+  scroll-padding-top: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__scrim {
+  background:
+    linear-gradient(180deg, rgba(5, 8, 13, 0.82), rgba(5, 8, 13, 0.52) 38%, rgba(5, 8, 13, 0.9)),
+    radial-gradient(circle at 50% 24%, rgba(var(--accent-rgb), 0.1), transparent 36%),
+    linear-gradient(90deg, rgba(5, 8, 13, 0.86), rgba(5, 8, 13, 0.48) 48%, rgba(5, 8, 13, 0.86));
+}
+
+.web-shell[data-view="home"] .omni-home__shell {
+  padding: clamp(28px, 4.4vw, 58px) var(--home-safe-inline) clamp(34px, 4.8vw, 70px);
+}
+
+.web-shell[data-view="home"] .omni-home__hero {
+  width: min(100%, 1240px);
+  gap: clamp(16px, 2vw, 24px);
+}
+
+.web-shell[data-view="home"] .omni-home__copy {
+  gap: 14px;
+}
+
+.web-shell[data-view="home"] .omni-home__copy h1 {
+  max-width: min(100%, 920px);
+  white-space: normal;
+  text-wrap: balance;
+  font-size: clamp(34px, 4vw, 62px);
+  letter-spacing: 0;
+  text-shadow: 0 18px 54px rgb(0 0 0 / 34%);
+}
+
+.web-shell[data-view="home"] .omni-home__copy p {
+  max-width: 680px;
+  color: rgb(235 245 240 / 72%);
+  font-size: clamp(14px, 1.25vw, 18px);
+  line-height: 1.7;
+}
+
+.web-shell[data-view="home"] .omni-home__actions {
+  width: min(100%, 620px);
+  gap: 12px;
+}
+
+.web-shell[data-view="home"] .omni-home__entry {
+  min-height: 64px;
+  border-color: rgb(255 255 255 / 11%);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 3%)),
+    rgb(12 16 17 / 78%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    0 16px 34px rgb(0 0 0 / 22%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry > span:not(.anticon) {
+  display: grid;
+  gap: 3px;
+  justify-items: center;
+  min-width: 0;
+  line-height: 1.1;
+}
+
+.web-shell[data-view="home"] .omni-home__entry small {
+  color: rgb(235 245 240 / 48%);
+  font-size: 11px;
+  font-weight: 760;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.web-shell[data-view="home"] .omni-home__entry--primary small {
+  color: rgb(6 16 20 / 62%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry:hover {
+  border-color: rgb(0 255 136 / 34%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 4%)),
+    rgb(17 22 22 / 88%);
+}
+
+.web-shell[data-view="home"] .omni-home__entry--primary,
+.web-shell[data-view="home"] .omni-home__entry--primary:hover {
+  border-color: rgb(0 255 136 / 82%);
+  background:
+    linear-gradient(180deg, rgb(88 255 172 / 100%), rgb(0 255 136 / 100%));
+  box-shadow:
+    0 18px 42px rgb(0 255 136 / 14%),
+    inset 0 1px 0 rgb(255 255 255 / 28%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel {
+  width: min(100%, 1180px);
+  min-height: clamp(380px, 36vw, 560px);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage {
+  width: min(100%, 1180px);
+  height: clamp(360px, 34vw, 530px);
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
+  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card {
+  width: clamp(500px, 45vw, 760px);
+  height: clamp(281px, 25.31vw, 428px);
+  border: 1px solid rgb(255 255 255 / 5%);
+  border-radius: var(--home-panel-radius);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 5%)),
+    #07100f;
+  box-shadow:
+    0 18px 46px rgb(0 0 0 / 30%),
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    inset 0 0 0 1px rgb(255 255 255 / 2%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card::before {
+  background:
+    linear-gradient(180deg, rgb(2 12 12 / 18%), transparent 34%, rgb(3 9 10 / 30%)),
+    linear-gradient(90deg, rgb(4 10 12 / 38%), transparent 24%, transparent 76%, rgb(4 10 12 / 38%)),
+    radial-gradient(circle at 50% 58%, rgb(0 255 136 / 8%), transparent 54%);
+  opacity: 0.92;
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  border-radius: inherit;
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 4%),
+    inset 0 -42px 64px rgb(2 8 9 / 32%),
+    inset 0 34px 56px rgb(255 255 255 / 4%);
+  pointer-events: none;
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card.is-active {
+  border-color: rgb(255 255 255 / 7%);
+  box-shadow:
+    0 26px 70px rgb(0 0 0 / 38%),
+    0 0 0 1px rgb(255 255 255 / 4%),
+    0 0 46px rgb(0 0 0 / 18%),
+    inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-card:not(.is-active) {
+  filter: saturate(0.62) brightness(0.66) contrast(0.96);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card img,
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card.is-active img {
+  object-fit: contain;
+  transform: translateZ(12px);
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card img {
+  filter:
+    saturate(0.72)
+    contrast(0.98)
+    brightness(0.72)
+    hue-rotate(8deg)
+    drop-shadow(0 18px 18px rgb(0 0 0 / 18%));
+}
+
+.web-shell[data-view="home"] .omni-home__carousel-stage .omni-home__carousel-card.is-active img {
+  filter:
+    saturate(0.9)
+    contrast(1.03)
+    brightness(0.88)
+    hue-rotate(6deg)
+    drop-shadow(0 22px 22px rgb(0 0 0 / 18%));
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page {
+  padding-inline: var(--home-safe-inline);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page::before {
+  background:
+    linear-gradient(90deg, rgb(5 8 13 / 96%) 0%, rgb(5 8 13 / 80%) 40%, rgb(5 8 13 / 52%) 100%),
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 34%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-visual {
+  border-radius: var(--home-panel-radius);
+  border-color: rgb(255 255 255 / 10%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%)),
+    #0d1111;
+  box-shadow:
+    0 24px 68px rgb(0 0 0 / 34%),
+    inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-copy h2,
+.web-shell[data-view="home"] .omni-home__experience-copy h2 {
+  text-wrap: balance;
+}
+
+.web-shell[data-view="home"] .omni-home__feature-copy p,
+.web-shell[data-view="home"] .omni-home__experience-copy p {
+  color: rgb(232 238 236 / 74%);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page.is-script,
+.web-shell[data-view="home"] .omni-home__feature-page.is-model,
+.web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce {
+  padding-inline: clamp(10px, 1.8vw, 28px);
+}
+
+.web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+.web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+.web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+  border-radius: 12px;
+}
+
+.web-shell[data-view="home"] .omni-home__experience {
+  background:
+    linear-gradient(112deg, rgb(0 255 136 / 10%) 0 1px, transparent 1px 20%),
+    linear-gradient(68deg, rgb(0 255 136 / 7%) 0 1px, transparent 1px 22%),
+    linear-gradient(180deg, #070b10 0%, #05080d 100%);
+}
+
+.web-shell[data-view="home"] .omni-home__experience-route {
+  border-radius: var(--home-card-radius);
+}
+
+.web-shell[data-view="home"] :is(
+  .omni-home__shell,
+  .omni-home__feature-page,
+  .omni-home__toolbox-page,
+  .omni-home__experience
+) {
+  scroll-margin-top: 64px;
+}
+
+.web-shell[data-view="home"] .cookie-consent {
+  right: clamp(14px, 2vw, 24px);
+  bottom: 12px;
+  width: min(560px, calc(100vw - 28px));
+  gap: 10px;
+  padding: 10px 12px;
+  border-color: rgb(0 255 136 / 20%);
+  border-radius: 13px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 3%)),
+    rgb(13 17 18 / 92%);
+  box-shadow:
+    0 18px 46px rgb(0 0 0 / 30%),
+    inset 0 1px 0 rgb(255 255 255 / 7%);
+}
+
+.web-shell[data-view="home"] .cookie-consent strong {
+  font-size: 13px;
+}
+
+.web-shell[data-view="home"] .cookie-consent p {
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1.32;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-view="home"] .cookie-consent__actions {
+  gap: 8px;
+}
+
+.web-shell[data-view="home"] .cookie-consent__actions a,
+.web-shell[data-view="home"] .cookie-consent__actions button {
+  min-height: 32px;
+  padding-inline: 12px;
+  font-size: 12px;
+}
+
+@media (max-width: 1200px) {
+  .web-shell[data-view="home"] .omni-home__carousel {
+    min-height: clamp(340px, 42vw, 500px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-stage {
+    width: min(100%, 1020px);
+    height: clamp(320px, 39vw, 470px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-card {
+    width: clamp(470px, 57vw, 660px);
+    height: clamp(264px, 32.06vw, 371px);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-view="home"] .omni-home {
+    scroll-snap-type: none;
+    overscroll-behavior-y: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__shell {
+    min-height: auto;
+    padding-top: clamp(24px, 4vw, 38px);
+    padding-bottom: clamp(34px, 6vw, 58px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__hero {
+    align-content: start;
+  }
+
+  .web-shell[data-view="home"] .omni-home__actions {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .web-shell[data-view="home"] .omni-home__entry {
+    min-height: 58px;
+    padding-inline: 18px;
+    font-size: 15px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__entry small {
+    font-size: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel {
+    width: min(100%, 820px);
+    min-height: clamp(290px, 54vw, 430px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-stage {
+    width: min(100%, 820px);
+    height: clamp(280px, 51vw, 410px);
+    overflow: hidden;
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-deck {
+    transform: scale(0.96);
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-page,
+  .web-shell[data-view="home"] .omni-home__experience {
+    min-height: auto;
+    padding-block: clamp(44px, 7vw, 72px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-copy h2,
+  .web-shell[data-view="home"] .omni-home__experience-copy h2 {
+    font-size: clamp(34px, 7vw, 58px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-copy p,
+  .web-shell[data-view="home"] .omni-home__experience-copy p {
+    font-size: clamp(15px, 2.4vw, 20px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+  .web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+  .web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+    height: auto;
+    min-height: clamp(520px, 78vw, 720px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience {
+    gap: 24px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience-visual {
+    min-height: 260px;
+  }
+}
+
+@media (max-width: 720px) {
+  .web-shell[data-view="home"] .omni-home__copy h1 {
+    font-size: clamp(30px, 9vw, 44px);
+    line-height: 1.08;
+  }
+
+  .web-shell[data-view="home"] .omni-home__copy p {
+    max-width: 520px;
+    font-size: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__actions {
+    grid-template-columns: 1fr;
+    width: min(100%, 420px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__entry {
+    justify-content: center;
+    min-height: 54px;
+    width: 100%;
+  }
+
+  .web-shell[data-view="home"] .omni-home__entry > span:not(.anticon) {
+    gap: 4px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel {
+    min-height: clamp(260px, 70vw, 360px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-stage {
+    height: clamp(248px, 66vw, 340px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-deck {
+    transform: scale(1);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-card {
+    width: min(94vw, 520px);
+    height: min(52.88vw, 292px);
+    min-height: 206px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-stats {
+    position: relative;
+    inset: auto;
+    margin-top: 18px;
+    max-width: none;
+    justify-content: flex-start;
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience-routes {
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience-route {
+    min-height: 84px;
+    padding: 13px 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience-route b {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 480px) {
+  .web-shell[data-view="home"] .omni-home {
+    --home-safe-inline: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__shell {
+    padding-top: 20px;
+    padding-bottom: 32px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__hero {
+    gap: 14px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__copy {
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel {
+    min-height: clamp(228px, 68vw, 286px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-stage {
+    height: clamp(218px, 64vw, 274px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-deck {
+    transform: scale(1);
+  }
+
+  .web-shell[data-view="home"] .omni-home__carousel-card {
+    width: 94vw;
+    height: 52.88vw;
+    min-height: 188px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-page,
+  .web-shell[data-view="home"] .omni-home__experience {
+    padding-block: 34px 44px;
+  }
+
+  .web-shell[data-view="home"] :is(
+    .omni-home__shell,
+    .omni-home__feature-page,
+    .omni-home__toolbox-page,
+    .omni-home__experience
+  ) {
+    scroll-margin-top: 60px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__feature-page.is-script .omni-home__feature-visual,
+  .web-shell[data-view="home"] .omni-home__feature-page.is-model .omni-home__feature-visual,
+  .web-shell[data-view="home"] .omni-home__feature-page.is-ecommerce .omni-home__feature-visual {
+    min-height: 560px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__experience-routes {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .cookie-consent {
+    right: 10px;
+    bottom: max(10px, env(safe-area-inset-bottom));
+    grid-template-columns: 1fr;
+    width: calc(100vw - 20px);
+    padding: 12px;
+  }
+
+  .web-shell[data-view="home"] .cookie-consent p {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: initial;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .web-shell[data-view="home"] .cookie-consent__actions {
+    justify-content: stretch;
+  }
+
+  .web-shell[data-view="home"] .cookie-consent__actions a,
+  .web-shell[data-view="home"] .cookie-consent__actions button {
+    flex: 1 1 0;
+  }
+}

src/styles/pages/more.css

@@ -216,10 +216,10 @@
 
 .more-card--featured {
   display: grid;
-  grid-template-columns: 54px minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr);
   align-items: start;
   justify-items: stretch;
-  gap: 16px;
+  gap: 12px;
   min-height: 336px;
   padding: 20px;
   border-color: rgba(var(--accent-rgb), 0.2);
@@ -251,22 +251,6 @@
   box-shadow: var(--more-card-shadow), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
 }
 
-.more-card__featured-icon {
-  display: grid;
-  place-items: center;
-  width: 54px;
-  height: 54px;
-  border: 1px solid rgba(var(--accent-rgb), 0.24);
-  border-radius: var(--radius-xs, 8px);
-  background:
-    linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08)),
-    var(--bg-inset);
-  color: var(--accent);
-  font-size: 24px;
-  flex-shrink: 0;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-}
-
 .more-card__featured-body {
   display: flex;
   flex-direction: column;
@@ -281,7 +265,12 @@
 .more-card--featured .more-card__preview {
   width: 100%;
   min-height: 0;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: 4 / 3;
+}
+
+.more-card--featured .more-card__preview-frame img {
+  padding: 8px;
+  object-fit: contain;
 }
 
 .more-card--featured.more-card--no-preview {
@@ -449,7 +438,7 @@
 }
 
 .more-card__icon {
-  display: grid;
+  display: none;
   place-items: center;
   width: 38px;
   height: 38px;
@@ -464,6 +453,7 @@
 }
 
 .more-card--recent .more-card__icon {
+  display: grid;
   width: 30px;
   height: 30px;
   font-size: 14px;
@@ -1221,18 +1211,12 @@
   }
 
   .more-card--featured {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
     min-height: 0;
     padding: 16px;
     gap: 12px;
   }
 
-  .more-card__featured-icon {
-    width: 42px;
-    height: 42px;
-    font-size: 20px;
-  }
-
   .more-card__featured-body strong {
     font-size: 16px;
   }
@@ -1312,11 +1296,6 @@
     padding: 15px;
   }
 
-  .more-card__featured-icon {
-    width: 40px;
-    height: 40px;
-  }
-
   .more-card {
     gap: 10px;
     min-height: 0;

src/styles/pages/script-review-showcase.css

@@ -684,12 +684,6 @@
 }
 
 @container (max-width: 1120px) {
-  .omni-script-review-showcase {
-    grid-template-columns: 1fr;
-    gap: 18px;
-    overflow-y: auto;
-  }
-
   .srs-left-panel {
     grid-template-rows: auto auto auto;
     gap: 16px;
@@ -711,13 +705,32 @@
   }
 
   .srs-results-panel {
-    grid-template-rows: auto minmax(320px, auto) auto;
+    grid-template-rows: auto minmax(300px, auto) auto;
   }
 }
 
-@media (max-width: 980px) {
-  .omni-script-review-showcase {
-    padding: 22px;
+@container (max-width: 880px) {
+  .srs-brand-section {
+    gap: 12px;
+  }
+
+  .srs-brand-section h1 {
+    max-width: 100%;
+    font-size: clamp(28px, 8cqw, 44px);
+  }
+
+  .srs-brand-section p {
+    font-size: clamp(14px, 3.2cqw, 17px);
+    line-height: 1.65;
+  }
+
+  .srs-point-card {
+    min-height: 0;
+    border-radius: 10px;
+  }
+
+  .srs-results-panel {
+    gap: 14px;
   }
 
   .srs-score-hero {
@@ -729,33 +742,118 @@
     display: none;
   }
 
-  .srs-chart-body,
   .srs-triple-section,
   .srs-point-list {
     grid-template-columns: 1fr;
   }
 
-  .srs-chart-col {
-    grid-template-columns: minmax(70px, 92px) minmax(0, 1fr);
-    grid-template-rows: auto;
-    align-items: center;
-    justify-items: stretch;
-  }
-
-  .srs-chart-bar-wrap {
-    min-height: 80px;
-  }
-
-  .srs-chart-col-label {
-    text-align: left;
+  .srs-score-summary {
+    font-size: clamp(13px, 3cqw, 16px);
+    line-height: 1.55;
   }
 }
 
-@media (max-width: 560px) {
-  .omni-script-review-showcase {
+@container (max-width: 720px) {
+  .srs-chart-card {
     padding: 16px;
   }
 
+  .srs-chart-title {
+    letter-spacing: 0.04em;
+  }
+
+  .srs-chart-body {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding-top: 14px;
+  }
+
+  .srs-chart-col {
+    grid-template-columns: minmax(94px, 0.36fr) minmax(0, 1fr);
+    grid-template-rows: auto;
+    align-items: center;
+    justify-items: stretch;
+    min-height: 46px;
+    border: 1px solid rgba(255, 255, 255, 0.055);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 10px;
+  }
+
+  .srs-chart-bar-wrap {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    height: 16px;
+    min-height: 16px;
+  }
+
+  .srs-chart-bar-bg,
+  .srs-chart-bar-fill {
+    width: 100%;
+    height: 100% !important;
+    border-radius: 999px;
+  }
+
+  .srs-chart-bar-bg {
+    left: 0;
+    transform: none;
+  }
+
+  .srs-chart-bar-fill {
+    transform-origin: left center;
+  }
+
+  .srs-chart-col:nth-child(1) .srs-chart-bar-fill { width: 80%; }
+  .srs-chart-col:nth-child(2) .srs-chart-bar-fill { width: 80%; }
+  .srs-chart-col:nth-child(3) .srs-chart-bar-fill { width: 100%; }
+  .srs-chart-col:nth-child(4) .srs-chart-bar-fill { width: 80%; }
+  .srs-chart-col:nth-child(5) .srs-chart-bar-fill { width: 66%; }
+  .srs-chart-col:nth-child(6) .srs-chart-bar-fill { width: 53%; }
+
+  .srs-chart-bar-score {
+    top: 50%;
+    right: 8px;
+    left: auto;
+    font-size: 12px;
+    transform: translateY(-50%);
+  }
+
+  .srs-chart-bar-sub,
+  .srs-chart-bar-star {
+    font-size: 10px;
+  }
+
+  .srs-chart-col-label {
+    grid-column: 1;
+    grid-row: 1;
+    text-align: left;
+  }
+
+  .srs-chart-col-name {
+    font-size: 13px;
+  }
+
+  .srs-chart-col-desc {
+    display: none;
+  }
+
+  .srs-triple-section {
+    gap: 12px;
+  }
+
+  .srs-section-card {
+    overflow: visible;
+  }
+
+  .srs-section-item-text {
+    display: block;
+    overflow: visible;
+    -webkit-line-clamp: initial;
+  }
+}
+
+@container (max-width: 560px) {
   .srs-flow-card {
     grid-template-columns: 1fr;
     justify-items: stretch;
@@ -769,4 +867,45 @@
     align-items: flex-start;
     flex-direction: column;
   }
+
+  .srs-score-tags {
+    gap: 6px;
+  }
+
+  .srs-score-tag {
+    min-height: 24px;
+    padding-inline: 9px;
+  }
+
+  .srs-chart-col {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .srs-chart-bar-wrap,
+  .srs-chart-col-label {
+    grid-column: 1;
+    grid-row: auto;
+  }
+}
+
+@media (max-width: 1120px) {
+  .omni-script-review-showcase {
+    grid-template-columns: 1fr;
+    gap: clamp(16px, 2.8vw, 24px);
+    overflow-y: visible;
+    padding: clamp(20px, 3vw, 34px);
+  }
+}
+
+@media (max-width: 880px) {
+  .omni-script-review-showcase {
+    padding: clamp(16px, 3.8vw, 24px);
+  }
+}
+
+@media (max-width: 560px) {
+  .omni-script-review-showcase {
+    padding: 16px;
+  }
 }

src/styles/pages/toolbox.css

@@ -889,3 +889,252 @@
     animation: none;
   }
 }
+
+/* ===== Home toolbox polish and responsive hardening ===== */
+.web-shell[data-view="home"] .omni-home__toolbox-page {
+  --toolbox-radius-card: 16px;
+  --toolbox-radius-inner: 12px;
+  background:
+    linear-gradient(180deg, #070b10 0%, #05080d 100%),
+    radial-gradient(ellipse 70% 48% at 58% 42%, rgba(0, 255, 136, 0.045) 0%, transparent 70%);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-shell {
+  width: min(100%, 1440px);
+  margin-inline: auto;
+  padding: clamp(34px, 5vw, 64px) clamp(18px, 5vw, 72px);
+  align-items: center;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-left {
+  width: clamp(300px, 28vw, 420px);
+  gap: 14px;
+  padding-top: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 13px;
+  box-shadow: 0 16px 32px rgba(0, 255, 136, 0.12);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-icon .anticon {
+  font-size: 24px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+  font-size: clamp(24px, 2.3vw, 32px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-title {
+  color: #f7fff9;
+  background: none;
+  -webkit-text-fill-color: currentColor;
+  font-size: clamp(32px, 3.4vw, 46px);
+  letter-spacing: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-subtitle {
+  color: rgba(232, 238, 236, 0.68);
+  font-size: clamp(15px, 1.18vw, 17px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item,
+.web-shell[data-view="home"] .omni-home__toolbox-workflow,
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  border-color: rgba(255, 255, 255, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028)),
+    rgba(10, 15, 16, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.075),
+    0 18px 42px rgba(0, 0, 0, 0.2);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item {
+  border-radius: 14px;
+  padding: 14px 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item:hover {
+  border-color: rgba(0, 255, 136, 0.24);
+  transform: translateX(3px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  font-size: 22px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-name {
+  font-size: 16px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-item-desc {
+  font-size: 13px;
+  color: rgba(232, 238, 236, 0.48);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow {
+  margin-top: 4px;
+  border-radius: 14px;
+  padding: 15px 17px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-label {
+  margin-bottom: 10px;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+  gap: 8px;
+  font-size: 13px;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-grid {
+  gap: 14px;
+  min-height: clamp(500px, 48vw, 680px);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card {
+  border-radius: var(--toolbox-radius-card);
+  transform: translateZ(0);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(0, 255, 136, 0.24);
+  box-shadow:
+    0 22px 54px rgba(0, 0, 0, 0.28),
+    0 0 0 1px rgba(0, 255, 136, 0.07);
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-header {
+  padding: 15px 16px 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-content {
+  padding: 10px 16px;
+  min-height: 0;
+}
+
+.web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+  padding: 7px 16px 14px;
+}
+
+.web-shell[data-view="home"] :is(.toolbox-card1-side, .toolbox-card3-side, .toolbox-card4-side),
+.web-shell[data-view="home"] :is(.toolbox-card1-img, .toolbox-card3-portrait, .toolbox-card4-img),
+.web-shell[data-view="home"] .toolbox-card2-frame {
+  border-radius: var(--toolbox-radius-inner);
+}
+
+@media (max-width: 1160px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    gap: 22px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    width: clamp(280px, 32vw, 360px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    min-height: clamp(460px, 58vw, 620px);
+  }
+}
+
+@media (max-width: 980px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-page {
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    min-height: auto;
+    padding-block: clamp(42px, 7vw, 64px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-left {
+    width: min(100%, 760px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow {
+    width: 100%;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-height: auto;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: clamp(230px, 34vw, 300px);
+  }
+}
+
+@media (max-width: 680px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-shell {
+    padding-inline: 14px;
+    gap: 18px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand-icon {
+    width: 42px;
+    height: 42px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-brand-text {
+    font-size: 22px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-title {
+    font-size: clamp(26px, 7vw, 34px);
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-list,
+  .web-shell[data-view="home"] .omni-home__toolbox-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-item {
+    align-items: center;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 236px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-header {
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-tag {
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 420px) {
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow-steps {
+    align-items: flex-start;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-workflow-arrow {
+    display: none;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card {
+    min-height: 220px;
+  }
+
+  .web-shell[data-view="home"] .omni-home__toolbox-card-footer {
+    gap: 5px;
+  }
+}

src/styles/themes/dark-green.css

@@ -144,6 +144,10 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
   isolation: isolate;
 }
 
@@ -170,10 +174,15 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
   top: calc(100% + 12px);
   right: -88px;
+  z-index: 1200;
   width: min(420px, calc(100vw - 24px));
-  max-height: min(560px, calc(100vh - 92px));
+  height: auto;
+  max-height: min(460px, calc(100dvh - 84px));
   border: 1px solid var(--dg-line);
   border-radius: 16px;
   background: #151719;
@@ -231,9 +240,12 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__list {
-  max-height: min(486px, calc(100vh - 158px));
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: min(386px, calc(100dvh - 158px));
   padding: 8px;
   overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .web-shell[data-ui-theme="dark-green"] .notification-center__item {
@@ -10466,6 +10478,21 @@
     gap: 6px;
   }
 
+  .web-shell[data-ui-theme="dark-green"] .notification-center__panel {
+    right: clamp(-112px, -24vw, -92px);
+    width: min(360px, calc(100vw - 20px));
+    max-height: min(420px, calc(100dvh - 76px));
+    border-radius: 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .notification-center__panel::before {
+    right: clamp(104px, 25vw, 124px);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .notification-center__list {
+    max-height: min(344px, calc(100dvh - 150px));
+  }
+
   .web-shell[data-ui-theme="dark-green"] :is(.creator-button, .member-button) {
     height: 32px;
     padding: 0 10px;