@@ -99,23 +85,28 @@ export default function AdminLoginPage() {
type="password"
value={form.password}
onChange={(event) =>
- setForm((previous) => ({ ...previous, password: event.target.value }))
+ setForm((previous) => ({
+ ...previous,
+ password: event.target.value,
+ }))
}
/>
+
{error ?
{error}
: null}
+
-
+
+
返回用户端
-
-
- 默认管理员账号已由后端初始化脚本自动创建。
-
+
+ 返回首页
+
diff --git a/frontend-web/src/app/fonts.ts b/frontend-web/src/app/fonts.ts
index ffa2e31..7c535ea 100644
--- a/frontend-web/src/app/fonts.ts
+++ b/frontend-web/src/app/fonts.ts
@@ -1,19 +1,16 @@
-import { DM_Sans, Outfit, Roboto_Mono } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
-export const displayFont = Outfit({
+export const displayFont = Geist({
subsets: ["latin"],
variable: "--font-display",
- weight: ["500", "600", "700"],
});
-export const bodyFont = DM_Sans({
+export const bodyFont = Geist({
subsets: ["latin"],
variable: "--font-body",
- weight: ["400", "500", "700"],
});
-export const monoFont = Roboto_Mono({
+export const monoFont = Geist_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 46cc251..fca18a6 100644
--- a/frontend-web/src/app/globals.css
+++ b/frontend-web/src/app/globals.css
@@ -1,38 +1,35 @@
@import "tailwindcss";
:root {
- --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;
+ --page-bg: #ffffff;
+ --page-bg-soft: #f5f5f7;
+ --page-bg-muted: #fafafc;
+ --page-ink: #1d1d1f;
+ --page-ink-soft: rgba(29, 29, 31, 0.76);
+ --page-muted: rgba(29, 29, 31, 0.56);
+ --page-border: rgba(210, 210, 215, 0.88);
+ --page-border-soft: rgba(210, 210, 215, 0.48);
+ --page-accent: #0071e3;
+ --page-accent-hover: #0066cc;
+ --page-success: #159957;
+ --page-warn: #b7791f;
+ --page-danger: #c53030;
+ --page-shadow: 3px 5px 30px rgba(0, 0, 0, 0.12);
+ --page-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.app-fonts {
- font-family: var(--font-body), "PingFang SC", "Microsoft YaHei UI", sans-serif;
+ font-family:
+ "SF Pro Text",
+ "SF Pro Display",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ "PingFang SC",
+ "Microsoft YaHei UI",
+ sans-serif;
+ color: var(--page-ink);
+ background: var(--page-bg);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@@ -48,31 +45,18 @@ body {
}
html {
- background: var(--bg);
+ background: var(--page-bg);
}
body {
margin: 0;
- color: var(--ink);
+ color: var(--page-ink);
background:
- 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%);
+ radial-gradient(circle at top right, rgba(0, 113, 227, 0.05), transparent 18%),
+ linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
overflow-x: hidden;
}
-body::before {
- content: "";
- position: fixed;
- inset: 0;
- pointer-events: none;
- background:
- 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 {
color: inherit;
text-decoration: none;
@@ -92,7 +76,7 @@ button:disabled {
input::placeholder,
textarea::placeholder {
- color: #98a5b4;
+ color: rgba(29, 29, 31, 0.42);
}
.spin {
@@ -116,230 +100,25 @@ textarea::placeholder {
padding: 24px;
}
-.auth-grid,
-.login-grid {
- min-height: 100vh;
- display: grid;
- position: relative;
+.muted {
+ color: var(--page-ink-soft);
}
-.auth-grid {
- grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
-}
-
-.login-grid {
- grid-template-columns: minmax(0, 1fr) 480px;
-}
-
-.auth-grid-admin {
- background:
- radial-gradient(circle at top right, rgba(20, 86, 240, 0.08), transparent 22%),
- linear-gradient(180deg, #f9fbff 0%, #f2f6ff 100%);
-}
-
-.auth-hero {
- padding: clamp(28px, 5vw, 56px);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 28px;
- position: relative;
-}
-
-.auth-hero::before {
- content: "";
- position: absolute;
- inset: 28px;
- border-radius: 34px;
- background:
- 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;
- right: 12px;
- top: 24px;
- width: 220px;
- height: 220px;
- border-radius: 40px;
- transform: rotate(8deg);
- opacity: 0.9;
-}
-
-.auth-hero-studio::after {
- background:
- linear-gradient(135deg, rgba(20, 86, 240, 0.16), rgba(61, 174, 255, 0.1));
-}
-
-.auth-hero-admin::after {
- background:
- linear-gradient(135deg, rgba(20, 86, 240, 0.12), rgba(124, 116, 255, 0.1));
-}
-
-.auth-copy,
-.showcase-stack {
- position: relative;
- z-index: 1;
-}
-
-.auth-copy {
- display: grid;
- gap: 18px;
- max-width: 720px;
-}
-
-.auth-card {
- width: min(500px, calc(100vw - 32px));
- 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;
-}
-
-.auth-card::before,
-.panel::before,
-.profile-card::before,
-.stat-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.85), transparent);
-}
-
-.auth-card-strong {
- background:
- 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 {
- display: grid;
- gap: 8px;
- margin-bottom: 24px;
-}
-
-.auth-card-head h2,
-.auth-card-head h3 {
- margin: 0;
- font-size: clamp(28px, 4vw, 38px);
- 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.16em;
- text-transform: uppercase;
- color: #4f79e6;
- font-size: 11px;
- font-weight: 700;
- font-family: var(--font-body);
-}
-
-.headline {
- margin: 0;
- max-width: 11.5ch;
- font-size: clamp(42px, 6vw, 78px);
- line-height: 1.02;
- letter-spacing: -0.04em;
- font-family: var(--font-display);
- font-weight: 500;
-}
-
-.subcopy {
- max-width: 640px;
- color: var(--ink-soft);
- line-height: 1.6;
- font-size: 16px;
-}
-
-.auth-chip-row,
-.brand-pill-row {
+.row,
+.toolbar {
display: flex;
flex-wrap: wrap;
- gap: 10px;
-}
-
-.auth-chip,
-.brand-pill {
- 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 {
- display: grid;
- gap: 16px;
-}
-
-.showcase-card-grid {
- display: grid;
- gap: 14px;
- grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.showcase-card {
- position: relative;
- padding: 20px;
- border-radius: 24px;
- background: #ffffff;
- border: 1px solid rgba(229, 231, 235, 0.9);
- box-shadow: var(--shadow-sm);
- display: grid;
gap: 12px;
+ align-items: center;
}
-.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);
+.toolbar {
+ justify-content: space-between;
}
-.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-lavender);
-}
-
-.showcase-card strong {
- display: block;
- font-size: 15px;
-}
-
-.showcase-card span {
- color: var(--ink-soft);
- line-height: 1.55;
- font-size: 13px;
-}
-
-.form-stack {
+.form-stack,
+.list-grid,
+.ops-feed {
display: grid;
gap: 16px;
}
@@ -347,7 +126,7 @@ textarea::placeholder {
.field-label {
display: grid;
gap: 8px;
- color: var(--ink-soft);
+ color: var(--page-ink-soft);
font-size: 14px;
}
@@ -358,15 +137,15 @@ textarea::placeholder {
.library-search input {
width: 100%;
padding: 14px 16px;
- border: 1px solid var(--line);
- border-radius: 16px;
- color: var(--ink);
- background: var(--surface);
+ border: 1px solid var(--page-border);
+ border-radius: 14px;
+ background: #ffffff;
+ color: var(--page-ink);
outline: none;
transition:
- border-color 0.18s ease,
- box-shadow 0.18s ease,
- transform 0.18s ease;
+ border-color 0.2s ease,
+ box-shadow 0.2s ease,
+ transform 0.2s ease;
}
.field-label input:focus,
@@ -374,8 +153,8 @@ textarea::placeholder {
.field-label textarea:focus,
.prompt-editor:focus,
.library-search input:focus {
- border-color: rgba(20, 86, 240, 0.3);
- box-shadow: 0 0 0 4px rgba(20, 86, 240, 0.08);
+ border-color: rgba(0, 113, 227, 0.48);
+ box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
transform: translateY(-1px);
}
@@ -387,439 +166,223 @@ textarea::placeholder {
.primary-button,
.ghost-button,
-.danger-button {
- border: 0;
- min-height: 48px;
+.danger-button,
+.marketing-primary-button,
+.marketing-secondary-button,
+.marketing-link-button {
+ min-height: 46px;
padding: 12px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
+ border: 1px solid transparent;
cursor: pointer;
- font-size: 14px;
- font-weight: 700;
transition:
- transform 0.18s ease,
- box-shadow 0.18s ease,
- background 0.18s ease,
- border-color 0.18s ease;
+ transform 0.2s ease,
+ background 0.2s ease,
+ border-color 0.2s ease,
+ opacity 0.2s ease;
}
.primary-button:hover,
.ghost-button:hover,
-.danger-button:hover {
+.danger-button:hover,
+.marketing-primary-button:hover,
+.marketing-secondary-button:hover,
+.marketing-link-button:hover {
transform: translateY(-1px);
}
-.primary-button {
- border-radius: 12px;
+.primary-button,
+.marketing-primary-button {
+ border-radius: 999px;
+ background: var(--page-accent);
color: #ffffff;
- background: #181e25;
- box-shadow: 0 12px 24px rgba(24, 30, 37, 0.12);
}
-.ghost-button {
- border-radius: var(--radius-pill);
- color: #181e25;
- background: #f0f4fb;
- border: 1px solid #e5ebf4;
+.primary-button:hover,
+.marketing-primary-button:hover {
+ background: var(--page-accent-hover);
+}
+
+.ghost-button,
+.marketing-secondary-button,
+.marketing-link-button {
+ border-radius: 999px;
+ border-color: var(--page-border);
+ background: rgba(255, 255, 255, 0.9);
+ color: var(--page-ink);
}
.danger-button {
- border-radius: 12px;
- color: #ffffff;
- background: #dc2626;
- box-shadow: 0 12px 24px rgba(220, 38, 38, 0.14);
+ border-radius: 10px;
+ background: #ffffff;
+ border-color: rgba(197, 48, 48, 0.22);
+ color: var(--page-danger);
}
.compact-button {
min-height: 38px;
- padding: 10px 14px;
- border-radius: var(--radius-pill);
+ padding: 8px 14px;
font-size: 13px;
}
-.field-note {
+.auth-inline-link,
+.marketing-link-inline,
+.text-button {
display: inline-flex;
align-items: center;
- gap: 10px;
- padding: 12px 14px;
- border-radius: 16px;
- background: #f6f8fd;
- color: var(--ink-soft);
- border: 1px solid var(--line);
- font-size: 13px;
- line-height: 1.5;
-}
-
-.auth-action-row {
- display: grid;
- gap: 14px;
-}
-
-.shell-grid {
- min-height: 100vh;
- display: grid;
- grid-template-columns: 320px minmax(0, 1fr);
- gap: 16px;
- padding: 16px;
-}
-
-.shell-grid-admin {
- grid-template-columns: 340px minmax(0, 1fr);
-}
-
-.shell-sidebar {
- position: sticky;
- top: 16px;
- align-self: start;
- min-height: calc(100vh - 32px);
- padding: 22px;
- border-radius: 28px;
- background:
- 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: 18px;
-}
-
-.brand-block {
- position: relative;
- overflow: hidden;
- padding: 24px;
- border-radius: 24px;
- color: #ffffff;
- box-shadow: var(--shadow-brand);
-}
-
-.brand-block-studio {
- background:
- 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(255, 255, 255, 0.24), transparent 26%),
- linear-gradient(135deg, #181e25 0%, #17437d 55%, #1456f0 100%);
-}
-
-.brand-visual {
- position: absolute;
- right: -30px;
- top: -24px;
- width: 190px;
- height: 190px;
- pointer-events: none;
-}
-
-.brand-orb {
- position: absolute;
- border-radius: 40px;
-}
-
-.brand-orb-primary {
- right: 0;
- top: 0;
- width: 150px;
- height: 150px;
- background: rgba(255, 255, 255, 0.16);
- transform: rotate(12deg);
-}
-
-.brand-orb-secondary {
- left: 28px;
- top: 68px;
- width: 100px;
- height: 100px;
- background: rgba(255, 255, 255, 0.12);
- transform: rotate(-14deg);
-}
-
-.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: 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;
- 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 {
- margin-top: 18px;
- display: inline-flex;
- align-items: center;
- gap: 10px;
- padding: 10px 14px;
- border-radius: var(--radius-pill);
- background: rgba(255, 255, 255, 0.14);
- border: 1px solid rgba(255, 255, 255, 0.18);
- font-size: 13px;
-}
-
-.status-dot {
- width: 8px;
- height: 8px;
- border-radius: 999px;
- background: #ffffff;
- box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
-}
-
-.sidebar-note {
- padding: 18px;
- border-radius: 20px;
- background: var(--surface-alt);
- border: 1px solid var(--line);
- display: grid;
- gap: 14px;
-}
-
-.sidebar-metrics {
- display: grid;
- gap: 10px;
-}
-
-.sidebar-metric {
- display: grid;
- gap: 4px;
-}
-
-.sidebar-metric strong {
- font-size: 13px;
- color: var(--ink);
-}
-
-.sidebar-metric span {
- color: var(--ink-soft);
- font-size: 13px;
- line-height: 1.5;
-}
-
-.sidebar-nav {
- display: grid;
- gap: 10px;
-}
-
-.nav-item {
- display: grid;
- grid-template-columns: 18px minmax(0, 1fr) auto;
- gap: 12px;
- align-items: start;
- padding: 14px 16px;
- border-radius: 18px;
- background: transparent;
- border: 1px solid transparent;
- color: var(--ink-soft);
- transition:
- background 0.18s ease,
- border-color 0.18s ease,
- transform 0.18s ease,
- box-shadow 0.18s ease;
-}
-
-.nav-item:hover {
- transform: translateY(-1px);
- background: #f7f9ff;
- border-color: var(--line);
-}
-
-.nav-item svg {
- color: #4f79e6;
-}
-
-.nav-item span {
- display: block;
- color: var(--ink);
- font-weight: 700;
-}
-
-.nav-item small {
- display: block;
- margin-top: 4px;
- color: var(--ink-soft);
- line-height: 1.45;
- font-size: 12px;
-}
-
-.nav-item.active {
- 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 {
- color: #8fa0bf;
- font-size: 11px;
- font-weight: 700;
-}
-
-.profile-card,
-.panel,
-.stat-card,
-.pulse-card {
- position: relative;
- overflow: hidden;
- 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 {
- padding: 18px;
- margin-top: auto;
- display: grid;
- gap: 16px;
-}
-
-.profile-card-main {
- display: grid;
- gap: 10px;
-}
-
-.profile-avatar {
- width: 54px;
- height: 54px;
- display: grid;
- place-items: center;
- border-radius: 18px;
- background: linear-gradient(135deg, rgba(20, 86, 240, 0.14), rgba(61, 174, 255, 0.14));
- color: #1456f0;
- font-weight: 800;
-}
-
-.profile-avatar-large {
- width: 68px;
- height: 68px;
-}
-
-.profile-name {
- font-weight: 700;
-}
-
-.profile-meta {
- color: var(--ink-soft);
- font-size: 14px;
-}
-
-.profile-card-stats {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 10px;
-}
-
-.profile-stat {
- padding: 12px 14px;
- border-radius: 16px;
- background: #f6f9ff;
- border: 1px solid var(--line);
- display: grid;
- gap: 4px;
-}
-
-.profile-stat span {
- color: var(--muted);
- font-size: 12px;
-}
-
-.profile-stat strong {
- font-size: 14px;
- font-family: var(--font-mono);
- color: var(--ink);
-}
-
-.shell-main {
- padding: 8px 4px 28px;
-}
-
-.shell-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 18px;
- padding: 18px 22px 0;
-}
-
-.shell-header-content {
- display: grid;
gap: 8px;
- max-width: 720px;
-}
-
-.shell-header h2 {
- margin: 0;
- font-size: clamp(36px, 4vw, 56px);
- line-height: 1;
- letter-spacing: -0.04em;
- font-family: var(--font-display);
+ color: var(--page-accent-hover);
+ font-size: 14px;
font-weight: 500;
}
-.shell-header-copy {
- margin: 0;
- max-width: 640px;
- color: var(--ink-soft);
- line-height: 1.6;
+.text-button {
+ border: 0;
+ padding: 0;
+ background: none;
+ cursor: pointer;
}
-.shell-header-meta {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-end;
- gap: 10px;
- max-width: 420px;
+.inline-feedback {
+ padding: 14px 16px;
+ border-radius: 14px;
+ border: 1px solid var(--page-border);
+ background: #ffffff;
+ color: var(--page-ink-soft);
}
-.header-chip {
- padding: 10px 14px;
- 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-weight: 600;
- box-shadow: var(--shadow-sm);
+.inline-feedback.is-success {
+ border-color: rgba(21, 153, 87, 0.28);
+ background: rgba(21, 153, 87, 0.06);
+ color: var(--page-success);
}
-.header-chip-success {
- color: #0b8d62;
- background: rgba(16, 185, 129, 0.08);
- border-color: rgba(16, 185, 129, 0.12);
+.inline-feedback.is-error {
+ border-color: rgba(197, 48, 48, 0.24);
+ background: rgba(197, 48, 48, 0.06);
+ color: var(--page-danger);
}
-.shell-content {
- margin-top: 22px;
- display: grid;
- gap: 18px;
- padding: 0 18px;
+.panel,
+.stat-card,
+.pulse-card,
+.list-item,
+.task-mini-card,
+.marketing-tile,
+.marketing-ops-card,
+.marketing-flow-card,
+.marketing-stage-card,
+.auth-form-card,
+.auth-showcase-card {
+ position: relative;
+ overflow: hidden;
+ background: #ffffff;
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
.panel,
.stat-card,
.pulse-card {
- padding: 22px;
+ padding: 24px;
+ border-radius: 24px;
+}
+
+.list-item,
+.task-mini-card,
+.marketing-tile,
+.marketing-ops-card,
+.marketing-flow-card,
+.marketing-stage-card,
+.auth-showcase-card {
+ padding: 20px;
+ border-radius: 20px;
+}
+
+.panel h3,
+.stat-card h3,
+.workbench-header h3,
+.library-header h3,
+.auth-form-head h2,
+.auth-form-head h3,
+.admin-auth-head h2,
+.marketing-section-copy h2 {
+ margin: 0 0 12px;
+ font-family:
+ "SF Pro Display",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ "PingFang SC",
+ sans-serif;
+ font-weight: 600;
+ letter-spacing: -0.03em;
+}
+
+.stat-card .value,
+.task-stat-card strong,
+.studio-stat strong {
+ font-family:
+ "SF Pro Display",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ "PingFang SC",
+ sans-serif;
+ font-weight: 600;
+ letter-spacing: -0.03em;
+}
+
+.header-kicker,
+.marketing-kicker,
+.auth-showcase-kicker,
+.auth-form-kicker,
+.admin-page-kicker {
+ display: inline-block;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-size: 12px;
+ color: var(--page-accent);
+ font-weight: 600;
+}
+
+.status-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 6px 10px;
+ border-radius: 999px;
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+}
+
+.tone-soft {
+ background: rgba(0, 113, 227, 0.08);
+ color: var(--page-accent);
+}
+
+.tone-success {
+ background: rgba(21, 153, 87, 0.08);
+ color: var(--page-success);
+}
+
+.tone-warn {
+ background: rgba(183, 121, 31, 0.1);
+ color: var(--page-warn);
+}
+
+.tone-danger {
+ background: rgba(197, 48, 48, 0.1);
+ color: var(--page-danger);
+}
+
+.tone-ghost {
+ background: rgba(29, 29, 31, 0.06);
+ color: var(--page-muted);
}
.panel-grid,
@@ -829,161 +392,555 @@ textarea::placeholder {
.studio-summary-grid,
.studio-control-grid,
.media-slot-grid,
+.asset-gallery,
.task-stat-band,
-.dashboard-stage-grid {
+.dashboard-stage-grid,
+.marketing-tile-grid,
+.marketing-flow-grid,
+.marketing-stat-row,
+.auth-showcase-grid,
+.marketing-stage-grid,
+.site-highlight-strip,
+.mini-grid {
display: grid;
gap: 18px;
}
-.panel-grid {
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-}
-
.stats-grid {
- grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.two-col-grid {
- grid-template-columns: 1.05fr 0.95fr;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.workbench-grid {
- grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
+ grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
align-items: start;
}
-.studio-summary-grid {
- grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
+.studio-summary-grid,
.studio-control-grid,
-.media-slot-grid {
+.media-slot-grid,
+.task-stat-band,
+.dashboard-stage-grid,
+.site-highlight-strip,
+.marketing-flow-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
-.panel h3,
-.stat-card h3,
-.library-header h3,
-.workbench-header h3,
-.auth-card h3 {
- margin: 0 0 12px;
- font-size: 25px;
- line-height: 1.12;
- font-family: var(--font-display);
- font-weight: 600;
+.asset-gallery {
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
-.stat-card .value {
- font-size: 38px;
- line-height: 1;
- letter-spacing: -0.03em;
- font-family: var(--font-display);
- font-weight: 600;
-}
-
-.muted {
- color: var(--ink-soft);
-}
-
-.row,
-.toolbar {
- display: flex;
- gap: 12px;
- align-items: center;
- flex-wrap: wrap;
-}
-
-.toolbar {
- justify-content: space-between;
-}
-
-.list-grid,
-.ops-feed,
-.admin-dashboard-stack {
- display: grid;
- gap: 12px;
-}
-
-.list-item,
-.ops-feed-item {
- padding: 18px;
- border-radius: 18px;
- background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
-}
-
-.list-item strong {
- display: block;
- margin-bottom: 6px;
+.marketing-tile-grid,
+.auth-showcase-grid,
+.marketing-stage-grid {
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mini-grid {
- display: grid;
- gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
-.status-badge {
- display: inline-flex;
- align-items: center;
- padding: 7px 10px;
- border-radius: var(--radius-pill);
- font-size: 11px;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-
-.tone-soft {
- background: rgba(20, 86, 240, 0.08);
- color: #2450bb;
-}
-
-.tone-success {
- background: rgba(16, 185, 129, 0.1);
- color: #0b8d62;
-}
-
-.tone-warn {
- background: rgba(245, 158, 11, 0.1);
- color: #c28105;
-}
-
-.tone-danger {
- background: rgba(239, 68, 68, 0.1);
- color: #dc2626;
-}
-
-.tone-ghost {
- background: rgba(142, 142, 147, 0.12);
- color: #7a8797;
-}
-
-.media-preview {
- width: 100%;
- border-radius: 18px;
- border: 1px solid var(--line);
- background: #f3f6fb;
-}
-
.code-block {
margin: 0;
padding: 16px;
- border-radius: 18px;
- background: #181e25;
- border: 1px solid #2a3440;
- color: #eef4ff;
+ border-radius: 16px;
+ background: #1d1d1f;
+ border: 1px solid #2a2a2d;
+ color: #f5f5f7;
overflow: auto;
font-size: 13px;
line-height: 1.7;
- font-family: var(--font-mono);
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
}
-.studio-panel,
-.library-panel,
-.asset-management-shell {
- overflow: hidden;
+.media-preview {
+ width: 100%;
+ border-radius: 16px;
+ background: #f5f5f7;
+ border: 1px solid var(--page-border);
+}
+
+.marketing-home {
+ min-height: 100vh;
+ background: #ffffff;
+}
+
+.marketing-nav {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ height: 52px;
+ padding: 0 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ background: rgba(255, 255, 255, 0.82);
+ backdrop-filter: saturate(180%) blur(20px);
+ border-bottom: 1px solid rgba(210, 210, 215, 0.58);
+}
+
+.marketing-logo,
+.site-brand {
+ font-size: 20px;
+ font-weight: 600;
+ letter-spacing: -0.03em;
+}
+
+.marketing-nav-links,
+.marketing-nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 18px;
+}
+
+.marketing-nav-links a {
+ font-size: 14px;
+ color: var(--page-ink-soft);
+}
+
+.marketing-hero {
+ min-height: calc(100vh - 52px);
+ display: grid;
+ grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
+ gap: 24px;
+ align-items: center;
+ padding: 56px 40px 72px;
+ background:
+ linear-gradient(180deg, #000000 0%, #090909 100%);
+ color: #ffffff;
+}
+
+.marketing-hero-copy {
+ display: grid;
+ gap: 20px;
+ max-width: 760px;
+}
+
+.marketing-hero-copy h1 {
+ margin: 0;
+ font-size: clamp(52px, 6vw, 86px);
+ line-height: 0.96;
+ letter-spacing: -0.05em;
+ font-weight: 600;
+}
+
+.marketing-hero-copy p,
+.marketing-stage-card p,
+.marketing-section-copy p,
+.marketing-flow-card p,
+.marketing-ops-card p {
+ margin: 0;
+ color: rgba(255, 255, 255, 0.78);
+ line-height: 1.6;
+ font-size: 17px;
+}
+
+.marketing-hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+.marketing-stat-row div {
+ padding-top: 14px;
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.marketing-stat-row strong {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 20px;
+}
+
+.marketing-stat-row span {
+ color: rgba(255, 255, 255, 0.64);
+ line-height: 1.55;
+ font-size: 14px;
+}
+
+.marketing-stage {
+ display: grid;
+ gap: 18px;
+}
+
+.marketing-stage-card {
+ background: #f5f5f7;
+ color: var(--page-ink);
+ box-shadow: none;
+}
+
+.marketing-stage-card-dark {
+ background: linear-gradient(180deg, #1d1d1f, #272729);
+ color: #ffffff;
+ box-shadow: var(--page-shadow);
+}
+
+.marketing-stage-card-dark p,
+.marketing-stage-card-dark span,
+.marketing-stage-card-dark .marketing-stage-label {
+ color: rgba(255, 255, 255, 0.78);
+}
+
+.marketing-stage-card h2 {
+ margin: 10px 0 12px;
+ font-size: 30px;
+ line-height: 1.08;
+ letter-spacing: -0.03em;
+}
+
+.marketing-stage-label {
+ font-size: 12px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.marketing-chip-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 18px;
+}
+
+.marketing-chip-row span {
+ padding: 8px 12px;
+ border-radius: 999px;
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ font-size: 12px;
+}
+
+.marketing-section {
+ padding: 88px 40px;
+}
+
+.marketing-section-light {
+ background: #f5f5f7;
+ color: var(--page-ink);
+}
+
+.marketing-section-dark {
+ background: #000000;
+ color: #ffffff;
+}
+
+.marketing-section-dark .marketing-section-copy p,
+.marketing-section-dark .marketing-flow-card p {
+ color: rgba(255, 255, 255, 0.72);
+}
+
+.marketing-section-copy {
+ display: grid;
+ gap: 12px;
+ max-width: 760px;
+ margin-bottom: 28px;
+}
+
+.marketing-section-copy h2 {
+ font-size: clamp(36px, 4vw, 56px);
+ line-height: 1.04;
+}
+
+.marketing-section-copy p {
+ margin: 0;
+ color: var(--page-ink-soft);
+ line-height: 1.6;
+ font-size: 17px;
+}
+
+.marketing-tile h3,
+.marketing-flow-card strong,
+.marketing-ops-card strong {
+ margin: 0;
+ font-size: 22px;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+}
+
+.marketing-tile p,
+.marketing-flow-card p,
+.marketing-ops-card p {
+ font-size: 15px;
+ color: var(--page-ink-soft);
+}
+
+.marketing-tile-icon {
+ width: 42px;
+ height: 42px;
+ display: grid;
+ place-items: center;
+ border-radius: 12px;
+ background: rgba(0, 113, 227, 0.08);
+ color: var(--page-accent);
+}
+
+.marketing-flow-card,
+.marketing-ops-card {
+ background: rgba(255, 255, 255, 0.04);
+ border-color: rgba(255, 255, 255, 0.12);
+ box-shadow: none;
+}
+
+.marketing-flow-card span {
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.marketing-ops-shell {
+ display: grid;
+ grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
+ gap: 24px;
+ align-items: start;
+}
+
+.auth-page {
+ min-height: 100vh;
+ display: grid;
+ grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
+ background: #f5f5f7;
+}
+
+.auth-showcase {
+ padding: 56px 48px;
+ display: grid;
+ align-content: space-between;
+ gap: 32px;
+}
+
+.auth-showcase-user {
+ background:
+ linear-gradient(180deg, #000000 0%, #0c0c0e 100%);
+ color: #ffffff;
+}
+
+.auth-showcase-copy {
+ display: grid;
+ gap: 16px;
+ max-width: 760px;
+}
+
+.auth-showcase-copy h1 {
+ margin: 0;
+ font-size: clamp(44px, 5vw, 72px);
+ line-height: 0.98;
+ letter-spacing: -0.04em;
+ font-weight: 600;
+}
+
+.auth-showcase-copy p {
+ margin: 0;
+ max-width: 620px;
+ color: rgba(255, 255, 255, 0.74);
+ line-height: 1.6;
+ font-size: 17px;
+}
+
+.auth-showcase-card svg {
+ color: var(--page-accent);
+}
+
+.auth-showcase-card strong {
+ display: block;
+ font-size: 18px;
+}
+
+.auth-showcase-card span {
+ color: var(--page-ink-soft);
+ line-height: 1.55;
+ font-size: 14px;
+}
+
+.auth-form-column {
+ padding: 32px;
+ display: grid;
+ place-items: center;
+ background: #f5f5f7;
+}
+
+.auth-form-card {
+ width: min(480px, 100%);
+ border-radius: 24px;
+}
+
+.auth-form-head {
+ display: grid;
+ gap: 8px;
+ margin-bottom: 24px;
+}
+
+.auth-form-head p,
+.admin-auth-head p {
+ margin: 0;
+ color: var(--page-ink-soft);
+ line-height: 1.55;
+}
+
+.auth-form-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+}
+
+.site-app-shell {
+ min-height: 100vh;
+ background: var(--page-bg-soft);
+}
+
+.site-topbar {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: 18px;
+ padding: 16px 24px;
+ background: rgba(255, 255, 255, 0.84);
+ backdrop-filter: saturate(180%) blur(20px);
+ border-bottom: 1px solid rgba(210, 210, 215, 0.58);
+}
+
+.site-brand-block {
+ display: grid;
+ gap: 2px;
+}
+
+.site-brand-subtitle {
+ font-size: 12px;
+ color: var(--page-muted);
+}
+
+.site-topnav {
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.site-topnav-link {
+ padding: 10px 14px;
+ border-radius: 999px;
+ color: var(--page-ink-soft);
+ font-size: 14px;
+}
+
+.site-topnav-link.active {
+ background: #ffffff;
+ color: var(--page-accent);
+ box-shadow: var(--page-shadow-soft);
+}
+
+.site-userbar {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+}
+
+.site-userbar-meta {
+ display: grid;
+ gap: 2px;
+ text-align: right;
+}
+
+.site-userbar-meta strong {
+ font-size: 14px;
+}
+
+.site-userbar-meta span {
+ color: var(--page-muted);
+ font-size: 12px;
+}
+
+.site-main-shell {
+ max-width: 1320px;
+ margin: 0 auto;
+ padding: 26px 24px 48px;
+}
+
+.site-page-hero {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 18px;
+ margin-bottom: 18px;
+}
+
+.site-page-copy {
+ display: grid;
+ gap: 8px;
+ max-width: 760px;
+}
+
+.site-page-copy h1 {
+ margin: 0;
+ font-size: clamp(38px, 4vw, 56px);
+ line-height: 1;
+ letter-spacing: -0.04em;
+ font-weight: 600;
+}
+
+.site-page-copy p {
+ margin: 0;
+ color: var(--page-ink-soft);
+ line-height: 1.6;
+}
+
+.site-page-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ justify-content: flex-end;
+}
+
+.header-chip {
+ padding: 10px 14px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.94);
+ border: 1px solid var(--page-border);
+ color: var(--page-ink-soft);
+ font-size: 12px;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.header-chip-success {
+ color: var(--page-success);
+ border-color: rgba(21, 153, 87, 0.24);
+ background: rgba(21, 153, 87, 0.06);
+}
+
+.site-highlight-card {
+ padding: 18px;
+ border-radius: 18px;
+ background: #ffffff;
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
+}
+
+.site-highlight-card span {
+ display: block;
+ margin-bottom: 10px;
+ font-size: 12px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--page-accent);
+}
+
+.site-highlight-card strong {
+ font-size: 18px;
+ line-height: 1.3;
+}
+
+.shell-content {
+ margin-top: 20px;
+ display: grid;
+ gap: 18px;
}
.workbench-header,
@@ -997,78 +954,50 @@ textarea::placeholder {
.studio-command-bar {
display: grid;
- gap: 12px;
+ gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 18px;
}
.studio-command-pill {
padding: 16px 18px;
- border-radius: 20px;
+ border-radius: 18px;
background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
- color: var(--muted);
+ border: 1px solid var(--page-border);
+ box-shadow: var(--page-shadow-soft);
display: grid;
gap: 8px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
- 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;
+ color: var(--page-muted);
}
.studio-command-pill strong {
- color: var(--ink);
+ color: var(--page-ink);
font-size: 15px;
line-height: 1.45;
- text-transform: none;
letter-spacing: 0;
+ text-transform: none;
}
.studio-stat {
padding: 20px;
- border-radius: 22px;
- border: 1px solid transparent;
- box-shadow: var(--shadow-brand);
+ border-radius: 20px;
+ color: #ffffff;
+ box-shadow: var(--page-shadow);
}
.studio-summary-grid .studio-stat:nth-child(1) {
- background: linear-gradient(135deg, #1456f0, #3daeff);
- color: #ffffff;
+ background: linear-gradient(135deg, #0a84ff, #5ac8fa);
}
.studio-summary-grid .studio-stat:nth-child(2) {
- background: linear-gradient(135deg, #7c74ff, #ea5ec1);
- color: #ffffff;
+ background: linear-gradient(135deg, #1d1d1f, #3a3a3c);
}
.studio-summary-grid .studio-stat:nth-child(3) {
- background: linear-gradient(135deg, #1c2430, #1456f0);
- color: #ffffff;
+ background: linear-gradient(135deg, #0071e3, #2997ff);
}
.studio-stat span,
@@ -1080,31 +1009,33 @@ textarea::placeholder {
.studio-stat span,
.studio-stat small {
- color: rgba(255, 255, 255, 0.84);
+ color: rgba(255, 255, 255, 0.78);
}
.studio-stat strong {
display: block;
margin: 14px 0 10px;
- font-size: 32px;
+ font-size: 30px;
line-height: 1;
- font-family: var(--font-display);
- font-weight: 600;
}
.mini-note {
- color: var(--muted);
+ color: var(--page-muted);
}
-.control-block {
+.control-block,
+.asset-upload-panel,
+.recent-task-strip,
+.media-slot {
padding: 18px;
- border-radius: 22px;
+ border-radius: 20px;
background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
-.control-head {
+.control-head,
+.media-slot-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
@@ -1113,7 +1044,7 @@ textarea::placeholder {
}
.block-title {
- font-weight: 700;
+ font-weight: 600;
font-size: 15px;
}
@@ -1125,38 +1056,22 @@ textarea::placeholder {
.model-card {
width: 100%;
padding: 16px;
- border-radius: 22px;
- border: 1px solid var(--line);
- color: var(--ink);
+ border-radius: 18px;
+ border: 1px solid var(--page-border);
+ background: var(--page-bg-muted);
text-align: left;
+ color: var(--page-ink);
cursor: pointer;
- 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;
+ transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.model-card:hover {
transform: translateY(-1px);
- box-shadow: var(--shadow-brand);
}
.model-card.active {
- border-color: rgba(20, 86, 240, 0.16);
- box-shadow: var(--shadow-brand);
+ background: rgba(0, 113, 227, 0.06);
+ border-color: rgba(0, 113, 227, 0.22);
}
.model-card-head {
@@ -1175,86 +1090,63 @@ textarea::placeholder {
.model-card-head span {
display: block;
margin-top: 4px;
+ color: var(--page-ink-soft);
font-size: 12px;
- color: var(--ink-soft);
}
.model-card p {
margin: 14px 0;
- color: var(--ink-soft);
+ color: var(--page-ink-soft);
line-height: 1.6;
}
.model-card-metrics {
display: flex;
+ flex-wrap: wrap;
gap: 8px;
- flex-wrap: wrap;
}
-.model-card-metrics span {
- padding: 6px 10px;
- border-radius: var(--radius-pill);
- background: rgba(24, 30, 37, 0.06);
- color: #334155;
- font-size: 12px;
-}
-
-.prompt-editor {
- min-height: 190px;
-}
-
-.segmented-group {
- display: flex;
- gap: 10px;
- flex-wrap: wrap;
+.model-card-metrics span,
+.tab-chip,
+.segmented-button {
+ padding: 8px 12px;
+ border-radius: 999px;
+ border: 1px solid var(--page-border);
+ background: #ffffff;
+ color: var(--page-ink-soft);
+ font-size: 13px;
}
.segmented-button {
- min-height: 40px;
- padding: 10px 14px;
- border-radius: var(--radius-pill);
- border: 1px solid var(--line);
- background: #f5f8ff;
- color: var(--ink-soft);
+ min-height: 38px;
cursor: pointer;
- transition:
- background 0.18s ease,
- border-color 0.18s ease,
- box-shadow 0.18s ease;
}
-.segmented-button.active {
- background: #ffffff;
- border-color: rgba(20, 86, 240, 0.18);
- color: var(--accent);
- box-shadow: var(--shadow-sm);
+.segmented-button.active,
+.tab-chip.active {
+ color: var(--page-accent);
+ border-color: rgba(0, 113, 227, 0.18);
+ background: rgba(0, 113, 227, 0.06);
}
-.media-slot {
- padding: 16px;
- border-radius: 20px;
- background: #f9fbff;
- border: 1px solid var(--line);
-}
-
-.media-slot-head {
+.segmented-group,
+.workspace-tabs {
display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 12px;
+ flex-wrap: wrap;
+ gap: 10px;
}
.media-slot-body {
margin-top: 14px;
display: flex;
- gap: 10px;
flex-wrap: wrap;
+ gap: 10px;
}
.selection-placeholder {
- color: var(--muted);
- line-height: 1.6;
+ color: var(--page-muted);
font-size: 13px;
+ line-height: 1.55;
}
.selected-asset-chip {
@@ -1263,11 +1155,11 @@ textarea::placeholder {
min-width: 0;
padding: 10px 12px;
border-radius: 14px;
- border: 1px solid rgba(20, 86, 240, 0.12);
- background: rgba(20, 86, 240, 0.06);
- color: var(--ink);
- cursor: pointer;
+ border: 1px solid rgba(0, 113, 227, 0.2);
+ background: rgba(0, 113, 227, 0.06);
+ color: var(--page-ink);
text-align: left;
+ cursor: pointer;
}
.selected-asset-chip span,
@@ -1279,64 +1171,35 @@ textarea::placeholder {
}
.selected-asset-chip small {
- color: var(--ink-soft);
-}
-
-.text-button {
- border: 0;
- padding: 0;
- background: none;
- color: var(--accent);
- cursor: pointer;
- font-weight: 600;
+ color: var(--page-muted);
}
.toggle-card {
display: flex;
- align-items: center;
gap: 14px;
+ align-items: center;
padding: 18px;
- border-radius: 20px;
+ border-radius: 18px;
background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
.toggle-card input {
width: 18px;
height: 18px;
- accent-color: var(--accent);
+ accent-color: var(--page-accent);
}
.toggle-card span {
display: block;
- font-weight: 700;
+ font-weight: 600;
}
.toggle-card small {
display: block;
margin-top: 4px;
- color: var(--ink-soft);
-}
-
-.inline-feedback {
- padding: 14px 16px;
- border-radius: 16px;
- border: 1px solid var(--line);
- background: #f8fbff;
- color: var(--ink-soft);
-}
-
-.inline-feedback.is-success {
- border-color: rgba(16, 185, 129, 0.14);
- background: rgba(16, 185, 129, 0.06);
- color: #0b8d62;
-}
-
-.inline-feedback.is-error {
- border-color: rgba(239, 68, 68, 0.14);
- background: rgba(239, 68, 68, 0.06);
- color: #dc2626;
+ color: var(--page-ink-soft);
}
.composer-footer {
@@ -1348,38 +1211,6 @@ textarea::placeholder {
width: 100%;
}
-.workspace-tabs {
- display: flex;
- gap: 10px;
- flex-wrap: wrap;
-}
-
-.tab-chip {
- padding: 10px 14px;
- 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: #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: 22px;
- background: #f9fbff;
- border: 1px solid var(--line);
-}
-
.upload-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
@@ -1389,14 +1220,14 @@ textarea::placeholder {
.file-picker {
min-height: 52px;
+ padding: 0 16px;
display: flex;
align-items: center;
gap: 12px;
- padding: 0 16px;
- border-radius: 16px;
- border: 1px dashed rgba(20, 86, 240, 0.22);
+ border-radius: 14px;
+ border: 1px dashed rgba(0, 113, 227, 0.24);
background: #ffffff;
- color: var(--ink-soft);
+ color: var(--page-ink-soft);
cursor: pointer;
}
@@ -1426,8 +1257,8 @@ textarea::placeholder {
align-items: center;
gap: 10px;
padding-left: 14px;
- border-radius: var(--radius-pill);
- border: 1px solid var(--line);
+ border-radius: 999px;
+ border: 1px solid var(--page-border);
background: #ffffff;
}
@@ -1436,32 +1267,25 @@ textarea::placeholder {
background: transparent;
}
-.asset-gallery {
- display: grid;
- gap: 14px;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-
.asset-library-card {
overflow: hidden;
- border-radius: 22px;
- border: 1px solid var(--line);
+ border-radius: 18px;
background: #ffffff;
- box-shadow: var(--shadow-sm);
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
.asset-library-card.selected {
- border-color: rgba(20, 86, 240, 0.16);
- box-shadow: var(--shadow-brand);
+ border-color: rgba(0, 113, 227, 0.24);
}
.asset-thumb {
position: relative;
- height: 160px;
+ height: 156px;
display: grid;
place-items: center;
overflow: hidden;
- background: #f3f7ff;
+ background: var(--page-bg-soft);
}
.asset-thumb-image {
@@ -1478,10 +1302,7 @@ textarea::placeholder {
.asset-thumb-audio {
gap: 10px;
- color: var(--accent);
- background:
- linear-gradient(135deg, rgba(20, 86, 240, 0.08), rgba(234, 94, 193, 0.08)),
- #f7f9ff;
+ color: var(--page-accent);
}
.asset-media-badge {
@@ -1489,12 +1310,11 @@ textarea::placeholder {
top: 12px;
left: 12px;
padding: 6px 10px;
- border-radius: var(--radius-pill);
+ border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
- border: 1px solid rgba(255, 255, 255, 0.9);
+ border: 1px solid rgba(210, 210, 215, 0.58);
font-size: 12px;
- font-weight: 700;
- box-shadow: var(--shadow-sm);
+ font-weight: 600;
}
.asset-card-body {
@@ -1504,19 +1324,13 @@ textarea::placeholder {
.asset-card-title-row {
display: flex;
justify-content: space-between;
- align-items: flex-start;
gap: 10px;
-}
-
-.asset-card-title-row strong {
- margin: 0;
- line-height: 1.45;
- word-break: break-word;
+ align-items: flex-start;
}
.asset-card-meta {
margin-top: 8px;
- color: var(--ink-soft);
+ color: var(--page-ink-soft);
font-size: 13px;
}
@@ -1524,16 +1338,11 @@ textarea::placeholder {
display: inline-flex;
align-items: center;
gap: 4px;
- color: var(--accent);
+ color: var(--page-accent);
font-size: 12px;
white-space: nowrap;
}
-.recent-task-strip h4 {
- margin: 0 0 8px;
- font-size: 18px;
-}
-
.compact-list {
margin-top: 14px;
}
@@ -1541,17 +1350,13 @@ textarea::placeholder {
.task-mini-card {
display: grid;
gap: 12px;
- padding: 16px;
- border-radius: 18px;
- background: #ffffff;
- border: 1px solid var(--line);
}
.task-mini-meta {
display: flex;
- gap: 14px;
flex-wrap: wrap;
- color: var(--ink-soft);
+ gap: 14px;
+ color: var(--page-ink-soft);
font-size: 13px;
}
@@ -1562,11 +1367,11 @@ textarea::placeholder {
}
.empty-state {
- padding: 26px;
+ padding: 24px;
border-radius: 18px;
- border: 1px dashed var(--line-strong);
- background: #fbfdff;
- color: var(--ink-soft);
+ border: 1px dashed var(--page-border);
+ background: rgba(255, 255, 255, 0.82);
+ color: var(--page-ink-soft);
text-align: center;
}
@@ -1576,85 +1381,52 @@ textarea::placeholder {
gap: 14px;
}
-.task-stat-band {
- grid-template-columns: repeat(4, minmax(0, 1fr));
- margin-top: 20px;
-}
-
.task-stat-card {
padding: 18px;
- border-radius: 22px;
+ border-radius: 18px;
background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
-.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 {
+.task-stat-card span,
+.dashboard-mini-card span {
display: block;
- color: var(--muted);
+ margin-bottom: 10px;
font-size: 11px;
- letter-spacing: 0.1em;
+ letter-spacing: 0.12em;
text-transform: uppercase;
- font-weight: 700;
+ color: var(--page-muted);
}
.task-stat-card strong {
display: block;
- margin: 14px 0 10px;
+ margin-bottom: 8px;
font-size: 30px;
line-height: 1;
- letter-spacing: -0.03em;
- font-family: var(--font-display);
- font-weight: 600;
}
-.task-stat-card small {
- color: var(--ink-soft);
+.task-stat-card small,
+.dashboard-mini-card small {
+ color: var(--page-ink-soft);
line-height: 1.55;
}
.task-stream-card {
- background:
- linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
+ display: grid;
+ gap: 12px;
}
.task-stream-meta {
+ color: var(--page-muted);
font-size: 12px;
- color: var(--muted);
- font-family: var(--font-mono);
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
}
.dashboard-stage {
display: grid;
gap: 18px;
- grid-template-columns: 1.12fr 0.88fr;
- background:
- linear-gradient(135deg, rgba(20, 86, 240, 0.06), rgba(234, 94, 193, 0.04)),
- #ffffff;
+ grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.dashboard-stage-copy {
@@ -1662,137 +1434,502 @@ textarea::placeholder {
gap: 10px;
}
-.dashboard-stage-grid {
- grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
.dashboard-mini-card {
padding: 18px;
- border-radius: 20px;
+ border-radius: 18px;
background: #ffffff;
- border: 1px solid var(--line);
- box-shadow: var(--shadow-sm);
- display: grid;
- gap: 8px;
-}
-
-.dashboard-mini-card span {
- color: var(--muted);
- font-size: 11px;
- letter-spacing: 0.1em;
- text-transform: uppercase;
- font-weight: 700;
+ border: 1px solid var(--page-border-soft);
+ box-shadow: var(--page-shadow-soft);
}
.dashboard-mini-card strong {
font-size: 18px;
}
-.dashboard-mini-card small {
- color: var(--ink-soft);
- line-height: 1.55;
+.ops-feed-item {
+ display: grid;
+ gap: 8px;
}
-.ops-feed-item {
+.ops-feed-item strong {
+ font-size: 16px;
+}
+
+.ops-feed-item span {
+ color: var(--page-ink-soft);
+ line-height: 1.6;
+}
+
+.admin-auth-page,
+.admin-app-shell,
+.admin-loading-shell {
+ --admin-bg: #1f2228;
+ --admin-surface: rgba(255, 255, 255, 0.03);
+ --admin-surface-hover: rgba(255, 255, 255, 0.06);
+ --admin-border: rgba(255, 255, 255, 0.1);
+ --admin-border-strong: rgba(255, 255, 255, 0.2);
+ --admin-text: #ffffff;
+ --admin-text-soft: rgba(255, 255, 255, 0.68);
+ --admin-text-dim: rgba(255, 255, 255, 0.5);
+ --admin-focus: rgba(59, 130, 246, 0.5);
+}
+
+.admin-auth-page {
+ min-height: 100vh;
+ display: grid;
+ grid-template-columns: minmax(0, 1.05fr) 460px;
+ background: var(--admin-bg);
+ color: var(--admin-text);
+}
+
+.admin-auth-copy,
+.admin-auth-panel {
+ padding: 48px;
+}
+
+.admin-auth-copy {
+ display: grid;
+ align-content: space-between;
+ gap: 28px;
+}
+
+.admin-auth-copy h1 {
+ margin: 0;
+ max-width: 10ch;
+ font-size: clamp(48px, 5vw, 96px);
+ line-height: 0.92;
+ letter-spacing: -0.04em;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ font-weight: 400;
+}
+
+.admin-auth-copy p {
+ margin: 0;
+ max-width: 720px;
+ color: var(--admin-text-soft);
+ font-size: 17px;
+ line-height: 1.6;
+}
+
+.admin-page-kicker {
+ color: var(--admin-text-soft);
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+}
+
+.admin-auth-grid {
+ display: grid;
+ gap: 14px;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.admin-auth-info {
+ padding: 18px;
+ border: 1px solid var(--admin-border);
+ background: var(--admin-surface);
+ display: grid;
+ gap: 10px;
+}
+
+.admin-auth-info svg {
+ color: #ffffff;
+}
+
+.admin-auth-info strong {
+ font-size: 15px;
+}
+
+.admin-auth-info span {
+ color: var(--admin-text-soft);
+ line-height: 1.55;
+ font-size: 13px;
+}
+
+.admin-auth-panel {
+ display: grid;
+ place-items: center;
+}
+
+.admin-auth-card {
+ width: min(420px, 100%);
+ padding: 28px;
+ border: 1px solid var(--admin-border);
+ background: var(--admin-surface);
+}
+
+.admin-auth-head {
+ display: grid;
+ gap: 8px;
+ margin-bottom: 24px;
+}
+
+.admin-auth-head h2 {
+ margin: 0;
+ font-size: 30px;
+ font-weight: 400;
+ letter-spacing: -0.03em;
+}
+
+.admin-auth-page .field-label,
+.admin-app-shell .field-label {
+ color: var(--admin-text-soft);
+}
+
+.admin-auth-page .field-label input,
+.admin-auth-page .field-label select,
+.admin-auth-page .field-label textarea,
+.admin-app-shell .field-label input,
+.admin-app-shell .field-label select,
+.admin-app-shell .field-label textarea {
+ color: var(--admin-text);
+ background: transparent;
+ border-color: var(--admin-border-strong);
+ border-radius: 0;
+}
+
+.admin-auth-page .field-label input:focus,
+.admin-auth-page .field-label select:focus,
+.admin-auth-page .field-label textarea:focus,
+.admin-app-shell .field-label input:focus,
+.admin-app-shell .field-label select:focus,
+.admin-app-shell .field-label textarea:focus {
+ box-shadow: 0 0 0 4px var(--admin-focus);
+ border-color: rgba(255, 255, 255, 0.28);
+}
+
+.admin-auth-page .primary-button,
+.admin-app-shell .primary-button {
+ border-radius: 0;
+ background: #ffffff;
+ color: #1f2228;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.admin-auth-page .ghost-button,
+.admin-app-shell .ghost-button,
+.admin-app-shell .danger-button {
+ border-radius: 0;
+ background: transparent;
+ color: #ffffff;
+ border-color: var(--admin-border-strong);
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.admin-auth-page .inline-feedback,
+.admin-app-shell .inline-feedback {
+ border-radius: 0;
+ background: rgba(255, 255, 255, 0.04);
+ border-color: var(--admin-border);
+ color: var(--admin-text-soft);
+}
+
+.admin-auth-page .inline-feedback.is-error,
+.admin-app-shell .inline-feedback.is-error {
+ border-color: rgba(255, 255, 255, 0.18);
+ background: rgba(255, 255, 255, 0.06);
+ color: #ffffff;
+}
+
+.admin-app-shell {
+ min-height: 100vh;
+ display: grid;
+ grid-template-columns: 280px minmax(0, 1fr);
+ background: var(--admin-bg);
+ color: var(--admin-text);
+}
+
+.admin-rail {
+ border-right: 1px solid var(--admin-border);
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.admin-rail-brand {
+ display: grid;
+ gap: 10px;
+}
+
+.admin-rail-kicker {
+ font-size: 11px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--admin-text-soft);
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+}
+
+.admin-rail-brand h1 {
+ margin: 0;
+ font-size: 32px;
+ line-height: 1;
+ letter-spacing: -0.04em;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ font-weight: 400;
+}
+
+.admin-rail-brand p {
+ margin: 0;
+ color: var(--admin-text-soft);
+ line-height: 1.55;
+ font-size: 14px;
+}
+
+.admin-rail-nav {
display: grid;
gap: 6px;
}
-.ops-feed-item strong {
- font-size: 15px;
+.admin-rail-link {
+ min-height: 42px;
+ padding: 0 12px;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ border: 1px solid transparent;
+ color: var(--admin-text-soft);
+ font-size: 13px;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
}
-.ops-feed-item span {
- color: var(--ink-soft);
+.admin-rail-link.active,
+.admin-rail-link:hover {
+ border-color: var(--admin-border);
+ background: var(--admin-surface-hover);
+ color: #ffffff;
+}
+
+.admin-rail-footer {
+ margin-top: auto;
+ display: grid;
+ gap: 12px;
+}
+
+.admin-rail-user {
+ display: grid;
+ gap: 4px;
+}
+
+.admin-rail-user strong {
+ font-size: 14px;
+}
+
+.admin-rail-user span {
+ color: var(--admin-text-dim);
+ font-size: 12px;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+}
+
+.admin-main-shell {
+ padding: 24px;
+}
+
+.admin-page-hero {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 18px;
+ margin-bottom: 18px;
+}
+
+.admin-page-hero h2 {
+ margin: 0;
+ font-size: 40px;
+ line-height: 0.98;
+ font-weight: 400;
+ letter-spacing: -0.04em;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+}
+
+.admin-page-hero p {
+ margin: 10px 0 0;
+ max-width: 620px;
+ color: var(--admin-text-soft);
line-height: 1.6;
}
-@media (max-width: 1400px) {
- .studio-command-bar,
- .task-stat-band,
- .dashboard-stage-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
+.admin-page-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+}
+
+.admin-page-tags span {
+ padding: 10px 12px;
+ border: 1px solid var(--admin-border);
+ color: var(--admin-text-soft);
+ font-size: 12px;
+ font-family: var(--font-mono), "SFMono-Regular", Consolas, monospace;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+.admin-app-shell .shell-content {
+ margin-top: 16px;
+}
+
+.admin-app-shell .panel,
+.admin-app-shell .stat-card,
+.admin-app-shell .pulse-card,
+.admin-app-shell .list-item,
+.admin-app-shell .task-stat-card,
+.admin-app-shell .dashboard-mini-card,
+.admin-app-shell .ops-feed-item,
+.admin-loading-shell .pulse-card {
+ background: var(--admin-surface);
+ border-color: var(--admin-border);
+ box-shadow: none;
+ border-radius: 0;
+ color: #ffffff;
+}
+
+.admin-app-shell .muted,
+.admin-app-shell .mini-note,
+.admin-app-shell .task-stat-card small,
+.admin-app-shell .dashboard-mini-card small,
+.admin-app-shell .asset-card-meta,
+.admin-app-shell .list-item .muted {
+ color: var(--admin-text-soft);
+}
+
+.admin-app-shell .header-kicker,
+.admin-app-shell .header-chip,
+.admin-app-shell .status-badge {
+ color: #ffffff;
+}
+
+.admin-app-shell .header-chip,
+.admin-app-shell .tab-chip,
+.admin-app-shell .segmented-button,
+.admin-app-shell .model-card-metrics span {
+ background: transparent;
+ border-color: var(--admin-border);
+ color: var(--admin-text-soft);
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.admin-app-shell .tab-chip.active,
+.admin-app-shell .segmented-button.active {
+ color: #ffffff;
+ border-color: var(--admin-border-strong);
+ background: var(--admin-surface-hover);
+}
+
+.admin-app-shell .code-block {
+ border-radius: 0;
+ background: #111317;
+ border-color: var(--admin-border);
+}
+
+.admin-app-shell .tone-soft,
+.admin-app-shell .tone-success,
+.admin-app-shell .tone-warn,
+.admin-app-shell .tone-danger,
+.admin-app-shell .tone-ghost {
+ background: transparent;
+ border: 1px solid var(--admin-border);
+ color: #ffffff;
}
@media (max-width: 1320px) {
+ .marketing-hero,
+ .marketing-ops-shell,
.workbench-grid,
.two-col-grid,
+ .dashboard-stage,
+ .site-page-hero {
+ grid-template-columns: 1fr;
+ }
+
+ .site-page-hero {
+ display: grid;
+ }
+}
+
+@media (max-width: 1120px) {
+ .auth-page,
+ .admin-auth-page,
+ .admin-app-shell {
+ grid-template-columns: 1fr;
+ }
+
+ .marketing-hero,
+ .marketing-flow-grid,
+ .site-highlight-strip,
+ .studio-summary-grid,
.studio-control-grid,
.media-slot-grid,
- .dashboard-stage {
+ .task-stat-band,
+ .dashboard-stage-grid,
+ .studio-command-bar {
grid-template-columns: 1fr;
}
- .studio-summary-grid {
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ .site-topbar {
+ grid-template-columns: 1fr;
+ justify-items: start;
+ }
+
+ .site-userbar {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .auth-showcase,
+ .auth-form-column,
+ .admin-auth-copy,
+ .admin-auth-panel {
+ padding: 28px 20px;
+ }
+
+ .admin-rail {
+ border-right: 0;
+ border-bottom: 1px solid var(--admin-border);
}
}
-@media (max-width: 1100px) {
- .auth-grid,
- .login-grid,
- .shell-grid,
- .shell-grid-admin {
- grid-template-columns: 1fr;
+@media (max-width: 768px) {
+ .marketing-nav {
+ height: auto;
+ padding-top: 14px;
+ padding-bottom: 14px;
+ flex-direction: column;
+ align-items: flex-start;
}
- .shell-grid {
- padding: 12px;
+ .marketing-nav-links,
+ .marketing-nav-actions,
+ .site-topnav {
+ flex-wrap: wrap;
}
- .shell-sidebar {
- position: static;
- top: auto;
- min-height: auto;
+ .marketing-hero,
+ .marketing-section,
+ .site-main-shell {
+ padding-left: 18px;
+ padding-right: 18px;
}
- .showcase-card-grid {
- grid-template-columns: 1fr;
+ .marketing-hero-copy h1,
+ .auth-showcase-copy h1,
+ .admin-auth-copy h1 {
+ font-size: clamp(36px, 12vw, 56px);
}
-}
-@media (max-width: 720px) {
- .auth-hero,
- .shell-sidebar,
- .shell-main,
.panel,
.stat-card,
.pulse-card,
- .auth-card {
+ .auth-form-card,
+ .marketing-stage-card,
+ .marketing-tile,
+ .marketing-flow-card,
+ .marketing-ops-card {
padding: 18px;
}
-
- .auth-hero::before {
- inset: 14px;
- }
-
- .workbench-header,
- .library-header,
- .shell-header {
- flex-direction: column;
- }
-
- .upload-row,
- .task-stat-band,
- .studio-command-bar,
- .dashboard-stage-grid,
- .profile-card-stats {
- grid-template-columns: 1fr;
- }
-
- .asset-gallery {
- grid-template-columns: 1fr;
- }
-
- .headline {
- max-width: none;
- 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 323cb96..d63d5e0 100644
--- a/frontend-web/src/app/login/page.tsx
+++ b/frontend-web/src/app/login/page.tsx
@@ -1,7 +1,7 @@
"use client";
import { startTransition, useState } from "react";
-import { ArrowRight, Clapperboard, Coins, FolderKanban, Sparkles } from "lucide-react";
+import { ArrowRight, Coins, FolderKanban, ImagePlus } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -9,7 +9,10 @@ import { api, ApiError } from "@/lib/api";
export default function LoginPage() {
const router = useRouter();
- const [form, setForm] = useState({ account: "demo@example.com", password: "12345678" });
+ const [form, setForm] = useState({
+ account: "demo@example.com",
+ password: "12345678",
+ });
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
@@ -28,65 +31,54 @@ export default function LoginPage() {
}
return (
-
-
-
-
Creative Workbench
-
从一句提示词到成片交付，把 AI 视频生产线收进一块工作台。
-
- 参考 `MiniMax-DESIGN.md` 的产品画布思路，把模型切换、素材引用、积分消耗和任务轮询组织成一组清爽的能力卡片。
+
+
+
+
AIVIDEO FOR CREATORS
+
把创作体验打磨成真正能面对市场的产品，而不只是一个生成入口。
+
+ 从提示词、素材引用到任务交付与积分体系，AIVideo
+ 把用户真正会触达的关键环节收进同一套产品体验里。
-
- Prompt to video
- Capability cards
- Realtime task polling
-
-
-
- Studio ready
- Source mode
-
-
一次登录，接管创作链路
-
- 默认即可走本地 mock 供应商、SQLite 和本地存储，适合先把完整交互、任务状态和后台规则跑通。
-
-
-
-
-
- 工作台直达成片
- 模型、时长、比例与素材引用在同一视图完成。
-
-
-
- 任务状态持续刷新
- 提交后自动轮询，成功后直接打开结果视频。
-
-
-
- 积分链路完整
- 注册奖励、充值、兑换码和冻结扣费全部可见。
-
-
+
+
+
+
+ 素材先行
+ 图片、视频、音频素材统一管理，创作时随时调用。
+
+
+
+ 任务可追踪
+ 生成状态、结果视频和扣费记录都能持续回看。
+
+
+
+ 商业闭环
+ 积分、充值、兑换和邀请奖励自然衔接到产品流中。
+
-