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;
+  }
 }