:root {
    --color-bg: #ffffff;
    --color-surface: #f9f9f9;
    --color-surface-hover: #d0d0d0;
    --color-border: #e5e5e5;
    --color-shadow: rgba(0, 0, 0, 0.15);
    --color-shadow-hard: rgba(0, 0, 0, 0.7);

    --color-text: #111111;
    --color-text-muted: #666666;
    --color-heading: #000000;

    --color-primary: #4e92f8;
    --color-primary-hover: #1e75f7;

    --color-secondary: #ff9800;

    --color-secondary-gray: #e5e5e5;
    --color-secondary-gray-hover: #d2d0d0;

    --color-danger: #e53935;
    --color-success: #43a047;

    --color-info: #0288d1;
    --color-warning: #f57c00;


    --popup-btn-background: #f1f1f1;
    --popup-btn-background-hover: #e5e5e5;
    --popup-btn-background-active: #b6b5b5;

    /* 版心与排版 */
    --content-max: 760px;
    /* 内容最大宽度 */
    --font-size: 16px;
    /* 正文字号 */
    --line-height: 1.8;
    /* 行高 */
    --letter-spacing: 0px;
    /* 字距 */
    --para-spacing: 0.7em;
    /* 段落间距 */
    --columns: 1;
    /* 分栏数 */
    --column-gap: 2.2rem;
    /* 分栏间距 */

    --radius: 14px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .06);

    /* 其他效果 */
    --ruler-height: 36px;
    /* 阅读标尺高度 */
    --progress: 0%;
    /* 滚动进度条 */
    --contrast-boost: 0;
    /* 对比度增强开关（0/1） */

    /* --checkbox-size: 15px; */

    --select-bg-color: #f4f4f4;
    --select-text-color: #41403f;
    --select-border-color: #dfdede;
    --select-hover-bg-color: rgb(227, 226, 225);
    --select-hover-text-color: #3e3a32;
    --draw-color: #90c0f5;
    --draw-bg-color: #eef1f7;
    --color-text-white: #ffffff;

}

/* 深色主题 */
:root[data-theme="dark"] {
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-surface-hover: #434242;
    --color-border: #545353;
    --color-shadow: rgba(0, 0, 0, 0.6);

    --color-text: #f5f5f5;
    --color-text-muted: #aaaaaa;
    --color-heading: #ffffff;

    --color-primary: #4d7aaf;
    --color-primary-hover: #6c96c6;
    --color-secondary: #ffb74d;
    --color-secondary-gray: #2d2c2c;
    --color-secondary-gray-hover: #585757;
    --color-danger: #ef5350;
    --color-success: #66bb6a;

    --color-info: #29b6f6;
    --color-warning: #ffa726;


    --popup-btn-background: #888787;
    --popup-btn-background-hover: #a5a3a3;
    --popup-btn-background-active: #d0d0d0;

    --select-bg-color: #f5f1e6;
    --select-text-color: #3e3a32;
    --select-border-color: #e0d8c8;
    --select-hover-bg-color: #ceccc7;
    --select-hover-text-color: #3e3a32;
    --draw-color: #298ff5;
    --draw-bg-color: #403f3f;
    --color-text-white: #d9d8d8;
}

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素设置 */
html {
    font-size: var(--font-size);
    scrollbar-gutter: stable;
    overscroll-behavior: none; /* 禁止触发浏览器的下拉刷新 */
}

/* 基础字体设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    touch-action: manipulation;
}

/* 基础链接样式 */
a {
    text-decoration: none;
    color: inherit;
}

.spin-btn {
    filter: drop-shadow(2px 2px 2px var(--color-shadow-hard)) !important;
    /* image-rendering: pixelated;
    image-rendering: crisp-edges; */
}

/* 基础图片样式 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 基础列表样式 */
/* ul,
ol {
    list-style: none;
} */

/* 基础按钮样式 */
button {
    cursor: pointer;
    background: none;
    padding: 0;
    border: none;
}

/* 基础表格样式 */
table {
    border-collapse: collapse;
}

/* 基础动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 基础容器 */
.container {
    max-width: 1280px;
    margin: 0 auto;
}

/* 基础布局 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* 基础间距 */
.spacing {
    margin: 1rem 0;
}

.spacing-large {
    margin: 2rem 0;
}

/* 基础边框 */
.border-radius {
    border-radius: 8px;
}

/* 基础阴影 */
.shadow {
    box-shadow: 0 2px 4px var(--color-shadow);
}

.popup-btn {
    width: 23px;
    height: 28px;
    /* padding: 5px; */
    /* filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2)); */
    transition: transform 0.1s ease;
    background: var(--color-surface);
    flex-shrink: 0;
    flex-grow: 0;
    transition: all 0.2s;
    user-select: none;
    border-radius: 30%;
    margin: 0px 5px;
    cursor: pointer;
    background: var(--popup-btn-background);
    padding: 0;
    border: none;
}

.popup-btn:hover {
    background: var(--popup-btn-background-hover);
    color: var(--color-text);
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); */
}

.popup-btn:active {
    transform: scale(0.95);
    background-color: var(--popup-btn-background-active);
}

.popup-btn img {
    width: 20px;
    height: 20px;
}


/* 滚动条样式 */
/* 整体容器 */
.scroll-container {
    overflow: auto;
}

/* Chrome / Safari / Edge */
.scroll-container::-webkit-scrollbar {
    width: 8px;
    /* 滚动条宽度 */
    height: 8px;
    /* 横向滚动条高度 */
}

.scroll-container::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.4);
    /* 滚动条颜色 */
    border-radius: 4px;
    /* 圆角 */
    transition: background 0.3s;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7);
    /* hover时加深 */
}

.scroll-container::-webkit-scrollbar-track {
    background: transparent;
    /* 背景透明，也可以换成浅色 */
}

/* Firefox */
.scroll-container {
    scrollbar-width: thin;
    /* 细滚动条 */
    scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
}

.nice input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--color-primary);
    /* 现代浏览器一键美化 */
}

.nice input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
}

.nice input[type="checkbox"]:disabled {
    accent-color: var(--color-border);
    cursor: not-allowed;
}

@media screen and (max-width: 768px) {
    .popup-btn img {
        width: 20px;
        height: 20px;
    }

    .popup-btn {
        width: 33px;
        height: 35px;
        border-radius: 42%;
        border: 1px solid var(--color-border);
        background-color: var(--popup-btn-background);
    }

    :root {
        --font-size: 20px;
    }

    
}