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>