src/features/profile/ProfilePage.tsx

@@ -850,7 +850,6 @@ function ProfilePage({
             <span className="auth-page__logo">
               <img src={AUTH_LOGO_URL} alt="OmniAI" />
             </span>
-            <span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
             <h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
             <p className="auth-page__subtitle">
               {mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}

src/features/script-tokens/ScriptTokensPage.tsx

@@ -1,8 +1,11 @@
 import {
+  BarChartOutlined,
   CheckCircleFilled,
   CopyOutlined,
   DownloadOutlined,
   FileTextOutlined,
+  LoadingOutlined,
+  ThunderboltOutlined,
   UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
@@ -168,6 +171,12 @@ function normalizeUploadedText(raw: string, ext: string): string {
   return raw;
 }
 
+function formatFileSize(size: number): string {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+}
+
 const SCORE_DIMENSIONS: ScoreDimension[] = [
   { key: "hook", label: "钩子设计", maxScore: 20, hint: "开篇吸引力·悬念设置·黄金三秒", detail: "开篇即抛出高概念钩子，悬念设置紧凑有力。" },
   { key: "character", label: "角色塑造", maxScore: 15, hint: "人物立体度·动机合理性·弧光设计", detail: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" },
@@ -346,9 +355,10 @@ function ScriptTokensPage() {
   const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测";
   const scriptMinutes = Math.max(8, Math.round(script.length / 460));
   const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
+  const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle";
 
   return (
-    <section className="script-eval-v5 page-motion">
+    <section className={`script-eval-v5 page-motion ${statusClass}`}>
       <div className="script-eval-v5-page">
         {/* Left Panel */}
         <aside className="script-eval-v5-left">
@@ -364,7 +374,10 @@ function ScriptTokensPage() {
               {uploadedFile ? (
                 <div className="script-eval-v5-upload-done is-show">
                   <CheckCircleFilled />
-                  <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                  <span className="script-eval-v5-uf-meta">
+                    <span className="script-eval-v5-uf-name">{uploadedFile.name}</span>
+                    <span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</span>
+                  </span>
                   <span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}>
                     重新上传
                   </span>
@@ -374,7 +387,7 @@ function ScriptTokensPage() {
                   <div className="script-eval-v5-upload-icon"><UploadOutlined /></div>
                   <div className="script-eval-v5-upload-text">拖拽或点击上传</div>
                   <button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}>
-                    + 上传剧本
+                    <UploadOutlined /> 选择剧本
                   </button>
                   <div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div>
                 </>
@@ -445,10 +458,12 @@ function ScriptTokensPage() {
               disabled={loading || !hasContent}
               onClick={() => void handleEvaluate()}
             >
-              {loading ? "◆ 评测中..." : "◆ 开始评测"}
+              {loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+              <span>{loading ? "评测中..." : "开始评测"}</span>
             </button>
             <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}>
-              导出评测报告
+              <DownloadOutlined />
+              <span>导出评测报告</span>
             </button>
           </div>
         </aside>
@@ -482,6 +497,11 @@ function ScriptTokensPage() {
                     <div className="page-loading-spinner" />
                     <strong>AI 正在分析剧本...</strong>
                     <p>正在调用模型进行六维评分，预计需要 15-30 秒</p>
+                    <div className="script-eval-v5-loading-steps" aria-hidden="true">
+                      <span>结构识别</span>
+                      <span>冲突评估</span>
+                      <span>商业潜力</span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -568,13 +588,23 @@ function ScriptTokensPage() {
                         <span>0%</span>
                       </div>
                       <div className="script-eval-report__chart-grid">
-                        {SCORE_DIMENSIONS.map((dim) => {
+                        {SCORE_DIMENSIONS.map((dim, dimIndex) => {
                           const score = result.dimensionScores[dim.key] ?? 0;
                           const pct = Math.max(0, Math.min(1, score / dim.maxScore));
                           const lossPct = 1 - pct;
                           const isPerfect = score === dim.maxScore;
+                          const isActive = activeDim === null || activeDim === dimIndex;
                           return (
-                            <button key={dim.key} type="button" className="script-eval-report__bar-col">
+                            <button
+                              key={dim.key}
+                              type="button"
+                              className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`}
+                              onMouseEnter={() => setActiveDim(dimIndex)}
+                              onFocus={() => setActiveDim(dimIndex)}
+                              onMouseLeave={() => setActiveDim(null)}
+                              onBlur={() => setActiveDim(null)}
+                              aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`}
+                            >
                               <div className="script-eval-report__bar-score">
                                 <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null}
                               </div>
@@ -589,6 +619,14 @@ function ScriptTokensPage() {
                         })}
                       </div>
                     </div>
+                    <div className="script-eval-report__chart-note">
+                      <BarChartOutlined />
+                      <span>
+                        {activeDim === null
+                          ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。"
+                          : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`}
+                      </span>
+                    </div>
                   </section>
 
                   <div className="script-eval-report__findings">

src/styles/pages/ecommerce.css

@@ -8707,3 +8707,88 @@
     font-size: 10px;
   }
 }
+
+@media (max-height: 760px) {
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview {
+    grid-template-rows: auto minmax(220px, 1fr) auto;
+    align-content: stretch;
+    justify-items: stretch;
+    overflow: auto;
+    padding-top: clamp(28px, 7vh, 72px);
+    padding-bottom: 20px;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview-header {
+    position: static;
+    width: 100%;
+    max-width: none;
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-empty-state {
+    align-self: center;
+    justify-self: center;
+    min-height: min(260px, 36vh);
+  }
+
+  .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-bottom-input {
+    position: static;
+    width: min(100%, 780px);
+    align-self: end;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    grid-template-rows: auto minmax(220px, 1fr) auto;
+    align-content: stretch;
+    justify-items: stretch;
+    overflow: auto;
+    padding-bottom: 20px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+    position: static;
+    width: 100%;
+    max-width: none;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    align-self: center;
+    justify-self: center;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+    position: static;
+    width: min(100%, 780px);
+    align-self: end;
+    justify-self: center;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    grid-template-rows: auto minmax(210px, 1fr) auto;
+    gap: 16px;
+    padding-bottom: 14px;
+  }
+
+  .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+    min-height: min(220px, 34vh);
+  }
+}
+
+/* Mobile preview rhythm: once the preview header is in normal flow, remove the desktop top reserve. */
+@media (max-width: 860px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 520px;
+    padding-top: 18px;
+  }
+}
+
+@media (max-width: 620px) {
+  .product-clone-page[data-tool="clone"] .clone-ai-preview {
+    min-height: 440px;
+    padding-top: 14px;
+  }
+}

src/styles/pages/script-tokens-v5.css

@@ -2649,3 +2649,775 @@
     min-height: 52px;
   }
 }
+
+/* ===== Commercial SaaS polish for script review page ===== */
+.script-eval-v5 {
+  --v5-radius-xs: 6px;
+  --v5-radius-sm: 8px;
+  --v5-radius-md: 12px;
+  --v5-radius-lg: 16px;
+  --v5-panel: #131616;
+  --v5-panel-2: #181c1b;
+  --v5-panel-3: #101312;
+  --v5-line: rgb(255 255 255 / 7%);
+  --v5-line-strong: rgb(0 255 136 / 22%);
+  --v5-shadow-soft: 0 18px 48px rgb(0 0 0 / 24%);
+  --v5-shadow-tight: 0 10px 24px rgb(0 0 0 / 18%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 220px),
+    var(--v5-bg);
+  letter-spacing: 0;
+}
+
+.script-eval-v5-page {
+  background: linear-gradient(90deg, rgb(0 255 136 / 3%), transparent 28%);
+}
+
+.script-eval-v5-left {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 180px),
+    var(--v5-panel);
+  border-right-color: var(--v5-line);
+  box-shadow: inset -1px 0 0 rgb(0 255 136 / 4%), 18px 0 38px rgb(0 0 0 / 18%);
+}
+
+.script-eval-v5-lp-section {
+  border-bottom-color: var(--v5-line);
+}
+
+.script-eval-v5-lp-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #7f8d88;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+.script-eval-v5-lp-label::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: rgb(0 255 136 / 42%);
+  box-shadow: 0 0 14px rgb(0 255 136 / 24%);
+}
+
+.script-eval-v5-upload-zone {
+  position: relative;
+  min-height: 214px;
+  border: 1px dashed rgb(255 255 255 / 14%);
+  border-radius: var(--v5-radius-lg);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
+    rgb(255 255 255 / 2.5%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
+}
+
+.script-eval-v5-upload-zone:hover,
+.script-eval-v5-upload-zone:focus-visible {
+  border-color: var(--v5-line-strong);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 8%), transparent),
+    rgb(0 255 136 / 4%);
+  outline: none;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 16px 36px rgb(0 0 0 / 16%);
+}
+
+.script-eval-v5-upload-icon {
+  display: grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  margin: 0 auto 14px;
+  border: 1px solid rgb(255 255 255 / 7%);
+  border-radius: 18px;
+  background: rgb(0 255 136 / 8%);
+  color: color-mix(in srgb, var(--v5-green) 74%, #ffffff);
+}
+
+.script-eval-v5-upload-text {
+  margin-bottom: 14px;
+  color: #d7dedb;
+  font-weight: 760;
+}
+
+.script-eval-v5-upload-btn,
+.script-eval-v5-eval-btn,
+.script-eval-v5-export-btn,
+.script-eval-v5-action-btn,
+.script-eval-v5-retry-btn {
+  font-family: inherit;
+  letter-spacing: 0;
+}
+
+.script-eval-v5-upload-btn,
+.script-eval-v5-eval-btn,
+.script-eval-v5-export-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.script-eval-v5-upload-btn,
+.script-eval-v5-eval-btn {
+  background: linear-gradient(180deg, #34ffa9 0%, var(--v5-green) 52%, #07cf73 100%);
+  box-shadow: 0 12px 28px rgb(0 255 136 / 14%), inset 0 1px 0 rgb(255 255 255 / 36%);
+}
+
+.script-eval-v5-upload-btn:hover,
+.script-eval-v5-eval-btn:hover:not(:disabled) {
+  background: linear-gradient(180deg, #55ffb8 0%, #10f58c 56%, var(--v5-green-dim) 100%);
+  transform: translateY(-1px);
+}
+
+.script-eval-v5-upload-hint {
+  max-width: 300px;
+  margin-inline: auto;
+  color: #74837e;
+  line-height: 1.6;
+}
+
+.script-eval-v5-upload-done {
+  min-height: 86px;
+  border-color: var(--v5-line-strong);
+  border-radius: var(--v5-radius-md);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 12%), rgb(0 255 136 / 5%)),
+    rgb(255 255 255 / 2%);
+}
+
+.script-eval-v5-uf-meta {
+  min-width: 0;
+  flex: 1;
+  display: grid;
+  gap: 4px;
+  text-align: left;
+}
+
+.script-eval-v5-uf-name {
+  display: block;
+  color: #e9fff5;
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.script-eval-v5-uf-size {
+  color: #7f918a;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.script-eval-v5-uf-re {
+  padding: 5px 8px;
+  border-radius: var(--v5-radius-xs);
+  color: #a2b0ab;
+  transition: color 160ms ease, background 160ms ease;
+}
+
+.script-eval-v5-uf-re:hover {
+  background: rgb(255 255 255 / 6%);
+}
+
+.script-eval-v5-info-grid {
+  gap: 8px;
+}
+
+.script-eval-v5-info-item {
+  min-height: 38px;
+  padding: 0 12px;
+  border: 1px solid rgb(255 255 255 / 5%);
+  border-radius: var(--v5-radius-sm);
+  background: rgb(255 255 255 / 2.6%);
+}
+
+.script-eval-v5-info-key {
+  color: #84928d;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.script-eval-v5-info-val {
+  color: #e5ebe8;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.script-eval-v5-info-tag {
+  border-radius: 999px;
+  padding: 4px 10px;
+}
+
+.script-eval-v5-info-empty,
+.script-eval-v5-history-empty {
+  min-height: 70px;
+  display: grid;
+  place-items: center;
+  border: 1px dashed rgb(255 255 255 / 9%);
+  border-radius: var(--v5-radius-md);
+  background: rgb(255 255 255 / 2%);
+  color: #75827e;
+  line-height: 1.5;
+}
+
+.script-eval-v5-history-list {
+  gap: 8px;
+}
+
+.script-eval-v5-history-item {
+  border: 1px solid rgb(255 255 255 / 5%);
+  border-radius: var(--v5-radius-md);
+  background: rgb(255 255 255 / 2.4%);
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
+}
+
+.script-eval-v5-history-item:hover {
+  border-color: rgb(255 255 255 / 10%);
+  background: rgb(255 255 255 / 4%);
+  transform: translateY(-1px);
+}
+
+.script-eval-v5-history-item.is-active {
+  border-color: var(--v5-line-strong);
+  background: linear-gradient(90deg, rgb(0 255 136 / 10%), rgb(0 255 136 / 3%));
+  box-shadow: inset 3px 0 0 var(--v5-green);
+}
+
+.script-eval-v5-hi-name {
+  color: #dce5e1;
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.script-eval-v5-hi-date {
+  color: #73817c;
+  font-size: 11px;
+}
+
+.script-eval-v5-hi-score {
+  font-variant-numeric: tabular-nums;
+  font-size: 28px;
+}
+
+.script-eval-v5-hi-grade {
+  color: #7d8985;
+}
+
+.script-eval-v5-lp-bottom {
+  border-top-color: var(--v5-line);
+  background: linear-gradient(180deg, rgb(19 22 22 / 72%), #111414);
+  box-shadow: 0 -18px 34px rgb(0 0 0 / 18%);
+}
+
+.script-eval-v5-eval-btn {
+  min-height: 58px;
+  border-radius: var(--v5-radius-md);
+  font-size: 17px;
+  font-weight: 850;
+  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
+}
+
+.script-eval-v5-eval-btn:disabled {
+  opacity: 0.44;
+  box-shadow: none;
+}
+
+.script-eval-v5-export-btn {
+  min-height: 50px;
+  border-color: rgb(255 255 255 / 9%);
+  border-radius: var(--v5-radius-md);
+  background: rgb(255 255 255 / 3.5%);
+  color: #aab8b2;
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.script-eval-v5-export-btn:hover:not(:disabled) {
+  border-color: var(--v5-line-strong);
+  background: rgb(0 255 136 / 7%);
+  color: #dcfff0;
+}
+
+.script-eval-v5-right {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 2.4%), transparent 240px),
+    #0d0f0f;
+}
+
+.script-eval-v5-right-topbar {
+  min-height: 52px;
+  border-bottom-color: var(--v5-line);
+  background: rgb(13 15 15 / 88%);
+  backdrop-filter: blur(18px);
+}
+
+.script-eval-v5-right-title {
+  color: #87938f;
+  font-size: 14px;
+  font-weight: 760;
+}
+
+.script-eval-v5-rt-green {
+  color: #b7ffdc;
+}
+
+.script-eval-v5-action-btn {
+  min-height: 32px;
+  border-color: rgb(255 255 255 / 9%);
+  border-radius: var(--v5-radius-sm);
+  background: rgb(255 255 255 / 3.8%);
+  color: #a8b5b0;
+  font-weight: 760;
+}
+
+.script-eval-v5-action-btn:hover {
+  border-color: var(--v5-line-strong);
+  background: rgb(0 255 136 / 7%);
+  color: #dffff0;
+}
+
+.script-eval-v5-right-content {
+  padding: 20px 32px 42px;
+}
+
+.script-eval-v5-illustration-hit {
+  border: 1px solid rgb(255 255 255 / 7%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4.5%), transparent),
+    var(--v5-panel-3);
+  box-shadow: var(--v5-shadow-soft);
+}
+
+.script-eval-v5-illustration-hit:hover,
+.script-eval-v5-illustration-hit:focus-visible {
+  border-color: var(--v5-line-strong);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 7%), transparent),
+    var(--v5-panel-3);
+}
+
+.script-eval-v5-upload-card-icon {
+  border: 1px solid var(--v5-line-strong);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 18%), rgb(0 255 136 / 8%)),
+    #101714;
+}
+
+.script-eval-v5-upload-card-title {
+  color: #f4fbf8;
+  font-size: 22px;
+  font-weight: 850;
+}
+
+.script-eval-v5-upload-card-desc {
+  color: #91a19b;
+}
+
+.script-eval-v5-loading {
+  min-width: min(520px, 92%);
+  border: 1px solid rgb(255 255 255 / 7%);
+  border-radius: var(--v5-radius-lg);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent),
+    var(--v5-panel-3);
+  box-shadow: var(--v5-shadow-soft);
+}
+
+.script-eval-v5-loading strong {
+  color: #f4fbf8;
+}
+
+.script-eval-v5-loading p {
+  margin: 0;
+  color: #8f9f99;
+}
+
+.script-eval-v5-loading-steps {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.script-eval-v5-loading-steps span {
+  border: 1px solid rgb(0 255 136 / 18%);
+  border-radius: 999px;
+  background: rgb(0 255 136 / 7%);
+  color: #b6ffdc;
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 780;
+}
+
+.script-eval-v5-error {
+  border-color: rgb(244 178 46 / 28%);
+  border-radius: var(--v5-radius-md);
+  background: rgb(244 178 46 / 8%);
+  color: #f4c767;
+  box-shadow: var(--v5-shadow-tight);
+}
+
+.script-eval-v5-error span:first-child {
+  color: #ffe0a1;
+  font-weight: 850;
+}
+
+.script-eval-v5-retry-btn {
+  border-color: rgb(244 178 46 / 32%);
+  color: #ffd47a;
+}
+
+.script-eval-report {
+  --report-panel: #151918;
+  --report-panel-2: #111514;
+  --report-row: #181e1c;
+  --report-border: rgb(255 255 255 / 8%);
+  --report-muted: #93a29c;
+  --report-dim: #67736f;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 3.2%), transparent 230px),
+    var(--report-bg);
+}
+
+.script-eval-report::before,
+.script-eval-report::after {
+  opacity: 0.75;
+}
+
+.script-eval-report--inside .script-eval-report__body {
+  padding: 18px 32px 46px;
+}
+
+.script-eval-report--inside .script-eval-report__hero {
+  align-items: center;
+  padding: 4px 0 22px;
+}
+
+.script-eval-report__score-block {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 18px 22px;
+  border: 1px solid rgb(255 255 255 / 7%);
+  border-radius: var(--v5-radius-lg);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 9%), rgb(0 255 136 / 2%)),
+    #101413;
+  box-shadow: var(--v5-shadow-tight);
+}
+
+.script-eval-report__score {
+  text-shadow: 0 0 28px rgb(0 255 136 / 14%);
+}
+
+.script-eval-report__score-total {
+  color: #7e8b86;
+}
+
+.script-eval-report__grade {
+  border-radius: 999px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.script-eval-report__beat {
+  color: #a6b4ae;
+}
+
+.script-eval-report__summary {
+  padding: 6px 0;
+}
+
+.script-eval-report__summary h1 {
+  color: #f6fbf9;
+  font-size: clamp(25px, 2vw, 32px);
+  font-weight: 900;
+}
+
+.script-eval-report__summary p {
+  color: #7d8b86;
+}
+
+.script-eval-report__desc {
+  max-width: 980px;
+  color: #cbd5d1 !important;
+  font-size: 14px !important;
+}
+
+.script-eval-report__chart-card,
+.script-eval-report__path-card {
+  border-color: var(--report-border);
+  border-radius: var(--v5-radius-lg);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 3.8%), transparent),
+    var(--report-panel);
+  box-shadow: var(--v5-shadow-tight);
+}
+
+.script-eval-report__card-head {
+  min-height: 50px;
+  padding-inline: 18px;
+  border-bottom: 1px solid rgb(255 255 255 / 5%);
+  color: #b5c0bc;
+  text-transform: none;
+}
+
+.script-eval-report__legend {
+  color: #7e8a86;
+}
+
+.script-eval-report__chart {
+  padding-bottom: 12px;
+}
+
+.script-eval-report__chart-grid {
+  gap: clamp(18px, 3vw, 52px);
+}
+
+.script-eval-report__bar-col {
+  cursor: pointer;
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.script-eval-report__bar-col:hover,
+.script-eval-report__bar-col:focus-visible {
+  outline: none;
+  transform: translateY(-2px);
+}
+
+.script-eval-report__bar-col.is-dimmed {
+  opacity: 0.36;
+}
+
+.script-eval-report__bar-fill {
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 22px rgb(0 255 136 / 12%);
+}
+
+.script-eval-report__bar-col:hover .script-eval-report__bar-fill,
+.script-eval-report__bar-col:focus-visible .script-eval-report__bar-fill {
+  filter: brightness(1.08);
+}
+
+.script-eval-report__bar-col strong {
+  color: #eef5f2;
+}
+
+.script-eval-report__bar-col > span {
+  color: #74807c;
+}
+
+.script-eval-report__chart-note {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 44px;
+  margin: 0 18px 18px;
+  border: 1px solid rgb(0 255 136 / 14%);
+  border-radius: var(--v5-radius-md);
+  background: rgb(0 255 136 / 5%);
+  color: #a9bbb4;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.script-eval-report__chart-note .anticon {
+  flex-shrink: 0;
+  color: var(--report-green);
+}
+
+.script-eval-report__findings {
+  gap: 18px;
+}
+
+.script-eval-report__finding-group p {
+  border: 1px solid rgb(255 255 255 / 5%);
+  border-radius: var(--v5-radius-md);
+  background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent), var(--report-row);
+  color: #d7e0dc;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.script-eval-report__path-table th {
+  color: #87938f;
+  font-size: 12px;
+}
+
+.script-eval-report__path-table td {
+  color: #d8e1dd;
+  font-size: 14px;
+}
+
+.script-eval-report__path-table tr:hover td {
+  background: rgb(255 255 255 / 2.8%);
+}
+
+.script-eval-v5-statusbar {
+  height: 34px;
+  border-top-color: var(--v5-line);
+  background: rgb(18 21 21 / 94%);
+  color: #7c8984;
+  font-weight: 700;
+}
+
+.script-eval-v5.is-loading .script-eval-v5-status-dot {
+  animation: v5-pulse 1.2s ease infinite;
+}
+
+.script-eval-v5.is-complete .script-eval-v5-status-dot,
+.script-eval-v5.is-ready .script-eval-v5-status-dot {
+  box-shadow: 0 0 16px rgb(0 255 136 / 34%);
+}
+
+@media (max-width: 1180px) {
+  .script-eval-report--inside .script-eval-report__body {
+    padding-inline: 24px;
+  }
+}
+
+@media (max-width: 900px) {
+  .script-eval-v5-page {
+    padding-left: 0;
+    padding-top: 74px;
+    scroll-padding-top: 74px;
+  }
+
+  .script-eval-v5-left {
+    flex-basis: 320px;
+  }
+
+  .script-eval-v5-right-content {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 680px) {
+  .script-eval-v5 {
+    overflow: hidden;
+  }
+
+  .script-eval-v5-page {
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .script-eval-v5-left {
+    flex: 0 0 auto;
+    overflow: visible;
+    max-height: none;
+    border-right: 0;
+    border-bottom: 1px solid var(--v5-line);
+  }
+
+  .script-eval-v5-lp-section.is-fill {
+    flex: 0 0 auto;
+  }
+
+  .script-eval-v5-history-list {
+    flex: 0 0 auto;
+    max-height: 180px;
+  }
+
+  .script-eval-v5-lp-section {
+    padding: 16px;
+  }
+
+  .script-eval-v5-upload-zone {
+    min-height: 148px;
+    padding: 18px 14px;
+  }
+
+  .script-eval-v5-upload-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    font-size: 30px;
+  }
+
+  .script-eval-v5-upload-text {
+    margin-bottom: 10px;
+    font-size: 15px;
+  }
+
+  .script-eval-v5-upload-btn {
+    padding: 9px 24px;
+    font-size: 14px;
+  }
+
+  .script-eval-v5-upload-hint {
+    margin-top: 8px;
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .script-eval-v5-info-item {
+    min-height: 36px;
+  }
+
+  .script-eval-v5-info-empty,
+  .script-eval-v5-history-empty {
+    min-height: 56px;
+  }
+
+  .script-eval-v5-lp-bottom {
+    gap: 8px;
+    padding: 12px 16px 14px;
+  }
+
+  .script-eval-v5-eval-btn {
+    min-height: 48px;
+    font-size: 16px;
+  }
+
+  .script-eval-v5-export-btn {
+    min-height: 42px;
+    font-size: 13px;
+  }
+
+  .script-eval-v5-right-topbar {
+    padding-inline: 16px;
+  }
+
+  .script-eval-v5-right {
+    flex: 0 0 auto;
+    min-height: 560px;
+    overflow: visible;
+  }
+
+  .script-eval-report--inside .script-eval-report__body {
+    padding: 16px 16px 36px;
+  }
+
+  .script-eval-report__score-block {
+    min-height: 150px;
+    padding: 16px;
+  }
+
+  .script-eval-report--inside .script-eval-report__score {
+    font-size: clamp(62px, 22vw, 82px);
+  }
+
+  .script-eval-report__score-total {
+    padding-top: 24px;
+    font-size: 18px;
+  }
+
+  .script-eval-report__summary h1 {
+    font-size: 24px;
+  }
+
+  .script-eval-report__chart-note {
+    margin-inline: 14px;
+  }
+
+  .script-eval-report__finding-group p,
+  .script-eval-report__path-table td {
+    font-size: 13px;
+  }
+}

src/styles/themes/dark-green.css

@@ -5356,7 +5356,7 @@
 }
 
 .web-shell[data-ui-theme="dark-green"] .auth-page__brand {
-  color: var(--fg-body);
+  color: var(--accent);
   font-size: clamp(44px, 7vw, 76px);
   line-height: 0.96;
 }
@@ -8945,3 +8945,407 @@
 ) {
   color: rgba(232, 240, 235, 0.62);
 }
+
+/* Canvas SaaS polish: refined production-tool surfaces without changing canvas behavior. */
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas {
+  background:
+    radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.055), transparent 30%),
+    radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.035), transparent 28%),
+    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
+    var(--dg-page);
+  background-size:
+    auto,
+    auto,
+    24px 24px,
+    24px 24px,
+    auto;
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar,
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls {
+  border-color: rgba(255, 255, 255, 0.105);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
+    rgba(17, 20, 21, 0.88);
+  box-shadow:
+    0 16px 42px rgba(0, 0, 0, 0.26),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(16px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar {
+  min-height: 42px;
+  border-radius: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__name {
+  color: var(--fg-strong);
+  font-size: 13px;
+  font-weight: 820;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status,
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status {
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is(
+  .studio-canvas-project-bar__rename,
+  .studio-canvas-project-bar__recent,
+  .studio-canvas-project-bar__export,
+  .studio-canvas-project-bar__publish
+) {
+  border-color: rgba(255, 255, 255, 0.095);
+  background: rgba(255, 255, 255, 0.035);
+  color: var(--fg-muted);
+  box-shadow: none;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is(
+  .studio-canvas-project-bar__rename,
+  .studio-canvas-project-bar__recent,
+  .studio-canvas-project-bar__export,
+  .studio-canvas-project-bar__publish
+):hover:not(:disabled) {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save {
+  border-color: rgba(var(--accent-rgb), 0.72);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls {
+  gap: 3px;
+  padding: 5px;
+  border-radius: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button {
+  min-width: 32px;
+  height: 30px;
+  border-radius: 9px;
+  color: var(--fg-muted);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button:hover {
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls__pct {
+  color: var(--fg-body) !important;
+  font-weight: 780;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-node__card,
+  .studio-canvas-image-node__card,
+  .studio-canvas-video-node__preview
+) {
+  border-color: rgba(255, 255, 255, 0.11);
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 54%),
+    rgba(17, 20, 21, 0.96);
+  box-shadow:
+    0 18px 42px rgba(0, 0, 0, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-node.is-selected .studio-canvas-text-node__card,
+  .studio-canvas-image-node.is-selected .studio-canvas-image-node__card,
+  .studio-canvas-video-node.is-selected .studio-canvas-video-node__preview
+) {
+  border-color: rgba(var(--accent-rgb), 0.72);
+  box-shadow:
+    0 0 0 2px rgba(var(--accent-rgb), 0.28),
+    0 20px 48px rgba(0, 0, 0, 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-node__title,
+  .studio-canvas-image-node__title,
+  .studio-canvas-video-node__title
+) {
+  gap: 7px;
+  color: rgba(232, 240, 235, 0.68) !important;
+  font-size: 12px;
+  font-weight: 760;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-composer,
+  .studio-canvas-image-composer,
+  .studio-canvas-video-composer,
+  .studio-canvas-context-menu,
+  .studio-canvas-node-context-menu,
+  .studio-canvas-selection-context-menu,
+  .studio-canvas-add-node-menu,
+  .studio-canvas-save-asset__modal,
+  .studio-canvas-save-asset__cover-menu,
+  .studio-canvas-save-asset__select-menu,
+  .canvas-select-chip__dropdown
+) {
+  border-color: rgba(255, 255, 255, 0.11);
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
+    rgba(18, 21, 22, 0.96);
+  box-shadow:
+    0 18px 46px rgba(0, 0, 0, 0.26),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035);
+  backdrop-filter: blur(16px);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-composer textarea,
+  .studio-canvas-image-composer textarea,
+  .studio-canvas-video-composer textarea,
+  .studio-canvas-text-node__inline-input
+) {
+  color: var(--fg-body);
+  line-height: 1.55;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-composer__footer button,
+  .studio-canvas-image-composer__footer button,
+  .studio-canvas-image-composer__tools button,
+  .studio-canvas-video-composer__tabs button,
+  .studio-canvas-video-composer__tools button,
+  .studio-canvas-video-composer__footer button,
+  .studio-canvas-context-menu button,
+  .studio-canvas-node-context-menu button,
+  .studio-canvas-selection-context-menu button,
+  .studio-canvas-add-node-menu button,
+  .studio-canvas-save-asset__head button,
+  .studio-canvas-save-asset__cover-menu button,
+  .studio-canvas-save-asset__select-menu button,
+  .studio-canvas-save-asset__existing-grid button,
+  .canvas-select-chip__trigger,
+  .canvas-select-chip__option
+) {
+  border-color: rgba(255, 255, 255, 0.095) !important;
+  background: rgba(255, 255, 255, 0.035) !important;
+  color: var(--fg-body) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-composer__footer button:hover,
+  .studio-canvas-image-composer__footer button:hover,
+  .studio-canvas-image-composer__tools button:hover,
+  .studio-canvas-video-composer__tabs button:hover,
+  .studio-canvas-video-composer__tools button:hover,
+  .studio-canvas-video-composer__footer button:hover,
+  .studio-canvas-context-menu button:hover:not(:disabled),
+  .studio-canvas-node-context-menu button:hover:not(:disabled),
+  .studio-canvas-selection-context-menu button:hover:not(:disabled),
+  .studio-canvas-add-node-menu button:hover:not(:disabled),
+  .studio-canvas-save-asset__head button:hover,
+  .studio-canvas-save-asset__cover-menu button:hover,
+  .studio-canvas-save-asset__select-menu button:hover,
+  .studio-canvas-save-asset__existing-grid button:hover,
+  .canvas-select-chip__trigger:hover,
+  .canvas-select-chip__option:hover,
+  .canvas-select-chip__option.is-active
+) {
+  border-color: rgba(var(--accent-rgb), 0.34) !important;
+  background: rgba(var(--accent-rgb), 0.085) !important;
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-composer__send,
+  .studio-canvas-image-composer__footer .studio-canvas-text-composer__send,
+  .studio-canvas-video-composer__footer > button:last-child,
+  .studio-canvas-save-asset__create
+) {
+  border-color: rgba(var(--accent-rgb), 0.72) !important;
+  background: var(--accent) !important;
+  color: var(--dg-button-text) !important;
+  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-generate-button:not(.is-ready) {
+  border-color: rgba(255, 255, 255, 0.075) !important;
+  background: rgba(255, 255, 255, 0.028) !important;
+  color: var(--fg-soft) !important;
+  box-shadow: none !important;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-node__connector span,
+  .studio-canvas-image-node__connector span,
+  .studio-canvas-video-node__connector span,
+  .studio-canvas-text-node__glyph span
+) {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is(
+  .studio-canvas-text-node__connector:hover span,
+  .studio-canvas-image-node__connector:hover span,
+  .studio-canvas-video-node__connector:hover span
+) {
+  border-color: rgba(var(--accent-rgb), 0.56);
+  background: rgba(var(--accent-rgb), 0.14);
+  color: var(--accent) !important;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links path {
+  stroke: rgba(var(--accent-rgb), 0.48);
+  stroke-width: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links circle {
+  fill: var(--accent);
+  stroke: rgba(10, 14, 13, 0.95);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-selection-box {
+  border-color: rgba(var(--accent-rgb), 0.72);
+  background: rgba(var(--accent-rgb), 0.11);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-resize-handle {
+  border-color: rgba(var(--accent-rgb), 0.72);
+  background: var(--accent);
+  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.18);
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar {
+    top: 70px;
+    right: 12px;
+    left: 12px;
+    max-width: none;
+    overflow-x: auto;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls {
+    bottom: 14px;
+    left: 12px;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    align-items: center;
+    gap: 7px;
+    min-height: 82px;
+    padding: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__identity {
+    grid-column: 1 / 4;
+    max-width: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status {
+    display: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename {
+    grid-column: 4;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent {
+    grid-column: 1;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export {
+    grid-column: 2;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save {
+    grid-column: 3;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish {
+    grid-column: 4;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is(
+    .studio-canvas-project-bar__rename,
+    .studio-canvas-project-bar__recent,
+    .studio-canvas-project-bar__export,
+    .studio-canvas-project-bar__save,
+    .studio-canvas-project-bar__publish
+  ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    width: 100%;
+    min-width: 0;
+    min-height: 32px;
+    padding: 0 7px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 780;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename::after {
+    content: "编辑";
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save span {
+    display: inline;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span,
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span {
+    width: 0;
+    max-width: 0;
+    overflow: hidden;
+    font-size: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent::after {
+    font-size: 11px;
+    content: "最近";
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export::after {
+    font-size: 11px;
+    content: "导出";
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish::after {
+    font-size: 11px;
+    content: "提交";
+  }
+
+  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent em {
+    display: inline-flex;
+    min-width: 16px;
+    height: 16px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    border-radius: 999px;
+    background: rgba(var(--accent-rgb), 0.16);
+    color: var(--accent);
+    font-size: 10px;
+  }
+}