refactor: 更新配置模块的样式与布局，优化组件结构，增强可读性与一致性

src/modules/config/config-chip-group.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type ConfigChipGroupProps = {
+  label?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export function ConfigChipGroup({ label, children, className }: ConfigChipGroupProps) {
+  return (
+    <div className={cn("space-y-2.5", className)}>
+      {label ? <p className="text-sm font-medium text-foreground">{label}</p> : null}
+      <div className="flex flex-wrap gap-2">{children}</div>
+    </div>
+  );
+}
+
+type ConfigChipProps = {
+  active: boolean;
+  onClick: () => void;
+  children: ReactNode;
+  disabled?: boolean;
+};
+
+export function ConfigChip({ active, onClick, children, disabled }: ConfigChipProps) {
+  return (
+    <Button
+      type="button"
+      variant={active ? "default" : "outline"}
+      size="sm"
+      disabled={disabled}
+      className={cn("h-9 rounded-full px-4 text-sm font-medium", active && "shadow-sm")}
+      onClick={onClick}
+    >
+      {children}
+    </Button>
+  );
+}

src/modules/config/config-context-banner.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ConfigContextBannerProps = {
+  children: ReactNode;
+  className?: string;
+  /** Highlights read-only or draft-only hints. */
+  emphasis?: boolean;
+};
+
+export function ConfigContextBanner({
+  children,
+  className,
+  emphasis = false,
+}: ConfigContextBannerProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border px-4 py-3 text-sm leading-relaxed",
+        emphasis
+          ? "border-primary/25 bg-accent/80 text-foreground"
+          : "border-border/60 bg-muted/40 text-muted-foreground",
+        className,
+      )}
+      role="status"
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ConfigContextEmphasis({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <span className={cn("font-medium text-primary", className)}>
+      {children}
+    </span>
+  );
+}

src/modules/config/config-doc-page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
+type ConfigDocPageProps = {
+  title: string;
+  titleSuffix?: ReactNode;
+  description?: string;
+  /** Category / play-type chips etc., rendered above the version toolbar. */
+  filters?: ReactNode;
+  toolbar?: ReactNode;
+  context?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function ConfigDocToolbar({
+  switcher,
+  actions,
+  className,
+}: {
+  switcher: ReactNode;
+  actions: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-border/60 bg-secondary/50 p-4 shadow-sm",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="min-w-0 flex-1">{switcher}</div>
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div>
+      </div>
+    </div>
+  );
+}
+
+export function ConfigDocPage({
+  title,
+  titleSuffix,
+  description,
+  filters,
+  toolbar,
+  context,
+  children,
+  className,
+  contentClassName,
+}: ConfigDocPageProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="border-b border-border/60 pb-4">
+        <CardTitle className="text-lg">
+          {title}
+          {titleSuffix ? (
+            <span className="ml-2 font-normal text-muted-foreground">{titleSuffix}</span>
+          ) : null}
+        </CardTitle>
+        {description ? <CardDescription className="text-base">{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent className={cn("space-y-6 pt-6", contentClassName)}>
+        {filters}
+        {toolbar}
+        {context}
+        {children}
+      </CardContent>
+    </Card>
+  );
+}

src/modules/config/config-readonly-value.tsx

@@ -16,7 +16,7 @@ export function ConfigReadonlyValue({
   return (
     <span
       className={cn(
-        "inline-flex min-h-8 w-full items-center rounded-md border border-transparent bg-slate-50 px-2.5 text-sm text-slate-800",
+        "inline-flex min-h-9 w-full items-center rounded-md border border-border/60 bg-muted/60 px-3 text-sm text-foreground",
         mono && "font-mono tabular-nums",
         className,
       )}

src/modules/config/config-section.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ConfigSectionProps = {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function ConfigSection({
+  title,
+  description,
+  actions,
+  children,
+  className,
+}: ConfigSectionProps) {
+  return (
+    <section className={cn("space-y-4", className)}>
+      <div className="flex flex-wrap items-start justify-between gap-3 border-b border-border/60 pb-3">
+        <div className="min-w-0 space-y-1">
+          <h3 className="text-base font-semibold text-foreground">{title}</h3>
+          {description ? (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          ) : null}
+        </div>
+        {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+      {children}
+    </section>
+  );
+}

src/modules/config/config-status-badge.tsx

@@ -1,15 +1,20 @@
 import { useTranslation } from "react-i18next";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 
 export function ConfigStatusBadge({ status }: { status: string }) {
   const { t } = useTranslation("config");
   const label = t(`versionStatus.${status}`, { defaultValue: status });
   const className =
     status === "active"
-      ? "border-emerald-500/20 bg-emerald-500/12 text-emerald-700 dark:text-emerald-300"
+      ? "border-primary/30 bg-primary/10 text-primary"
       : status === "draft"
-        ? "border-amber-500/20 bg-amber-500/12 text-amber-700 dark:text-amber-300"
+        ? "border-border bg-secondary text-secondary-foreground"
-        : "border-slate-300 bg-slate-100 text-slate-600 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-300";
+        : "border-border/80 bg-muted text-muted-foreground";
 
-  return <Badge variant="outline" className={`font-normal tabular-nums ${className}`}>{label}</Badge>;
+  return (
+    <Badge variant="outline" className={cn("font-medium tabular-nums", className)}>
+      {label}
+    </Badge>
+  );
 }

src/modules/config/config-subnav.tsx

@@ -13,7 +13,10 @@ export function ConfigSubNav() {
   const links = CONFIG_NAV_GROUPS.flatMap((group) => group.items);
 
   return (
-    <nav className="flex w-full flex-wrap items-end gap-1 border-b border-border/60 px-1" aria-label={t("nav.aria")}>
+    <nav
+      className="flex w-full flex-wrap gap-1 rounded-xl border border-border/60 bg-muted/40 p-1.5"
+      aria-label={t("nav.aria")}
+    >
       {links.map(({ href, key }) => {
         const active = pathname === href || pathname.startsWith(`${href}/`);
         return (
@@ -21,10 +24,10 @@ export function ConfigSubNav() {
             key={href}
             href={href}
             className={cn(
-              "border-b-2 px-4 py-3 text-sm font-medium transition-colors",
+              "rounded-lg px-4 py-2.5 text-sm font-medium transition-colors",
               active
-                ? "border-primary text-primary"
+                ? "bg-card text-primary shadow-sm"
-                : "border-transparent text-muted-foreground hover:border-border/80 hover:text-foreground",
+                : "text-muted-foreground hover:bg-card/60 hover:text-foreground",
             )}
           >
             {t(`nav.items.${key}`)}

src/modules/config/config-version-actions.tsx

@@ -36,23 +36,12 @@ export function ConfigVersionActions({
   const resolvedPublishLabel = publishLabel ?? t("versionActions.publishCurrent");
 
   return (
-    <div className={cn("flex flex-wrap items-center gap-2 lg:justify-end", className)}>
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      <Button
+      <Button type="button" variant="outline" disabled={loadingList} onClick={onRefresh}>
-        type="button"
-        variant="outline"
-        className="border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:text-slate-950"
-        disabled={loadingList}
-        onClick={onRefresh}
-      >
         <RefreshCw className={loadingList ? "size-4 animate-spin" : "size-4"} aria-hidden />
         {loadingList ? t("versionActions.refreshing") : t("versionActions.refresh")}
       </Button>
-      <Button
+      <Button type="button" disabled={saving} onClick={onNewDraft}>
-        type="button"
-        className="bg-slate-950 text-white hover:bg-slate-800"
-        disabled={saving}
-        onClick={onNewDraft}
-      >
         <Plus className="size-4" aria-hidden />
         {t("versionActions.newDraft")}
       </Button>
@@ -60,20 +49,14 @@ export function ConfigVersionActions({
         <>
           <Button
             type="button"
-            variant="outline"
+            variant="secondary"
-            className="border-amber-300 bg-amber-50 text-amber-900 hover:bg-amber-100 hover:text-amber-950"
             disabled={draftActionBusy}
             onClick={onSaveDraft}
           >
             <Save className="size-4" aria-hidden />
             {t("versionActions.saveDraft")}
           </Button>
-          <Button
+          <Button type="button" disabled={draftActionBusy} onClick={onPublish}>
-            type="button"
-            className="bg-emerald-600 text-white hover:bg-emerald-700"
-            disabled={draftActionBusy}
-            onClick={onPublish}
-          >
             <Rocket className="size-4" aria-hidden />
             {resolvedPublishLabel}
           </Button>

src/modules/config/config-version-switcher.tsx

@@ -141,7 +141,7 @@ export function ConfigVersionSwitcher({
           variant="outline"
           disabled={loading || sortedVersions.length === 0}
           onClick={() => setSheetOpen(true)}
-          className="shrink-0 border-slate-300 bg-white text-slate-800 hover:bg-slate-50 hover:text-slate-950"
+          className="shrink-0"
         >
           <Layers className="size-4" aria-hidden />
           {t("versionSwitcher.switch", { ns: "config" })}
@@ -151,24 +151,24 @@ export function ConfigVersionSwitcher({
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
         <SheetContent
           side="right"
-          className="flex flex-col overflow-hidden border-l bg-slate-50 p-0 shadow-xl sm:max-w-[430px]"
+          className="flex flex-col overflow-hidden border-l bg-background p-0 shadow-xl sm:max-w-[430px]"
         >
-          <div className="border-b bg-white px-5 pb-4 pt-5">
+          <div className="border-b border-border/60 bg-card px-5 pb-4 pt-5">
             <SheetHeader className="space-y-2 text-left">
-              <SheetTitle className="text-[17px] font-semibold tracking-tight text-slate-950">
+              <SheetTitle className="text-base font-semibold tracking-tight text-foreground">
                 {resolvedSheetTitle}
               </SheetTitle>
-              <SheetDescription className="max-w-[320px] text-[13px] leading-5 text-slate-500">
+              <SheetDescription className="max-w-[320px] text-sm leading-relaxed text-muted-foreground">
                 {resolvedSheetDescription}
               </SheetDescription>
             </SheetHeader>
           </div>
-          <div className="border-b bg-white px-4 py-3">
+          <div className="border-b border-border/60 bg-card px-4 py-3">
             <div className="flex flex-wrap gap-2">
               {statusCounts.map((s) => (
                 <div
                   key={s.status}
-                  className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-background px-3 py-1.5 text-xs text-muted-foreground"
+                  className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/50 px-3 py-1.5 text-sm text-muted-foreground"
                 >
                   <span className="font-medium text-foreground/80">{s.label}</span>
                   <span className="font-mono tabular-nums">{s.count}</span>
@@ -178,7 +178,7 @@ export function ConfigVersionSwitcher({
           </div>
           <div className="flex-1 overflow-auto px-4 py-4">
             {sortedVersions.length === 0 ? (
-              <div className="rounded-2xl border border-dashed border-border/60 bg-white/70 p-5 text-center text-sm text-muted-foreground">
+              <div className="rounded-2xl border border-dashed border-border/60 bg-muted/30 p-5 text-center text-sm text-muted-foreground">
                 {t("versionSwitcher.empty", { ns: "config" })}
               </div>
             ) : (
@@ -193,17 +193,17 @@ export function ConfigVersionSwitcher({
                       <div className="flex items-center gap-2.5">
                         <div
                           className={cn(
-                            "size-2.5 rounded-full shadow-[0_0_0_4px_rgba(148,163,184,0.12)]",
+                            "size-2.5 rounded-full",
-                            status === "draft" && "bg-amber-400 shadow-amber-100",
+                            status === "draft" && "bg-muted-foreground",
-                            status === "active" && "bg-emerald-500 shadow-emerald-100",
+                            status === "active" && "bg-primary",
-                            status === "archived" && "bg-slate-400 shadow-slate-100",
+                            status === "archived" && "bg-border",
                           )}
                         />
-                        <p className="text-[15px] font-semibold text-foreground">
+                        <p className="text-base font-semibold text-foreground">
                           {t(`versionStatus.${status}`, { ns: "config" })}
                         </p>
                       </div>
-                      <p className="rounded-full bg-muted/50 px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground">
+                      <p className="rounded-full bg-muted px-2 py-0.5 text-sm font-medium tabular-nums text-muted-foreground">
                         {t("versionSwitcher.count", { ns: "config", count: rows.length })}
                       </p>
                     </div>
@@ -220,10 +220,10 @@ export function ConfigVersionSwitcher({
                           >
                             <div
                               className={cn(
-                                "mt-1 h-auto w-1 shrink-0 rounded-full bg-slate-200",
+                                "mt-1 h-auto w-1 shrink-0 rounded-full bg-border",
-                                v.status === "draft" && "bg-amber-300",
+                                v.status === "draft" && "bg-muted-foreground/60",
-                                v.status === "active" && "bg-emerald-400",
+                                v.status === "active" && "bg-primary",
-                                v.status === "archived" && "bg-slate-300",
+                                v.status === "archived" && "bg-muted-foreground/30",
                               )}
                             />
                             <div className="min-w-0 flex-1 space-y-2">
@@ -234,11 +234,11 @@ export function ConfigVersionSwitcher({
                                       v{v.version_no}
                                     </span>
                                     <ConfigStatusBadge status={v.status} />
-                                    <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground">
+                                    <span className="rounded-full bg-muted px-2 py-0.5 text-sm font-medium tabular-nums text-muted-foreground">
                                       #{v.id}
                                     </span>
                                   </div>
-                                  <p className="line-clamp-2 text-[13px] leading-5 text-muted-foreground">
+                                  <p className="line-clamp-2 text-sm leading-relaxed text-muted-foreground">
                                     {t("versionSwitcher.effectiveAt", {
                                       ns: "config",
                                       value: v.effective_at ? formatDt(v.effective_at) : "—",
@@ -252,7 +252,7 @@ export function ConfigVersionSwitcher({
                                   </p>
                                 </div>
                                 {isCurrent ? (
-                                  <span className="shrink-0 rounded-full bg-foreground px-2.5 py-1 text-xs font-medium text-background">
+                                  <span className="shrink-0 rounded-full bg-primary px-2.5 py-1 text-sm font-medium text-primary-foreground">
                                     {t("versionSwitcher.current", { ns: "config" })}
                                   </span>
                                 ) : null}
@@ -263,7 +263,7 @@ export function ConfigVersionSwitcher({
                                   variant={isCurrent ? "secondary" : "outline"}
                                   size="sm"
                                   className={cn(
-                                    "h-8 rounded-full px-3 text-xs",
+                                    "h-9 rounded-full px-3 text-sm",
                                     isCurrent && "bg-muted text-muted-foreground hover:bg-muted",
                                   )}
                                   onClick={() => switchTo(v.id)}
@@ -277,7 +277,7 @@ export function ConfigVersionSwitcher({
                                     type="button"
                                     variant="ghost"
                                     size="sm"
-                                    className="rounded-full text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+                                    className="rounded-full text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
                                     disabled={rollbackBusy}
                                     onClick={() => {
                                       onRollbackVersion(v);
@@ -292,7 +292,7 @@ export function ConfigVersionSwitcher({
                                     type="button"
                                     variant="ghost"
                                     size="sm"
-                                    className="rounded-full text-xs text-rose-600 hover:bg-rose-50 hover:text-rose-700"
+                                    className="rounded-full text-sm text-destructive hover:bg-destructive/10 hover:text-destructive"
                                     disabled={deletingId === v.id}
                                     onClick={() => setDeleteTarget(v)}
                                   >

src/modules/config/config-workspace-shell.tsx

@@ -6,11 +6,11 @@ import { ConfigSubNav } from "@/modules/config/config-subnav";
 
 export function ConfigWorkspaceShell({ children }: { children: ReactNode }) {
   return (
-    <div className="mx-auto flex w-full max-w-[1680px] flex-col gap-6 px-4 py-5 sm:px-6 lg:px-8 lg:py-6">
+    <div className="mx-auto flex w-full max-w-[1680px] flex-col gap-5 px-4 py-5 sm:px-6 lg:px-8 lg:py-6">
-      <div className="sticky top-14 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="sticky top-14 z-20 -mx-1 bg-background/95 px-1 pb-1 backdrop-blur supports-[backdrop-filter]:bg-background/80">
         <ConfigSubNav />
       </div>
-      <div className="min-w-0">{children}</div>
+      <div className="min-w-0 space-y-5">{children}</div>
     </div>
   );
 }

src/modules/config/doc/odds-config-doc-screen.tsx

@@ -15,7 +15,9 @@ import {
   putOddsItems,
 } from "@/api/admin-config";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ConfigChip, ConfigChipGroup } from "@/modules/config/config-chip-group";
+import { ConfigContextBanner, ConfigContextEmphasis } from "@/modules/config/config-context-banner";
+import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
 import {
   Dialog,
   DialogContent,
@@ -29,7 +31,6 @@ import { Label } from "@/components/ui/label";
 import { ConfigReadonlyValue } from "@/modules/config/config-readonly-value";
 import { ConfigVersionActions } from "@/modules/config/config-version-actions";
 import { ConfigVersionSwitcher } from "@/modules/config/config-version-switcher";
-import { cn } from "@/lib/utils";
 import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
 import { LotteryApiBizError } from "@/types/api/errors";
 import type {
@@ -395,105 +396,90 @@ export function OddsConfigDocScreen() {
   ];
 
   return (
-    <Card>
+    <ConfigDocPage
-      <CardHeader className="space-y-1">
+      title={t("nav.items.odds", { ns: "config" })}
-        <CardTitle className="text-lg">{t("nav.items.odds", { ns: "config" })}</CardTitle>
+      filters={
-      </CardHeader>
+        <div className="space-y-4 rounded-xl border border-border/60 bg-card p-4">
-      <CardContent className="space-y-6">
+          <ConfigChipGroup label={t("odds.category", { ns: "config" })}>
-        <div className="flex flex-wrap gap-2">
+            {catTabs.map((tab) => (
-          <span className="text-base text-muted-foreground self-center mr-2">{t("odds.category", { ns: "config" })}</span>
+              <ConfigChip
-          {catTabs.map((t) => (
+                key={tab.id}
-            <Button
+                active={catTab === tab.id}
-              key={t.id}
+                onClick={() => setCatTab(tab.id)}
-              type="button"
+              >
-              variant={catTab === t.id ? "default" : "outline"}
+                {tab.label}
-              size="xs"
+              </ConfigChip>
-              className={cn(
+            ))}
-                "h-7 rounded-full px-3 text-xs font-medium",
+          </ConfigChipGroup>
-                catTab === t.id ? "shadow-sm" : "bg-white text-slate-900",
+          <ConfigChipGroup label={t("odds.playType", { ns: "config" })}>
-              )}
-              onClick={() => setCatTab(t.id)}
-            >
-              {t.label}
-            </Button>
-          ))}
-        </div>
-
-        <div className="space-y-2 min-h-[96px]">
-          <p className="text-base text-muted-foreground">{t("odds.playType", { ns: "config" })}</p>
-          <div className="flex flex-wrap gap-2 min-h-[44px]">
             {filteredTypes.length === 0 ? (
-              <span className="text-base text-muted-foreground">{t("odds.noPlayTypes", { ns: "config" })}</span>
+              <span className="text-sm text-muted-foreground">{t("odds.noPlayTypes", { ns: "config" })}</span>
             ) : (
-              filteredTypes.map((t) => (
+              filteredTypes.map((type) => (
-                <Button
+                <ConfigChip
-                  key={t.play_code}
+                  key={type.play_code}
-                  type="button"
+                  active={resolvedPlayCode === type.play_code}
-                  variant={resolvedPlayCode === t.play_code ? "secondary" : "outline"}
+                  onClick={() => setPlayCode(type.play_code)}
-                  className={cn(
-                    "h-8 rounded-full border-slate-300 px-4 text-sm font-medium",
-                    resolvedPlayCode === t.play_code
-                      ? "border-slate-950 bg-slate-950 text-white shadow-sm hover:bg-slate-900"
-                      : "bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50",
-                  )}
-                  onClick={() => setPlayCode(t.play_code)}
                 >
-                  {t.display_name_zh ?? t.play_code}
+                  {type.display_name_zh ?? type.play_code}
-                </Button>
+                </ConfigChip>
               ))
             )}
-          </div>
+          </ConfigChipGroup>
         </div>
-
+      }
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+      toolbar={
-          <ConfigVersionSwitcher
+        <ConfigDocToolbar
-            versions={list}
+          switcher={
-            selectedId={selectedId}
+            <ConfigVersionSwitcher
-            onSelectedIdChange={setSelectedId}
+              versions={list}
-            loading={loadingList}
+              selectedId={selectedId}
-            sheetTitle={`${t("nav.items.odds", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
+              onSelectedIdChange={setSelectedId}
-            sheetDescription={t("odds.sheetDescription", { ns: "config" })}
+              loading={loadingList}
-            onDeleteVersion={handleDeleteVersion}
+              sheetTitle={`${t("nav.items.odds", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
-            onRollbackVersion={requestRollback}
+              sheetDescription={t("odds.sheetDescription", { ns: "config" })}
-            rollbackBusy={saving}
+              onDeleteVersion={handleDeleteVersion}
-            className="lg:flex-1"
+              onRollbackVersion={requestRollback}
-          />
+              rollbackBusy={saving}
-
+            />
-          <ConfigVersionActions
+          }
-            isDraft={isDraft}
+          actions={
-            loadingList={loadingList}
+            <ConfigVersionActions
-            loadingDetail={loadingDetail}
+              isDraft={isDraft}
-            saving={saving}
+              loadingList={loadingList}
-            onRefresh={() => void refreshList()}
+              loadingDetail={loadingDetail}
-            onNewDraft={() => void handleNewDraft()}
+              saving={saving}
-            onSaveDraft={() => void handleSave()}
+              onRefresh={() => void refreshList()}
-            onPublish={() => void requestPublishConfirm()}
+              onNewDraft={() => void handleNewDraft()}
-          />
+              onSaveDraft={() => void handleSave()}
-        </div>
+              onPublish={() => void requestPublishConfirm()}
-
+            />
-        {detail ? (
+          }
-          <div className="space-y-1 text-sm">
+        />
-            <p className="text-muted-foreground">
+      }
-              {t("odds.activeVersionPrefix", { ns: "config" })}
+      context={
-              {activeHead ? (
+        detail ? (
-                <>
+          <ConfigContextBanner emphasis={!isDraft}>
-                  v{activeHead.version_no}
+            {t("odds.activeVersionPrefix", { ns: "config" })}
-                  {activeHead.effective_at ? ` · ${formatDt(activeHead.effective_at)}` : ""}
+            {activeHead ? (
-                </>
+              <>
-              ) : (
+                v{activeHead.version_no}
-                "—"
+                {activeHead.effective_at ? ` · ${formatDt(activeHead.effective_at)}` : ""}
-              )}
+              </>
-              {!isDraft ? (
+            ) : (
-                <span className="text-amber-600 dark:text-amber-400">
+              "—"
-                  {" "}
+            )}
-                  - {t("odds.readOnlyHint", { ns: "config" })}
+            {!isDraft ? (
-                </span>
+              <>
-              ) : null}
+                {" "}
-            </p>
+                — <ConfigContextEmphasis>{t("odds.readOnlyHint", { ns: "config" })}</ConfigContextEmphasis>
-          </div>
+              </>
-        ) : null}
+            ) : null}
-
+          </ConfigContextBanner>
-        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        ) : null
+      }
+    >
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
         {loadingDetail || loadingTypes ? (
           <div className="flex min-h-[420px] items-center">
@@ -566,8 +552,6 @@ export function OddsConfigDocScreen() {
           </div>
         ) : null}
 
-      </CardContent>
-
       <Dialog open={rollbackOpen} onOpenChange={setRollbackOpen}>
         <DialogContent showCloseButton className="sm:max-w-md">
           <DialogHeader>
@@ -628,6 +612,6 @@ export function OddsConfigDocScreen() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </Card>
+    </ConfigDocPage>
   );
 }

src/modules/config/doc/play-config-doc-screen.tsx

@@ -14,7 +14,10 @@ import {
   putPlayConfigItems,
 } from "@/api/admin-config";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ConfigChipGroup } from "@/modules/config/config-chip-group";
+import { ConfigContextBanner, ConfigContextEmphasis } from "@/modules/config/config-context-banner";
+import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
+import { ConfigSection } from "@/modules/config/config-section";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
@@ -375,36 +378,37 @@ export function PlayConfigDocScreen() {
   }
 
   return (
-    <Card>
+    <ConfigDocPage
-      <CardHeader className="space-y-1">
+      title={t("nav.items.plays", { ns: "config" })}
-        <CardTitle className="text-lg">{t("nav.items.plays", { ns: "config" })}</CardTitle>
+      toolbar={
-      </CardHeader>
+        <ConfigDocToolbar
-      <CardContent className="space-y-4">
+          switcher={
-        <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+            <ConfigVersionSwitcher
-          <ConfigVersionSwitcher
+              versions={list}
-            versions={list}
+              selectedId={selectedId}
-            selectedId={selectedId}
+              onSelectedIdChange={setSelectedId}
-            onSelectedIdChange={setSelectedId}
+              loading={loadingList}
-            loading={loadingList}
+              sheetTitle={`${t("nav.items.plays", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
-            sheetTitle={`${t("nav.items.plays", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
+              onDeleteVersion={handleDeleteVersion}
-            onDeleteVersion={handleDeleteVersion}
+            />
-            className="lg:flex-1"
+          }
-          />
+          actions={
-
+            <ConfigVersionActions
-          <ConfigVersionActions
+              isDraft={isDraft}
-            isDraft={isDraft}
+              loadingList={loadingList}
-            loadingList={loadingList}
+              loadingDetail={loadingDetail}
-            loadingDetail={loadingDetail}
+              saving={saving}
-            saving={saving}
+              onRefresh={() => void refreshList()}
-            onRefresh={() => void refreshList()}
+              onNewDraft={() => void handleNewDraft()}
-            onNewDraft={() => void handleNewDraft()}
+              onSaveDraft={() => void handleSaveDraft()}
-            onSaveDraft={() => void handleSaveDraft()}
+              onPublish={() => void handlePublish()}
-            onPublish={() => void handlePublish()}
+            />
-          />
+          }
-        </div>
+        />
-
+      }
-        {detail ? (
+      context={
-          <p className="text-sm text-muted-foreground">
+        detail ? (
+          <ConfigContextBanner emphasis={!isDraft}>
             {activeHead ? (
               <>
                 {t("play.activeVersion", { ns: "config", version: activeHead.version_no })}
@@ -412,65 +416,61 @@ export function PlayConfigDocScreen() {
               </>
             ) : null}
             {!isDraft ? (
-              <span className="text-amber-600 dark:text-amber-400">
+              <>
                 {activeHead ? " — " : ""}
-                {t("play.readOnlyHint", { ns: "config" })}
+                <ConfigContextEmphasis>{t("play.readOnlyHint", { ns: "config" })}</ConfigContextEmphasis>
-              </span>
+              </>
             ) : null}
-          </p>
+          </ConfigContextBanner>
-        ) : null}
+        ) : null
-
+      }
-        {detail ? (
+    >
-          <div className="space-y-3">
+      {detail ? (
-            <div className="flex flex-wrap items-center justify-between gap-2">
+        <ConfigSection
-              <p className="text-sm font-medium">{t("play.batchSwitchesTitle", { ns: "config" })}</p>
+          title={t("play.batchSwitchesTitle", { ns: "config" })}
-              {!isDraft ? (
+          description={!isDraft ? t("play.readOnlyDraftHint", { ns: "config" }) : undefined}
-                <span className="text-xs text-amber-600 dark:text-amber-400">
+        >
-                  {t("play.readOnlyDraftHint", { ns: "config" })}
+          <ConfigChipGroup>
-                </span>
+            {batchSwitchStates.map((group) => (
-              ) : null}
+              <div
-            </div>
+                key={group.key}
-            <div className="flex flex-wrap gap-2">
+                className="flex items-center gap-3 rounded-xl border border-border/60 bg-card px-4 py-3"
-              {batchSwitchStates.map((group) => (
+              >
-                <div
+                <div className="min-w-[100px]">
-                  key={group.key}
+                  <p className="text-sm font-medium text-foreground">{group.label}</p>
-                  className="flex items-center gap-2 rounded-xl border border-border/60 bg-background/70 px-3 py-2"
+                  <p className="text-sm text-muted-foreground">
-                >
+                    {group.total > 0
-                  <div className="min-w-[92px]">
+                      ? t("play.batchEnabledCount", {
-                    <p className="text-sm font-medium">{group.label}</p>
+                          ns: "config",
-                    <p className="text-xs text-muted-foreground">
+                          enabledCount: group.enabledCount,
-                      {group.total > 0
+                          total: group.total,
-                        ? t("play.batchEnabledCount", {
+                        })
-                            ns: "config",
+                      : t("play.noPlayTypes", { ns: "config" })}
-                            enabledCount: group.enabledCount,
+                  </p>
-                            total: group.total,
-                          })
-                        : t("play.noPlayTypes", { ns: "config" })}
-                    </p>
-                  </div>
-                  <Button
-                    type="button"
-                    size="sm"
-                    variant={group.allEnabled ? "secondary" : "outline"}
-                    disabled={!isDraft || saving || group.total === 0}
-                    onClick={() => applyBatchSwitch(group, !group.allEnabled)}
-                  >
-                    {group.allEnabled
-                      ? t("play.actions.disable", { ns: "config" })
-                      : t("play.actions.enable", { ns: "config" })}
-                  </Button>
                 </div>
-              ))}
+                <Button
-            </div>
+                  type="button"
-          </div>
+                  size="sm"
-        ) : null}
+                  variant={group.allEnabled ? "secondary" : "outline"}
+                  disabled={!isDraft || saving || group.total === 0}
+                  onClick={() => applyBatchSwitch(group, !group.allEnabled)}
+                >
+                  {group.allEnabled
+                    ? t("play.actions.disable", { ns: "config" })
+                    : t("play.actions.enable", { ns: "config" })}
+                </Button>
+              </div>
+            ))}
+          </ConfigChipGroup>
+        </ConfigSection>
+      ) : null}
 
-        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
-        {loadingDetail ? (
+      {loadingDetail ? (
-          <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
+        <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
-        ) : (
+      ) : (
-          <Table>
+        <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead className="text-center">{t("play.table.playCode", { ns: "config" })}</TableHead>
@@ -601,9 +601,8 @@ export function PlayConfigDocScreen() {
                   </TableRow>
                 ))}
               </TableBody>
-          </Table>
+        </Table>
-        )}
+      )}
-      </CardContent>
 
       <Dialog open={ruleDialogOpen} onOpenChange={setRuleDialogOpen}>
         <DialogContent showCloseButton className="sm:max-w-lg">
@@ -632,6 +631,6 @@ export function PlayConfigDocScreen() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </Card>
+    </ConfigDocPage>
   );
 }

src/modules/config/doc/rebate-config-doc-screen.tsx

@@ -14,7 +14,8 @@ import {
   publishOddsVersion,
   putOddsItems,
 } from "@/api/admin-config";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ConfigContextBanner, ConfigContextEmphasis } from "@/modules/config/config-context-banner";
+import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -266,55 +267,60 @@ export function RebateConfigDocScreen() {
   }
 
   return (
-    <Card>
+    <ConfigDocPage
-      <CardHeader className="space-y-1">
+      title={t("nav.items.rebate", { ns: "config" })}
-        <CardTitle className="text-lg">{t("nav.items.rebate", { ns: "config" })}</CardTitle>
+      toolbar={
-      </CardHeader>
+        <ConfigDocToolbar
-      <CardContent className="space-y-6">
+          switcher={
-        <div className="flex flex-wrap items-center gap-3">
+            <ConfigVersionSwitcher
-          <ConfigVersionSwitcher
+              versions={listRows}
-            versions={listRows}
+              selectedId={selectedId}
-            selectedId={selectedId}
+              onSelectedIdChange={setSelectedId}
-            onSelectedIdChange={setSelectedId}
+              loading={loading}
-            loading={loading}
+              sheetTitle={`${t("nav.items.rebate", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
-            sheetTitle={`${t("nav.items.rebate", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
+              sheetDescription={t("rebate.sheetDescription", { ns: "config" })}
-            sheetDescription={t("rebate.sheetDescription", { ns: "config" })}
+              onDeleteVersion={handleDeleteVersion}
-            onDeleteVersion={handleDeleteVersion}
+            />
-            className="w-auto min-w-0"
+          }
-          />
+          actions={
-
+            <ConfigVersionActions
-          <ConfigVersionActions
+              isDraft={isDraft}
-            isDraft={isDraft}
+              loadingList={loading}
-            loadingList={loading}
+              loadingDetail={loadingDetail}
-            loadingDetail={loadingDetail}
+              saving={saving}
-            saving={saving}
+              publishLabel={t("rebate.publishLabel", { ns: "config" })}
-            publishLabel={t("rebate.publishLabel", { ns: "config" })}
+              onRefresh={() => void refreshList()}
-            onRefresh={() => void refreshList()}
+              onNewDraft={() => void handleNewDraft()}
-            onNewDraft={() => void handleNewDraft()}
+              onSaveDraft={() => void handleSave()}
-            onSaveDraft={() => void handleSave()}
+              onPublish={() => void handlePublish()}
-            onPublish={() => void handlePublish()}
+            />
-          />
+          }
-
+        />
-          {detail ? (
+      }
-            <p className="text-sm text-muted-foreground">
+      context={
-              {t("rebate.editingVersion", {
+        detail ? (
-                ns: "config",
+          <ConfigContextBanner emphasis={!isDraft}>
-                version: detail.version_no,
+            {t("rebate.editingVersion", {
-                status:
+              ns: "config",
-                  detail.status === "draft"
+              version: detail.version_no,
-                    ? t("versionStatus.draft", { ns: "config" })
+              status:
-                    : detail.status === "active"
+                detail.status === "draft"
-                      ? t("versionStatus.active", { ns: "config" })
+                  ? t("versionStatus.draft", { ns: "config" })
-                      : t("versionStatus.archived", { ns: "config" }),
+                  : detail.status === "active"
-              })}
+                    ? t("versionStatus.active", { ns: "config" })
-              {!isDraft ? (
+                    : t("versionStatus.archived", { ns: "config" }),
-                <span className="text-amber-600 dark:text-amber-400"> - {t("rebate.readOnlyHint", { ns: "config" })}</span>
+            })}
-              ) : null}
+            {!isDraft ? (
-            </p>
+              <>
-          ) : null}
+                {" "}
-        </div>
+                — <ConfigContextEmphasis>{t("rebate.readOnlyHint", { ns: "config" })}</ConfigContextEmphasis>
-
+              </>
-        <div className="grid gap-4 sm:grid-cols-3">
+            ) : null}
+          </ConfigContextBanner>
+        ) : null
+      }
+    >
+      <div className="grid gap-5 sm:grid-cols-3">
           <div className="grid gap-2">
             <Label>{t("rebate.fields.d2", { ns: "config" })}</Label>
             {isDraft ? (
@@ -387,10 +393,9 @@ export function RebateConfigDocScreen() {
           </span>
         </div>
 
-        {loading || loadingDetail ? (
+      {loading || loadingDetail ? (
-          <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
+        <p className="text-sm text-muted-foreground">{t("states.loading", { ns: "common" })}</p>
-        ) : null}
+      ) : null}
-      </CardContent>
+    </ConfigDocPage>
-    </Card>
   );
 }

src/modules/config/doc/risk-cap-doc-screen.tsx

@@ -14,7 +14,9 @@ import {
   putRiskCapItems,
 } from "@/api/admin-config";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ConfigContextBanner, ConfigContextEmphasis } from "@/modules/config/config-context-banner";
+import { ConfigDocPage, ConfigDocToolbar } from "@/modules/config/config-doc-page";
+import { ConfigSection } from "@/modules/config/config-section";
 import {
   Dialog,
   DialogContent,
@@ -327,55 +329,53 @@ export function RiskCapDocScreen() {
   }
 
   return (
-    <Card>
+    <ConfigDocPage
-      <CardHeader className="space-y-1">
+      title={t("nav.items.risk-cap", { ns: "config" })}
-        <CardTitle className="text-lg">
+      titleSuffix={detail ? `· v${detail.version_no}` : undefined}
-          {t("nav.items.risk-cap", { ns: "config" })}
+      toolbar={
-          {detail ? (
+        <ConfigDocToolbar
-            <span className="text-muted-foreground font-normal">
+          switcher={
-              {" "}
+            <ConfigVersionSwitcher
-              · v{detail.version_no}
+              versions={list}
-            </span>
+              selectedId={selectedId}
-          ) : null}
+              onSelectedIdChange={setSelectedId}
-        </CardTitle>
+              loading={loadingList}
-      </CardHeader>
+              sheetTitle={`${t("nav.items.risk-cap", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
-      <CardContent className="space-y-8">
+              onDeleteVersion={handleDeleteVersion}
-        <div className="flex flex-wrap items-center gap-3">
+            />
-          <ConfigVersionSwitcher
+          }
-            versions={list}
+          actions={
-            selectedId={selectedId}
+            <ConfigVersionActions
-            onSelectedIdChange={setSelectedId}
+              isDraft={isDraft}
-            loading={loadingList}
+              loadingList={loadingList}
-            sheetTitle={`${t("nav.items.risk-cap", { ns: "config" })} ${t("versionSwitcher.sheetTitle", { ns: "config" })}`}
+              loadingDetail={loadingDetail}
-            onDeleteVersion={handleDeleteVersion}
+              saving={saving}
-            className="w-auto min-w-0"
+              onRefresh={() => void refreshList()}
-          />
+              onNewDraft={() => void handleNewDraft()}
+              onSaveDraft={() => void handleSave()}
+              onPublish={() => void handlePublish()}
+            />
+          }
+        />
+      }
+      context={
+        detail ? (
+          <ConfigContextBanner emphasis={!isDraft}>
+            {t("riskCap.effectiveAt", { ns: "config", value: detail.effective_at ? formatDt(detail.effective_at) : "—" })}
+            {!isDraft ? (
+              <>
+                {" "}
+                — <ConfigContextEmphasis>{t("riskCap.readOnlyHint", { ns: "config" })}</ConfigContextEmphasis>
+              </>
+            ) : null}
+          </ConfigContextBanner>
+        ) : null
+      }
+      contentClassName="space-y-8"
+    >
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
-          <ConfigVersionActions
+      <ConfigSection title={t("riskCap.defaultCap.title", { ns: "config" })}>
-            isDraft={isDraft}
-            loadingList={loadingList}
-            loadingDetail={loadingDetail}
-            saving={saving}
-            onRefresh={() => void refreshList()}
-            onNewDraft={() => void handleNewDraft()}
-            onSaveDraft={() => void handleSave()}
-            onPublish={() => void handlePublish()}
-          />
-
-          {detail ? (
-            <p className="text-sm text-muted-foreground">
-              {t("riskCap.effectiveAt", { ns: "config", value: detail.effective_at ? formatDt(detail.effective_at) : "—" })}
-              {!isDraft ? (
-                <span className="text-amber-600 dark:text-amber-400"> - {t("riskCap.readOnlyHint", { ns: "config" })}</span>
-              ) : null}
-            </p>
-          ) : null}
-        </div>
-
-        {error ? <p className="text-sm text-destructive">{error}</p> : null}
-
-        <section className="space-y-3">
-          <h3 className="text-sm font-medium">{t("riskCap.defaultCap.title", { ns: "config" })}</h3>
           <div className="flex flex-wrap items-end gap-2">
             <div className="grid gap-1">
               <Label htmlFor="default-cap">{t("riskCap.defaultCap.fieldLabel", { ns: "config" })}</Label>
@@ -401,22 +401,23 @@ export function RiskCapDocScreen() {
               </Button>
             ) : null}
           </div>
-        </section>
+      </ConfigSection>
 
-        <section className="space-y-3">
+      <ConfigSection
-          <div className="flex flex-wrap items-center justify-between gap-2">
+        title={t("riskCap.specialCaps.title", { ns: "config" })}
-            <h3 className="text-sm font-medium">{t("riskCap.specialCaps.title", { ns: "config" })}</h3>
+        actions={
-            {isDraft ? (
+          isDraft ? (
-              <Button
+            <Button
-                type="button"
+              type="button"
-                variant="outline"
+              variant="outline"
-                disabled={saving}
+              disabled={saving}
-                onClick={() => setDraftRows((prev) => [...prev, newRow()])}
+              onClick={() => setDraftRows((prev) => [...prev, newRow()])}
-              >
+            >
-                {t("riskCap.actions.addSpecialCap", { ns: "config" })}
+              {t("riskCap.actions.addSpecialCap", { ns: "config" })}
-              </Button>
+            </Button>
-            ) : null}
+          ) : null
-          </div>
+        }
+      >
           {loadingDetail ? (
             <p className="text-sm text-muted-foreground">{t("riskCap.loadingDetails", { ns: "config" })}</p>
           ) : specialRows.length === 0 ? (
@@ -494,10 +495,9 @@ export function RiskCapDocScreen() {
               </TableBody>
             </Table>
           )}
-        </section>
+      </ConfigSection>
 
-        <section className="space-y-3">
+      <ConfigSection title={t("riskCap.occupancy.title", { ns: "config" })}>
-          <h3 className="text-sm font-medium">{t("riskCap.occupancy.title", { ns: "config" })}</h3>
           <div className="flex flex-wrap gap-3 items-end">
             <div className="grid gap-1">
               <Label htmlFor="occ-search">{t("riskCap.occupancy.searchLabel", { ns: "config" })}</Label>
@@ -548,8 +548,7 @@ export function RiskCapDocScreen() {
                 ))}
               </TableBody>
             </Table>
-        </section>
+      </ConfigSection>
-      </CardContent>
 
       <Dialog open={syncOpen} onOpenChange={setSyncOpen}>
         <DialogContent showCloseButton className="sm:max-w-md">
@@ -569,6 +568,6 @@ export function RiskCapDocScreen() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </Card>
+    </ConfigDocPage>
   );
 }

src/modules/config/doc/wallet-config-doc-screen.tsx

@@ -9,7 +9,7 @@ import {
   updateAdminSetting,
 } from "@/api/admin-settings";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ConfigDocPage } from "@/modules/config/config-doc-page";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { LotteryApiBizError } from "@/types/api/errors";
@@ -193,11 +193,6 @@ export function WalletConfigDocScreen({ embedded = false }: WalletConfigDocScree
   }
 
   return (
-    <Card>
+    <ConfigDocPage title={t("wallet.title", { ns: "config" })}>{content}</ConfigDocPage>
-      <CardHeader>
-        <CardTitle>{t("wallet.title", { ns: "config" })}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-6">{content}</CardContent>
-    </Card>
   );
 }