@xingwangzhe/stalux 1.2.0

package/src/schemas/collections.ts

@@ -0,0 +1,140 @@
+/**
+ * Stalux 内容集合定义辅助
+ *
+ * 用户在 `src/content.config.ts` 中使用此函数快速配置内容集合，
+ * 支持自定义内容目录路径。
+ *
+ * @example
+ * ```ts
+ * // src/content.config.ts
+ * import { defineCollections } from "stalux/schemas";
+ *
+ * export const collections = defineCollections({
+ *   contentDir: "./stalux",  // 默认为 "./stalux"
+ * });
+ * ```
+ */
+
+import { configSchema } from "./config";
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
+import { z } from "astro/zod";
+
+// ---------------------------------------------------------------------------
+// 集合配置选项
+// ---------------------------------------------------------------------------
+
+export interface CollectionPaths {
+  /** 内容根目录（默认 "stalux"） */
+  contentDir?: string;
+}
+
+// ---------------------------------------------------------------------------
+// 文章 Schema
+// ---------------------------------------------------------------------------
+
+const postSchema = z.object({
+  title: z.string().min(1, "title is required"),
+  abbrlink: z
+    .string({ invalid_type_error: "abbrlink must be a string or number" })
+    .or(z.number().transform((num) => num.toString())),
+  date: z
+    .string({
+      required_error: "date is required",
+      invalid_type_error: "date must be a string",
+    })
+    .min(1, "date is required, format: YYYY-MM-DD HH:mm:ss"),
+  updated: z.string().optional(),
+  draft: z.boolean().optional().default(false),
+  tags: z.preprocess(
+    (val) => (typeof val === "string" ? [val] : val),
+    z.array(z.string()).optional(),
+  ),
+  categories: z.preprocess(
+    (val) => (typeof val === "string" ? [val] : val),
+    z.array(z.string()).optional(),
+  ),
+  desc: z
+    .string({
+      required_error: "desc is required",
+      invalid_type_error: "desc must be a string",
+    })
+    .min(1, "desc is required"),
+  minutesRead: z.string().optional(),
+  wordCount: z.number().optional(),
+  cc: z.string().optional().default("CC-BY-NC-SA-4.0"),
+  cover: z.string().optional(),
+});
+
+// ---------------------------------------------------------------------------
+// 定义集合
+// ---------------------------------------------------------------------------
+
+/**
+ * 快速配置 Stalux 所需的四个内容集合（posts / config / about / words）。
+ *
+ * @param paths - 内容目录路径配置
+ * @returns 四个内容集合，可直接在 `src/content.config.ts` 中导出
+ */
+export function defineCollections(paths: CollectionPaths = {}) {
+  const root = paths.contentDir ?? "stalux";
+
+  const posts = defineCollection({
+    loader: glob({
+      pattern: ["*.{md,mdx}"],
+      base: `${root}/posts/`,
+      generateId: ({ data }) => String((data as Record<string, unknown>).abbrlink ?? ""),
+      retainBody: true,
+      deferRender: true,
+    }),
+    schema: postSchema,
+  });
+
+  const config = defineCollection({
+    loader: glob({
+      pattern: ["*.yml"],
+      base: `${root}/config/`,
+      generateId: ({ data }) => String((data as Record<string, unknown>).id ?? ""),
+    }),
+    schema: configSchema,
+  });
+
+  const about = defineCollection({
+    loader: glob({
+      base: `${root}/about`,
+      pattern: "**/*.{md,mdx}",
+      retainBody: true,
+    }),
+    schema: z.object({
+      title: z.string().min(1, "about.title is required"),
+      description: z.string().min(1, "about.description is required"),
+    }),
+  });
+
+  const words = defineCollection({
+    loader: glob({
+      pattern: ["*.md"],
+      base: `${root}/words/`,
+      retainBody: true,
+      deferRender: true,
+    }),
+    schema: z.object({
+      source: z.string().optional(),
+      link: z.string().url("words.link must be a valid URL").optional(),
+      sourceDate: z.string().optional(),
+      date: z.string().optional(),
+      updated: z.string().optional(),
+      draft: z.boolean().optional().default(false),
+      title: z.string().optional(),
+      abbrlink: z.string().optional(),
+      tags: z.array(z.string()).optional(),
+    }),
+  });
+
+  return { posts, config, about, words };
+}
+
+/**
+ * 默认内容集合（使用 "stalux" 作为内容根目录）
+ */
+export const collections = defineCollections({ contentDir: "stalux" });

package/src/schemas/config.ts

@@ -0,0 +1,226 @@
+/**
+ * Config 集合的 Zod Schema 定义
+ *
+ * 每个 config/*.yml 文件对应一个独立的 schema，
+ * 通过 z.discriminatedUnion("id") 联合为 config 集合。
+ */
+import { z } from "astro/zod";
+
+// ---------------------------------------------------------------------------
+// 子 Schema（每个对应一个 config/*.yml 文件）
+// ---------------------------------------------------------------------------
+
+export const siteSchema = z.object({
+    id: z.literal("site"),
+    lang: z.string().optional().default("zh-CN"),
+    title: z.string().min(1, "site.title is required"),
+    url: z.string().url("site.url must be a valid URL"),
+    description: z.string().min(1, "site.description is required"),
+    timezone: z.string().optional().default("Asia/Shanghai"),
+    canonical: z.string().url("site.canonical must be a valid URL").optional(),
+    twitterSite: z.string().optional(),
+    noindex: z.boolean().optional().default(false),
+    nofollow: z.boolean().optional().default(false),
+    favicon: z.string().optional().default("/favicon.ico"),
+});
+
+export const authorSchema = z.object({
+    id: z.literal("author"),
+    name: z.string().min(1, "author.name is required"),
+    avatar: z.string().min(1, "author.avatar is required"),
+    bio: z.string().min(1, "author.bio is required"),
+});
+
+export const headSchema = z.object({
+    id: z.literal("head"),
+    googleAnalyticsId: z.string().optional(),
+    bingClarityId: z.string().optional(),
+    umami: z
+        .object({
+            id: z.string().optional(),
+            url: z.string().optional(),
+        })
+        .optional(),
+    anyhead: z.string().optional(),
+});
+
+export const typetextsSchema = z.object({
+    id: z.literal("typetexts"),
+    items: z.array(z.string()),
+});
+
+export const navsSchema = z.object({
+    id: z.literal("navs"),
+    items: z.array(
+        z.object({
+            title: z.string().min(1, "navs[].title is required"),
+            icon: z.string().min(1, "navs[].icon is required"),
+            link: z.string().min(1, "navs[].link is required"),
+        }),
+    ),
+});
+
+export const mediaLinksSchema = z.object({
+    id: z.literal("media-links"),
+    items: z.array(
+        z.object({
+            icon: z.string().min(1, "mediaLinks[].icon is required"),
+            link: z.string().min(1, "mediaLinks[].link is required"),
+        }),
+    ),
+});
+
+export const linksSchema = z.object({
+    id: z.literal("links"),
+    title: z.string().min(1, "links.title is required"),
+    description: z.string(),
+    sites: z.array(
+        z.object({
+            name: z.string().min(1, "links.sites[].name is required"),
+            description: z.string(),
+            icon: z.string().min(1, "links.sites[].icon is required"),
+            link: z.string().min(1, "links.sites[].link is required"),
+        }),
+    ),
+});
+
+const badgeFlatSchema = z.object({
+    label: z.string().min(1, "badges[].label is required"),
+    message: z.string().min(1, "badges[].message is required"),
+    color: z.string().optional(),
+    style: z.string().optional(),
+    alt: z.string().optional(),
+    href: z.string().optional(),
+});
+
+const badgeGroupSchema = z.object({
+    title: z.string().min(1, "badge group title is required"),
+    collapsed: z.boolean().optional().default(true),
+    items: z.array(badgeFlatSchema),
+});
+
+export const footerSchema = z.object({
+    id: z.literal("footer"),
+    buildtime: z.string().optional(),
+    copyright: z
+        .object({
+            enabled: z.boolean().optional().default(true),
+            startYear: z.number().optional(),
+            customText: z.string().optional(),
+        })
+        .optional(),
+    theme: z
+        .object({
+            showPoweredBy: z.boolean().optional().default(true),
+            showThemeInfo: z.boolean().optional().default(true),
+        })
+        .optional(),
+    beian: z
+        .object({
+            icp: z
+                .object({
+                    enabled: z.boolean().optional().default(false),
+                    number: z.string().optional(),
+                })
+                .optional(),
+            security: z
+                .object({
+                    enabled: z.boolean().optional().default(false),
+                    text: z.string().optional(),
+                    number: z.string().optional(),
+                })
+                .optional(),
+        })
+        .optional(),
+    badges: z.array(z.union([badgeFlatSchema, badgeGroupSchema])).optional(),
+    custom: z.string().optional(),
+});
+
+export const aiDiscoverySchema = z.object({
+    id: z.literal("ai-discovery"),
+    conformance: z
+        .enum(["disabled", "essential", "recommended", "complete"])
+        .optional()
+        .default("complete"),
+    permissions_text: z.array(z.string()).optional(),
+    restrictions_text: z.array(z.string()).optional(),
+    attribution_text: z.string().optional(),
+    contact_text: z.string().optional(),
+});
+
+export const commentSchema = z.object({
+    id: z.literal("comment"),
+    enabled: z.boolean().optional().default(false),
+    waline: z
+        .object({
+            serverURL: z.string().url("comment.waline.serverURL must be a valid URL").optional(),
+            lang: z.string().optional().default("zh-CN"),
+            locale: z.any().optional(),
+            emoji: z
+                .array(z.string())
+                .optional()
+                .default([
+                    "https://unpkg.com/@waline/emojis@1.1.0/bilibili",
+                    "https://unpkg.com/@waline/emojis@1.1.0/bmoji",
+                ]),
+            reaction: z.boolean().optional().default(false),
+            meta: z.array(z.string()).optional().default(["nick", "mail", "link"]),
+            requiredMeta: z.array(z.string()).optional().default([]),
+            login: z.string().optional().default("enable"),
+            recaptchaV3Key: z.string().optional(),
+            turnstileKey: z.string().optional(),
+            dark: z.union([z.string(), z.boolean()]).optional().default(true),
+            noCopyright: z.boolean().optional().default(false),
+            commentSorting: z.string().optional().default("latest"),
+            imageUploader: z.any().optional(),
+            highlighter: z.any().optional(),
+            texRenderer: z.any().optional(),
+            search: z.any().optional(),
+            wordLimit: z.number().optional().default(200),
+            pageSize: z.number().optional().default(10),
+        })
+        .optional(),
+});
+
+export const promoteSchema = z.object({
+    id: z.literal("promote"),
+    llm_promote: z.string().optional(),
+    export_md: z.boolean().optional().default(false),
+});
+
+// ---------------------------------------------------------------------------
+// 联合 Schema（内容集合使用）
+// ---------------------------------------------------------------------------
+
+export const configSchema = z.discriminatedUnion("id", [
+    siteSchema,
+    authorSchema,
+    headSchema,
+    navsSchema,
+    typetextsSchema,
+    mediaLinksSchema,
+    linksSchema,
+    footerSchema,
+    aiDiscoverySchema,
+    commentSchema,
+    promoteSchema,
+]);
+
+// ---------------------------------------------------------------------------
+// 推导的 TypeScript 类型
+// ---------------------------------------------------------------------------
+
+type ConfigData = z.infer<typeof configSchema>;
+
+// 按 id 提取的具体类型
+export type SiteData = Extract<ConfigData, { id: "site" }>;
+export type AuthorData = Extract<ConfigData, { id: "author" }>;
+export type HeadData = Extract<ConfigData, { id: "head" }>;
+export type NavsData = Extract<ConfigData, { id: "navs" }>;
+export type TypetextsData = Extract<ConfigData, { id: "typetexts" }>;
+export type MediaLinksData = Extract<ConfigData, { id: "media-links" }>;
+export type LinksData = Extract<ConfigData, { id: "links" }>;
+export type FooterData = Extract<ConfigData, { id: "footer" }>;
+export type AiDiscoveryData = Extract<ConfigData, { id: "ai-discovery" }>;
+export type CommentData = Extract<ConfigData, { id: "comment" }>;
+export type PromoteData = Extract<ConfigData, { id: "promote" }>;

package/src/scripts/background.ts

@@ -0,0 +1,59 @@
+/**
+ * 双层随机背景 — 每页服务端随机选图直接渲染，不做 VT crossfade
+ * （去掉 view-transition-name 避免 SVG 全屏瓦片在过渡期间双倍 CPU 光栅化）
+ */
+declare global {
+    interface Window {
+        __STALUX_BG_URLS__?: string[];
+        __STALUX_BG_INDEX__?: number;
+    }
+}
+
+const backgroundImages: string[] = window.__STALUX_BG_URLS__ || [];
+const initialIndexFromSSR =
+    typeof window.__STALUX_BG_INDEX__ === "number" ? window.__STALUX_BG_INDEX__ : -1;
+
+function getLayerEl(layer: "a" | "b"): HTMLElement | null {
+    return document.querySelector(`.bg-layer.bg-${layer}`);
+}
+
+function setLayerOpacity(layer: "a" | "b", opacity: number): void {
+    const el = getLayerEl(layer);
+    if (el) el.style.opacity = String(opacity);
+}
+
+function initBackground(): void {
+    if (initialIndexFromSSR >= 0 && backgroundImages.length > 0) {
+        // 服务端已预填充 bg-a，只需确保状态一致
+        document.body.dataset.staluxBgIndex = String(initialIndexFromSSR);
+        document.body.dataset.staluxBgLayer = "a";
+        setLayerOpacity("a", 1);
+        setLayerOpacity("b", 0);
+    } else {
+        // Fallback：客户端自行初始化
+        const index = Math.floor(Math.random() * backgroundImages.length);
+        const layer: "a" | "b" = "a";
+        if (backgroundImages.length > 0) {
+            const el = getLayerEl(layer);
+            if (el) el.style.backgroundImage = `url('${backgroundImages[index]}')`;
+        }
+        setLayerOpacity(layer, 1);
+        setLayerOpacity("b", 0);
+        document.body.dataset.staluxBgIndex = String(index);
+        document.body.dataset.staluxBgLayer = layer;
+    }
+}
+
+// 初始化（首次加载 + VT 软导航都走这里）
+document.addEventListener("astro:page-load", () => {
+    const layer = document.body.dataset.staluxBgLayer as "a" | "b" | undefined;
+    const indexStr = document.body.dataset.staluxBgIndex;
+
+    if (layer && indexStr !== undefined) {
+        // View Transition 后：新页面服务端已渲染正确的背景，直接同步状态
+        setLayerOpacity(layer, 1);
+        setLayerOpacity(layer === "a" ? "b" : "a", 0);
+    } else {
+        initBackground();
+    }
+});

package/src/styles/base/init.css

@@ -0,0 +1,286 @@
+/* 全局设置 */
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    color: white;
+    main {
+        flex: 1;
+    }
+    scrollbar-color: #4a4a4a #2a2a2a;
+    display: block;
+    font-family:
+        var(--font-body),
+        "Noto Sans SC",
+        "Noto Sans CJK SC",
+        system-ui,
+        -apple-system,
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+html[data-clarity-id] {
+    opacity: 1 !important;
+}
+/* 将所有链接初始化为无视觉状态，但保留键盘可见焦点 */
+a {
+    color: inherit;
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+    text-decoration-skip-ink: auto;
+}
+
+.a-none {
+    color: inherit !important;
+    text-decoration: none !important;
+    background-color: transparent;
+    cursor: pointer;
+    text-decoration-skip-ink: auto;
+}
+
+.a-none::after {
+    display: none !important;
+}
+
+a {
+    position: relative;
+    transition:
+        color 0.2s ease,
+        text-shadow 0.2s ease;
+}
+
+/* 下划线动画 */
+a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(90deg, var(--stalux-accent-color), rgba(100, 255, 218, 0.5));
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.2, 1);
+    pointer-events: none;
+}
+
+a:hover::after,
+a:focus-visible::after,
+a:active::after {
+    transform: scaleX(1);
+}
+
+a:hover,
+a:active,
+a:focus-visible {
+    text-decoration: none;
+    /* 保持颜色不变，避免 hover 时颜色跳变 */
+}
+
+a:focus {
+    outline: none;
+}
+
+a:focus-visible {
+    outline: 2px solid var(--stalux-accent-color);
+    outline-offset: 2px;
+}
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.none {
+    display: none;
+}
+/* 布局：使 body 成为列 flex 容器，并让 main 填充可用高度 */
+.stalux-root {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    color: white; /* 默认文本颜色，适用于深色背景 */
+}
+
+/* 默认 stalux 背景的 CSS 变量（非动态默认值） */
+:root {
+    --stalux-bg-color: #202020;
+    --stalux-bg-filter: none;
+    --stalux-text-shadow: #64ffda 0.1rem 0.1rem 0.2rem;
+    --stalux-accent-color: #64ffda;
+    --stalux-search-backdrop: rgba(0, 0, 0, 0.1);
+    --stalux-search-box-bg: rgba(0, 0, 0, 0.1);
+    --stalux-search-border: rgba(0, 0, 0, 0.2);
+
+    /* 卡片和标签颜色 Token（可在这里统一调整主题色/透明度） */
+    --card-bg: rgba(0, 0, 0, 0.2);
+    --card-border: rgba(255, 255, 255, 0.1);
+    --card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --card-box-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.5);
+
+    --tag-bg: rgba(255, 255, 255, 0.12);
+    --tag-bg-hover: rgba(255, 255, 255, 0.18);
+    --category-bg: rgba(255, 255, 255, 0.08);
+    --category-bg-hover: rgba(255, 255, 255, 0.14);
+
+    --date-bg: rgba(66, 160, 255, 0.18);
+    --date-border: rgba(66, 160, 255, 0.25);
+    --updated-bg: rgba(255, 201, 71, 0.2);
+    --updated-border: rgba(255, 201, 71, 0.3);
+
+    /* 常用颜色值 */
+    --white-full: #ffffff;
+    --white-95p: rgba(255, 255, 255, 0.95);
+    --white-90p: rgba(255, 255, 255, 0.9);
+    --white-85p: rgba(255, 255, 255, 0.85);
+    --white-80p: rgba(255, 255, 255, 0.8);
+    --white-78p: rgba(255, 255, 255, 0.78);
+    --white-75p: rgba(255, 255, 255, 0.75);
+    --white-70p: rgba(255, 255, 255, 0.7);
+    --white-60p: rgba(255, 255, 255, 0.6);
+    --white-50p: rgba(255, 255, 255, 0.5);
+    --white-30p: rgba(255, 255, 255, 0.3);
+    --white-20p: rgba(255, 255, 255, 0.2);
+    --white-15p: rgba(255, 255, 255, 0.15);
+    --white-12p: rgba(255, 255, 255, 0.12);
+    --white-10p: rgba(255, 255, 255, 0.1);
+    --white-8p: rgba(255, 255, 255, 0.08);
+    --white-05p: rgba(255, 255, 255, 0.05);
+
+    --black-full: #000000;
+    --black-30p: rgba(0, 0, 0, 0.3);
+    --black-28p: rgba(0, 0, 0, 0.28);
+    --black-20p: rgba(0, 0, 0, 0.2);
+    --black-15p: rgba(0, 0, 0, 0.15);
+    --black-10p: rgba(0, 0, 0, 0.1);
+    --black-05p: rgba(0, 0, 0, 0.05);
+    --black-03p: rgba(0, 0, 0, 0.03);
+
+    /* 强调色变体 */
+    --accent-90p: rgba(100, 255, 218, 0.9);
+    --accent-85p: rgba(100, 255, 218, 0.85);
+    --accent-80p: rgba(100, 255, 218, 0.8);
+    --accent-70p: rgba(100, 255, 218, 0.7);
+    --accent-60p: rgba(100, 255, 218, 0.6);
+    --accent-50p: rgba(100, 255, 218, 0.5);
+    --accent-40p: rgba(100, 255, 218, 0.4);
+    --accent-30p: rgba(100, 255, 218, 0.3);
+    --accent-20p: rgba(100, 255, 218, 0.2);
+    --accent-10p: rgba(100, 255, 218, 0.1);
+
+    /* 常用过渡和动画 */
+    --transition-fast: 0.18s ease;
+    --transition-medium: 0.2s ease;
+    --transition-normal: 0.25s ease;
+    --transition-slow: 0.3s ease;
+    --transition-slower: 0.5s ease;
+    --transition-slowest: 0.6s ease;
+
+    --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    --easing-smooth: cubic-bezier(0.25, 0.9, 0.2, 1);
+
+    /* 常用间距值 */
+    --space-2xs: 0.25rem;
+    --space-xs: 0.75rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    --space-3xl: 4rem;
+
+    /* 常用圆角半径值 */
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 10px;
+    --radius-full: 9999px;
+    --radius-circle: 50%;
+
+    /* 常用阴影 */
+    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
+    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3);
+    --shadow-xl: 0 12px 26px rgba(0, 0, 0, 0.28);
+    --shadow-sidebar: 0 4px 6px rgba(0, 0, 0, 0.753);
+    --shadow-dark: rgba(0, 0, 0, 0.753);
+
+    /* 语义化颜色 */
+    --date-text-color: #e8f2ff;
+    --updated-text-color: #fff7de;
+    --muted-text: #bbb;
+    --border-color-light: #e5e5e5;
+
+    /* 字体族栈 */
+    /* --font-body 由 Astro Fonts API 生成（见 astro.config.mjs fonts 配置） */
+    --font-body-serif: "Noto Serif CJK SC", "Source Han Serif SC", "STSong", Georgia, serif;
+
+    /* 字体大小系统 */
+    --font-size-title: 2.8rem;
+    --font-size-h2: 2rem;
+    --font-size-subtitle: 1.35rem;
+    --font-size-base: 1.1rem;
+    --font-size-small: 0.95rem;
+    --font-size-smaller: 0.9rem;
+    --font-size-tiny: 0.85rem;
+
+    /* 边框宽度 */
+    --border-thin: 1px;
+    --border-medium: 2px;
+    --border-thick: 3px;
+    --border-thicker: 4px;
+}
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #2a2a2a;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: 4px;
+    transition: background 0.3s ease-out;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
+}
+
+::-webkit-scrollbar-corner {
+    background: #2a2a2a;
+}
+
+/* 背景层 - 双层随机背景（不在 View Transition 中 crossfade，避免 SVG 双倍光栅化卡顿） */
+.bg-layer {
+    position: fixed;
+    inset: 0;
+    z-index: -10;
+    background-repeat: repeat;
+    background-size: auto;
+    background-position: center;
+    background-color: var(--stalux-bg-color, transparent);
+    filter: var(--stalux-bg-filter, none);
+    pointer-events: none;
+    opacity: 0;
+    /* 禁止浏览器强制色彩模式（高对比度/暗黑模式）调整背景图颜色 */
+    forced-color-adjust: none;
+    /* 关键：防止 Safari/WebKit 在暗色模式下自动调整 SVG 背景图颜色 */
+    color-scheme: only light;
+}
+
+/* footer 基础样式，保证页脚始终可见且不覆盖内容 */
+footer {
+    padding: var(--space-lg) var(--space-md);
+    text-align: center;
+    color: var(--muted-text);
+    background: transparent;
+    position: relative;
+    z-index: 1;
+}