From 2e5344618af30d9213cfe13ba7e347bb0cbb6623 Mon Sep 17 00:00:00 2001
From: shihao <3127647737@qq.com>
Date: Thu, 23 Apr 2026 14:12:39 +0800
Subject: [PATCH] feat: refine ui with minimax-inspired style

---
 .../app/(dashboard)/workspace/create/page.tsx |   4 +-
 frontend-web/src/app/admin/login/page.tsx     |   2 +-
 frontend-web/src/app/fonts.ts                 |  10 +-
 frontend-web/src/app/globals.css              | 928 ++++++++++--------
 frontend-web/src/app/login/page.tsx           |   4 +-
 frontend-web/src/components/admin-shell.tsx   |   6 +-
 frontend-web/src/components/register-form.tsx |   2 +-
 frontend-web/src/components/site-shell.tsx    |  12 +-
 8 files changed, 551 insertions(+), 417 deletions(-)

diff --git a/frontend-web/src/app/(dashboard)/workspace/create/page.tsx b/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
index 514895a..06310a7 100644
--- a/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
+++ b/frontend-web/src/app/(dashboard)/workspace/create/page.tsx
@@ -357,7 +357,7 @@ export default function CreateTaskPage() {
             <span className="header-kicker">AI Video Studio</span>
             <h3>生成工作台</h3>
             <p className="muted">
-              以“模型选型 → 提示词 → 素材引用 → 任务提交”的顺序完成一次创作。平台连接信息被隐藏，只保留真正影响出片的参数。
+              以“模型选型 → 提示词 → 素材引用 → 任务提交”的顺序完成一次创作。页面像一组能力卡片矩阵，只保留真正影响出片的参数。
             </p>
           </div>
           <div className="row">
@@ -664,7 +664,7 @@ export default function CreateTaskPage() {
           <div>
             <span className="header-kicker">Asset Dock</span>
             <h3>素材库</h3>
-            <p className="muted">上传后即时入库，边看缩略图边做引用，创作参数和素材选择留在同一画面里。</p>
+            <p className="muted">上传后即时入库，边看缩略图边做引用，让素材选择像浏览 AI 能力图库一样直接。</p>
           </div>
           <div className="workspace-tabs">
             <span className="tab-chip active">素材库</span>
diff --git a/frontend-web/src/app/admin/login/page.tsx b/frontend-web/src/app/admin/login/page.tsx
index 896e2db..fa55651 100644
--- a/frontend-web/src/app/admin/login/page.tsx
+++ b/frontend-web/src/app/admin/login/page.tsx
@@ -37,7 +37,7 @@ export default function AdminLoginPage() {
           <div className="brand-kicker">Ops Console</div>
           <h1 className="headline">把模型、价格、奖励、订单和任务链路收进一块控制台。</h1>
           <p className="subcopy">
-            视觉上参考 `Linear/Vercel` 式精密控制台，信息密度更高，但仍保留足够留白，让配置、审计和异常排查更好读。
+            这轮后台视觉沿用 `MiniMax-DESIGN.md` 的轻白产品感，用更轻的卡片矩阵承载更重的运营信息，让配置、审计和异常排查更易读。
           </p>
           <div className="auth-chip-row">
             <span className="auth-chip">Provider routing</span>
diff --git a/frontend-web/src/app/fonts.ts b/frontend-web/src/app/fonts.ts
index bc10ee2..ffa2e31 100644
--- a/frontend-web/src/app/fonts.ts
+++ b/frontend-web/src/app/fonts.ts
@@ -1,16 +1,18 @@
-import { IBM_Plex_Mono, Manrope, Syne } from "next/font/google";
+import { DM_Sans, Outfit, Roboto_Mono } from "next/font/google";
 
-export const displayFont = Syne({
+export const displayFont = Outfit({
   subsets: ["latin"],
   variable: "--font-display",
+  weight: ["500", "600", "700"],
 });
 
-export const bodyFont = Manrope({
+export const bodyFont = DM_Sans({
   subsets: ["latin"],
   variable: "--font-body",
+  weight: ["400", "500", "700"],
 });
 
-export const monoFont = IBM_Plex_Mono({
+export const monoFont = Roboto_Mono({
   subsets: ["latin"],
   variable: "--font-mono",
   weight: ["400", "500", "600"],
diff --git a/frontend-web/src/app/globals.css b/frontend-web/src/app/globals.css
index 736a7e5..46cc251 100644
--- a/frontend-web/src/app/globals.css
+++ b/frontend-web/src/app/globals.css
@@ -1,33 +1,41 @@
 @import "tailwindcss";
 
 :root {
-  --bg: #06070a;
-  --bg-soft: #0d1015;
-  --bg-elevated: #141821;
-  --surface: rgba(12, 16, 22, 0.82);
-  --surface-strong: rgba(16, 20, 27, 0.92);
-  --surface-soft: rgba(255, 255, 255, 0.04);
-  --surface-highlight: rgba(255, 255, 255, 0.08);
-  --ink: #f5f0e6;
-  --ink-soft: rgba(245, 240, 230, 0.84);
-  --muted: #98a1aa;
-  --line: rgba(255, 255, 255, 0.08);
-  --line-strong: rgba(255, 255, 255, 0.18);
-  --accent: #ff8d5d;
-  --accent-strong: #ffd764;
-  --accent-cool: #7ed3ff;
-  --accent-soft: rgba(255, 141, 93, 0.14);
-  --success: #75e0a7;
-  --warn: #ffca78;
-  --danger: #ff9696;
-  --shadow: 0 36px 80px rgba(0, 0, 0, 0.42);
-  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.26);
+  --bg: #f8faff;
+  --bg-soft: #f3f6fb;
+  --bg-strong: #eef3ff;
+  --surface: #ffffff;
+  --surface-alt: #f6f9ff;
+  --surface-muted: #f1f4fb;
+  --ink: #222222;
+  --ink-soft: #45515e;
+  --muted: #7a8797;
+  --line: #e7edf7;
+  --line-strong: #d9e2f1;
+  --accent: #1456f0;
+  --accent-strong: #3b82f6;
+  --accent-soft: rgba(20, 86, 240, 0.1);
+  --accent-pink: #ea5ec1;
+  --accent-lavender: #7c74ff;
+  --success: #10b981;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 12px 24px rgba(36, 36, 36, 0.08);
+  --shadow-brand: 0 0 18px rgba(44, 30, 116, 0.12);
+  --radius-xs: 10px;
+  --radius-sm: 14px;
+  --radius-md: 18px;
+  --radius-lg: 22px;
+  --radius-xl: 26px;
+  --radius-pill: 9999px;
 }
 
 .app-fonts {
   font-family: var(--font-body), "PingFang SC", "Microsoft YaHei UI", sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 * {
@@ -47,35 +55,22 @@ body {
   margin: 0;
   color: var(--ink);
   background:
-    radial-gradient(circle at 14% 16%, rgba(255, 141, 93, 0.18), transparent 28%),
-    radial-gradient(circle at 84% 12%, rgba(126, 211, 255, 0.16), transparent 24%),
-    radial-gradient(circle at 50% 100%, rgba(255, 215, 100, 0.12), transparent 22%),
-    linear-gradient(180deg, #07080b 0%, #090b10 48%, #050608 100%);
+    radial-gradient(circle at top left, rgba(61, 174, 255, 0.12), transparent 24%),
+    radial-gradient(circle at top right, rgba(234, 94, 193, 0.1), transparent 20%),
+    linear-gradient(180deg, #fbfcff 0%, #f5f8ff 55%, #f2f6ff 100%);
   overflow-x: hidden;
 }
 
-body::before,
-body::after {
+body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
-}
-
-body::before {
   background:
-    radial-gradient(circle at 10% 20%, rgba(255, 141, 93, 0.08), transparent 18%),
-    radial-gradient(circle at 80% 16%, rgba(126, 211, 255, 0.08), transparent 18%),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
-    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
-  background-size: auto, auto, 80px 80px, 80px 80px;
-  opacity: 0.6;
-}
-
-body::after {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
-    radial-gradient(circle at center, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
+    linear-gradient(90deg, rgba(20, 86, 240, 0.02) 1px, transparent 1px),
+    linear-gradient(rgba(20, 86, 240, 0.02) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 80%);
 }
 
 a {
@@ -97,7 +92,7 @@ button:disabled {
 
 input::placeholder,
 textarea::placeholder {
-  color: rgba(152, 161, 170, 0.68);
+  color: #98a5b4;
 }
 
 .spin {
@@ -126,11 +121,10 @@ textarea::placeholder {
   min-height: 100vh;
   display: grid;
   position: relative;
-  isolation: isolate;
 }
 
 .auth-grid {
-  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
+  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
 }
 
 .login-grid {
@@ -139,8 +133,8 @@ textarea::placeholder {
 
 .auth-grid-admin {
   background:
-    radial-gradient(circle at 16% 16%, rgba(126, 211, 255, 0.12), transparent 24%),
-    linear-gradient(135deg, rgba(7, 9, 12, 0.94), rgba(10, 13, 18, 0.98));
+    radial-gradient(circle at top right, rgba(20, 86, 240, 0.08), transparent 22%),
+    linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
 }
 
 .auth-hero {
@@ -150,39 +144,40 @@ textarea::placeholder {
   justify-content: space-between;
   gap: 28px;
   position: relative;
-  overflow: hidden;
 }
 
 .auth-hero::before {
   content: "";
   position: absolute;
-  inset: 26px;
-  border-radius: 36px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  inset: 28px;
+  border-radius: 34px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
-  backdrop-filter: blur(18px);
-  box-shadow: var(--shadow-soft);
+    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.88));
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: var(--shadow-md);
 }
 
 .auth-hero-studio::after,
 .auth-hero-admin::after {
   content: "";
   position: absolute;
-  width: 260px;
-  height: 260px;
-  border-radius: 999px;
-  right: -40px;
-  bottom: -60px;
-  filter: blur(10px);
+  right: 12px;
+  top: 24px;
+  width: 220px;
+  height: 220px;
+  border-radius: 40px;
+  transform: rotate(8deg);
+  opacity: 0.9;
 }
 
 .auth-hero-studio::after {
-  background: radial-gradient(circle at 30% 30%, rgba(255, 141, 93, 0.34), transparent 68%);
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.16), rgba(61, 174, 255, 0.1));
 }
 
 .auth-hero-admin::after {
-  background: radial-gradient(circle at 30% 30%, rgba(126, 211, 255, 0.28), transparent 68%);
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.12), rgba(124, 116, 255, 0.1));
 }
 
 .auth-copy,
@@ -194,18 +189,16 @@ textarea::placeholder {
 .auth-copy {
   display: grid;
   gap: 18px;
-  max-width: 680px;
+  max-width: 720px;
 }
 
 .auth-card {
   width: min(500px, calc(100vw - 32px));
-  padding: 32px;
-  border-radius: 32px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background:
-    linear-gradient(180deg, rgba(18, 22, 29, 0.9), rgba(11, 14, 19, 0.96));
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(20px);
+  padding: 34px;
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 24px 40px rgba(36, 36, 36, 0.08);
   position: relative;
   overflow: hidden;
 }
@@ -214,18 +207,20 @@ textarea::placeholder {
 .panel::before,
 .profile-card::before,
 .stat-card::before,
-.pulse-card::before {
+.pulse-card::before,
+.showcase-card::before,
+.brand-block::before {
   content: "";
   position: absolute;
   inset: 0 0 auto;
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
 }
 
 .auth-card-strong {
   background:
-    radial-gradient(circle at top right, rgba(126, 211, 255, 0.08), transparent 26%),
-    linear-gradient(180deg, rgba(18, 22, 29, 0.96), rgba(11, 14, 19, 0.98));
+    radial-gradient(circle at top right, rgba(234, 94, 193, 0.08), transparent 26%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92));
 }
 
 .auth-card-head {
@@ -238,35 +233,39 @@ textarea::placeholder {
 .auth-card-head h3 {
   margin: 0;
   font-size: clamp(28px, 4vw, 38px);
-  line-height: 0.98;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
   font-family: var(--font-display);
+  font-weight: 600;
 }
 
 .eyebrow,
 .brand-kicker,
 .header-kicker,
 .sidebar-note-label {
-  letter-spacing: 0.18em;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--accent-cool);
+  color: #4f79e6;
   font-size: 11px;
-  font-family: var(--font-mono);
+  font-weight: 700;
+  font-family: var(--font-body);
 }
 
 .headline {
   margin: 0;
-  font-size: clamp(40px, 5vw, 80px);
-  line-height: 0.92;
+  max-width: 11.5ch;
+  font-size: clamp(42px, 6vw, 78px);
+  line-height: 1.02;
   letter-spacing: -0.04em;
   font-family: var(--font-display);
-  max-width: 11ch;
+  font-weight: 500;
 }
 
 .subcopy {
-  max-width: 620px;
-  line-height: 1.72;
-  color: var(--muted);
-  font-size: 15px;
+  max-width: 640px;
+  color: var(--ink-soft);
+  line-height: 1.6;
+  font-size: 16px;
 }
 
 .auth-chip-row,
@@ -278,15 +277,13 @@ textarea::placeholder {
 
 .auth-chip,
 .brand-pill {
-  padding: 9px 12px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--ink-soft);
-  font-size: 11px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  font-family: var(--font-mono);
+  padding: 8px 14px;
+  border-radius: var(--radius-pill);
+  background: rgba(20, 86, 240, 0.06);
+  border: 1px solid rgba(20, 86, 240, 0.08);
+  color: #3559b8;
+  font-size: 12px;
+  font-weight: 600;
 }
 
 .showcase-stack {
@@ -301,18 +298,34 @@ textarea::placeholder {
 }
 
 .showcase-card {
+  position: relative;
   padding: 20px;
-  border-radius: 26px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
-  box-shadow: var(--shadow-soft);
+  border-radius: 24px;
+  background: #ffffff;
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  box-shadow: var(--shadow-sm);
   display: grid;
   gap: 12px;
 }
 
+.showcase-card-hero {
+  min-height: 190px;
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(234, 94, 193, 0.06)),
+    #ffffff;
+  box-shadow: var(--shadow-brand);
+}
+
+.showcase-card:nth-child(2n) svg {
+  color: var(--accent);
+}
+
+.showcase-card:nth-child(3n) svg {
+  color: var(--accent-pink);
+}
+
 .showcase-card svg {
-  color: var(--accent-cool);
+  color: var(--accent-lavender);
 }
 
 .showcase-card strong {
@@ -321,16 +334,11 @@ textarea::placeholder {
 }
 
 .showcase-card span {
-  color: var(--muted);
-  line-height: 1.65;
+  color: var(--ink-soft);
+  line-height: 1.55;
   font-size: 13px;
 }
 
-.showcase-card-hero {
-  min-height: 190px;
-  align-content: start;
-}
-
 .form-stack {
   display: grid;
   gap: 16px;
@@ -339,7 +347,7 @@ textarea::placeholder {
 .field-label {
   display: grid;
   gap: 8px;
-  color: var(--muted);
+  color: var(--ink-soft);
   font-size: 14px;
 }
 
@@ -350,15 +358,15 @@ textarea::placeholder {
 .library-search input {
   width: 100%;
   padding: 14px 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 18px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
   color: var(--ink);
-  background: rgba(7, 9, 13, 0.72);
+  background: var(--surface);
   outline: none;
   transition:
-    border-color 0.2s ease,
-    background 0.2s ease,
-    transform 0.2s ease;
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
 }
 
 .field-label input:focus,
@@ -366,8 +374,8 @@ textarea::placeholder {
 .field-label textarea:focus,
 .prompt-editor:focus,
 .library-search input:focus {
-  border-color: rgba(126, 211, 255, 0.28);
-  background: rgba(12, 15, 20, 0.88);
+  border-color: rgba(20, 86, 240, 0.3);
+  box-shadow: 0 0 0 4px rgba(20, 86, 240, 0.08);
   transform: translateY(-1px);
 }
 
@@ -381,18 +389,18 @@ textarea::placeholder {
 .ghost-button,
 .danger-button {
   border: 0;
-  border-radius: 18px;
-  min-height: 50px;
-  padding: 14px 18px;
+  min-height: 48px;
+  padding: 12px 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   cursor: pointer;
+  font-size: 14px;
   font-weight: 700;
   transition:
     transform 0.18s ease,
-    opacity 0.18s ease,
+    box-shadow 0.18s ease,
     background 0.18s ease,
     border-color 0.18s ease;
 }
@@ -404,27 +412,30 @@ textarea::placeholder {
 }
 
 .primary-button {
-  color: #17120a;
-  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
-  box-shadow: 0 18px 36px rgba(255, 141, 93, 0.24);
+  border-radius: 12px;
+  color: #ffffff;
+  background: #181e25;
+  box-shadow: 0 12px 24px rgba(24, 30, 37, 0.12);
 }
 
 .ghost-button {
-  color: var(--ink);
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-pill);
+  color: #181e25;
+  background: #f0f4fb;
+  border: 1px solid #e5ebf4;
 }
 
 .danger-button {
-  color: var(--danger);
-  background: rgba(255, 150, 150, 0.1);
-  border: 1px solid rgba(255, 150, 150, 0.16);
+  border-radius: 12px;
+  color: #ffffff;
+  background: #dc2626;
+  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.14);
 }
 
 .compact-button {
-  min-height: 40px;
+  min-height: 38px;
   padding: 10px 14px;
-  border-radius: 14px;
+  border-radius: var(--radius-pill);
   font-size: 13px;
 }
 
@@ -434,9 +445,9 @@ textarea::placeholder {
   gap: 10px;
   padding: 12px 14px;
   border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--muted);
+  background: #f6f8fd;
+  color: var(--ink-soft);
+  border: 1px solid var(--line);
   font-size: 13px;
   line-height: 1.5;
 }
@@ -450,6 +461,8 @@ textarea::placeholder {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
+  gap: 16px;
+  padding: 16px;
 }
 
 .shell-grid-admin {
@@ -458,45 +471,45 @@ textarea::placeholder {
 
 .shell-sidebar {
   position: sticky;
-  top: 0;
-  min-height: 100vh;
+  top: 16px;
   align-self: start;
-  padding: 28px 22px;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  min-height: calc(100vh - 32px);
+  padding: 22px;
+  border-radius: 28px;
   background:
-    linear-gradient(180deg, rgba(10, 12, 16, 0.96), rgba(8, 10, 14, 0.92));
-  backdrop-filter: blur(18px);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 255, 0.94));
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 18px;
 }
 
 .brand-block {
   position: relative;
   overflow: hidden;
   padding: 24px;
-  border-radius: 30px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background:
-    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
-  box-shadow: var(--shadow-soft);
+  border-radius: 24px;
+  color: #ffffff;
+  box-shadow: var(--shadow-brand);
 }
 
 .brand-block-studio {
   background:
-    radial-gradient(circle at top right, rgba(255, 141, 93, 0.18), transparent 30%),
-    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+    radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 24%),
+    linear-gradient(135deg, #1456f0 0%, #3daeff 60%, #7c74ff 100%);
 }
 
 .brand-block-admin {
   background:
-    radial-gradient(circle at top right, rgba(126, 211, 255, 0.16), transparent 32%),
-    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+    radial-gradient(circle at top right, rgba(255, 255, 255, 0.24), transparent 26%),
+    linear-gradient(135deg, #181e25 0%, #17437d 55%, #1456f0 100%);
 }
 
 .brand-visual {
   position: absolute;
-  inset: -34px -26px auto auto;
+  right: -30px;
+  top: -24px;
   width: 190px;
   height: 190px;
   pointer-events: none;
@@ -504,48 +517,53 @@ textarea::placeholder {
 
 .brand-orb {
   position: absolute;
-  border-radius: 999px;
+  border-radius: 40px;
 }
 
 .brand-orb-primary {
-  right: 8px;
+  right: 0;
   top: 0;
   width: 150px;
   height: 150px;
-  background: radial-gradient(circle at 30% 30%, rgba(255, 215, 100, 0.9), rgba(255, 141, 93, 0.24) 54%, transparent 72%);
-  opacity: 0.6;
+  background: rgba(255, 255, 255, 0.16);
+  transform: rotate(12deg);
 }
 
 .brand-orb-secondary {
-  left: 12px;
-  top: 56px;
-  width: 108px;
-  height: 108px;
-  background: radial-gradient(circle at 30% 30%, rgba(126, 211, 255, 0.82), rgba(126, 211, 255, 0.12) 58%, transparent 74%);
-  opacity: 0.72;
+  left: 28px;
+  top: 68px;
+  width: 100px;
+  height: 100px;
+  background: rgba(255, 255, 255, 0.12);
+  transform: rotate(-14deg);
 }
 
-.brand-block-admin .brand-orb-primary {
-  background: radial-gradient(circle at 30% 30%, rgba(126, 211, 255, 0.92), rgba(126, 211, 255, 0.18) 56%, transparent 72%);
-}
-
-.brand-block-admin .brand-orb-secondary {
-  background: radial-gradient(circle at 30% 30%, rgba(255, 141, 93, 0.74), rgba(255, 141, 93, 0.12) 56%, transparent 72%);
+.brand-block .brand-kicker,
+.brand-block p,
+.brand-block .brand-pill,
+.brand-block .brand-status {
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .brand-block h1 {
-  margin: 12px 0 10px;
-  font-size: clamp(36px, 4vw, 46px);
-  line-height: 0.94;
+  margin: 10px 0 10px;
+  font-size: 42px;
+  line-height: 1;
   letter-spacing: -0.03em;
   font-family: var(--font-display);
+  font-weight: 600;
 }
 
 .brand-block p {
   margin: 0;
-  line-height: 1.7;
-  color: var(--muted);
   max-width: 24ch;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.brand-block .brand-pill {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.18);
 }
 
 .brand-status {
@@ -554,10 +572,9 @@ textarea::placeholder {
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--ink-soft);
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.18);
   font-size: 13px;
 }
 
@@ -565,22 +582,22 @@ textarea::placeholder {
   width: 8px;
   height: 8px;
   border-radius: 999px;
-  background: var(--success);
-  box-shadow: 0 0 0 6px rgba(117, 224, 167, 0.12);
+  background: #ffffff;
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
 }
 
 .sidebar-note {
   padding: 18px;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 20px;
+  background: var(--surface-alt);
+  border: 1px solid var(--line);
   display: grid;
   gap: 14px;
 }
 
 .sidebar-metrics {
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .sidebar-metric {
@@ -590,12 +607,13 @@ textarea::placeholder {
 
 .sidebar-metric strong {
   font-size: 13px;
+  color: var(--ink);
 }
 
 .sidebar-metric span {
-  color: var(--muted);
+  color: var(--ink-soft);
   font-size: 13px;
-  line-height: 1.55;
+  line-height: 1.5;
 }
 
 .sidebar-nav {
@@ -608,49 +626,53 @@ textarea::placeholder {
   grid-template-columns: 18px minmax(0, 1fr) auto;
   gap: 12px;
   align-items: start;
-  padding: 15px 16px;
-  border-radius: 22px;
-  color: var(--muted);
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: transparent;
   border: 1px solid transparent;
-  background: rgba(255, 255, 255, 0.02);
+  color: var(--ink-soft);
   transition:
     background 0.18s ease,
     border-color 0.18s ease,
-    color 0.18s ease,
-    transform 0.18s ease;
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .nav-item:hover {
-  transform: translateX(3px);
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
+  transform: translateY(-1px);
+  background: #f7f9ff;
+  border-color: var(--line);
+}
+
+.nav-item svg {
+  color: #4f79e6;
 }
 
 .nav-item span {
   display: block;
-  font-weight: 700;
   color: var(--ink);
+  font-weight: 700;
 }
 
 .nav-item small {
   display: block;
   margin-top: 4px;
-  color: rgba(245, 240, 230, 0.56);
+  color: var(--ink-soft);
   line-height: 1.45;
   font-size: 12px;
 }
 
 .nav-item.active {
-  background: linear-gradient(135deg, rgba(255, 141, 93, 0.16), rgba(126, 211, 255, 0.14));
-  border-color: rgba(255, 255, 255, 0.16);
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(234, 94, 193, 0.06));
+  border-color: rgba(20, 86, 240, 0.12);
+  box-shadow: var(--shadow-sm);
 }
 
 .nav-index {
-  padding-top: 4px;
-  color: rgba(245, 240, 230, 0.42);
+  color: #8fa0bf;
   font-size: 11px;
-  font-family: var(--font-mono);
-  letter-spacing: 0.08em;
+  font-weight: 700;
 }
 
 .profile-card,
@@ -659,12 +681,10 @@ textarea::placeholder {
 .pulse-card {
   position: relative;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 28px;
-  background:
-    linear-gradient(180deg, rgba(13, 16, 22, 0.88), rgba(9, 12, 17, 0.95));
-  backdrop-filter: blur(18px);
-  box-shadow: var(--shadow);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow-md);
 }
 
 .profile-card {
@@ -684,11 +704,10 @@ textarea::placeholder {
   height: 54px;
   display: grid;
   place-items: center;
-  border-radius: 20px;
-  background: linear-gradient(135deg, rgba(255, 141, 93, 0.22), rgba(126, 211, 255, 0.16));
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(20, 86, 240, 0.14), rgba(61, 174, 255, 0.14));
+  color: #1456f0;
   font-weight: 800;
-  letter-spacing: 0.06em;
 }
 
 .profile-avatar-large {
@@ -697,11 +716,11 @@ textarea::placeholder {
 }
 
 .profile-name {
-  font-weight: 800;
+  font-weight: 700;
 }
 
 .profile-meta {
-  color: var(--muted);
+  color: var(--ink-soft);
   font-size: 14px;
 }
 
@@ -713,9 +732,9 @@ textarea::placeholder {
 
 .profile-stat {
   padding: 12px 14px;
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 16px;
+  background: #f6f9ff;
+  border: 1px solid var(--line);
   display: grid;
   gap: 4px;
 }
@@ -726,12 +745,13 @@ textarea::placeholder {
 }
 
 .profile-stat strong {
-  font-family: var(--font-mono);
   font-size: 14px;
+  font-family: var(--font-mono);
+  color: var(--ink);
 }
 
 .shell-main {
-  padding: 30px 32px 42px;
+  padding: 8px 4px 28px;
 }
 
 .shell-header {
@@ -739,61 +759,61 @@ textarea::placeholder {
   justify-content: space-between;
   align-items: flex-start;
   gap: 18px;
+  padding: 18px 22px 0;
 }
 
 .shell-header-content {
   display: grid;
-  gap: 6px;
-  max-width: 760px;
+  gap: 8px;
+  max-width: 720px;
 }
 
 .shell-header h2 {
   margin: 0;
-  font-size: clamp(36px, 4vw, 58px);
-  line-height: 0.92;
+  font-size: clamp(36px, 4vw, 56px);
+  line-height: 1;
   letter-spacing: -0.04em;
   font-family: var(--font-display);
+  font-weight: 500;
 }
 
 .shell-header-copy {
   margin: 0;
-  max-width: 680px;
-  color: var(--muted);
-  line-height: 1.68;
+  max-width: 640px;
+  color: var(--ink-soft);
+  line-height: 1.6;
 }
 
 .shell-header-meta {
   display: flex;
-  align-items: center;
-  gap: 10px;
   flex-wrap: wrap;
   justify-content: flex-end;
-  max-width: 460px;
+  gap: 10px;
+  max-width: 420px;
 }
 
 .header-chip {
   padding: 10px 14px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid var(--line);
   color: var(--ink-soft);
   font-size: 12px;
-  font-family: var(--font-mono);
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
 }
 
 .header-chip-success {
-  color: #d7fbea;
-  background: rgba(117, 224, 167, 0.08);
-  border-color: rgba(117, 224, 167, 0.18);
+  color: #0b8d62;
+  background: rgba(16, 185, 129, 0.08);
+  border-color: rgba(16, 185, 129, 0.12);
 }
 
 .shell-content {
-  margin-top: 24px;
+  margin-top: 22px;
   display: grid;
   gap: 18px;
+  padding: 0 18px;
 }
 
 .panel,
@@ -820,7 +840,7 @@ textarea::placeholder {
 }
 
 .stats-grid {
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
 }
 
 .two-col-grid {
@@ -848,17 +868,21 @@ textarea::placeholder {
 .auth-card h3 {
   margin: 0 0 12px;
   font-size: 25px;
+  line-height: 1.12;
   font-family: var(--font-display);
+  font-weight: 600;
 }
 
 .stat-card .value {
-  font-size: 36px;
+  font-size: 38px;
   line-height: 1;
+  letter-spacing: -0.03em;
   font-family: var(--font-display);
+  font-weight: 600;
 }
 
 .muted {
-  color: var(--muted);
+  color: var(--ink-soft);
 }
 
 .row,
@@ -883,9 +907,10 @@ textarea::placeholder {
 .list-item,
 .ops-feed-item {
   padding: 18px;
-  border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
 }
 
 .list-item strong {
@@ -903,57 +928,56 @@ textarea::placeholder {
   display: inline-flex;
   align-items: center;
   padding: 7px 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  font-family: var(--font-mono);
   letter-spacing: 0.08em;
 }
 
 .tone-soft {
-  background: rgba(255, 255, 255, 0.08);
-  color: #ddd5c8;
+  background: rgba(20, 86, 240, 0.08);
+  color: #2450bb;
 }
 
 .tone-success {
-  background: rgba(117, 224, 167, 0.14);
-  color: #cbf6de;
+  background: rgba(16, 185, 129, 0.1);
+  color: #0b8d62;
 }
 
 .tone-warn {
-  background: rgba(255, 202, 120, 0.14);
-  color: #ffe2a6;
+  background: rgba(245, 158, 11, 0.1);
+  color: #c28105;
 }
 
 .tone-danger {
-  background: rgba(255, 150, 150, 0.14);
-  color: #ffd1d1;
+  background: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
 }
 
 .tone-ghost {
-  background: rgba(152, 161, 170, 0.12);
-  color: var(--muted);
+  background: rgba(142, 142, 147, 0.12);
+  color: #7a8797;
 }
 
 .media-preview {
   width: 100%;
-  border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: #040507;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: #f3f6fb;
 }
 
 .code-block {
   margin: 0;
   padding: 16px;
-  border-radius: 20px;
-  background: #0a0d12;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: #e8dfd0;
+  border-radius: 18px;
+  background: #181e25;
+  border: 1px solid #2a3440;
+  color: #eef4ff;
   overflow: auto;
   font-size: 13px;
-  font-family: var(--font-mono);
   line-height: 1.7;
+  font-family: var(--font-mono);
 }
 
 .studio-panel,
@@ -981,55 +1005,103 @@ textarea::placeholder {
 .studio-command-pill {
   padding: 16px 18px;
   border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.04);
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
   color: var(--muted);
   display: grid;
   gap: 8px;
   font-size: 11px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
-  font-family: var(--font-mono);
+  font-weight: 700;
+}
+
+.studio-command-pill:nth-child(1) {
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(61, 174, 255, 0.08)),
+    #ffffff;
+}
+
+.studio-command-pill:nth-child(2) {
+  background:
+    linear-gradient(135deg, rgba(234, 94, 193, 0.08), rgba(124, 116, 255, 0.08)),
+    #ffffff;
+}
+
+.studio-command-pill:nth-child(3) {
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(234, 94, 193, 0.06)),
+    #ffffff;
+}
+
+.studio-command-pill:nth-child(4) {
+  background:
+    linear-gradient(135deg, rgba(61, 174, 255, 0.08), rgba(124, 116, 255, 0.08)),
+    #ffffff;
 }
 
 .studio-command-pill strong {
   color: var(--ink);
   font-size: 15px;
   line-height: 1.45;
-  letter-spacing: 0;
   text-transform: none;
-  font-family: var(--font-body);
+  letter-spacing: 0;
 }
 
 .studio-stat {
-  padding: 18px;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background:
-    linear-gradient(160deg, rgba(32, 39, 50, 0.86), rgba(14, 17, 24, 0.94));
+  padding: 20px;
+  border-radius: 22px;
+  border: 1px solid transparent;
+  box-shadow: var(--shadow-brand);
+}
+
+.studio-summary-grid .studio-stat:nth-child(1) {
+  background: linear-gradient(135deg, #1456f0, #3daeff);
+  color: #ffffff;
+}
+
+.studio-summary-grid .studio-stat:nth-child(2) {
+  background: linear-gradient(135deg, #7c74ff, #ea5ec1);
+  color: #ffffff;
+}
+
+.studio-summary-grid .studio-stat:nth-child(3) {
+  background: linear-gradient(135deg, #1c2430, #1456f0);
+  color: #ffffff;
 }
 
 .studio-stat span,
 .studio-stat small,
 .mini-note {
   display: block;
-  color: var(--muted);
   font-size: 13px;
 }
 
+.studio-stat span,
+.studio-stat small {
+  color: rgba(255, 255, 255, 0.84);
+}
+
 .studio-stat strong {
   display: block;
   margin: 14px 0 10px;
-  font-size: 30px;
+  font-size: 32px;
   line-height: 1;
   font-family: var(--font-display);
+  font-weight: 600;
+}
+
+.mini-note {
+  color: var(--muted);
 }
 
 .control-block {
   padding: 18px;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 22px;
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
 }
 
 .control-head {
@@ -1041,7 +1113,7 @@ textarea::placeholder {
 }
 
 .block-title {
-  font-weight: 800;
+  font-weight: 700;
   font-size: 15px;
 }
 
@@ -1052,25 +1124,39 @@ textarea::placeholder {
 
 .model-card {
   width: 100%;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 22px;
   padding: 16px;
-  background: linear-gradient(160deg, rgba(10, 13, 18, 0.94), rgba(23, 28, 36, 0.88));
+  border-radius: 22px;
+  border: 1px solid var(--line);
   color: var(--ink);
   text-align: left;
   cursor: pointer;
-  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+  background: #ffffff;
+  transition:
+    transform 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
+}
+
+.model-card:nth-child(1) {
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(61, 174, 255, 0.08)),
+    #ffffff;
+}
+
+.model-card:nth-child(2n) {
+  background:
+    linear-gradient(135deg, rgba(234, 94, 193, 0.08), rgba(124, 116, 255, 0.08)),
+    #ffffff;
 }
 
 .model-card:hover {
   transform: translateY(-1px);
+  box-shadow: var(--shadow-brand);
 }
 
 .model-card.active {
-  border-color: rgba(255, 255, 255, 0.18);
-  background:
-    linear-gradient(160deg, rgba(64, 42, 22, 0.92), rgba(23, 28, 36, 0.96));
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
+  border-color: rgba(20, 86, 240, 0.16);
+  box-shadow: var(--shadow-brand);
 }
 
 .model-card-head {
@@ -1090,12 +1176,12 @@ textarea::placeholder {
   display: block;
   margin-top: 4px;
   font-size: 12px;
-  color: var(--muted);
+  color: var(--ink-soft);
 }
 
 .model-card p {
   margin: 14px 0;
-  color: var(--muted);
+  color: var(--ink-soft);
   line-height: 1.6;
 }
 
@@ -1107,15 +1193,14 @@ textarea::placeholder {
 
 .model-card-metrics span {
   padding: 6px 10px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  color: var(--ink-soft);
+  border-radius: var(--radius-pill);
+  background: rgba(24, 30, 37, 0.06);
+  color: #334155;
   font-size: 12px;
-  font-family: var(--font-mono);
 }
 
 .prompt-editor {
-  min-height: 200px;
+  min-height: 190px;
 }
 
 .segmented-group {
@@ -1125,27 +1210,31 @@ textarea::placeholder {
 }
 
 .segmented-button {
-  min-height: 42px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
+  min-height: 40px;
   padding: 10px 14px;
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--muted);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--line);
+  background: #f5f8ff;
+  color: var(--ink-soft);
   cursor: pointer;
-  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
+  transition:
+    background 0.18s ease,
+    border-color 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .segmented-button.active {
-  background: linear-gradient(135deg, rgba(255, 141, 93, 0.18), rgba(126, 211, 255, 0.12));
-  border-color: rgba(255, 255, 255, 0.14);
-  color: var(--ink);
+  background: #ffffff;
+  border-color: rgba(20, 86, 240, 0.18);
+  color: var(--accent);
+  box-shadow: var(--shadow-sm);
 }
 
 .media-slot {
   padding: 16px;
-  border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 20px;
+  background: #f9fbff;
+  border: 1px solid var(--line);
 }
 
 .media-slot-head {
@@ -1172,10 +1261,10 @@ textarea::placeholder {
   display: grid;
   gap: 4px;
   min-width: 0;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 16px;
   padding: 10px 12px;
-  background: rgba(255, 141, 93, 0.08);
+  border-radius: 14px;
+  border: 1px solid rgba(20, 86, 240, 0.12);
+  background: rgba(20, 86, 240, 0.06);
   color: var(--ink);
   cursor: pointer;
   text-align: left;
@@ -1190,15 +1279,16 @@ textarea::placeholder {
 }
 
 .selected-asset-chip small {
-  color: var(--muted);
+  color: var(--ink-soft);
 }
 
 .text-button {
   border: 0;
   padding: 0;
   background: none;
-  color: var(--accent-cool);
+  color: var(--accent);
   cursor: pointer;
+  font-weight: 600;
 }
 
 .toggle-card {
@@ -1206,9 +1296,10 @@ textarea::placeholder {
   align-items: center;
   gap: 14px;
   padding: 18px;
-  border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 20px;
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
 }
 
 .toggle-card input {
@@ -1225,27 +1316,27 @@ textarea::placeholder {
 .toggle-card small {
   display: block;
   margin-top: 4px;
-  color: var(--muted);
+  color: var(--ink-soft);
 }
 
 .inline-feedback {
   padding: 14px 16px;
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--muted);
+  border: 1px solid var(--line);
+  background: #f8fbff;
+  color: var(--ink-soft);
 }
 
 .inline-feedback.is-success {
-  border-color: rgba(117, 224, 167, 0.18);
-  background: rgba(117, 224, 167, 0.08);
-  color: #d7fbea;
+  border-color: rgba(16, 185, 129, 0.14);
+  background: rgba(16, 185, 129, 0.06);
+  color: #0b8d62;
 }
 
 .inline-feedback.is-error {
-  border-color: rgba(255, 150, 150, 0.18);
-  background: rgba(255, 150, 150, 0.08);
-  color: #ffd8d8;
+  border-color: rgba(239, 68, 68, 0.14);
+  background: rgba(239, 68, 68, 0.06);
+  color: #dc2626;
 }
 
 .composer-footer {
@@ -1257,10 +1348,6 @@ textarea::placeholder {
   width: 100%;
 }
 
-.library-header {
-  margin-bottom: 20px;
-}
-
 .workspace-tabs {
   display: flex;
   gap: 10px;
@@ -1269,26 +1356,28 @@ textarea::placeholder {
 
 .tab-chip {
   padding: 10px 14px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--muted);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--line);
+  background: #f5f8ff;
+  color: var(--ink-soft);
   font-size: 13px;
+  font-weight: 600;
 }
 
 .tab-chip.active {
-  background: rgba(255, 141, 93, 0.12);
-  color: var(--ink);
-  border-color: rgba(255, 255, 255, 0.14);
+  background: #ffffff;
+  color: var(--accent);
+  border-color: rgba(20, 86, 240, 0.14);
+  box-shadow: var(--shadow-sm);
 }
 
 .asset-upload-panel,
 .recent-task-strip {
   margin-bottom: 18px;
   padding: 18px;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 22px;
+  background: #f9fbff;
+  border: 1px solid var(--line);
 }
 
 .upload-row {
@@ -1299,15 +1388,15 @@ textarea::placeholder {
 }
 
 .file-picker {
-  min-height: 54px;
+  min-height: 52px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 16px;
-  border-radius: 18px;
-  border: 1px dashed rgba(126, 211, 255, 0.22);
-  background: rgba(7, 9, 13, 0.72);
-  color: var(--muted);
+  border-radius: 16px;
+  border: 1px dashed rgba(20, 86, 240, 0.22);
+  background: #ffffff;
+  color: var(--ink-soft);
   cursor: pointer;
 }
 
@@ -1337,9 +1426,9 @@ textarea::placeholder {
   align-items: center;
   gap: 10px;
   padding-left: 14px;
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(7, 9, 13, 0.72);
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--line);
+  background: #ffffff;
 }
 
 .library-search input {
@@ -1355,23 +1444,24 @@ textarea::placeholder {
 
 .asset-library-card {
   overflow: hidden;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: linear-gradient(160deg, rgba(10, 13, 18, 0.94), rgba(18, 22, 30, 0.9));
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
 }
 
 .asset-library-card.selected {
-  border-color: rgba(255, 255, 255, 0.14);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  border-color: rgba(20, 86, 240, 0.16);
+  box-shadow: var(--shadow-brand);
 }
 
 .asset-thumb {
   position: relative;
-  height: 152px;
+  height: 160px;
   display: grid;
   place-items: center;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.04);
+  background: #f3f7ff;
 }
 
 .asset-thumb-image {
@@ -1388,10 +1478,10 @@ textarea::placeholder {
 
 .asset-thumb-audio {
   gap: 10px;
-  color: var(--accent-cool);
+  color: var(--accent);
   background:
-    radial-gradient(circle at top, rgba(126, 211, 255, 0.18), transparent 52%),
-    rgba(8, 11, 18, 0.96);
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(234, 94, 193, 0.08)),
+    #f7f9ff;
 }
 
 .asset-media-badge {
@@ -1399,11 +1489,12 @@ textarea::placeholder {
   top: 12px;
   left: 12px;
   padding: 6px 10px;
-  border-radius: 999px;
-  background: rgba(9, 12, 20, 0.82);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--radius-pill);
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.9);
   font-size: 12px;
-  font-family: var(--font-mono);
+  font-weight: 700;
+  box-shadow: var(--shadow-sm);
 }
 
 .asset-card-body {
@@ -1419,13 +1510,13 @@ textarea::placeholder {
 
 .asset-card-title-row strong {
   margin: 0;
-  line-height: 1.5;
+  line-height: 1.45;
   word-break: break-word;
 }
 
 .asset-card-meta {
   margin-top: 8px;
-  color: var(--muted);
+  color: var(--ink-soft);
   font-size: 13px;
 }
 
@@ -1433,7 +1524,7 @@ textarea::placeholder {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: #ffe3be;
+  color: var(--accent);
   font-size: 12px;
   white-space: nowrap;
 }
@@ -1451,16 +1542,16 @@ textarea::placeholder {
   display: grid;
   gap: 12px;
   padding: 16px;
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
+  background: #ffffff;
+  border: 1px solid var(--line);
 }
 
 .task-mini-meta {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
-  color: var(--muted);
+  color: var(--ink-soft);
   font-size: 13px;
 }
 
@@ -1472,10 +1563,10 @@ textarea::placeholder {
 
 .empty-state {
   padding: 26px;
-  border-radius: 20px;
-  border: 1px dashed rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--muted);
+  border-radius: 18px;
+  border: 1px dashed var(--line-strong);
+  background: #fbfdff;
+  color: var(--ink-soft);
   text-align: center;
 }
 
@@ -1493,8 +1584,33 @@ textarea::placeholder {
 .task-stat-card {
   padding: 18px;
   border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
+}
+
+.task-stat-card:nth-child(1) {
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(61, 174, 255, 0.08)),
+    #ffffff;
+}
+
+.task-stat-card:nth-child(2) {
+  background:
+    linear-gradient(135deg, rgba(124, 116, 255, 0.08), rgba(20, 86, 240, 0.06)),
+    #ffffff;
+}
+
+.task-stat-card:nth-child(3) {
+  background:
+    linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(61, 174, 255, 0.06)),
+    #ffffff;
+}
+
+.task-stat-card:nth-child(4) {
+  background:
+    linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(234, 94, 193, 0.05)),
+    #ffffff;
 }
 
 .task-stat-card span {
@@ -1503,7 +1619,7 @@ textarea::placeholder {
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  font-family: var(--font-mono);
+  font-weight: 700;
 }
 
 .task-stat-card strong {
@@ -1511,28 +1627,34 @@ textarea::placeholder {
   margin: 14px 0 10px;
   font-size: 30px;
   line-height: 1;
+  letter-spacing: -0.03em;
   font-family: var(--font-display);
+  font-weight: 600;
 }
 
 .task-stat-card small {
-  color: var(--muted);
-  line-height: 1.6;
+  color: var(--ink-soft);
+  line-height: 1.55;
 }
 
 .task-stream-card {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
 }
 
 .task-stream-meta {
-  font-family: var(--font-mono);
   font-size: 12px;
+  color: var(--muted);
+  font-family: var(--font-mono);
 }
 
 .dashboard-stage {
   display: grid;
   gap: 18px;
-  grid-template-columns: 1.1fr 0.9fr;
-  align-items: stretch;
+  grid-template-columns: 1.12fr 0.88fr;
+  background:
+    linear-gradient(135deg, rgba(20, 86, 240, 0.06), rgba(234, 94, 193, 0.04)),
+    #ffffff;
 }
 
 .dashboard-stage-copy {
@@ -1546,9 +1668,10 @@ textarea::placeholder {
 
 .dashboard-mini-card {
   padding: 18px;
-  border-radius: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-radius: 20px;
+  background: #ffffff;
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
   display: grid;
   gap: 8px;
 }
@@ -1558,7 +1681,7 @@ textarea::placeholder {
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  font-family: var(--font-mono);
+  font-weight: 700;
 }
 
 .dashboard-mini-card strong {
@@ -1566,7 +1689,7 @@ textarea::placeholder {
 }
 
 .dashboard-mini-card small {
-  color: var(--muted);
+  color: var(--ink-soft);
   line-height: 1.55;
 }
 
@@ -1580,8 +1703,8 @@ textarea::placeholder {
 }
 
 .ops-feed-item span {
-  color: var(--muted);
-  line-height: 1.65;
+  color: var(--ink-soft);
+  line-height: 1.6;
 }
 
 @media (max-width: 1400px) {
@@ -1606,7 +1729,7 @@ textarea::placeholder {
   }
 }
 
-@media (max-width: 1120px) {
+@media (max-width: 1100px) {
   .auth-grid,
   .login-grid,
   .shell-grid,
@@ -1614,15 +1737,14 @@ textarea::placeholder {
     grid-template-columns: 1fr;
   }
 
-  .shell-sidebar {
-    position: static;
-    min-height: auto;
-    border-right: 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  .shell-grid {
+    padding: 12px;
   }
 
-  .shell-main {
-    padding: 20px 18px 34px;
+  .shell-sidebar {
+    position: static;
+    top: auto;
+    min-height: auto;
   }
 
   .showcase-card-grid {
@@ -1641,6 +1763,10 @@ textarea::placeholder {
     padding: 18px;
   }
 
+  .auth-hero::before {
+    inset: 14px;
+  }
+
   .workbench-header,
   .library-header,
   .shell-header {
@@ -1661,6 +1787,12 @@ textarea::placeholder {
 
   .headline {
     max-width: none;
-    font-size: clamp(34px, 12vw, 58px);
+    font-size: clamp(34px, 12vw, 56px);
+  }
+
+  .shell-content,
+  .shell-header {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
diff --git a/frontend-web/src/app/login/page.tsx b/frontend-web/src/app/login/page.tsx
index 9c6496f..323cb96 100644
--- a/frontend-web/src/app/login/page.tsx
+++ b/frontend-web/src/app/login/page.tsx
@@ -34,11 +34,11 @@ export default function LoginPage() {
           <div className="eyebrow">Creative Workbench</div>
           <h1 className="headline">从一句提示词到成片交付，把 AI 视频生产线收进一块工作台。</h1>
           <p className="subcopy">
-            参考 `RunwayML` 式的电影感操作界面，把模型切换、素材引用、积分消耗和任务轮询收敛为一个连续动作。
+            参考 `MiniMax-DESIGN.md` 的产品画布思路，把模型切换、素材引用、积分消耗和任务轮询组织成一组清爽的能力卡片。
           </p>
           <div className="auth-chip-row">
             <span className="auth-chip">Prompt to video</span>
-            <span className="auth-chip">Asset-aware workflow</span>
+            <span className="auth-chip">Capability cards</span>
             <span className="auth-chip">Realtime task polling</span>
           </div>
         </div>
diff --git a/frontend-web/src/components/admin-shell.tsx b/frontend-web/src/components/admin-shell.tsx
index 8f4f84e..14c831b 100644
--- a/frontend-web/src/components/admin-shell.tsx
+++ b/frontend-web/src/components/admin-shell.tsx
@@ -77,16 +77,16 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
           </div>
           <span className="brand-kicker">AIVIDEO ADMIN</span>
           <h1>控制后台</h1>
-          <p>围绕模型、价格、奖励、订单和任务链路做统一配置、审计和异常处置。</p>
+          <p>围绕模型、价格、奖励、订单和任务链路做统一配置、审计和异常处置，用更产品化的矩阵视角管理能力层。</p>
           <div className="brand-pill-row">
             <span className="brand-pill">Ops control</span>
             <span className="brand-pill">Pricing</span>
-            <span className="brand-pill">Provider routing</span>
+            <span className="brand-pill">Capability routing</span>
           </div>
         </div>
 
         <div className="sidebar-note">
-          <div className="sidebar-note-label">Operations Grid</div>
+          <div className="sidebar-note-label">Operations Matrix</div>
           <div className="sidebar-metrics">
             <div className="sidebar-metric">
               <strong>Models</strong>
diff --git a/frontend-web/src/components/register-form.tsx b/frontend-web/src/components/register-form.tsx
index 0ca6052..f64ffef 100644
--- a/frontend-web/src/components/register-form.tsx
+++ b/frontend-web/src/components/register-form.tsx
@@ -42,7 +42,7 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
           <div className="eyebrow">New Account</div>
           <h1 className="headline">用一个账号，串起创作、积分、邀请奖励和素材管理。</h1>
           <p className="subcopy">
-            注册后会读取后台增长规则发放奖励；如果带邀请码进入，则会同步建立邀请关系，后续消费可自动回传奖励。
+            注册后会读取后台增长规则发放奖励；如果带邀请码进入，则会同步建立邀请关系，让增长链路也保持和创作体验一样清爽直接。
           </p>
           <div className="auth-chip-row">
             <span className="auth-chip">Signup rewards</span>
diff --git a/frontend-web/src/components/site-shell.tsx b/frontend-web/src/components/site-shell.tsx
index 3df80b7..ec280a5 100644
--- a/frontend-web/src/components/site-shell.tsx
+++ b/frontend-web/src/components/site-shell.tsx
@@ -114,9 +114,9 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
           </div>
           <span className="brand-kicker">AI VIDEO STUDIO</span>
           <h1>AIVideo</h1>
-          <p>把模型路由、素材管理和任务轮询收进一个电影感工作台，让创作动作像调度镜头一样顺滑。</p>
+          <p>把模型路由、素材管理和任务轮询收进一块轻白画布，让每个创作动作都像切换一个 AI 能力卡片。</p>
           <div className="brand-pill-row">
-            <span className="brand-pill">Source mode</span>
+            <span className="brand-pill">Creative matrix</span>
             <span className="brand-pill">Mock providers</span>
             <span className="brand-pill">Local assets</span>
           </div>
@@ -127,19 +127,19 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
         </div>
 
         <div className="sidebar-note">
-          <div className="sidebar-note-label">Pipeline Focus</div>
+          <div className="sidebar-note-label">Capability Grid</div>
           <div className="sidebar-metrics">
             <div className="sidebar-metric">
               <strong>Prompt</strong>
-              <span>镜头、动作、光感</span>
+              <span>主体、动作、镜头和情绪描述</span>
             </div>
             <div className="sidebar-metric">
               <strong>Assets</strong>
-              <span>图片、视频、音频参考</span>
+              <span>图片、视频、音频参考素材</span>
             </div>
             <div className="sidebar-metric">
               <strong>Tasks</strong>
-              <span>轮询、冻结、结果落盘</span>
+              <span>轮询进度、冻结扣费和结果回收</span>
             </div>
           </div>
         </div>