:root {
    --demo-bg-color: #fff;
    --demo-text-color: #333;
    --demo-code-bg-color: rgb(242, 242, 242);
    --demo-primary-color: #3b82f6;
    --demo-success-color: #10b981;
    --demo-warning-color: #f59e0b;
    --demo-error-color: #ef4444;
}

@media (prefers-color-scheme: dark) {
    :root {
        --demo-bg-color: #1a202c;
        --demo-text-color: #eee;
        --demo-code-bg-color: rgb(42, 42, 42);
        --demo-primary-color: #60a5fa;
        --demo-success-color: #34d399;
        --demo-warning-color: #fbbf24;
        --demo-error-color: #f87171;
    }
}

body {
  background-color: var(--demo-bg-color);
  color: var(--demo-text-color);
}

/* ======================
   滚动条样式
   ====================== */

/* Webkit浏览器滚动条样式 */
::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin: 4px 0;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(50, 115, 220, 0.4);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(50, 115, 220, 0.6);
}

/* Firefox滚动条样式 (需要Firefox 64+) */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(50, 115, 220, 0.4) rgba(0, 0, 0, 0.05);
}

/* 特定元素的滚动条样式 */
.scroll-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(50, 115, 220, 0.3);
}

/* 代码块的滚动条 */
.highlight ::-webkit-scrollbar-thumb,
.code ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(92, 158, 255, 0.4);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(92, 158, 255, 0.6);
    }
    
    html {
        scrollbar-color: rgba(92, 158, 255, 0.4) rgba(255, 255, 255, 0.05);
    }
    
    .highlight ::-webkit-scrollbar-thumb,
    .code ::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
    }
}


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