/* ============================================================
   Basss CSS  v0.1.1
   基石初始化样式
   目标: 现代浏览器 (2019+)
   分层: token → reset → base → utility
   ============================================================ */

/* //////////////////////////////// LAYER-TOKEN //////////////////////////////// */
@layer token {
    @font-face {
        font-family: Emoji;
        src: local("Apple Color Emoji"), local("Noto Color Emoji"), local("Segoe UI Emoji"),
            local("Segoe UI Symbol");
        unicode-range: U+1F000-1F644, U+203C-3299;
    }

    /* ---------- FONT ---------- */
    :root {
        /* 基本尺寸 */
        --font-size: 16px;
        --line-height: 1.5;

        /* 响应式比例（实验性，暂未启用） */
        --font-reactive-320: 0.75;
        --font-reactive-400: 0.85;
        --font-reactive-450: 0.9;
        --font-reactive-600: 0.95;
        --font-reactive-1200: 1;
        --font-reactive-1800: 1.25;

        /* 字号阶梯 */
        --font-size-x: 0.001rem;
        /* 近乎隐藏 */
        --font-size-xs: 0.75rem;
        --font-size-s: 0.925rem;
        --font-size-m: 1.15rem;
        --font-size-l: 1.25rem;
        --font-size-xl: 1.5rem;
        --font-size-xxl: 1.75rem;
        --font-size-xxxl: 2rem;

        /* 字重 */
        --font-thin: 100;
        --font-extralight: 200;
        --font-light: 300;
        --font-regular: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        --font-extrabold: 800;
        --font-black: 900;

        /* 字体特性 (OpenType) */
        --font-feature-normal: "liga" 1, "calt" 1;
        --font-feature-style: "ccmp" 1, "cv01" 1, "cv03" 1, "cv04" 1, "cv05" 1,
            "cv06" 1, "cv08" 1, "cv10" 1, "cv11" 1, "ss01" 1, "dlig" 1;
        --font-feature-combined: var(--font-feature-normal), var(--font-feature-style);

        /* 占位符 - 构建工具可注入实际网络字体 */
        --font-inter-f: FETCHED_FONT_FAMILY;
        --font-jet-mono-f: FETCHED_FONT_FAMILY;
        --font-plex-sans-f: FETCHED_FONT_FAMILY;
        --font-plex-serif-f: FETCHED_FONT_FAMILY;
        --font-plex-mono-f: FETCHED_FONT_FAMILY;
        --font-plex-math-f: FETCHED_FONT_FAMILY;
        --font-noto-sans-f: FETCHED_FONT_FAMILY;
        --font-noto-serif-f: FETCHED_FONT_FAMILY;
        --font-glow-sans-f: FETCHED_FONT_FAMILY;
        --font-glow-sans-mono-f: FETCHED_FONT_FAMILY;
        --font-mona-sans-f: FETCHED_FONT_FAMILY;
        --font-hubot-sans-f: FETCHED_FONT_FAMILY;
        --font-geist-sans-f: FETCHED_FONT_FAMILY;
        --font-geist-mono-f: FETCHED_FONT_FAMILY;
        --font-geist-pixel-f: FETCHED_FONT_FAMILY;
        --font-geist-pixel-circle-f: FETCHED_FONT_FAMILY;
        --font-geist-pixel-triangle-f: FETCHED_FONT_FAMILY;
        --font-geist-pixel-grid-f: FETCHED_FONT_FAMILY;
        --font-geist-pixel-line-f: FETCHED_FONT_FAMILY;

        /* 单个字体族 */
        --font-emoji: Emoji;
        --font-inter: "Inter Display", "Inter", "InterVariable", "Inter var";
        --font-jet-mono: "JetBrains Mono", "JetBrainsMono", "JetBrains Mono NL",
            "JetBrains Mono NL Web", "JetBrains Mono Web";
        --font-plex-sans: "IBM Plex Sans";
        --font-plex-serif: "IBM Plex Serif";
        --font-plex-mono: "IBM Plex Mono";
        --font-plex-math: "IBM Plex Math";
        --font-noto-sans: "Noto Sans CN", "Source Han Sans CN", "Noto Sans SC",
            "Source Han Sans SC", "Noto Sans TC", "Source Han Sans TC",
            "Noto Sans CJK", "Source Han Sans CJK", "Noto Sans", "Source Han Sans";
        --font-noto-serif: "Noto Serif CN", "Source Han Serif CN", "Noto Serif SC",
            "Source Han Serif SC", "Noto Serif TC", "Source Han Serif TC",
            "Noto Serif CJK", "Source Han Serif CJK", "Noto Serif",
            "Source Han Serif";
        --font-glow-sans: "Glow Sans SC";
        --font-glow-sans-mono: "Glow Sans SC Mono";
        --font-mona-sans: "Mona Sans", "Mona Sans VF";
        --font-hubot-sans: "Hubot Sans", "Hubot Sans VF";
        --font-geist-sans: "Geist", "Geist Sans", "GeistSans";
        --font-geist-mono: "Geist Mono", "GeistMono";
        --font-geist-pixel: "Geist Pixel", "GeistPixel", "Geist Pixel Square",
            "GeistPixelSquare";
        --font-geist-pixel-circle: "Geist Pixel Circle", "GeistPixelCircle";
        --font-geist-pixel-triangle: "Geist Pixel Triangle", "GeistPixelTriangle";
        --font-geist-pixel-grid: "Geist Pixel Grid", "GeistPixelGrid";
        --font-geist-pixel-line: "Geist Pixel Line", "GeistPixelLine";
        --font-songti: "SimSun", "STSong", "NSimSun";
        --font-fangsong: "FangSong";
        --font-heiti: "SimHei";
        --font-hwheiti: "STXihei";

        /* 系统回退栈 */
        --font-system-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Microsoft Yahei", "Microsoft JhengHei";
        --font-system-serif: Georgia, Cambria, "Times New Roman", Times;
        --font-system-mono: Menlo, Consolas, Monaco, "Liberation Mono", Courier;

        /* 最终回退 */
        --font-end-emoji: var(--font-emoji);
        --font-end-sans: sans-serif;
        --font-end-serif: serif;
        --font-end-mono: monospace;
        --font-end-system: system-ui;

        /* 组合字体栈（本地优先，可变优先，网络字体安全网） */
        --font-sans: var(--font-inter), var(--font-inter-f), var(--font-plex-sans),
            var(--font-plex-sans-f), var(--font-geist-sans), var(--font-geist-sans-f),
            var(--font-mona-sans), var(--font-mona-sans-f), var(--font-hubot-sans),
            var(--font-hubot-sans-f), var(--font-emoji), var(--font-noto-sans), var(--font-noto-sans-f),
            var(--font-system-sans), var(--font-end-sans);
        --font-serif: var(--font-plex-serif), var(--font-plex-serif-f),
            var(--font-noto-serif), var(--font-emoji), var(--font-noto-serif-f), var(--font-system-serif),
            var(--font-end-serif);
        --font-mono: var(--font-plex-mono), var(--font-plex-mono-f),
            var(--font-jet-mono), var(--font-jet-mono-f), var(--font-geist-mono),
            var(--font-geist-mono-f), var(--font-emoji), var(--font-glow-sans-mono),
            var(--font-glow-sans-mono-f), var(--font-noto-sans),
            var(--font-noto-sans-f), var(--font-system-mono), var(--font-end-mono);
    }

    @supports not (font-variation-settings: normal) {
        :root {
            --font-inter: "Inter", sans-serif;
        }
    }

    /* ---------- TRANSITION ---------- */
    :root {
        --trans-time-fast: 88ms;
        --trans-time-normal: 168ms;
        --trans-time-slow: 360ms;
        --trans-time-gorgeous: 800ms;
        --trans-easeinout: ease-in-out;
        --trans-ease: ease;
        --trans-linear: linear;
        --trans-quick: var(--trans-time-fast) var(--trans-easeinout);
        --trans-move: var(--trans-time-normal) var(--trans-easeinout);
        --trans-slow: var(--trans-time-slow) var(--trans-easeinout);
        --trans-gorgeous: var(--trans-time-gorgeous) var(--trans-easeinout);
        --trans-all: all var(--trans-time-normal) var(--trans-easeinout);
    }

    /* ---------- COLOR ---------- */
    :root {
        /* 基础色板 (高色域优先，sRGB回退) */
        --black: #000;
        --white: #fff;
        --gray: #aaa;

        --red: color(display-p3 0.94 0.19 0.04);
        --hot-orange: color(display-p3 1 0.38 0.19);
        --yellow: color(display-p3 1 0.96 0.05);
        --warm-yellow: color(display-p3 1 0.83 0.2);
        --light-yellow: color(display-p3 1 1 0.7);
        --light-yellow2: color(display-p3 1 0.98 0.59);
        --blue: rgb(3, 102, 230);
        --green: rgb(38, 220, 78);
        --medium-green: rgb(119, 221, 134);

        /* 语义令牌 (亮色默认) */
        --color-text: #1a1a1a;
        --color-text-nd: #4d4d4d;
        --color-text-disabled: #999;
        --color-bg: #ffffff;
        --color-bg-nd: #f5f5f5;
        --color-bg-disabled: #eee;
        --color-primary: #15b;
        --color-on-primary: #fff;
        --color-primary-hover: #37d;
        --color-accent: #00b;
        --color-accent-hover: #11c;
        --color-border: #d1d1d1;
        --color-border-light: #e5e5e5;
        --color-focus: #05c;
        --color-error: #f22;
        --color-success: #3b3;

        /* 语义令牌 (暗色默认) */
        --color-dark-text: #e5e5e5;
        --color-dark-text-nd: #a0a0a0;
        --color-dark-bg: #1a1a1a;
        --color-dark-bg-nd: #242424;
        --color-dark-bg-disabled: #eee;
        --color-dark-primary: #4d9eff;
        --color-dark-on-primary: #fff;
        --color-dark-primary-hover: #6db3ff;
        --color-dark-accent: #00b;
        --color-dark-accent-hover: #11c;
        --color-dark-border: #404040;
        --color-dark-border-light: #333333;
        --color-dark-focus: #4d9eff;
        --color-dark-error: #f44336;
        --color-dark-success: #66bb6a;
    }

    @supports not (color: color(display-p3 1 1 1)) {
        :root {
            --red: #F03009;
            --hot-orange: #FF6010;
            --yellow: #FFF310;
            --warm-yellow: #FFD310;
            --light-yellow: rgb(255, 255, 179);
            --light-yellow2: rgb(255, 250, 135);
        }
    }

    /* ---------- COMPOSE ---------- */
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.75rem;
        --font-size-h3: 1.5rem;
        --font-size-h4: 1.25rem;
        --font-size-h5: 1.15rem;
        --font-size-h6: 1rem;
        --padding-hs: 0.35em;
        /* 标题上下细节内边距 */

        /* 间距阶梯 (4px网格) */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;

        /* 圆角 */
        --radius-s: 0.175rem;
        --radius: 0.25rem;
        --radius-m: 0.5rem;
        --radius-l: 0.75rem;
        --radius-f: 9999px;

        /* 阴影 */
        --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        --shadow-m: 0 4px 6px -1px rgba(0, 0, 0, 0.6);

        --shadow-dark-s: 0 1px 2px rgba(255, 255, 255, 0.3);
        --shadow-dark: 0 2px 4px rgba(255, 255, 255, 0.5);
        --shadow-dark-m: 0 4px 6px -1px rgba(255, 255, 255, 0.6);

        /* 容器 */
        --container-max: 75rem;
        --container-padding: var(--space-4);
    }

    /* 暗色模式 - 系统偏好自动切换 */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --color-text: var(--color-dark-text);
            --color-text-nd: var(--color-dark-text-nd);
            --color-bg: var(--color-dark-bg);
            --color-bg-nd: var(--color-dark-bg-nd);
            --color-primary: var(--color-dark-primary);
            --color-primary-hover: var(--color-dark-primary-hover);
            --color-border: var(--color-dark-border);
            --color-border-light: var(--color-dark-border-light);
            --color-focus: var(--color-dark-focus);
            --color-error: var(--color-dark-error);
            --color-success: var(--color-dark-success);
            --color-on-primary: var(--color-dark-on-primary);
            --shadow-s: var(--shadow-dark-s);
            --shadow: var(--shadow-dark);
            --shadow-m: var(--shadow-dark-m);
        }
    }

    /* 暗色模式 - 手动强制覆盖 */
    [data-theme="dark"] {
        --color-text: var(--color-dark-text);
        --color-text-nd: var(--color-dark-text-nd);
        --color-bg: var(--color-dark-bg);
        --color-bg-nd: var(--color-dark-bg-nd);
        --color-primary: var(--color-dark-primary);
        --color-primary-hover: var(--color-dark-primary-hover);
        --color-border: var(--color-dark-border);
        --color-border-light: var(--color-dark-border-light);
        --color-focus: var(--color-dark-focus);
        --color-error: var(--color-dark-error);
        --color-success: var(--color-dark-success);
        --color-on-primary: var(--color-dark-on-primary);
        --shadow-s: var(--shadow-dark-s);
        --shadow: var(--shadow-dark);
        --shadow-m: var(--shadow-dark-m);
    }
}

/* //////////////////////////////// LAYER-RESET //////////////////////////////// */
@layer reset {

    /* 彻底清零盒子模型，所有元素边距归零、边框盒统一 */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    /* 根滚动与触摸优化 */
    html {
        -webkit-tap-highlight-color: transparent;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }

    body {
        min-height: 100vh;
    }

    /* 媒体元素块化，防止下方空隙 */
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* 列表无标记 */
    ul,
    ol,
    menu {
        list-style: none;
    }

    /* 引用去除默认引号 */
    blockquote,
    q {
        quotes: none;
    }

    blockquote::before,
    blockquote::after,
    q::before,
    q::after {
        content: "";
        content: none;
    }

    /* 表格边框合并 */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* 表单组件统一字体继承，清除外边距 */
    input,
    button,
    select,
    textarea,
    optgroup {
        font: inherit;
        color: inherit;
        margin: 0;
    }

    /* 按钮行为统一 */
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
        appearance: button;
        cursor: pointer;
        background: none;
        border: none;
        text-transform: none;
    }

    /* 选择框去除默认箭头 (base 层将提供统一箭头) */
    select {
        -webkit-appearance: none;
        appearance: none;
    }

    /* 搜索框去除装饰 */
    [type="search"]::-webkit-search-decoration,
    [type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    /* 链接颜色与下划线留给 base 控制 */
    a {
        color: inherit;
        text-decoration: none;
    }

    /* 等宽字体的初始族归位 */
    pre,
    code,
    kbd,
    samp {
        font-family: var(--font-mono), var(--font-end-mono);
    }

    /* 字段集清理 */
    fieldset {
        border: none;
        margin: 0;
        padding: 0;
    }

    legend {
        padding: 0;
    }

    /* 模板与隐藏元素 */
    template,
    [hidden] {
        display: none;
    }
}

/* //////////////////////////////// LAYER-BASE //////////////////////////////// */
@layer base {

    /* ---- 全局根设定 ---- */
    :root {
        --font-active: var(--font-sans);
        --font-weight-root: var(--font-regular);
        font-family: var(--font-active);
        font-size: var(--font-size);
        /* 固定 1rem = 16px */
        line-height: var(--line-height);
        font-weight: var(--font-weight-root);
        letter-spacing: -0.01rem;
        color: var(--color-text);
        background-color: var(--color-bg);
        font-synthesis: none;
        font-feature-settings: var(--font-feature-combined);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        /* 继承根设定，确保全页统一 */
    }

    /* ---- 标题层级 ---- */
    h1 {
        font-size: var(--font-size-h1);
        font-weight: var(--font-bold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    h2 {
        font-size: var(--font-size-h2);
        font-weight: var(--font-bold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    h3 {
        font-size: var(--font-size-h3);
        font-weight: var(--font-semibold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    h4 {
        font-size: var(--font-size-h4);
        font-weight: var(--font-semibold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    h5 {
        font-size: var(--font-size-h5);
        font-weight: var(--font-semibold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    h6 {
        font-size: var(--font-size-h6);
        font-weight: var(--font-semibold);
        line-height: 1.5;
        padding: var(--padding-hs) 0;
    }

    /* ---- 文本块流式间距 ---- */
    p,
    ul,
    ol,
    dl,
    blockquote,
    figure,
    pre,
    table,
    hr {
        margin-bottom: var(--space-4);
    }

    /* 嵌套列表间距归零 */
    ul ul,
    ol ol,
    ul ol,
    ol ul {
        margin-bottom: 0;
    }

    li {
        margin-bottom: var(--space-1);
    }

    /* ---- 水平线 ---- */
    hr {
        border: 0;
        height: 1px;
        background-color: var(--color-border);
        margin-top: var(--space-4);
        margin-bottom: var(--space-4);
    }

    /* ---- 链接 ---- */
    a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 0.2em;
        transition: color var(--trans-move);
    }

    a:hover {
        color: var(--color-primary-hover);
    }

    /* ---- 语义内联 ---- */
    strong,
    b {
        font-weight: var(--font-bold);
    }

    small {
        font-size: var(--font-size-s);
    }

    /* ---- 表单基础造型 ---- */
    /* 文本型输入框与文本域 */
    input:where([type="text"],
        [type="email"],
        [type="url"],
        [type="password"],
        [type="search"],
        [type="tel"],
        [type="number"],
        [type="date"],
        [type="month"],
        [type="week"],
        [type="time"],
        [type="datetime-local"],
        [type="color"]),
    textarea {
        font-family: inherit;
        display: block;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background-color: var(--color-bg);
        color: var(--color-text);
        line-height: var(--line-height);
        transition: border-color var(--trans-move), box-shadow var(--trans-move);
    }

    textarea {
        resize: vertical;
        min-height: 5rem;
    }

    /* 禁用状态 */
    input:disabled,
    textarea:disabled {
        background-color: var(--color-bg-disabled);
        color: var(--color-text-disabled);
        cursor: not-allowed;
    }

    /* 焦点环 (仅键盘导航) */
    :focus {
        outline: none;
    }

    :focus-visible {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }

    /* 选择框：用 mask 绘制自适应颜色箭头 */
    select {
        display: block;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        padding-right: var(--space-8);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background-color: var(--color-bg);
        color: var(--color-text);
        line-height: var(--line-height);
        cursor: pointer;
        background-image: none;
        /* mask 绘制下拉箭头，背景色 currentColor 保证暗/亮自动适配 */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 6l3.8 4 3.8-4z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 6l3.8 4 3.8-4z'/%3E%3C/svg%3E");
        -webkit-mask-size: 1rem;
        mask-size: 1rem;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: right var(--space-2) center;
        mask-position: right var(--space-2) center;
        background-color: currentColor;
        transition: border-color var(--trans-move), box-shadow var(--trans-move);
    }

    /* 按钮基础造型 (使用语义令牌中的 on-primary) */
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius);
        background-color: var(--color-primary);
        color: var(--color-on-primary);
        font-weight: var(--font-semibold);
        line-height: 1.2;
        transition: background-color var(--trans-move), box-shadow var(--trans-move);
    }

    button:hover,
    [type="button"]:hover,
    [type="reset"]:hover,
    [type="submit"]:hover {
        background-color: var(--color-primary-hover);
    }

    button:disabled,
    [type="button"]:disabled,
    [type="reset"]:disabled,
    [type="submit"]:disabled {
        background-color: var(--color-bg-disabled);
        color: var(--color-text-disabled);
        cursor: not-allowed;
    }

    button>*,
    [type="button"]>*,
    [type="reset"]>*,
    [type="submit"]>* {
        pointer-events: none;
    }

    /* 单/复选框对齐 */
    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        margin-right: var(--space-1);
        vertical-align: middle;
    }

    /* 文件输入 */
    input[type="file"] {
        display: block;
        font-size: var(--font-size-s);
    }

    /* 范围滑块 */
    input[type="range"] {
        display: block;
        width: 100%;
    }

    /* 字段集留白 */
    fieldset {
        margin-bottom: var(--space-4);
    }

    /* 标签块化 */
    label {
        display: block;
        margin-bottom: var(--space-1);
        font-weight: var(--font-semibold);
        font-size: var(--font-size-s);
    }

    /* 表单验证反馈 (基础) */
    input:user-invalid,
    textarea:user-invalid,
    select:user-invalid {
        border-color: var(--color-error);
    }

    input:user-valid,
    textarea:user-valid,
    select:user-valid {
        /* 可按需自定义，这里保持默认 */
    }

    /* ---- 其他块级元素 ---- */
    pre {
        font-family: var(--font-mono), var(--font-end-mono);
        padding: var(--space-4);
        background-color: var(--color-bg-nd);
        border-radius: var(--radius-s);
        overflow-x: auto;
    }

    blockquote {
        padding-left: var(--space-4);
        border-left: 4px solid var(--color-primary);
        color: var(--color-text-nd);
    }

    table {
        width: 100%;
    }

    th,
    td {
        padding: var(--space-3) var(--space-4);
        text-align: left;
        border-bottom: 1px solid var(--color-border-light);
    }

    th {
        font-weight: var(--font-semibold);
    }

    /* 打印样式（基础） */
    @media print {
        :root {
            --color-bg: #fff;
            --color-text: #000;
        }

        a[href]::after {
            content: " (" attr(href) ")";
            font-size: 0.8em;
        }
    }
}

/* //////////////////////////////// LAYER-UTILITY //////////////////////////////// */
@layer utility {

    /* 容器 */
    .container {
        width: 100%;
        max-width: var(--container-max);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }

    /* 屏幕阅读器专用 */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* 显示 */
    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

    .inline {
        display: inline;
    }

    .flex {
        display: flex;
    }

    .grid {
        display: grid;
    }

    .hidden {
        display: none;
    }

    /* Flex / Grid 快捷 */
    .flex-col {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gap-2 {
        gap: var(--space-2);
    }

    .gap-4 {
        gap: var(--space-4);
    }

    .gap-6 {
        gap: var(--space-6);
    }

    /* 文本对齐 */
    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    /* 截断 */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 间距原子 */
    .mt-0 {
        margin-top: 0;
    }

    .mt-2 {
        margin-top: var(--space-2);
    }

    .mt-4 {
        margin-top: var(--space-4);
    }

    .mt-6 {
        margin-top: var(--space-6);
    }

    .mt-8 {
        margin-top: var(--space-8);
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .mb-2 {
        margin-bottom: var(--space-2);
    }

    .mb-4 {
        margin-bottom: var(--space-4);
    }

    .mb-6 {
        margin-bottom: var(--space-6);
    }

    .mb-8 {
        margin-bottom: var(--space-8);
    }

    /* 清除浮动 */
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* 禁止选择 */
    .select-forbidden {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        cursor: default;
    }

    /* 禁止选中 */
    .select-none {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
    }
}