diff --git a/docs/content/docs/overview/features.mdx b/docs/content/docs/overview/features.mdx
index f0690077a..91c31956b 100644
--- a/docs/content/docs/overview/features.mdx
+++ b/docs/content/docs/overview/features.mdx
@@ -26,7 +26,7 @@ description: 当前项目已实现的核心工作台能力与使用入口
 
 ## 工作区账号容量
 
-登录后，首页侧栏左下角用户头像上方显示账号文件容量进度：已用容量、剩余容量和总容量，细进度条表示已用比例。用量达到 70% 变为警告色，达到 90% 或已满变为危险色。点击进入素材库；资产页页头仍展示同一用量。收起侧栏时保留细进度条，悬停可看到已用、剩余与总容量。统计包含素材文件和 Agent 会话附件。
+登录后，首页侧栏左下角用户头像上方显示账号文件容量进度：左侧硬盘图标，右侧已用容量与总容量，进度条旁显示剩余容量。用量达到 70% 变为警告色，达到 90% 或已满变为危险色。点击进入素材库；资产页页头仍展示同一用量。收起侧栏时保留图标和细进度条，悬停可看到已用、剩余与总容量。统计包含素材文件和 Agent 会话附件。
 
 ### 相关实现
 
diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx
index de9dfb233..90705a228 100644
--- a/docs/content/docs/progress/pending-test.mdx
+++ b/docs/content/docs/progress/pending-test.mdx
@@ -68,8 +68,8 @@ description: 当前项目已实现功能的手工验证清单与未确认边界
 
 登录后首页侧栏左下角用户头像上方展示账号文件容量。待登录工作台后：
 
-- [ ] 展开侧栏时能看到已用容量、剩余容量、总容量和进度条；数字为真实配额，不是占位。
-- [ ] 收起侧栏后头像上方仍有细进度条，悬停能看到剩余/总容量。
+- [ ] 展开侧栏时能看到硬盘图标、已用容量、剩余容量、总容量和进度条；数字为真实配额，不是占位。
+- [ ] 收起侧栏后头像上方仍有硬盘图标和细进度条，悬停能看到剩余/总容量。
 - [ ] 用量到 70% 变警告色，到 90% 或已满变危险色；点进度条进入资产页，两边数字一致。
 - [ ] 未登录不显示该进度；接口失败时可重试。
 
diff --git a/web/src/components/layout/workspace-credit-gift-mark.tsx b/web/src/components/layout/workspace-credit-gift-mark.tsx
new file mode 100644
index 000000000..e5794bbe1
--- /dev/null
+++ b/web/src/components/layout/workspace-credit-gift-mark.tsx
@@ -0,0 +1,44 @@
+import { useId } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function WorkspaceCreditGiftMark({ className }: { className?: string }) {
+    const uid = useId().replace(/:/g, "");
+    const box = `${uid}-box`;
+    const lid = `${uid}-lid`;
+    const ribbon = `${uid}-ribbon`;
+
+    return (
+        <span className={cn("app-workspace-credit-gift", className)} aria-hidden="true">
+            <svg viewBox="0 0 32 32" fill="none">
+                <defs>
+                    <linearGradient id={box} x1="8" y1="14" x2="24" y2="28" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#FFB34A" />
+                        <stop offset="1" stopColor="#F26B12" />
+                    </linearGradient>
+                    <linearGradient id={lid} x1="6" y1="10" x2="26" y2="16" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#FFC66A" />
+                        <stop offset="1" stopColor="#FF8A28" />
+                    </linearGradient>
+                    <linearGradient id={ribbon} x1="16" y1="6" x2="16" y2="28" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#5FE8D8" />
+                        <stop offset="1" stopColor="#12B8A8" />
+                    </linearGradient>
+                </defs>
+                <ellipse cx="16" cy="28.5" rx="9.2" ry="1.6" fill="#7A3A00" opacity=".22" />
+                <rect x="6.5" y="14" width="19" height="13.2" rx="2.4" fill={`url(#${box})`} />
+                <path d="M23.4 16.4v8.4c0 1.3-1 2.4-2.3 2.4h.1V14c1.3.2 2.2 1.2 2.2 2.4Z" fill="#7A3A00" opacity=".16" />
+                <rect x="14.4" y="14" width="3.2" height="13.2" fill={`url(#${ribbon})`} />
+                <rect x="6.5" y="19.3" width="19" height="2.8" fill={`url(#${ribbon})`} />
+                <rect x="5.4" y="10.3" width="21.2" height="5.5" rx="2.1" fill={`url(#${lid})`} />
+                <rect x="5.4" y="10.3" width="21.2" height="2.1" rx="2.1" fill="#fff" opacity=".24" />
+                <rect x="14.4" y="10.3" width="3.2" height="5.5" fill={`url(#${ribbon})`} />
+                <path d="M15.8 11.1C10.4 5.6 7.2 11.8 12.8 13.7c1.6.5 2.4 0 3-1.2Z" fill="#4FE3D4" />
+                <path d="M16.2 11.1C21.6 5.6 24.8 11.8 19.2 13.7c-1.6.5-2.4 0-3-1.2Z" fill="#14C4B4" />
+                <rect x="14.7" y="9.3" width="2.6" height="2.6" rx=".8" fill="#0E9E92" />
+                <path d="M14.9 12.1 11.6 16.4l3.8-3.1Z" fill="#3FDDD0" />
+                <path d="M17.1 12.1 20.4 16.4l-3.8-3.1Z" fill="#12B6A6" />
+            </svg>
+        </span>
+    );
+}
diff --git a/web/src/components/layout/workspace-sidebar-storage-meter.tsx b/web/src/components/layout/workspace-sidebar-storage-meter.tsx
index a32a2bf9d..1f1e59bad 100644
--- a/web/src/components/layout/workspace-sidebar-storage-meter.tsx
+++ b/web/src/components/layout/workspace-sidebar-storage-meter.tsx
@@ -1,3 +1,4 @@
+import { HardDrive } from "lucide-react";
 import { Link } from "react-router";
 
 import { useAccountFileStorageUsage } from "@/hooks/use-account-file-storage-usage";
@@ -5,6 +6,14 @@ import { accountStorageMeter } from "@/lib/account-storage-usage";
 import { cn } from "@/lib/utils";
 import { preloadWorkspaceRoute } from "@/lib/workspace-route-modules";
 
+function StorageGlyph() {
+    return (
+        <span className="app-workspace-sidebar-storage-icon" aria-hidden="true">
+            <HardDrive strokeWidth={1.75} />
+        </span>
+    );
+}
+
 export function WorkspaceSidebarStorageMeter({ collapsed }: { collapsed: boolean }) {
     const query = useAccountFileStorageUsage();
     const meter = accountStorageMeter(query.data);
@@ -13,13 +22,30 @@ export function WorkspaceSidebarStorageMeter({ collapsed }: { collapsed: boolean
     const totalText = query.data ? `共 ${meter.totalLabel}` : "";
     const summary = query.data ? `${usedText}，${remainingText}，${totalText}` : usedText;
 
+    const track = (
+        <span
+            className="app-workspace-sidebar-storage-track"
+            role="progressbar"
+            aria-label="账号文件容量使用进度"
+            aria-valuemin={0}
+            aria-valuemax={query.data?.totalBytes ?? 0}
+            aria-valuenow={query.data ? Math.min(query.data.usedBytes, query.data.totalBytes) : 0}
+            aria-valuetext={summary}
+        >
+            <span style={{ width: `${meter.percent}%` }} />
+        </span>
+    );
+
     if (query.isError && !query.data) {
         return (
             <div className={cn("app-workspace-sidebar-storage is-error", collapsed && "is-collapsed")}>
                 {collapsed ? (
-                    <button type="button" title="容量统计暂时不可用，点击重试" aria-label="重试加载账号容量" onClick={() => void query.refetch()} />
+                    <button type="button" title="容量统计暂时不可用，点击重试" aria-label="重试加载账号容量" onClick={() => void query.refetch()}>
+                        <StorageGlyph />
+                    </button>
                 ) : (
                     <>
+                        <StorageGlyph />
                         <span>容量暂不可用</span>
                         <button type="button" onClick={() => void query.refetch()}>
                             重试
@@ -47,26 +73,23 @@ export function WorkspaceSidebarStorageMeter({ collapsed }: { collapsed: boolean
             onFocus={() => preloadWorkspaceRoute("/assets")}
             onPointerEnter={() => preloadWorkspaceRoute("/assets")}
         >
-            {collapsed ? null : (
-                <span className="app-workspace-sidebar-storage-copy">
-                    <span className="app-workspace-sidebar-storage-meta">
-                        <span className="app-workspace-sidebar-storage-used">{usedText}</span>
-                        {totalText ? <span className="app-workspace-sidebar-storage-total">{totalText}</span> : null}
+            <StorageGlyph />
+            {collapsed ? (
+                track
+            ) : (
+                <span className="app-workspace-sidebar-storage-body">
+                    <span className="app-workspace-sidebar-storage-copy">
+                        <span className="app-workspace-sidebar-storage-meta">
+                            <span className="app-workspace-sidebar-storage-used">{usedText}</span>
+                            {totalText ? <span className="app-workspace-sidebar-storage-total">{totalText}</span> : null}
+                        </span>
+                    </span>
+                    <span className="app-workspace-sidebar-storage-foot">
+                        {track}
+                        {remainingText ? <span className="app-workspace-sidebar-storage-remain">{remainingText}</span> : null}
                     </span>
-                    {remainingText ? <span className="app-workspace-sidebar-storage-remain">{remainingText}</span> : null}
                 </span>
             )}
-            <span
-                className="app-workspace-sidebar-storage-track"
-                role="progressbar"
-                aria-label="账号文件容量使用进度"
-                aria-valuemin={0}
-                aria-valuemax={query.data?.totalBytes ?? 0}
-                aria-valuenow={query.data ? Math.min(query.data.usedBytes, query.data.totalBytes) : 0}
-                aria-valuetext={summary}
-            >
-                <span style={{ width: `${meter.percent}%` }} />
-            </span>
         </Link>
     );
 }
diff --git a/web/src/components/layout/workspace-top-bar.tsx b/web/src/components/layout/workspace-top-bar.tsx
index 6dba15874..0f9e066d3 100644
--- a/web/src/components/layout/workspace-top-bar.tsx
+++ b/web/src/components/layout/workspace-top-bar.tsx
@@ -1,8 +1,9 @@
-import { Coins, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { Link, useLocation } from "react-router";
 
 import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
 import { WorkspaceAccountMenu } from "@/components/layout/workspace-account-menu";
+import { WorkspaceCreditGiftMark } from "@/components/layout/workspace-credit-gift-mark";
 import { WorkspaceTopBarExtensionSlot } from "@/components/layout/workspace-top-bar-extension";
 import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
 import { useThemeStore } from "@/stores/use-theme-store";
@@ -48,7 +49,7 @@ export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen:
             <WorkspaceTopBarExtensionSlot />
             <div className="app-workspace-topbar-actions">
                 {creditsEnabled ? <button type="button" className="app-workspace-topbar-credit-pill" aria-label={`打开积分中心，可用 ${balance} 积分`} onClick={() => openWorkspaceWallet()}>
-                    <Coins aria-hidden="true" />
+                    <WorkspaceCreditGiftMark />
                     <span>积分</span>
                     <strong>{balance}</strong>
                 </button> : null}
diff --git a/web/src/pages/canvas/canvas-project-top-bar.tsx b/web/src/pages/canvas/canvas-project-top-bar.tsx
index 53efec4e1..9245178ed 100644
--- a/web/src/pages/canvas/canvas-project-top-bar.tsx
+++ b/web/src/pages/canvas/canvas-project-top-bar.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { Link } from "react-router";
-import { Clapperboard, CloudDownload, CloudUpload, Coins, CopyPlus, Focus, FolderKanban, Gauge, Home, LayoutGrid, LoaderCircle, Menu, Pencil, Plus, Redo2, Save, Search, Share2, Trash2, Undo2, Upload } from "lucide-react";
+import { Clapperboard, CloudDownload, CloudUpload, CopyPlus, Focus, FolderKanban, Gauge, Home, LayoutGrid, LoaderCircle, Menu, Pencil, Plus, Redo2, Save, Search, Share2, Trash2, Undo2, Upload } from "lucide-react";
 import { Button, Dropdown, Tooltip } from "antd";
 
+import { WorkspaceCreditGiftMark } from "@/components/layout/workspace-credit-gift-mark";
 import { useWalletBalance } from "@/hooks/use-wallet-balance";
 import { openWorkspaceWallet } from "@/lib/workspace-wallet";
 import { canvasDockStyle } from "@/lib/canvas/canvas-aceternity-style";
@@ -241,7 +242,7 @@ export function CanvasTopBar({
                                 aria-label="打开积分中心"
                                 onClick={() => openWorkspaceWallet()}
                             >
-                                {refreshing && availableMicrocredits === null ? <LoaderCircle className="size-3.5 animate-spin opacity-60" style={{ color: theme.accent.primary }} /> : <Coins className="size-3.5" style={{ color: theme.accent.primary }} />}
+                                {refreshing && availableMicrocredits === null ? <LoaderCircle className="size-3.5 animate-spin opacity-60" style={{ color: theme.accent.primary }} /> : <WorkspaceCreditGiftMark className="is-compact" />}
                                 <span>{availableMicrocredits === null ? "--" : (availableMicrocredits / 1_000_000).toLocaleString("zh-CN", { maximumFractionDigits: 3 })}</span>
                             </button>
                         </CanvasTopBarTooltip>
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 7e5731989..ac24175ff 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1863,6 +1863,10 @@
         background: var(--dock-command-hover) !important;
     }
 
+    .canvas-topbar-action:hover:not(:disabled) .app-workspace-credit-gift {
+        transform: translateY(-1px) rotate(-8deg);
+    }
+
     .canvas-topbar-project-cluster {
         width: max-content;
         max-width: min(360px, calc(50vw - 88px));
@@ -16099,11 +16103,12 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 .app-user-workspace .app-workspace-topbar-credit-pill {
     display: inline-flex;
     flex-shrink: 0;
+    overflow: visible;
     white-space: nowrap;
     height: 36px;
     align-items: center;
-    gap: 7px;
-    padding: 0 12px;
+    gap: 8px;
+    padding: 0 12px 0 8px;
     border: 1px solid rgba(0, 0, 0, .075);
     border-radius: 999px;
     background: #fff;
@@ -16113,15 +16118,46 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 }
 
 .app-user-workspace .app-workspace-topbar-credit-pill:hover {
-    border-color: rgba(91, 78, 224, .26);
-    background: #fbfaff;
+    border-color: color-mix(in srgb, #ff8a28 34%, transparent);
+    background: #fffaf4;
     transform: translateY(-1px);
 }
 
-.app-user-workspace .app-workspace-topbar-credit-pill svg {
-    width: 15px;
-    height: 15px;
-    color: #6a58e8;
+.app-user-workspace .app-workspace-credit-gift {
+    display: grid;
+    width: 24px;
+    height: 24px;
+    flex: none;
+    place-items: center;
+    filter: drop-shadow(0 1px 1px rgba(92, 42, 0, .22));
+    transform-origin: 50% 70%;
+    transition: transform .18s ease;
+}
+
+.app-user-workspace .app-workspace-credit-gift svg {
+    width: 24px;
+    height: 24px;
+    overflow: visible;
+    color: unset;
+}
+
+.app-user-workspace .app-workspace-credit-gift.is-compact,
+.app-user-workspace .app-workspace-credit-gift.is-compact svg {
+    width: 18px;
+    height: 18px;
+}
+
+.app-user-workspace .app-workspace-topbar-credit-pill:hover .app-workspace-credit-gift {
+    transform: translateY(-1px) rotate(-8deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .app-user-workspace .app-workspace-topbar-credit-pill,
+    .app-user-workspace .app-workspace-credit-gift,
+    .app-user-workspace .app-workspace-topbar-credit-pill:hover .app-workspace-credit-gift {
+        transform: none;
+        transition: none;
+    }
 }
 
 .app-user-workspace .app-workspace-topbar-credit-pill strong {
@@ -16268,9 +16304,9 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 .app-user-workspace .app-workspace-sidebar-storage {
     display: flex;
     min-width: 0;
-    flex-direction: column;
-    gap: 6px;
-    padding: 8px 8px 6px;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
     border-radius: 12px;
     color: inherit;
     text-decoration: none;
@@ -16282,11 +16318,40 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     background: var(--user-surface-hover, rgba(72, 72, 73, .055));
 }
 
+.app-user-workspace .app-workspace-sidebar-storage:hover .app-workspace-sidebar-storage-icon,
+.app-user-workspace .app-workspace-sidebar-storage:focus-visible .app-workspace-sidebar-storage-icon {
+    color: var(--user-ink, var(--foreground));
+}
+
 .app-user-workspace .app-workspace-sidebar-storage:focus-visible {
     outline: 2px solid var(--control-focus-ring);
     outline-offset: 2px;
 }
 
+.app-user-workspace .app-workspace-sidebar-storage-icon {
+    display: grid;
+    width: 32px;
+    height: 32px;
+    flex: none;
+    place-items: center;
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--user-ink, var(--foreground)) 8%, transparent);
+    color: color-mix(in srgb, var(--user-ink, var(--foreground)) 78%, transparent);
+}
+
+.app-user-workspace .app-workspace-sidebar-storage-icon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.app-user-workspace .app-workspace-sidebar-storage-body {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 6px;
+}
+
 .app-user-workspace .app-workspace-sidebar-storage-copy {
     display: flex;
     min-width: 0;
@@ -16294,6 +16359,13 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     gap: 2px;
 }
 
+.app-user-workspace .app-workspace-sidebar-storage-foot {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 8px;
+}
+
 .app-user-workspace .app-workspace-sidebar-storage-meta {
     display: flex;
     min-width: 0;
@@ -16326,12 +16398,14 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 }
 
 .app-user-workspace .app-workspace-sidebar-storage-remain {
-    min-width: 0;
+    line-height: 1;
 }
 
 .app-user-workspace .app-workspace-sidebar-storage-track {
     display: block;
-    height: 5px;
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 4px;
     overflow: hidden;
     border-radius: 999px;
     background: color-mix(in srgb, var(--user-ink, var(--foreground)) 10%, transparent);
@@ -16353,18 +16427,28 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     background: color-mix(in srgb, var(--user-ink, var(--foreground)) 8%, transparent);
 }
 
-.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-used {
+.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-used,
+.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-icon {
     color: var(--status-warning);
 }
 
+.app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-icon {
+    background: color-mix(in srgb, var(--status-warning) 14%, transparent);
+}
+
 .app-user-workspace .app-workspace-sidebar-storage.is-warn .app-workspace-sidebar-storage-track > span {
     background: var(--status-warning);
 }
 
-.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-used {
+.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-used,
+.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-icon {
     color: var(--status-error);
 }
 
+.app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-icon {
+    background: color-mix(in srgb, var(--status-error) 14%, transparent);
+}
+
 .app-user-workspace .app-workspace-sidebar-storage.is-critical .app-workspace-sidebar-storage-track > span {
     background: var(--progress-bar-fill-error);
 }
@@ -16379,6 +16463,11 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
     font-size: var(--fs-tiny);
 }
 
+.app-user-workspace .app-workspace-sidebar-storage.is-error .app-workspace-sidebar-storage-icon {
+    color: color-mix(in srgb, var(--status-error) 72%, transparent);
+    background: color-mix(in srgb, var(--status-error) 12%, transparent);
+}
+
 .app-user-workspace .app-workspace-sidebar-storage.is-error button {
     color: var(--user-ink, var(--foreground));
     text-decoration: underline;
@@ -16391,26 +16480,43 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 }
 
 .app-user-workspace .app-workspace-sidebar-storage.is-collapsed {
-    width: 36px;
-    padding: 8px 0 6px;
+    width: 40px;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 0;
     margin-inline: auto;
 }
 
+.app-user-workspace .app-workspace-sidebar-storage.is-collapsed .app-workspace-sidebar-storage-track {
+    flex: none;
+    width: 32px;
+}
+
 .app-user-workspace .app-workspace-sidebar-storage.is-collapsed.is-error {
-    width: 36px;
+    width: 40px;
     min-height: 0;
-    padding: 2px 0 4px;
+    padding: 2px 0;
 }
 
 .app-user-workspace .app-workspace-sidebar-storage.is-collapsed.is-error button {
-    display: block;
-    width: 36px;
-    height: 5px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--status-error) 48%, transparent);
+    display: grid;
+    width: 32px;
+    height: 32px;
+    place-items: center;
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--status-error) 14%, transparent);
+    color: var(--status-error);
     text-decoration: none;
 }
 
+.app-user-workspace .app-workspace-sidebar-storage.is-collapsed.is-error .app-workspace-sidebar-storage-icon {
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    color: inherit;
+}
+
 .app-user-workspace .app-workspace-sidebar-profile-row {
     display: flex;
     min-width: 0;
@@ -18604,6 +18710,11 @@ html:not(.dark) .creation-home .creation-user-message-copy-wrap { box-shadow: 0
 }
 .app-user-workspace .app-workspace-topbar-breadcrumb { color: var(--user-ink-muted) !important; }
 .app-user-workspace .app-workspace-topbar-credit-pill { border-color: var(--user-border) !important; background: var(--user-surface) !important; color: var(--user-ink-muted) !important; }
+.app-user-workspace .app-workspace-topbar-credit-pill:hover,
+.app-user-workspace .app-workspace-topbar-credit-pill:focus-visible {
+    border-color: color-mix(in srgb, #ff8a28 36%, var(--user-border)) !important;
+    background: color-mix(in srgb, #ff8a28 10%, var(--user-surface)) !important;
+}
 .app-user-workspace .app-workspace-topbar-credit-pill strong { color: var(--user-ink) !important; }
 
 /* One scroll owner on the creation route. */
diff --git a/web/src/styles/workspace-product.css b/web/src/styles/workspace-product.css
index b3be23f03..b2758925c 100644
--- a/web/src/styles/workspace-product.css
+++ b/web/src/styles/workspace-product.css
@@ -469,7 +469,7 @@
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-nav-link .app-workspace-nav-main > svg { width: 18px !important; height: 18px !important; flex: 0 0 18px; }
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-account { width: 100%; align-items: center; }
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-checkin { width: 48px; }
-.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-storage { width: 36px; }
+.app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-storage { width: 40px; }
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile-row { width: 100%; justify-content: center; }
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-profile { width: 48px; min-width: 48px; flex: 0 0 48px; margin-inline: auto; }
 .app-user-workspace .app-workspace-sidebar-nav.is-collapsed .app-workspace-sidebar-notification-spacer { display: none; }
diff --git a/web/test/workspace-credit-gift.test.ts b/web/test/workspace-credit-gift.test.ts
new file mode 100644
index 000000000..d19bf449a
--- /dev/null
+++ b/web/test/workspace-credit-gift.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("workspace credit gift mark", () => {
+    test("top-bar credit entries use a product gift instead of a lucide coin", () => {
+        const topBar = readFileSync(resolve(import.meta.dir, "../src/components/layout/workspace-top-bar.tsx"), "utf8");
+        const canvas = readFileSync(resolve(import.meta.dir, "../src/pages/canvas/canvas-project-top-bar.tsx"), "utf8");
+        const mark = readFileSync(resolve(import.meta.dir, "../src/components/layout/workspace-credit-gift-mark.tsx"), "utf8");
+        const css = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+
+        expect(topBar).toContain("<WorkspaceCreditGiftMark />");
+        expect(topBar).not.toContain("Coins");
+        expect(canvas).toContain("<WorkspaceCreditGiftMark className=\"is-compact\" />");
+        expect(canvas).not.toContain("Coins");
+        expect(mark).toContain("#FFB34A");
+        expect(mark).toContain("#12B8A8");
+        expect(css).toContain(".app-workspace-credit-gift");
+        expect(css).toContain("rotate(-8deg)");
+    });
+});
diff --git a/web/test/workspace-sidebar-storage.test.ts b/web/test/workspace-sidebar-storage.test.ts
index a89108a43..5234921c9 100644
--- a/web/test/workspace-sidebar-storage.test.ts
+++ b/web/test/workspace-sidebar-storage.test.ts
@@ -55,10 +55,13 @@ describe("workspace sidebar storage meter", () => {
 
         expect(sidebar).toContain("<WorkspaceSidebarStorageMeter collapsed={collapsed} />");
         expect(sidebar.indexOf("WorkspaceSidebarStorageMeter")).toBeLessThan(sidebar.indexOf("app-workspace-sidebar-profile-row"));
+        expect(meter).toContain("HardDrive");
+        expect(meter).toContain("app-workspace-sidebar-storage-icon");
         expect(meter).toContain("已用 ${meter.usedLabel}");
         expect(meter).toContain("剩余 ${meter.remainingLabel}");
         expect(meter).toContain("共 ${meter.totalLabel}");
         expect(meter).toContain('to="/assets"');
+        expect(css).toContain(".app-workspace-sidebar-storage-icon");
         expect(css).toMatch(/\.app-workspace-sidebar-storage-used\s*\{[^}]*font-variant-numeric:\s*tabular-nums/s);
         expect(css).toContain(".app-workspace-sidebar-storage.is-warn");
         expect(css).toContain(".app-workspace-sidebar-storage.is-critical");