/* 文档根元素选择器，定义全局CSS变量 */
:root {
    /* 
             * 颜色系统 - 使用有意义的命名而不是具体的颜色值
             */
    /* 主色系 */
    /*--color-primary-50: #f0f9ff;
            --color-primary-100: #e0f2fe;
            --color-primary-200: #bae6fd;
            --color-primary-300: #7dd3fc;
            --color-primary-400: #38bdf8;
            --color-primary-500: #0ea5e9;*/ /* 主品牌色 */
    /*--color-primary-600: #0284c7;
            --color-primary-700: #0369a1;
            --color-primary-800: #075985;
            --color-primary-900: #0c4a6e;*/
    /* 中性色系 - 用于文本、背景、边框等 */
    --color-neutral-10: #FFFFFF;
    --color-neutral-50: #909090;
    --color-neutral-100: #5A5A5A;
    /*--color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;*/
    --color-neutral-900: #3D3D3D;
    --color-neutral-1000: #6495ED;
    /* 功能色系 - 用于表示状态 */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    /* 语义颜色变量 - 实际使用中引用上面的颜色 */
    --color-text: var(--color-neutral-900); /*正常黑色字*/
    --color-text-qian: var(--color-neutral-100); /*比正常黑色字要浅一点*/
    /*--color-text-muted: var(--color-neutral-600);*/
    --color-text-gray: var(--color-neutral-50); /*浅灰色字-用作提示*/
    --color-background: var(--color-neutral-10); /*白色背景*/
    --color-surface: white;
    --color-border: var(--color-neutral-200);
    --color-blue: var(--color-neutral-1000); /*蓝色字体*/
    --color-background-blue: var(--color-neutral-1000); /*蓝色背景*/
    /*
             * 排版系统
             */
    /* 字体栈 */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-family-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 字体大小 - 使用rem单位确保可访问性 */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px - 基础字体大小 */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    /* 字重 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* 行高 */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* 字母间距 */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    /*
             * 间距系统 - 使用rem单位，基于16px的倍数
             */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */
    --space-24: 6rem; /* 96px */
    --space-32: 8rem; /* 128px */
    /*
             * 尺寸与边框
             */
    /* 圆角 */
    --border-radius-none: 0;
    --border-radius-sm: 0.125rem; /* 2px */
    --border-radius: 0.25rem; /* 4px */
    --border-radius-md: 0.375rem; /* 6px */
    --border-radius-lg: 0.5rem; /* 8px */
    --border-radius-xl: 0.75rem; /* 12px */
    --border-radius-2xl: 1rem; /* 16px */
    --border-radius-full: 9999px;
    /* 边框宽度 */
    --border-width-none: 0;
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    /*
             * 阴影系统
             */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /*
             * 过渡与动画
             */
    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /*
             * 响应式断点 (用于JavaScript或媒体查询)
             */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    /*
             * z-index 层级系统 - 防止z-index战争
             */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-toast: 1080;
    /*
             * 布局尺寸
             */
    --header-height: 4rem;
    --sidebar-width: 16rem;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    /*
             * 其他变量
             */
    --max-content-width: 80rem;
    --focus-ring: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

        /*
         * =============================================
         * HTML 元素基础样式
         * =============================================
         */
        
        /* 
         * 1. 设置全局盒模型为border-box，更直观的尺寸计算
         * 2. 防止iOS和IE的字体大小调整问题
         * 3. 移除默认边距
         */
        html {
            box-sizing: border-box; /* 1 */
            -webkit-text-size-adjust: 100%; /* 2 */
            -ms-text-size-adjust: 100%; /* 2 */
            line-height: var(--line-height-normal); /* 3 */
            overflow-y: scroll; /* 确保滚动条始终存在，防止布局跳动 */
            scroll-behavior: smooth; /* 平滑滚动 */
            font-family: var(--font-family-sans); /* 设置默认字体 */
            color: var(--color-text); /* 设置默认文本颜色 */
        }

        /* 继承盒模型设置给所有元素 */
        *,
        *::before,
        *::after {
            box-sizing: inherit;
        }

        /*
         * =============================================
         * BODY 元素基础样式
         * =============================================
         */
        
        /* 
         * 1. 移除默认边距
         * 2. 设置默认字体和行高
         * 3. 设置抗锯齿字体渲染，提高可读性
         * 4. 设置默认背景色
         */
body {
    margin: 0; /* 1 */
    padding: 0; /* 1 */
    font-family: var(--font-family-sans); /* 2 */
    font-size: var(--font-size-sm); /* 2 */
    line-height: var(--line-height-normal); /* 2 */
    font-weight: var(--font-weight-normal); /* 2 */
    -webkit-font-smoothing: antialiased; /* 3 */
    -moz-osx-font-smoothing: grayscale; /* 3 */
    background-color: var(--color-background); /* 4 */
    color: var(--color-text); /* 4 */
}

        /*
         * =============================================
         * 排版元素基础样式
         * =============================================
         */
        
        /* 标题元素 */
        h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
            margin-bottom: var(--space-4);
            font-weight: var(--font-weight-semibold);
            line-height: var(--line-height-tight);
            color: var(--color-text);
        }

        h1 { font-size: var(--font-size-4xl); }
        h2 { font-size: var(--font-size-3xl); }
        h3 { font-size: var(--font-size-2xl); }
        h4 { font-size: var(--font-size-xl); }
        h5 { font-size: var(--font-size-lg); }
        h6 { font-size: var(--font-size-base); }

        /* 段落 */
        p {
            margin-top: 0;
            margin-bottom: var(--space-4);
        }

        /* 链接 */
        a {
            color: var(--color-primary-600);
            text-decoration: none;
            background-color: transparent;
            transition: color var(--transition-fast);
        }

        a:hover {
            color: var(--color-primary-800);
            text-decoration: underline;
        }

        /* 列表 */
        ul, ol {
            margin-top: 0;
            margin-bottom: var(--space-4);
            padding-left: var(--space-8);
        }

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

        /*
         * =============================================
         * 表单元素基础样式
         * =============================================
         */
        
        /* 输入框、选择框和文本区域 */
        input,
        select,
        textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            margin: 0;
        }

        button,
        input[type="submit"],
        input[type="reset"] {
            background: none;
            border: 0;
            color: inherit;
            font: inherit;
            line-height: normal;
            overflow: visible;
            padding: 0;
            -webkit-appearance: button; /*  iOS Safari和Mobile Safari */
            cursor: pointer;
        }

        /*
         * =============================================
         * 工具类 - 用于快速布局和样式调整
         * =============================================
         */
        
        /* 容器类 - 用于内容居中 */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    /*height: calc(100vh - 150px);*/
    margin-top: 80px;
    font-size: 0.875rem;
    padding-top: 30px;
    margin-bottom: 40px;
    /*overflow-y:auto;*/
}

        /* 屏幕阅读器专用 - 视觉隐藏但可访问 */
        .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;
        }
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 40px;
    background-color:#fff;
}
.foot {
    font-size: 0.75rem;
    font-family: Adobe Heiti Std, Adobe Heiti Std-R;
    color: #8c8c8c;
    line-height: 28px;
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 定义垂直滚动条 */
::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}
/* 定义滑轨 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 背景色 */
}
/* 定义滑块 */
::-webkit-scrollbar-thumb {
    background-color: #ccc; /* 前景色 */
    border-radius: 5px; /* 圆角 */
}