From a6750929892997ad1199d78972103870cf06ca8a Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Sat, 4 Jul 2026 14:15:40 +0800
Subject: [PATCH] feat: add leads page and refresh ui components

Overhaul all core UI components (button, input, select, textarea, badge, alert, card) to use consistent tailwind color classes, add smooth transitions and hover states for better interactivity.
Add TypeScript types, updated API functions, and utility helpers for lead management with filtering and pagination support.
Build a fully functional leads management page with status and source filters, lead data formatting (travel date, budget, headcount), loading states, empty states, and a polished responsive table layout.
Add comprehensive admin sidebar, workspace, and leads table styling to the global CSS.
---
 src/api.ts                      |   21 +-
 src/components/ui/alert.tsx     |   10 +-
 src/components/ui/badge.tsx     |   14 +-
 src/components/ui/button.tsx    |   23 +-
 src/components/ui/card.tsx      |    8 +-
 src/components/ui/input.tsx     |    2 +-
 src/components/ui/select.tsx    |    2 +-
 src/components/ui/textarea.tsx  |    2 +-
 src/pages/leads/LeadsPage.tsx   |  156 +++-
 src/pages/leads/lead-helpers.ts |   91 +++
 src/styles.css                  | 1196 ++++++++++++++++++++++++++++++-
 11 files changed, 1451 insertions(+), 74 deletions(-)
 create mode 100644 src/pages/leads/lead-helpers.ts

diff --git a/src/api.ts b/src/api.ts
index 3fc7ab1..e7741b9 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -53,18 +53,29 @@ export type ProductDetailSection = {
   blocks: ProductDetailBlock[];
 };
 
+export type LeadStatus = "new" | "assigned" | "contacted" | "planning" | "won" | "invalid";
+
 export type Lead = {
   id: string;
   destination?: string | null;
   phone: string;
+  travelDate?: string | null;
+  peopleCount?: number | null;
+  budgetMin?: number | null;
+  budgetMax?: number | null;
   note?: string | null;
   sourcePage?: string | null;
-  status: "new" | "assigned" | "contacted" | "planning" | "won" | "invalid";
+  status: LeadStatus;
   createdAt: string;
   sourceProduct?: { id: string; title: string } | null;
   assignedUser?: { id: string; name: string } | null;
 };
 
+export type LeadListParams = {
+  status?: LeadStatus;
+  take?: number;
+};
+
 export type MediaAsset = {
   id: string;
   url: string;
@@ -314,8 +325,12 @@ export async function reorderSiteConfigItems(module: SiteModule, itemIds: string
   });
 }
 
-export async function getLeads() {
-  return request<{ items: Lead[] }>("/api/admin/leads");
+export async function getLeads(params: LeadListParams = {}) {
+  const search = new URLSearchParams();
+  if (params.status) search.set("status", params.status);
+  if (params.take) search.set("take", String(params.take));
+  const query = search.toString();
+  return request<{ items: Lead[] }>(`/api/admin/leads${query ? `?${query}` : ""}`);
 }
 
 export async function updateLeadStatus(id: string, status: Lead["status"]) {
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 5606800..c725296 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -3,13 +3,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const alertVariants = cva("relative w-full rounded-lg border p-4 text-sm", {
+const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm leading-6 shadow-sm", {
   variants: {
     variant: {
-      default: "border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)]",
-      warning: "border-[var(--warning-border)] bg-[var(--warning-muted)] text-[var(--warning)]",
-      destructive: "border-[var(--destructive-border)] bg-[var(--destructive-muted)] text-[var(--destructive)]",
-      success: "border-[var(--success-border)] bg-[var(--success-muted)] text-[var(--success)]",
+      default: "border-slate-200 bg-white text-slate-700",
+      warning: "border-amber-200 bg-amber-50 text-amber-800",
+      destructive: "border-red-200 bg-red-50 text-red-700",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-700",
     },
   },
   defaultVariants: {
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 9efb7f3..6c40e1a 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -3,15 +3,15 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors", {
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-bold leading-none transition-colors", {
   variants: {
     variant: {
-      default: "border-transparent bg-[var(--primary)] text-[var(--primary-foreground)]",
-      secondary: "border-transparent bg-[var(--secondary)] text-[var(--secondary-foreground)]",
-      outline: "border-[var(--border)] text-[var(--foreground)]",
-      success: "border-transparent bg-[var(--success-muted)] text-[var(--success)]",
-      warning: "border-transparent bg-[var(--warning-muted)] text-[var(--warning)]",
-      muted: "border-transparent bg-[var(--muted)] text-[var(--muted-foreground)]",
+      default: "border-teal-200 bg-teal-50 text-teal-700",
+      secondary: "border-slate-200 bg-slate-100 text-slate-700",
+      outline: "border-slate-300 bg-white text-slate-700",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-700",
+      warning: "border-amber-200 bg-amber-50 text-amber-800",
+      muted: "border-slate-200 bg-slate-100 text-slate-500",
     },
   },
   defaultVariants: {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index e68aa8a..697bc80 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,22 +5,25 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] active:scale-[0.98] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary-hover)]",
-        destructive: "bg-[var(--destructive)] text-[var(--destructive-foreground)] hover:bg-[var(--destructive-hover)]",
-        outline: "border border-[var(--input)] bg-[var(--background)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
-        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] hover:bg-[var(--secondary-hover)]",
-        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
+        default: "border border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)] shadow-sm hover:bg-[var(--primary-hover)] hover:shadow-md",
+        destructive:
+          "border border-[var(--destructive)] bg-[var(--destructive)] text-[var(--destructive-foreground)] shadow-sm hover:bg-[var(--destructive-hover)] hover:shadow-md",
+        outline:
+          "border border-slate-300 bg-white text-slate-800 shadow-sm hover:border-slate-400 hover:bg-slate-50 hover:text-slate-950 hover:shadow-md",
+        secondary:
+          "border border-slate-200 bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-200",
+        ghost: "text-slate-700 hover:bg-slate-100 hover:text-slate-950",
         link: "text-[var(--primary)] underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "h-11 px-4 py-2",
+        sm: "h-9 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-xl px-8",
+        icon: "h-10 w-10",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 6a85405..258253e 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -3,22 +3,22 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("rounded-lg border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)] shadow-sm", className)} {...props} />
+  <div ref={ref} className={cn("rounded-xl border border-slate-200 bg-white text-slate-950 shadow-sm", className)} {...props} />
 ));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  <div ref={ref} className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
-  <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-normal", className)} {...props} />
+  <h3 ref={ref} className={cn("text-2xl font-bold leading-tight tracking-normal text-slate-950", className)} {...props} />
 ));
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-[var(--muted-foreground)]", className)} {...props} />
+  <p ref={ref} className={cn("text-sm leading-6 text-slate-500", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index b79867e..aab5b8f 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -6,7 +6,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
   <input
     type={type}
     className={cn(
-      "flex h-10 w-full rounded-md border border-[var(--input)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-11 w-full rounded-lg border border-slate-300 bg-white px-3.5 py-2 text-sm text-slate-950 shadow-sm transition-[background-color,border-color,box-shadow] duration-150 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 hover:border-slate-400 focus-visible:border-teal-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600/20 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500",
       className,
     )}
     ref={ref}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 82e5939..db56dd2 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -6,7 +6,7 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttribu
   <select
     ref={ref}
     className={cn(
-      "flex h-10 w-full rounded-md border border-[var(--input)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-11 w-full rounded-lg border border-slate-300 bg-white px-3.5 py-2 text-sm font-medium text-slate-950 shadow-sm transition-[background-color,border-color,box-shadow] duration-150 hover:border-slate-400 focus-visible:border-teal-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600/20 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500",
       className,
     )}
     {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index b0ada83..330c64f 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(({ className, ...props }, ref) => (
   <textarea
     className={cn(
-      "flex min-h-24 w-full rounded-md border border-[var(--input)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] shadow-sm placeholder:text-[var(--muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:cursor-not-allowed disabled:opacity-50",
+      "flex min-h-28 w-full rounded-lg border border-slate-300 bg-white px-3.5 py-2.5 text-sm text-slate-950 shadow-sm transition-[background-color,border-color,box-shadow] duration-150 placeholder:text-slate-400 hover:border-slate-400 focus-visible:border-teal-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600/20 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500",
       className,
     )}
     ref={ref}
diff --git a/src/pages/leads/LeadsPage.tsx b/src/pages/leads/LeadsPage.tsx
index e205701..4c23cfa 100644
--- a/src/pages/leads/LeadsPage.tsx
+++ b/src/pages/leads/LeadsPage.tsx
@@ -1,71 +1,159 @@
-import { useEffect, useState } from "react";
-import { RefreshCcw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { RefreshCcw, RotateCcw } from "lucide-react";
 
-import { getLeads, updateLeadStatus } from "@/api";
+import { getLeads } from "@/api";
 import type { Lead } from "@/api";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { NativeSelect } from "@/components/ui/select";
 import { formatDate, leadStatusLabels } from "@/lib/admin-utils";
 import type { Notify } from "@/types/admin";
+import {
+  formatBudget,
+  formatPeopleCount,
+  formatTravelDate,
+  LEAD_TAKE_LIMIT,
+  matchesSourceFilter,
+  sourceFilters,
+  sourceSubtitle,
+  sourceTitle,
+  statusFilters,
+  statusVariant,
+  type LeadSourceFilter,
+  type LeadStatusFilter,
+} from "./lead-helpers";
 
-export function LeadsPage({ notify }: { notify: Notify }) {
+export function LeadsPage(_props: { notify: Notify }) {
   const [leads, setLeads] = useState<Lead[]>([]);
+  const [statusFilter, setStatusFilter] = useState<LeadStatusFilter>("all");
+  const [sourceFilter, setSourceFilter] = useState<LeadSourceFilter>("all");
   const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
 
-  const load = async () => {
-    const result = await getLeads();
-    setLeads(result.items);
-  };
+  const load = useCallback(
+    async (options: { preserveMessage?: boolean } = {}) => {
+      setLoading(true);
+      if (!options.preserveMessage) setMessage("");
+      try {
+        const result = await getLeads({ status: statusFilter === "all" ? undefined : statusFilter, take: LEAD_TAKE_LIMIT });
+        setLeads(result.items);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "线索加载失败";
+        setMessage(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [statusFilter],
+  );
 
   useEffect(() => {
-    load().catch((err) => setMessage(err.message));
-  }, []);
+    void load();
+  }, [load]);
 
-  const changeStatus = async (lead: Lead, status: Lead["status"]) => {
-    await updateLeadStatus(lead.id, status);
-    setMessage("线索状态已更新");
-    notify({ tone: "success", title: "线索已更新", message: `${lead.phone} 已标记为${leadStatusLabels[status]}。` });
-    await load();
+  const visibleLeads = useMemo(() => leads.filter((lead) => matchesSourceFilter(lead, sourceFilter)), [leads, sourceFilter]);
+
+  const resetFilters = () => {
+    setStatusFilter("all");
+    setSourceFilter("all");
+    setMessage("");
+    if (statusFilter === "all") void load();
   };
 
+  const emptyMessage = loading
+    ? "正在加载客户需求..."
+    : visibleLeads.length
+      ? ""
+      : leads.length
+        ? "当前来源筛选下暂无客户需求。"
+        : "暂无客户需求。";
+
   return (
     <section className="work-area">
       <header className="section-head">
         <div>
           <h2>需求线索跟进</h2>
-          <p>对应前台「提交出行需求」和详情页「立即咨询」。</p>
+          <p>对应前台「首页快速定制」「提交出行需求」和详情页「立即咨询」。</p>
         </div>
-        <Button variant="outline" onClick={load}>
-          <RefreshCcw size={17} />
-          刷新
-        </Button>
       </header>
+
+      <form
+        className="lead-toolbar"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void load();
+        }}
+      >
+        <label className="lead-filter-field">
+          状态
+          <NativeSelect value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as LeadStatusFilter)} disabled={loading}>
+            {statusFilters.map((item) => (
+              <option value={item.value} key={item.value}>
+                {item.label}
+              </option>
+            ))}
+          </NativeSelect>
+        </label>
+        <label className="lead-filter-field">
+          来源
+          <NativeSelect value={sourceFilter} onChange={(event) => setSourceFilter(event.target.value as LeadSourceFilter)} disabled={loading}>
+            {sourceFilters.map((item) => (
+              <option value={item.value} key={item.value}>
+                {item.label}
+              </option>
+            ))}
+          </NativeSelect>
+        </label>
+        <Button variant="outline" disabled={loading}>
+          <RefreshCcw size={16} />
+          {loading ? "查询中" : "查询"}
+        </Button>
+        <Button type="button" variant="outline" onClick={resetFilters} disabled={loading}>
+          <RotateCcw size={16} />
+          重置
+        </Button>
+      </form>
+
       {message ? <p className="notice">{message}</p> : null}
-      <div className="lead-table">
+
+      <div className="lead-table" aria-busy={loading}>
         <div className="lead-table-head">
           <span>客户</span>
-          <span>需求</span>
+          <span>提交时间</span>
+          <span>需求内容</span>
+          <span>出行信息</span>
           <span>来源</span>
           <span>状态</span>
         </div>
-        {leads.map((lead) => (
+        {visibleLeads.map((lead) => (
           <article className="lead-row" key={lead.id}>
-            <span>
+            <span className="lead-customer-cell">
               <b>{lead.phone}</b>
+            </span>
+            <span className="lead-created-cell">
               <small>{formatDate(lead.createdAt)}</small>
             </span>
-            <span>{lead.destination || lead.note || "未填写"}</span>
-            <span>{lead.sourceProduct?.title || lead.sourcePage || "H5 表单"}</span>
-            <NativeSelect value={lead.status} onChange={(event) => changeStatus(lead, event.target.value as Lead["status"])}>
-              {Object.entries(leadStatusLabels).map(([value, label]) => (
-                <option value={value} key={value}>
-                  {label}
-                </option>
-              ))}
-            </NativeSelect>
+            <span className="lead-demand-cell">
+              <b>{lead.destination || "未填写目的地"}</b>
+              <small>{lead.note || "暂无补充说明"}</small>
+            </span>
+            <span className="lead-trip-cell">
+              <small>日期：{formatTravelDate(lead.travelDate)}</small>
+              <small>人数：{formatPeopleCount(lead.peopleCount)}</small>
+              <small>预算：{formatBudget(lead)}</small>
+            </span>
+            <span className="lead-source-cell">
+              <b>{sourceTitle(lead)}</b>
+              <small>{sourceSubtitle(lead)}</small>
+            </span>
+            <span className="lead-status-cell">
+              <Badge className="lead-status-chip" variant={statusVariant(lead.status)}>
+                {leadStatusLabels[lead.status]}
+              </Badge>
+            </span>
           </article>
         ))}
-        {!leads.length ? <p className="muted empty-row">暂无客户需求。</p> : null}
+        {emptyMessage ? <p className="muted empty-row">{emptyMessage}</p> : null}
       </div>
     </section>
   );
diff --git a/src/pages/leads/lead-helpers.ts b/src/pages/leads/lead-helpers.ts
new file mode 100644
index 0000000..db07c12
--- /dev/null
+++ b/src/pages/leads/lead-helpers.ts
@@ -0,0 +1,91 @@
+import type { Lead, LeadStatus } from "@/api";
+import { leadStatusLabels } from "@/lib/admin-utils";
+
+export type LeadStatusFilter = "all" | LeadStatus;
+export type KnownLeadSource = "home_inline" | "search_inline" | "demand_page" | "product_consult";
+export type LeadSourceFilter = "all" | KnownLeadSource | "other";
+export type LeadStatusVariant = "default" | "secondary" | "success" | "warning" | "muted";
+
+export const LEAD_TAKE_LIMIT = 200;
+
+export const statusFilters: Array<{ value: LeadStatusFilter; label: string }> = [
+  { value: "all", label: "全部状态" },
+  { value: "new", label: leadStatusLabels.new },
+  { value: "assigned", label: leadStatusLabels.assigned },
+  { value: "contacted", label: leadStatusLabels.contacted },
+  { value: "planning", label: leadStatusLabels.planning },
+  { value: "won", label: leadStatusLabels.won },
+  { value: "invalid", label: leadStatusLabels.invalid },
+];
+
+export const sourcePageLabels: Record<KnownLeadSource, string> = {
+  home_inline: "首页快速定制",
+  search_inline: "搜索页快速定制",
+  demand_page: "提交需求页",
+  product_consult: "产品预订咨询",
+};
+
+export const sourceFilters: Array<{ value: LeadSourceFilter; label: string }> = [
+  { value: "all", label: "全部来源" },
+  { value: "home_inline", label: sourcePageLabels.home_inline },
+  { value: "search_inline", label: sourcePageLabels.search_inline },
+  { value: "demand_page", label: sourcePageLabels.demand_page },
+  { value: "product_consult", label: sourcePageLabels.product_consult },
+  { value: "other", label: "其他来源" },
+];
+
+export function matchesSourceFilter(lead: Lead, sourceFilter: LeadSourceFilter) {
+  if (sourceFilter === "all") return true;
+  if (sourceFilter === "other") return !isKnownSource(lead.sourcePage);
+  return lead.sourcePage === sourceFilter;
+}
+
+export function sourceTitle(lead: Lead) {
+  if (lead.sourceProduct?.title) return lead.sourceProduct.title;
+  if (isKnownSource(lead.sourcePage)) return sourcePageLabels[lead.sourcePage];
+  return lead.sourcePage || "H5 表单";
+}
+
+export function sourceSubtitle(lead: Lead) {
+  if (lead.sourceProduct?.title && isKnownSource(lead.sourcePage)) return sourcePageLabels[lead.sourcePage];
+  if (lead.assignedUser?.name) return `管家：${lead.assignedUser.name}`;
+  return "未分配管家";
+}
+
+export function formatTravelDate(value?: string | null) {
+  if (!value) return "未填写";
+  const datePart = value.slice(0, 10);
+  if (/^\d{4}-\d{2}-\d{2}$/.test(datePart)) return datePart.replace(/-/g, "/");
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" }).format(date);
+}
+
+export function formatPeopleCount(value?: number | null) {
+  return typeof value === "number" && Number.isFinite(value) ? `${value}人` : "未填写";
+}
+
+export function formatBudget(lead: Lead) {
+  const min = typeof lead.budgetMin === "number" && Number.isFinite(lead.budgetMin) ? lead.budgetMin : null;
+  const max = typeof lead.budgetMax === "number" && Number.isFinite(lead.budgetMax) ? lead.budgetMax : null;
+  if (min !== null && max !== null) return min === max ? formatMoney(min) : `${formatMoney(min)} - ${formatMoney(max)}`;
+  if (min !== null) return `${formatMoney(min)}起`;
+  if (max !== null) return `${formatMoney(max)}内`;
+  return "未填写";
+}
+
+export function statusVariant(status: LeadStatus): LeadStatusVariant {
+  if (status === "won") return "success";
+  if (status === "new" || status === "planning") return "warning";
+  if (status === "invalid") return "muted";
+  if (status === "assigned") return "secondary";
+  return "default";
+}
+
+function isKnownSource(value?: string | null): value is KnownLeadSource {
+  return Boolean(value && value in sourcePageLabels);
+}
+
+function formatMoney(value: number) {
+  return `¥${new Intl.NumberFormat("zh-CN").format(value)}`;
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 97772c5..02aeebc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import "tailwindcss";
 
 :root {
   font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
@@ -2086,8 +2086,30 @@ textarea {
   border-radius: 8px;
 }
 
+.lead-toolbar {
+  display: grid;
+  grid-template-columns: minmax(160px, 220px) minmax(160px, 240px) max-content max-content;
+  align-items: end;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.lead-toolbar > button {
+  justify-self: start;
+  min-width: 112px;
+}
+
+.lead-filter-field {
+  min-width: 0;
+  display: grid;
+  gap: 6px;
+  color: #5e6972;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .lead-table {
-  overflow: hidden;
+  overflow: auto;
   background: #fff;
   border: 1px solid #dce2e7;
   border-radius: 8px;
@@ -2096,9 +2118,10 @@ textarea {
 .lead-table-head,
 .lead-row {
   display: grid;
-  grid-template-columns: 180px minmax(160px, 1fr) minmax(220px, 1.2fr) 150px;
+  grid-template-columns: 190px 130px minmax(220px, 1.1fr) minmax(150px, 0.75fr) minmax(190px, 0.9fr) 120px;
   gap: 14px;
-  align-items: center;
+  align-items: start;
+  min-width: 1100px;
   padding: 12px 16px;
 }
 
@@ -2113,6 +2136,32 @@ textarea {
   border-top: 1px solid #edf0f2;
 }
 
+.lead-demand-cell b,
+.lead-source-cell b,
+.lead-customer-cell b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lead-demand-cell small {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.5;
+}
+
+.lead-trip-cell,
+.lead-status-cell {
+  display: grid;
+  gap: 8px;
+}
+
+.lead-status-chip {
+  width: max-content;
+}
+
 .empty-row {
   padding: 20px;
 }
@@ -2280,6 +2329,246 @@ button:focus-visible {
   border-top-color: var(--border) !important;
 }
 
+/* Sidebar visual polish */
+.admin-shell {
+  grid-template-columns: 244px minmax(0, 1fr);
+}
+
+.sidebar {
+  padding: 16px 12px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
+  border-right: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 6px 0 24px rgba(15, 23, 42, 0.045);
+}
+
+.brand-block {
+  position: relative;
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr);
+  column-gap: 12px;
+  row-gap: 2px;
+  align-items: center;
+  margin: 0 2px 14px;
+  padding: 12px 8px 16px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.brand-block::before {
+  content: "万";
+  grid-row: 1 / span 2;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  color: #ffffff;
+  background: #0f766e;
+  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.brand-block b {
+  grid-column: 2;
+  color: #0f172a;
+  font-size: 18px;
+  line-height: 1.18;
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.brand-block span {
+  grid-column: 2;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.sidebar nav {
+  gap: 16px;
+  padding: 0 2px;
+}
+
+.sidebar-group {
+  gap: 6px;
+}
+
+.sidebar-group > span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px 3px;
+  color: #7a8794;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.4;
+}
+
+.sidebar-group > span::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: rgba(148, 163, 184, 0.22);
+}
+
+.sidebar button {
+  position: relative;
+  width: 100%;
+  min-height: 52px;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  color: #334155;
+  background: transparent;
+  text-align: left;
+  transition-property: background, border-color, box-shadow, color, transform;
+  transition-duration: 160ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+}
+
+.sidebar button::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 13px;
+  bottom: 13px;
+  width: 3px;
+  border-radius: 999px;
+  background: transparent;
+}
+
+.sidebar button > svg {
+  box-sizing: content-box;
+  width: 18px;
+  height: 18px;
+  padding: 7px;
+  border-radius: 10px;
+  color: #0f766e;
+  background: #e8f5f3;
+  transition-property: background, color, box-shadow;
+  transition-duration: 160ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+}
+
+.sidebar button > span {
+  gap: 2px;
+}
+
+.sidebar button b {
+  overflow: hidden;
+  color: #172033;
+  font-size: 14px;
+  font-weight: 760;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar button small {
+  overflow: hidden;
+  color: #718096;
+  font-size: 11px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar button:hover {
+  transform: translateY(-1px);
+  border-color: rgba(15, 118, 110, 0.14);
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
+}
+
+.sidebar button:active {
+  transform: scale(0.98);
+}
+
+.sidebar button.active {
+  color: #0f766e;
+  border-color: rgba(15, 118, 110, 0.18);
+  background: #ffffff;
+  box-shadow:
+    0 10px 24px rgba(15, 23, 42, 0.07),
+    inset 0 0 0 1px rgba(15, 118, 110, 0.04);
+}
+
+.sidebar button.active::before {
+  background: #0f766e;
+}
+
+.sidebar button.active > svg {
+  color: #ffffff;
+  background: #0f766e;
+  box-shadow: 0 7px 14px rgba(15, 118, 110, 0.22);
+}
+
+.sidebar button.active b {
+  color: #0f172a;
+}
+
+.sidebar button.active small {
+  color: #0f766e;
+}
+
+.logout-button {
+  grid-template-columns: 32px minmax(0, 1fr) !important;
+  min-height: 44px !important;
+  margin: 20px 2px 0;
+  padding: 6px 8px !important;
+  border: 1px solid transparent !important;
+  border-radius: 12px !important;
+  color: #64748b !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.logout-button::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -12px;
+  bottom: auto;
+  width: auto;
+  height: 1px;
+  border-radius: 0;
+  background: rgba(148, 163, 184, 0.22);
+}
+
+.logout-button > svg {
+  color: #64748b;
+  background: #f1f5f9;
+  box-shadow: none;
+}
+
+.logout-button:hover {
+  color: #991b1b !important;
+  border-color: rgba(220, 38, 38, 0.16) !important;
+  background: #fff7f7 !important;
+  box-shadow: 0 8px 18px rgba(127, 29, 29, 0.08) !important;
+}
+
+.logout-button:hover > svg {
+  color: #b91c1c;
+  background: #fee2e2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar button {
+    transition-duration: 1ms;
+  }
+
+  .sidebar button:hover,
+  .sidebar button:active {
+    transform: none;
+  }
+}
+
 .topbar {
   background: color-mix(in srgb, var(--card) 92%, transparent);
   border-bottom-color: var(--border);
@@ -2390,7 +2679,201 @@ button:focus-visible {
   border-top-color: var(--border);
 }
 
+/* Leads workspace visual polish */
+section.work-area:has(> .lead-toolbar) {
+  position: relative;
+  padding: 28px 32px 40px;
+  background:
+    radial-gradient(circle at 16% 0%, rgba(15, 118, 110, 0.08), transparent 26rem),
+    linear-gradient(180deg, #f8fbfb 0%, #f6f8fb 48%, #f8fafc 100%);
+}
+
+section.work-area:has(> .lead-toolbar) .section-head,
+section.work-area:has(> .lead-toolbar) .lead-toolbar,
+section.work-area:has(> .lead-toolbar) .lead-table {
+  border: 1px solid rgba(203, 213, 225, 0.82);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
+}
+
+section.work-area:has(> .lead-toolbar) .section-head {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 14px;
+  padding: 20px 22px;
+}
+
+section.work-area:has(> .lead-toolbar) .section-head::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  background: linear-gradient(180deg, #0f766e, #14b8a6);
+}
+
+section.work-area:has(> .lead-toolbar) .section-head h2 {
+  color: #0f172a;
+  font-size: 18px;
+  line-height: 1.35;
+  letter-spacing: 0;
+}
+
+section.work-area:has(> .lead-toolbar) .section-head p {
+  max-width: 760px;
+  color: #526377;
+  line-height: 1.7;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-toolbar {
+  margin-bottom: 14px;
+  padding: 16px;
+  align-items: end;
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
+}
+
+section.work-area:has(> .lead-toolbar) .lead-filter-field {
+  gap: 7px;
+  color: #475569;
+  letter-spacing: 0;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-filter-field select {
+  min-height: 44px;
+  border-color: #cbd5e1;
+  border-radius: 10px;
+  color: #0f172a;
+  background: #f8fafc;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-filter-field select:hover {
+  border-color: #94a3b8;
+  background: #fff;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-toolbar > button {
+  min-height: 44px;
+  border-radius: 10px;
+  font-weight: 700;
+  transition:
+    border-color 180ms ease,
+    background 180ms ease,
+    box-shadow 180ms ease,
+    color 180ms ease;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-toolbar > button:first-of-type {
+  border-color: rgba(15, 118, 110, 0.34);
+  color: #0f766e;
+  background: #ecfdf5;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-toolbar > button:first-of-type:hover {
+  border-color: rgba(15, 118, 110, 0.55);
+  background: #dff7ec;
+  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.12);
+}
+
+section.work-area:has(> .lead-toolbar) .lead-toolbar > button:last-of-type:hover {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+}
+
+section.work-area:has(> .lead-toolbar) .notice {
+  margin-bottom: 14px;
+  border-radius: 10px;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-table {
+  overflow: auto;
+  background: #fff;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
+}
+
+section.work-area:has(> .lead-toolbar) .lead-table-head,
+section.work-area:has(> .lead-toolbar) .lead-row {
+  padding: 14px 16px;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-table-head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid #dbe5ee;
+  color: #51647b;
+  background: linear-gradient(180deg, #f8fafc 0%, #eef4f6 100%);
+}
+
+section.work-area:has(> .lead-toolbar) .lead-row {
+  min-height: 86px;
+  background: #fff;
+  transition:
+    background 160ms ease,
+    box-shadow 160ms ease;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-row:hover {
+  background: #fbfefd;
+  box-shadow: inset 3px 0 0 #14b8a6;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-row b {
+  color: #0f172a;
+  line-height: 1.45;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-row small {
+  color: #526377;
+  line-height: 1.65;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-created-cell small {
+  color: #47627f;
+  font-variant-numeric: tabular-nums;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-trip-cell {
+  gap: 3px;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-status-cell {
+  align-content: start;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-status-chip {
+  min-height: 26px;
+  align-items: center;
+  border-radius: 999px;
+  font-weight: 800;
+}
+
+section.work-area:has(> .lead-toolbar) .empty-row {
+  margin: 0;
+  padding: 28px 20px;
+  color: #64748b;
+  text-align: center;
+  background: #fbfdfe;
+}
+
 @media (max-width: 980px) {
+  section.work-area:has(> .lead-toolbar) {
+    padding: 18px 14px 28px;
+  }
+
+  section.work-area:has(> .lead-toolbar) .section-head,
+  section.work-area:has(> .lead-toolbar) .lead-toolbar {
+    padding: 14px;
+    border-radius: 12px;
+  }
+
+  section.work-area:has(> .lead-toolbar) .lead-row {
+    min-height: 0;
+  }
+
+  section.work-area:has(> .lead-toolbar) .lead-row:hover {
+    box-shadow: none;
+  }
+
   .admin-shell {
     grid-template-columns: 72px minmax(0, 1fr);
   }
@@ -2400,23 +2883,30 @@ button:focus-visible {
   }
 
   .brand-block {
+    grid-template-columns: 1fr;
     place-items: center;
     padding: 4px 0 14px;
   }
 
   .brand-block b {
+    grid-column: 1;
     font-size: 0;
   }
 
+  .brand-block::before {
+    display: none;
+  }
+
   .brand-block b::after {
     content: "万";
     display: grid;
     place-items: center;
     width: 40px;
     height: 40px;
-    border-radius: 6px;
-    background: rgba(125, 214, 208, 0.14);
+    border-radius: 12px;
     color: #fff;
+    background: linear-gradient(135deg, #0f766e, #14b8a6);
+    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2);
     font-size: 18px;
   }
 
@@ -2428,14 +2918,27 @@ button:focus-visible {
 
   .sidebar button {
     width: 48px;
+    grid-template-columns: 1fr;
+    justify-items: center;
     justify-content: center;
     padding: 0;
   }
 
+  .sidebar button::before {
+    left: 2px;
+  }
+
   .logout-button {
+    grid-template-columns: 1fr !important;
+    margin-inline: 0;
     font-size: 0;
   }
 
+  .logout-button::before {
+    left: 0;
+    right: 0;
+  }
+
   .section-head {
     display: grid;
   }
@@ -2492,8 +2995,685 @@ button:focus-visible {
     height: auto;
   }
 
-  .lead-table-head,
-  .lead-row {
+  .lead-toolbar {
     grid-template-columns: 1fr;
   }
+
+  .lead-table-head,
+  .lead-row {
+    min-width: 0;
+    grid-template-columns: 1fr;
+  }
+
+  .lead-table-head {
+    display: none;
+  }
+}
+
+/* Admin UI Tailwind visual refresh */
+.login-shell {
+  @apply min-h-dvh bg-slate-100 px-4;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(20, 184, 166, 0.16), transparent 26rem),
+    linear-gradient(135deg, #f8fafc 0%, #eef6f5 48%, #f8fafc 100%);
+}
+
+.login-panel {
+  @apply w-full max-w-md rounded-2xl border border-white/80 bg-white/95 p-8 shadow-xl;
+}
+
+.login-kicker {
+  @apply mb-1 w-fit rounded-full border border-teal-200 bg-teal-50 px-3 py-1 text-xs font-bold text-teal-700;
+}
+
+.login-panel h3 {
+  @apply text-3xl font-black leading-tight text-slate-950;
+}
+
+.login-form-stack {
+  @apply gap-5;
+}
+
+.admin-shell {
+  @apply min-h-dvh bg-slate-50 text-slate-950;
+  width: 100%;
+  max-width: 100%;
+  grid-template-columns: 248px minmax(0, 1fr);
+}
+
+.sidebar {
+  @apply border-r border-slate-200 bg-white px-3 py-4 shadow-sm;
+}
+
+.brand-block {
+  @apply mx-1 mb-4 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3;
+}
+
+.brand-block::before,
+.brand-block b::after {
+  @apply bg-teal-700 shadow-md;
+}
+
+.brand-block b {
+  @apply text-lg font-black leading-tight text-slate-950;
+}
+
+.brand-block span,
+.sidebar-group > span,
+.sidebar button small {
+  @apply text-slate-500;
+}
+
+.sidebar-group > span::after {
+  @apply bg-slate-200;
+}
+
+.sidebar button {
+  @apply min-h-12 rounded-xl border border-transparent text-slate-700 transition duration-150 ease-out;
+}
+
+.sidebar button > svg {
+  @apply rounded-lg bg-teal-50 text-teal-700;
+}
+
+.sidebar button b {
+  @apply font-bold text-slate-900;
+}
+
+.sidebar button:hover {
+  @apply border-teal-100 bg-slate-50 shadow-sm;
+  transform: translateY(-1px);
+}
+
+.sidebar button.active {
+  @apply border-teal-200 bg-white text-teal-700 shadow-md;
+}
+
+.sidebar button.active::before {
+  @apply bg-teal-700;
+}
+
+.sidebar button.active > svg {
+  @apply bg-teal-700 text-white shadow-sm;
+}
+
+.logout-button {
+  @apply text-slate-500;
+}
+
+.logout-button:hover {
+  @apply border-red-200 bg-red-50 text-red-700 shadow-sm;
+}
+
+.logout-button:hover > svg {
+  @apply bg-red-100 text-red-700;
+}
+
+.main-panel {
+  @apply bg-slate-50;
+}
+
+.topbar {
+  @apply min-h-16 border-b border-slate-200 bg-white/90 px-7 backdrop-blur;
+}
+
+.topbar span {
+  @apply text-base font-black text-slate-950;
+}
+
+.topbar small {
+  @apply mt-1 text-sm text-slate-500;
+}
+
+.admin-dirty-chip {
+  @apply min-h-8 rounded-full border border-slate-200 bg-slate-100 px-3 text-xs font-bold text-slate-500;
+}
+
+.admin-dirty-chip.is-dirty {
+  @apply border-amber-200 bg-amber-50 text-amber-800;
+}
+
+.work-area {
+  @apply bg-slate-50 p-7;
+}
+
+.section-head {
+  @apply mb-5 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm;
+}
+
+.section-head h2,
+.editor-head h3,
+.data-panel h3,
+.page-rail h3,
+.module-rail h3,
+.item-rail h3 {
+  @apply text-lg font-black leading-tight text-slate-950;
+}
+
+.section-head p,
+.module-data-head p,
+.field-help,
+.muted,
+.empty-state {
+  @apply text-sm leading-6 text-slate-500;
+}
+
+.primary-action {
+  @apply border-teal-700 bg-teal-700 text-white shadow-sm hover:bg-teal-800 hover:shadow-md;
+}
+
+.primary-action.compact {
+  @apply h-10 rounded-lg px-3.5;
+}
+
+.section-head button,
+.toolbar button,
+.action-row button,
+.icon-action,
+.inline-action {
+  @apply min-h-10 rounded-lg border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-slate-400 hover:bg-slate-50 hover:text-slate-950;
+}
+
+.action-row,
+.section-action-row {
+  @apply flex-wrap gap-2.5;
+}
+
+.notice,
+.form-error {
+  @apply rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm font-medium leading-6 text-amber-800;
+}
+
+.metric-card,
+.data-panel,
+.editor-pane,
+.list-pane,
+.page-rail,
+.page-focus-card,
+.module-rail,
+.item-rail,
+.edit-rail,
+.product-list-page,
+.product-detail-page,
+.product-editor-sidebar,
+.lead-table,
+.admin-disclosure,
+.detail-section-card,
+.detail-block-card,
+.destination-row,
+.front-context,
+.route-product-block,
+.route-section-accordion {
+  @apply rounded-2xl border border-slate-200 bg-white text-slate-950 shadow-sm;
+}
+
+.page-rail,
+.module-rail,
+.item-rail,
+.edit-rail {
+  @apply p-4;
+}
+
+.page-focus-card {
+  @apply gap-3 bg-white p-5;
+}
+
+.page-focus-card .focus-kicker,
+.module-rail em,
+.module-index {
+  @apply rounded-lg bg-teal-50 text-teal-700;
+}
+
+.front-context {
+  @apply border-teal-100 bg-teal-50/60 text-slate-800;
+}
+
+.page-rail button,
+.module-rail-item,
+.mapped-list-main,
+.product-table button,
+.route-product-row {
+  @apply rounded-xl border border-slate-200 bg-white text-slate-900 shadow-sm transition duration-150 ease-out;
+}
+
+.page-rail button:hover,
+.module-rail-item:hover,
+.mapped-list-main:hover,
+.product-table button:hover,
+.route-product-row:hover,
+.route-section-accordion:hover {
+  @apply border-teal-200 bg-teal-50/40 shadow-md;
+}
+
+.page-rail button.active,
+.module-rail-item.active,
+.mapped-list-main.selected,
+.product-table button.selected,
+.route-product-list.selected {
+  @apply border-teal-300 bg-teal-50 shadow-sm;
+}
+
+.mapped-list-tags em,
+.route-product-tags em {
+  @apply rounded-full border border-teal-200 bg-teal-50 px-2 py-0.5 text-xs font-bold text-teal-700;
+}
+
+.mapped-empty,
+.empty-row,
+.route-section-message {
+  @apply rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-5 text-sm leading-6 text-slate-500;
+}
+
+.admin-disclosure {
+  @apply overflow-hidden;
+}
+
+.admin-disclosure-head {
+  @apply min-h-16 border-b border-slate-100 bg-slate-50/80 px-4 py-3;
+}
+
+.admin-disclosure-copy strong,
+.detail-section-card-head b,
+.detail-block-card header b,
+.product-table b,
+.mapped-list b,
+.route-product-main b {
+  @apply font-bold text-slate-950;
+}
+
+.admin-disclosure-copy small,
+.detail-section-card-head small,
+.product-table small,
+.mapped-list small,
+.route-product-main small,
+.product-editor-sidebar p,
+.product-side-meta small,
+.dense-list small,
+.destination-row small {
+  @apply text-slate-500;
+}
+
+.admin-disclosure-body {
+  @apply gap-4 p-4;
+}
+
+.form-grid {
+  @apply gap-4;
+}
+
+label {
+  @apply gap-2 text-sm font-semibold text-slate-600;
+}
+
+input,
+select,
+textarea {
+  @apply min-h-11 rounded-lg border-slate-300 bg-white text-sm text-slate-950 shadow-sm;
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  @apply border-slate-400;
+}
+
+.switch-line {
+  @apply min-h-11 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-slate-700;
+}
+
+.edit-drawer-backdrop {
+  @apply bg-slate-950/25 backdrop-blur-sm;
+}
+
+.edit-rail.edit-drawer {
+  @apply rounded-l-2xl bg-white shadow-xl;
+}
+
+.edit-drawer .editor-head {
+  @apply border-b border-slate-200 bg-white px-5 py-4;
+}
+
+.drawer-editor-footer,
+.product-editor-footer {
+  @apply border-t border-slate-200 bg-white/95 px-5 py-4;
+}
+
+.product-workbench {
+  @apply bg-slate-50;
+}
+
+.product-list-page,
+.product-detail-page {
+  @apply p-5;
+}
+
+.product-list-summary {
+  @apply gap-3;
+}
+
+.product-list-summary span,
+.product-side-meta span {
+  @apply rounded-xl border border-slate-200 bg-slate-50 p-4 shadow-sm;
+}
+
+.product-list-summary b,
+.product-side-meta b,
+.metric-card strong {
+  @apply text-2xl font-black text-slate-950;
+}
+
+.toolbar {
+  @apply rounded-2xl border border-slate-200 bg-white p-3 shadow-sm;
+}
+
+.product-table {
+  @apply gap-2.5;
+}
+
+.product-table button {
+  @apply min-h-20 px-3 py-3;
+}
+
+.product-table img,
+.image-placeholder,
+.mapped-list-main img,
+.mini-product-stack img,
+.route-product-row img,
+.route-product-row .image-placeholder {
+  @apply rounded-lg bg-slate-100 ring-1 ring-slate-200;
+}
+
+.product-cover-preview,
+.image-editor-preview,
+.single-image-preview {
+  @apply rounded-xl bg-slate-100 text-slate-400 ring-1 ring-slate-200;
+}
+
+.tag-input-row span,
+.image-editor-row,
+.detail-section-card,
+.detail-block-card {
+  @apply rounded-xl border border-slate-200 bg-slate-50 p-3;
+}
+
+.detail-block-card.text {
+  @apply bg-white;
+}
+
+.icon-action.danger-icon,
+.mapped-list-actions button:last-child,
+.route-section-preview-delete {
+  @apply text-red-600 hover:bg-red-50 hover:text-red-700;
+}
+
+.status-chip {
+  @apply rounded-full border px-2.5 py-1 text-xs font-bold;
+}
+
+.status-chip.published {
+  @apply border-emerald-200 bg-emerald-50 text-emerald-700;
+}
+
+.status-chip.draft {
+  @apply border-amber-200 bg-amber-50 text-amber-800;
+}
+
+.status-chip.archived {
+  @apply border-slate-200 bg-slate-100 text-slate-500;
+}
+
+.admin-toast-stack {
+  @apply right-5 top-5 gap-3;
+}
+
+.admin-toast {
+  @apply min-w-80 rounded-2xl border border-slate-200 bg-white p-4 text-slate-900 shadow-xl;
+}
+
+.admin-toast.success {
+  @apply border-emerald-200 bg-emerald-50;
+}
+
+.admin-toast.warning {
+  @apply border-amber-200 bg-amber-50;
+}
+
+.admin-toast.danger {
+  @apply border-red-200 bg-red-50;
+}
+
+section.work-area:has(> .lead-toolbar) {
+  @apply bg-slate-50 px-8 py-7;
+}
+
+section.work-area:has(> .lead-toolbar) .section-head,
+section.work-area:has(> .lead-toolbar) .lead-toolbar,
+section.work-area:has(> .lead-toolbar) .lead-table {
+  @apply rounded-2xl border border-slate-200 bg-white shadow-sm;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-table-head {
+  @apply border-b border-slate-200 bg-slate-50 text-slate-500;
+}
+
+section.work-area:has(> .lead-toolbar) .lead-row:hover {
+  @apply bg-teal-50/30;
+}
+
+@media (max-width: 980px) {
+  .admin-shell {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
+
+  .work-area,
+  section.work-area:has(> .lead-toolbar) {
+    @apply p-4;
+  }
+
+  .topbar {
+    @apply px-4;
+  }
+
+  .section-head,
+  .product-list-page,
+  .product-detail-page {
+    @apply rounded-xl p-4;
+  }
+
+  .toolbar,
+  .lead-toolbar {
+    @apply grid-cols-1;
+  }
+}
+
+/* Drawer editor readability fix */
+.edit-rail.edit-drawer {
+  width: min(520px, calc(100vw - 24px));
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 18px 0 0 18px;
+}
+
+.edit-drawer .mapped-editor {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  background: #f8fafc;
+}
+
+.edit-drawer .editor-head {
+  position: relative;
+  z-index: 2;
+  min-height: 84px;
+  background: #fff;
+  box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9);
+}
+
+.edit-drawer .admin-disclosure-stack {
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  gap: 12px;
+  padding: 16px 18px 20px;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 transparent;
+}
+
+.edit-drawer .admin-disclosure-stack::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  display: block;
+}
+
+.edit-drawer .admin-disclosure-stack::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: #cbd5e1;
+  background-clip: content-box;
+}
+
+.edit-drawer .admin-disclosure {
+  flex: 0 0 auto;
+  border-radius: 16px;
+  border-color: #dbe5ee;
+  background: #fff;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
+}
+
+.edit-drawer .admin-disclosure-head {
+  min-height: 56px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+}
+
+.edit-drawer .admin-disclosure-copy strong {
+  font-size: 15px;
+  line-height: 1.35;
+}
+
+.edit-drawer .admin-disclosure-body {
+  gap: 14px;
+  padding: 16px;
+  background: #fff;
+}
+
+.edit-drawer .admin-disclosure-body .form-grid,
+.edit-drawer .form-grid.compact-grid {
+  grid-template-columns: 1fr;
+  overflow: visible;
+}
+
+.edit-drawer label {
+  color: #475569;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.edit-drawer input,
+.edit-drawer select,
+.edit-drawer textarea {
+  min-height: 46px;
+  background: #fff;
+}
+
+.edit-drawer .single-image-uploader {
+  gap: 10px;
+}
+
+.edit-drawer .single-image-card {
+  border-radius: 14px;
+  background: #f8fafc;
+}
+
+.edit-drawer .single-image-preview {
+  min-height: 150px;
+  max-height: 176px;
+  aspect-ratio: 16 / 7;
+  border-radius: 14px;
+}
+
+.edit-drawer .single-image-preview img {
+  object-fit: cover;
+}
+
+.edit-drawer .switch-line {
+  min-height: 46px;
+  justify-content: flex-start;
+  border-color: #dbe5ee;
+  background: #f8fafc;
+}
+
+.drawer-editor-footer {
+  position: relative;
+  z-index: 2;
+  min-height: 76px;
+  background: #fff;
+  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
+}
+
+@media (max-width: 560px) {
+  .edit-rail.edit-drawer {
+    inset: 0;
+    width: 100vw;
+    border-radius: 0;
+  }
+
+  .edit-drawer .admin-disclosure-stack {
+    padding: 12px;
+  }
+}
+
+/* Structure header action polish */
+.structure-workbench > .section-head {
+  align-items: center;
+}
+
+.structure-workbench > .section-head .action-row {
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: 10px;
+}
+
+.structure-workbench > .section-head .action-row button {
+  width: 136px;
+  min-width: 136px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0 14px !important;
+  border-radius: 12px !important;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.structure-workbench > .section-head .action-row button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.structure-workbench > .section-head .action-row .primary-action {
+  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.14);
+}
+
+@media (max-width: 980px) {
+  .structure-workbench > .section-head {
+    align-items: stretch;
+  }
+
+  .structure-workbench > .section-head .action-row {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 720px) {
+  .structure-workbench > .section-head .action-row button {
+    width: 100%;
+    min-width: 0;
+  }
 }