'style3

app/globals.css

@@ -1,5 +1,8 @@
 @import "tailwindcss";
 
+/* 使 Tailwind dark: 变体响应 class="dark"，与 next-themes 配合 */
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --background: #faf8f5;
   --foreground: #1c1917;
@@ -7,11 +10,10 @@
   --accent-hover: #92400e;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0c0a09;
-    --foreground: #fafaf9;
-  }
+html.dark {
+  --background: #0c0a09;
+  --foreground: #fafaf9;
+  color-scheme: dark;
 }
 
 body {
@@ -19,6 +21,10 @@ body {
   background: var(--background);
 }
 
+.safe-area-pb {
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 .hero-gradient-text {
   background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
   -webkit-background-clip: text;