Tighten ultrawide layout with visible side gutters.

Cap content at 768-960px via PageShell width tiers, add muted outer margins, and limit gua grid to four columns.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/bazi/page.tsx

@@ -1,11 +1,10 @@
 import PageShell from "@/components/page-shell";
 import BaziForm from "@/components/modes/bazi-form";
-import { APP_CONTAINER } from "@/lib/layout";
 
 export default function BaziPage() {
   return (
-    <PageShell>
-      <div className={`${APP_CONTAINER} border-b border-border/40 py-6 text-center`}>
+    <PageShell width="wide">
+      <div className="border-b border-border/40 py-6 text-center">
         <h1 className="text-2xl font-bold tracking-wide">生辰八字</h1>
         <p className="mt-2 text-sm text-muted-foreground">
           四柱排盘 · 十神大运 · AI 命理解读

app/combined/page.tsx

@@ -1,11 +1,10 @@
 import PageShell from "@/components/page-shell";
 import CombinedForm from "@/components/modes/combined-form";
-import { APP_CONTAINER } from "@/lib/layout";
 
 export default function CombinedPage() {
   return (
-    <PageShell>
-      <div className={`${APP_CONTAINER} border-b border-border/40 py-6 text-center`}>
+    <PageShell width="wide">
+      <div className="border-b border-border/40 py-6 text-center">
         <h1 className="text-2xl font-bold tracking-wide">综合测算</h1>
         <p className="mt-2 text-sm text-muted-foreground">
           天时 · 地利 · 人和 · 六爻可选

app/learn/[slug]/page.tsx

@@ -52,7 +52,7 @@ export default async function GuaDetailPage({
   const num = guaNumFromMark(guaMark);
 
   return (
-    <PageShell className="max-w-3xl px-4 py-8">
+    <PageShell width="narrow" className="py-8">
       <div className="mb-6 text-sm text-muted-foreground">
         <Link href="/learn" className="hover:text-foreground">
           ← 返回总览

app/learn/other/[slug]/page.tsx

@@ -48,7 +48,7 @@ export default async function GuaOtherDetailPage({
   const content = stripFrontmatter(raw);
 
   return (
-    <PageShell className="max-w-3xl px-4 py-8">
+    <PageShell width="narrow" className="py-8">
       <div className="mb-6 text-sm text-muted-foreground">
         <Link href="/learn/other" className="hover:text-foreground">
           ← 返回简体总览

app/learn/other/page.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 import PageShell from "@/components/page-shell";
 import { GuaGrid } from "@/components/learn/gua-grid";
 import { ZenCard } from "@/components/ui/zen-card";
-import { APP_CONTAINER } from "@/lib/layout";
 import {
   getGuaName,
   guaNumFromMark,
@@ -18,7 +17,7 @@ export default async function LearnOtherPage() {
   }));
 
   return (
-    <PageShell className={`${APP_CONTAINER} py-8`}>
+    <PageShell className="py-8">
       <div className="mb-8 text-center">
         <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
         <p className="mt-2 text-sm text-muted-foreground">

app/learn/page.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 import PageShell from "@/components/page-shell";
 import { GuaGrid } from "@/components/learn/gua-grid";
 import { ZenCard } from "@/components/ui/zen-card";
-import { APP_CONTAINER } from "@/lib/layout";
 import {
   getGuaName,
   guaNumFromMark,
@@ -18,7 +17,7 @@ export default async function LearnPage() {
   }));
 
   return (
-    <PageShell className={`${APP_CONTAINER} py-8`}>
+    <PageShell className="py-8">
       <div className="mb-8 text-center">
         <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
         <p className="mt-2 text-sm text-muted-foreground">

app/liuyao/page.tsx

@@ -1,11 +1,10 @@
 import PageShell from "@/components/page-shell";
 import LiuyaoForm from "@/components/modes/liuyao-form";
-import { APP_CONTAINER } from "@/lib/layout";
 
 export default function LiuyaoPage() {
   return (
-    <PageShell>
-      <div className={`${APP_CONTAINER} border-b border-border/40 py-6 text-center`}>
+    <PageShell width="wide">
+      <div className="border-b border-border/40 py-6 text-center">
         <h1 className="text-2xl font-bold tracking-wide">六爻算卦</h1>
         <p className="mt-2 text-sm text-muted-foreground">
           问事 · 起卦时空 · 线上 / 线下六爻

app/page.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 import PageShell from "@/components/page-shell";
 import { BookOpen, BrainCircuit, Compass, Sparkles } from "lucide-react";
 import { ZenCard } from "@/components/ui/zen-card";
-import { HOME_CONTAINER } from "@/lib/layout";
 import { TaijiIcon } from "@/components/svg/taiji";
 
 const MODULES = [
@@ -38,7 +37,7 @@ const MODULES = [
 
 export default function Home() {
   return (
-    <PageShell className={`${HOME_CONTAINER} py-10 sm:py-14`}>
+    <PageShell width="narrow" className="py-10 sm:py-14">
       <div className="mb-10 text-center">
         <TaijiIcon className="mx-auto h-12 w-12 opacity-80" />
         <h1 className="mt-2 text-3xl font-bold tracking-[0.2em]">知命阁</h1>

components/layout/mode-workspace.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Sparkles } from "lucide-react";
-import { MODE_CONTAINER } from "@/lib/layout";
 
 export function ModeWorkspace({
   children,
@@ -13,7 +12,7 @@ export function ModeWorkspace({
   aiTitle?: string;
 }) {
   return (
-    <div className={`${MODE_CONTAINER} py-6 lg:py-8`}>
+    <div className="py-6 lg:py-8">
       <div className="grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
         <div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
           {children}

components/layout/taiji-backdrop.tsx

@@ -1,15 +1,13 @@
 import { TaijiWatermark } from "@/components/svg/taiji";
 
-/** 全页太极背景水印（居中，不撑满超宽屏） */
+/** 全页太极背景水印 — 仅居中，不铺满超宽屏 */
 export default function TaijiBackdrop() {
   return (
     <div
       aria-hidden
       className="pointer-events-none fixed inset-0 -z-10 overflow-hidden"
     >
-      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(72vmin,720px)] w-[min(72vmin,720px)] -translate-x-1/2 -translate-y-1/2" />
-      <TaijiWatermark className="absolute right-[8%] top-[10%] hidden h-[min(28vmin,320px)] w-[min(28vmin,320px)] opacity-60 lg:block" />
-      <TaijiWatermark className="absolute bottom-[8%] left-[8%] hidden h-[min(24vmin,280px)] w-[min(24vmin,280px)] opacity-50 lg:block" />
+      <TaijiWatermark className="absolute left-1/2 top-1/2 h-[min(65vmin,640px)] w-[min(65vmin,640px)] -translate-x-1/2 -translate-y-1/2 opacity-80" />
     </div>
   );
 }

components/learn/gua-grid.tsx

@@ -9,7 +9,7 @@ export interface GuaGridItem {
 
 export function GuaGrid({ items }: { items: GuaGridItem[] }) {
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
       {items.map(({ num, name, href }) => (
         <Link
           key={href}

components/page-shell.tsx

@@ -1,19 +1,34 @@
 import Header from "@/components/header";
 import Footer from "@/components/footer";
 import TaijiBackdrop from "@/components/layout/taiji-backdrop";
+import {
+  CONTENT_SHELL,
+  type ContentShellWidth,
+} from "@/lib/layout";
+import { cn } from "@/lib/utils";
 
 export default function PageShell({
   children,
   className = "",
+  width = "default",
 }: {
   children: React.ReactNode;
   className?: string;
+  width?: ContentShellWidth;
 }) {
   return (
-    <div className="relative flex min-h-screen flex-col">
+    <div className="relative flex min-h-screen flex-col bg-muted/50 dark:bg-stone-950">
       <TaijiBackdrop />
       <Header />
-      <div className={`flex w-full flex-1 flex-col ${className}`}>{children}</div>
+      <main
+        className={cn(
+          "mx-auto flex w-full flex-1 flex-col border-border/40 bg-background sm:border-x",
+          CONTENT_SHELL[width],
+          className,
+        )}
+      >
+        {children}
+      </main>
       <Footer />
     </div>
   );

lib/layout.ts

@@ -1,10 +1,22 @@
-const CENTER = "mx-auto w-full px-4 sm:px-6 lg:px-8";
+const pad = "px-4 sm:px-6 lg:px-8";
 
-/** 页眉 / 页脚 / 学习 / 测算页标题 — 居中留白，最大约 1152px */
-export const APP_CONTAINER = `${CENTER} max-w-6xl`;
+/** 内容区宽度档位（带鱼屏居中，两侧留空） */
+export const CONTENT_SHELL = {
+  /** 常规页：约 896px */
+  default: `w-full max-w-4xl ${pad}`,
+  /** 首页、文章：约 768px */
+  narrow: `w-full max-w-3xl ${pad}`,
+  /** 双栏测算：约 960px */
+  wide: `w-full max-w-[960px] ${pad}`,
+} as const;
 
-/** 首页单列 — 更窄一些 */
-export const HOME_CONTAINER = `${CENTER} max-w-4xl`;
+export type ContentShellWidth = keyof typeof CONTENT_SHELL;
 
-/** 双栏测算工作区 — 与全站同宽，避免带鱼屏拉满 */
-export const MODE_CONTAINER = `${CENTER} max-w-6xl xl:px-10`;
+/** 页眉 / 页脚 — 与最宽内容区对齐 */
+export const APP_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;
+
+/** @deprecated 使用 PageShell width="narrow" */
+export const HOME_CONTAINER = `mx-auto ${CONTENT_SHELL.narrow}`;
+
+/** 双栏测算工作区 */
+export const MODE_CONTAINER = `mx-auto ${CONTENT_SHELL.wide}`;