/* ==========================================================================
通用滚动条样式
========================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Webkit 内核浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ==========================================================================
iconfont 图标字体样式
========================================================================== */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/* ==========================================================================
code 代码块样式
========================================================================== */
code {
    font-family: 'Fira Code', 'Source Code Pro', 'Consolas', 'Courier New', monospace;
    padding: var(--spacing-1) var(--spacing-2);
    margin: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
常用颜色
========================================================================== */
.color-price {
    color: #FF7B2A !important;
}

/* ==========================================================================
返回顶部按钮样式
========================================================================== */
.back-to-top {
    position: fixed;
    bottom: var(--size-12);
    right: var(--size-12);
    width: var(--size-12);
    height: var(--size-12);
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--size-p-1-2);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--size-6);
    box-shadow: 0 4px 12px rgba(40, 120, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 100;
}

.back-to-top:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-0.4rem) scale(1.1);
    box-shadow: 0 6px 20px rgba(40, 120, 255, 0.4);
}