孩子端样式:首页双卡响应式+背景铺满统一+详情页头部间距

- 首页"每周检测/错题本"双卡窄屏时改为单列堆叠,避免一个换行一个不换行
- 背景光斑改绝对定位铺满整页高度并加统一渐变底色,去掉底部白块
- 知识点详情页头部(课程地图与徽章行)间距加大

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/kid/page.tsx

@@ -32,7 +32,7 @@ export default async function KidPage() {
   const gDone = gPassed.size;
 
   return (
-    <main className="relative mx-auto max-w-lg space-y-5 p-4 pb-10">
+    <main className="relative mx-auto min-h-dvh max-w-lg space-y-5 p-4 pb-10">
       <BackgroundBlobs />
       <header className="flex items-center justify-between">
         <div>
@@ -63,7 +63,7 @@ export default async function KidPage() {
         </div>
       </Link>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <Link href="/weekly" className="block">
           <div className="flex items-center gap-2 rounded-xl border border-slate-100 bg-white p-3 shadow-soft transition-transform duration-200 hover:-translate-y-0.5">
             <span className="text-xl">📝</span>

src/app/learn/[id]/page.tsx

@@ -21,7 +21,7 @@ export default async function LessonPage({ params }: { params: Promise<{ id: str
   return (
     <main className="relative mx-auto max-w-2xl space-y-5 p-4 pb-12">
       <BackgroundBlobs />
-      <header className="space-y-3">
+      <header className="space-y-4">
         <Link href="/learn" className="text-sm font-medium text-indigo-600">
           ← 课程地图
         </Link>

src/components/background-blobs.tsx

@@ -1,9 +1,13 @@
-// 页面氛围光斑:两个大号模糊渐变圆,固定于背景(企业信任风的纵深元素)
+// 页面氛围背景:绝对定位铺满整页高度,统一底色 + 两个模糊渐变光斑
 export function BackgroundBlobs() {
   return (
-    <div aria-hidden className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 -z-10 overflow-hidden bg-gradient-to-b from-slate-50 via-slate-50 to-indigo-100/60"
+    >
       <div className="bg-blob -top-32 -right-24 size-[480px] bg-indigo-300/30" />
-      <div className="bg-blob -bottom-40 -left-24 size-[420px] bg-violet-300/25" />
+      <div className="bg-blob top-1/3 -left-32 size-[420px] bg-violet-300/20" />
+      <div className="bg-blob -bottom-40 -right-24 size-[420px] bg-violet-300/25" />
     </div>
   );
 }