/* ============================================
   Design Tokens（设计令牌）
   仅引入此文件即可使用所有 CSS 变量与组件
   ============================================ */

:root {
    /* ===== Colors - Primary ===== */
    --color-primary: #409eff;
    --color-primary-light-3: #79bbff;
    --color-primary-light-5: #a0cfff;
    --color-primary-light-7: #c6e2ff;
    --color-primary-light-9: #ecf5ff;
    --color-primary-dark-2: #337ecc;
    /* ===== Colors - Semantic ===== */
    --color-success: #67c23a;
    --color-warning: #e6a23c;
    --color-danger: #f56c6c;
    --color-info: #909399;
    /* ===== Colors - Text ===== */
    --color-text-primary: #303133;
    --color-text-regular: #606266;
    --color-text-secondary: #909399;
    --color-text-placeholder: #a8abb2;
    --color-text-disabled: #c0c4cc;
    /* ===== Colors - Border & Background ===== */
    --color-border: #dcdfe6;
    --color-border-light: #e4e7ed;
    --color-bg: #ffffff;
    --color-bg-page: #f5f7fa;
    --color-bg-overlay: #f2f3f5;
    /* ===== Typography ===== */
    --font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Arial', sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 13px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-title: 28px;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --line-height-base: 1.5714;
    /* ===== Spacing ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 48px;
    /* ===== Border Radius ===== */
    --radius-base: 4px;
    --radius-sm: 2px;
    --radius-lg: 8px;
    --radius-round: 999px;
    /* ===== Shadows ===== */
    --shadow-base: 0 1px 6px rgba(0, 0, 0, 0.08);
    --shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    --shadow-dark: 0 2px 16px rgba(0, 0, 0, 0.12);
    /* ===== Layout Dimensions ===== */
    --sidebar-width: 260px;
    --header-height: 56px;
    --content-max-width: 960px;
    --z-sidebar: 100;
    --z-header: 200;
    /* ===== Transitions ===== */
    --transition-duration: 0.3s;
    --transition-timing: ease;
}


/* ============================================
   Base Styles（基础样式）
   组件运行所必需的基础重置与全局设置
   ============================================ */


/* ===== Reset ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}


/* ===== Base Typography ===== */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

img {
    display: block;
    max-width: 100%;
}


/* ===== Links ===== */

a {
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing);
}


/* ===== Code ===== */

code,
pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: var(--font-size-sm);
}

code {
    background: var(--color-bg-overlay);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

pre {
    background: var(--color-bg-overlay);
    padding: var(--spacing-lg);
    border-radius: var(--radius-base);
    overflow-x: auto;
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}


/* ===== Scrollbar ===== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

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


/* ===== Selection ===== */

::selection {
    background: var(--color-primary-light-9);
    color: var(--color-primary);
}


/* ============================================
   Components（组件样式）
   ============================================ */


/* =====Style Components - All Components ===== */


/* Import this single file to use all components */


/* ===== Button 按钮 ===== */


/* ===== Button Component ===== */

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-bg);
    color: var(--color-text-regular);
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing);
    outline: none;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

.sc-btn:hover {
    border-color: var(--color-primary-light-7);
    color: var(--color-primary);
    background: var(--color-primary-light-9);
}

.sc-btn:active {
    border-color: var(--color-primary-dark-2);
    color: var(--color-primary-dark-2);
}


/* ===== Variants ===== */

.sc-btn[data-variant="primary"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.sc-btn[data-variant="primary"]:hover {
    background: var(--color-primary-light-3);
    border-color: var(--color-primary-light-3);
    color: #fff;
}

.sc-btn[data-variant="success"] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.sc-btn[data-variant="success"]:hover {
    opacity: 0.85;
    color: #fff;
}

.sc-btn[data-variant="warning"] {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

.sc-btn[data-variant="warning"]:hover {
    opacity: 0.85;
    color: #fff;
}

.sc-btn[data-variant="danger"] {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.sc-btn[data-variant="danger"]:hover {
    opacity: 0.85;
    color: #fff;
}

.sc-btn[data-variant="info"] {
    background: var(--color-info);
    border-color: var(--color-info);
    color: #fff;
}

.sc-btn[data-variant="info"]:hover {
    opacity: 0.85;
    color: #fff;
}


/* ===== Sizes ===== */

.sc-btn[data-size="small"] {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.sc-btn[data-size="large"] {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}


/* ===== Round ===== */

.sc-btn[data-round="true"] {
    border-radius: var(--radius-round);
}


/* ===== Disabled ===== */

.sc-btn[data-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ===== Icon 图标 ===== */


/* ===== Icon 图标组件 ===== */


/* 基础图标样式 */

.sc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}


/* 尺寸变体 */

.sc-icon--xs {
    font-size: 12px;
}

.sc-icon--sm {
    font-size: 14px;
}

.sc-icon--md {
    font-size: 16px;
}

.sc-icon--lg {
    font-size: 20px;
}

.sc-icon--xl {
    font-size: 24px;
}

.sc-icon--xxl {
    font-size: 32px;
}


/* 旋转动画 */

.sc-icon--spin {
    animation: sc-icon-spin 1s linear infinite;
}

@keyframes sc-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* 图标网格展示（文档页用） */

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md);
}

.icon-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing);
    position: relative;
}

.icon-grid__item:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light-9);
}

.icon-grid__item .sc-icon {
    font-size: 28px;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-regular);
}

.icon-grid__item__name {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    word-break: break-all;
}

.icon-grid__item__copy-hint {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    padding: 2px 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-round);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing);
    pointer-events: none;
}

.icon-grid__item:hover .icon-grid__item__copy-hint {
    opacity: 1;
}


/* ===== Layout 布局 ===== */


/* 仿 Element Plus 的布局系统，包含容器布局和栅格系统 */


/* ============================================
   A. Container Layout 容器布局
   ============================================ */


/* 外层容器 - 默认横向排列 */

.sc-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
}


/* 纵向排列 */

.sc-container.is-vertical {
    flex-direction: column;
}


/* 顶栏容器 */

.sc-header {
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
    flex-shrink: 0;
    height: 60px;
    background: var(--color-bg-overlay);
    display: flex;
    align-items: center;
}


/* 侧边栏容器 */

.sc-aside {
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 300px;
    background: var(--color-bg-overlay);
}


/* 主要区域 */

.sc-main {
    display: block;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--spacing-xl);
    background: var(--color-bg);
}


/* 底栏容器 */

.sc-footer {
    padding: 0 var(--spacing-xl);
    box-sizing: border-box;
    flex-shrink: 0;
    height: 60px;
    background: var(--color-bg-overlay);
    display: flex;
    align-items: center;
}


/* ============================================
   B. Grid System 栅格系统 (24栏)
   ============================================ */


/* 栅格行 */

.sc-row {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}


/* 栅格列基础 */

.sc-col {
    box-sizing: border-box;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
}


/* --- Span 列宽 (1-24) --- */

.sc-col-span-1 {
    flex: 0 0 4.1666666667%;
    max-width: 4.1666666667%;
}

.sc-col-span-2 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}

.sc-col-span-3 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.sc-col-span-4 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}

.sc-col-span-5 {
    flex: 0 0 20.8333333333%;
    max-width: 20.8333333333%;
}

.sc-col-span-6 {
    flex: 0 0 25%;
    max-width: 25%;
}

.sc-col-span-7 {
    flex: 0 0 29.1666666667%;
    max-width: 29.1666666667%;
}

.sc-col-span-8 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}

.sc-col-span-9 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
}

.sc-col-span-10 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}

.sc-col-span-11 {
    flex: 0 0 45.8333333333%;
    max-width: 45.8333333333%;
}

.sc-col-span-12 {
    flex: 0 0 50%;
    max-width: 50%;
}

.sc-col-span-13 {
    flex: 0 0 54.1666666667%;
    max-width: 54.1666666667%;
}

.sc-col-span-14 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}

.sc-col-span-15 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
}

.sc-col-span-16 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}

.sc-col-span-17 {
    flex: 0 0 70.8333333333%;
    max-width: 70.8333333333%;
}

.sc-col-span-18 {
    flex: 0 0 75%;
    max-width: 75%;
}

.sc-col-span-19 {
    flex: 0 0 79.1666666667%;
    max-width: 79.1666666667%;
}

.sc-col-span-20 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}

.sc-col-span-21 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
}

.sc-col-span-22 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}

.sc-col-span-23 {
    flex: 0 0 95.8333333333%;
    max-width: 95.8333333333%;
}

.sc-col-span-24 {
    flex: 0 0 100%;
    max-width: 100%;
}


/* --- Offset 偏移 (1-23) --- */

.sc-col-offset-1 {
    margin-left: 4.1666666667%;
}

.sc-col-offset-2 {
    margin-left: 8.3333333333%;
}

.sc-col-offset-3 {
    margin-left: 12.5%;
}

.sc-col-offset-4 {
    margin-left: 16.6666666667%;
}

.sc-col-offset-5 {
    margin-left: 20.8333333333%;
}

.sc-col-offset-6 {
    margin-left: 25%;
}

.sc-col-offset-7 {
    margin-left: 29.1666666667%;
}

.sc-col-offset-8 {
    margin-left: 33.3333333333%;
}

.sc-col-offset-9 {
    margin-left: 37.5%;
}

.sc-col-offset-10 {
    margin-left: 41.6666666667%;
}

.sc-col-offset-11 {
    margin-left: 45.8333333333%;
}

.sc-col-offset-12 {
    margin-left: 50%;
}

.sc-col-offset-13 {
    margin-left: 54.1666666667%;
}

.sc-col-offset-14 {
    margin-left: 58.3333333333%;
}

.sc-col-offset-15 {
    margin-left: 62.5%;
}

.sc-col-offset-16 {
    margin-left: 66.6666666667%;
}

.sc-col-offset-17 {
    margin-left: 70.8333333333%;
}

.sc-col-offset-18 {
    margin-left: 75%;
}

.sc-col-offset-19 {
    margin-left: 79.1666666667%;
}

.sc-col-offset-20 {
    margin-left: 83.3333333333%;
}

.sc-col-offset-21 {
    margin-left: 87.5%;
}

.sc-col-offset-22 {
    margin-left: 91.6666666667%;
}

.sc-col-offset-23 {
    margin-left: 95.8333333333%;
}


/* ============================================
   Gutter 间距 (data-gutter 属性选择器)
   ============================================ */

.sc-row[data-gutter="10"] {
    margin-left: -5px;
    margin-right: -5px;
}

.sc-row[data-gutter="10"]>.sc-col {
    padding-left: 5px;
    padding-right: 5px;
}

.sc-row[data-gutter="20"] {
    margin-left: -10px;
    margin-right: -10px;
}

.sc-row[data-gutter="20"]>.sc-col {
    padding-left: 10px;
    padding-right: 10px;
}

.sc-row[data-gutter="30"] {
    margin-left: -15px;
    margin-right: -15px;
}

.sc-row[data-gutter="30"]>.sc-col {
    padding-left: 15px;
    padding-right: 15px;
}

.sc-row[data-gutter="40"] {
    margin-left: -20px;
    margin-right: -20px;
}

.sc-row[data-gutter="40"]>.sc-col {
    padding-left: 20px;
    padding-right: 20px;
}


/* ============================================
   Responsive 响应式断点
   ============================================ */


/* xs: < 768px */

@media screen and (max-width: 767px) {
    .sc-col-span-xs-1 {
        flex: 0 0 4.1666666667%;
        max-width: 4.1666666667%;
    }
    .sc-col-span-xs-2 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%;
    }
    .sc-col-span-xs-3 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .sc-col-span-xs-4 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .sc-col-span-xs-5 {
        flex: 0 0 20.8333333333%;
        max-width: 20.8333333333%;
    }
    .sc-col-span-xs-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .sc-col-span-xs-8 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .sc-col-span-xs-10 {
        flex: 0 0 41.6666666667%;
        max-width: 41.6666666667%;
    }
    .sc-col-span-xs-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sc-col-span-xs-16 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .sc-col-span-xs-24 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* sm: >= 768px */

@media screen and (min-width: 768px) {
    .sc-col-span-sm-1 {
        flex: 0 0 4.1666666667%;
        max-width: 4.1666666667%;
    }
    .sc-col-span-sm-2 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%;
    }
    .sc-col-span-sm-3 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .sc-col-span-sm-4 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .sc-col-span-sm-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .sc-col-span-sm-8 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .sc-col-span-sm-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sc-col-span-sm-16 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .sc-col-span-sm-24 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* md: >= 992px */

@media screen and (min-width: 992px) {
    .sc-col-span-md-1 {
        flex: 0 0 4.1666666667%;
        max-width: 4.1666666667%;
    }
    .sc-col-span-md-2 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%;
    }
    .sc-col-span-md-3 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .sc-col-span-md-4 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .sc-col-span-md-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .sc-col-span-md-8 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .sc-col-span-md-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sc-col-span-md-16 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .sc-col-span-md-24 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* lg: >= 1200px */

@media screen and (min-width: 1200px) {
    .sc-col-span-lg-1 {
        flex: 0 0 4.1666666667%;
        max-width: 4.1666666667%;
    }
    .sc-col-span-lg-2 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%;
    }
    .sc-col-span-lg-3 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .sc-col-span-lg-4 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .sc-col-span-lg-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .sc-col-span-lg-8 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .sc-col-span-lg-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sc-col-span-lg-16 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .sc-col-span-lg-24 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* xl: >= 1920px */

@media screen and (min-width: 1920px) {
    .sc-col-span-xl-1 {
        flex: 0 0 4.1666666667%;
        max-width: 4.1666666667%;
    }
    .sc-col-span-xl-2 {
        flex: 0 0 8.3333333333%;
        max-width: 8.3333333333%;
    }
    .sc-col-span-xl-3 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    .sc-col-span-xl-4 {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
    .sc-col-span-xl-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .sc-col-span-xl-8 {
        flex: 0 0 33.3333333333%;
        max-width: 33.3333333333%;
    }
    .sc-col-span-xl-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .sc-col-span-xl-16 {
        flex: 0 0 66.6666666667%;
        max-width: 66.6666666667%;
    }
    .sc-col-span-xl-24 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ===== Input Number 数字输入框 ===== */


/* ===== Input Number Component ===== */

.sc-input-number {
    display: inline-flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-bg);
    transition: border-color var(--transition-duration) var(--transition-timing);
    overflow: hidden;
    vertical-align: middle;
}

.sc-input-number:hover {
    border-color: var(--color-border-light);
}

.sc-input-number:focus-within {
    border-color: var(--color-primary);
}


/* ===== Buttons ===== */

.sc-input-number__decrease,
.sc-input-number__increase {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 30px;
    border: none;
    background: var(--color-bg-light, var(--color-bg-page));
    color: var(--color-text-regular);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing);
    outline: none;
    user-select: none;
    padding: 0;
    line-height: 1;
}

.sc-input-number__decrease:hover,
.sc-input-number__increase:hover {
    color: var(--color-primary);
    background: var(--color-primary-light-9);
}

.sc-input-number__decrease:active,
.sc-input-number__increase:active {
    color: var(--color-primary-dark-2);
}


/* ===== Input ===== */

.sc-input-number__input {
    flex: 1;
    width: 120px;
    height: 30px;
    border: none;
    outline: none;
    text-align: center;
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: transparent;
    padding: 0 var(--spacing-xs);
    -moz-appearance: textfield;
    appearance: textfield;
}

.sc-input-number__input::-webkit-inner-spin-button,
.sc-input-number__input::-webkit-outer-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0;
}

.sc-input-number__input::placeholder {
    color: var(--color-text-placeholder);
}


/* ===== Size: Small ===== */

.sc-input-number[data-size="small"] {
    border-radius: var(--radius-sm);
}

.sc-input-number[data-size="small"] .sc-input-number__decrease,
.sc-input-number[data-size="small"] .sc-input-number__increase {
    width: 24px;
    height: 22px;
    font-size: 12px;
}

.sc-input-number[data-size="small"] .sc-input-number__input {
    height: 22px;
    font-size: 12px;
    width: 90px;
}


/* ===== Size: Large ===== */

.sc-input-number[data-size="large"] {
    border-radius: var(--radius-base);
}

.sc-input-number[data-size="large"] .sc-input-number__decrease,
.sc-input-number[data-size="large"] .sc-input-number__increase {
    width: 40px;
    height: 38px;
    font-size: var(--font-size-lg);
}

.sc-input-number[data-size="large"] .sc-input-number__input {
    height: 38px;
    font-size: var(--font-size-lg);
    width: 140px;
}


/* ===== Disabled ===== */

.sc-input-number[data-disabled="true"],
.sc-input-number.is-disabled {
    background: var(--color-bg-page);
    border-color: var(--color-border-light);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

.sc-input-number[data-disabled="true"] .sc-input-number__input,
.sc-input-number.is-disabled .sc-input-number__input {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.sc-input-number[data-disabled="true"] .sc-input-number__decrease,
.sc-input-number[data-disabled="true"] .sc-input-number__increase,
.sc-input-number.is-disabled .sc-input-number__decrease,
.sc-input-number.is-disabled .sc-input-number__increase {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}


/* ===== Without Controls ===== */

.sc-input-number[data-controls="false"] .sc-input-number__decrease,
.sc-input-number[data-controls="false"] .sc-input-number__increase,
.sc-input-number.is-without-controls .sc-input-number__decrease,
.sc-input-number.is-without-controls .sc-input-number__increase {
    display: none;
}

.sc-input-number[data-controls="false"] .sc-input-number__input,
.sc-input-number.is-without-controls .sc-input-number__input {
    width: 120px;
}


/* ===== Form 表单 ===== */


/* ===== Form Component ===== */

.sc-form {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}


/* ===== Form Item ===== */

.sc-form-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
}

.sc-form-item__label {
    flex-shrink: 0;
    width: var(--_label-width, 120px);
    line-height: 32px;
    padding-right: var(--spacing-lg);
    color: var(--color-text-regular);
    font-size: var(--font-size-base);
    text-align: right;
    box-sizing: border-box;
}

.sc-form-item__content {
    flex: 1;
    min-width: 0;
}

.sc-form-item__content--offset {
    margin-left: var(--_label-width, 120px);
}

.sc-form-item__error {
    display: none;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    padding-top: var(--spacing-xs);
}


/* ===== Label Position ===== */

.sc-form[data-label-position="right"] .sc-form-item__label {
    text-align: right;
}

.sc-form[data-label-position="left"] .sc-form-item__label {
    text-align: left;
}

.sc-form[data-label-position="top"] .sc-form-item {
    flex-direction: column;
}

.sc-form[data-label-position="top"] .sc-form-item__label {
    width: auto;
    text-align: left;
    padding-right: 0;
    padding-bottom: var(--spacing-xs);
    line-height: 1.5;
}

.sc-form[data-label-position="top"] .sc-form-item__content--offset {
    margin-left: 0;
}


/* ===== Label Width ===== */


/* label-width is applied via inline style --_label-width set by JS or directly */


/* ===== Required ===== */

.sc-form-item[data-required="true"] .sc-form-item__label::before,
.sc-form-item.is-required .sc-form-item__label::before {
    content: '*';
    color: var(--color-danger);
    margin-right: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
}


/* ===== Error State ===== */

.sc-form-item[data-error],
.sc-form-item.is-error {
    --_input-border: var(--color-danger);
}

.sc-form-item[data-error] .sc-form-item__error,
.sc-form-item.is-error .sc-form-item__error {
    display: block;
}

.sc-form-item[data-error] .sc-input,
.sc-form-item.is-error .sc-input {
    border-color: var(--color-danger);
}

.sc-form-item[data-error] .sc-textarea,
.sc-form-item.is-error .sc-textarea {
    border-color: var(--color-danger);
}

.sc-form-item[data-error] .sc-select,
.sc-form-item.is-error .sc-select {
    border-color: var(--color-danger);
}


/* ===== Inline Form ===== */

.sc-form[data-inline] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spacing-lg);
}

.sc-form[data-inline] .sc-form-item {
    margin-bottom: var(--spacing-lg);
}


/* ===== Disabled Form ===== */

.sc-form[data-disabled="true"] .sc-form-item__label,
.sc-form.is-disabled .sc-form-item__label {
    color: var(--color-text-disabled);
}

.sc-form[data-disabled="true"] .sc-input,
.sc-form.is-disabled .sc-input,
.sc-form[data-disabled="true"] .sc-textarea,
.sc-form.is-disabled .sc-textarea,
.sc-form[data-disabled="true"] .sc-select,
.sc-form.is-disabled .sc-select,
.sc-form[data-disabled="true"] .sc-checkbox,
.sc-form.is-disabled .sc-checkbox,
.sc-form[data-disabled="true"] .sc-radio,
.sc-form.is-disabled .sc-radio {
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}

.sc-form[data-disabled="true"] .sc-select,
.sc-form.is-disabled .sc-select {
    opacity: 1;
}

.sc-form[data-disabled="true"] .sc-select__trigger,
.sc-form.is-disabled .sc-select__trigger {
    background: var(--color-bg-page);
    border-color: var(--color-border-light);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}


/* ===== Size Variants ===== */

.sc-form[data-size="small"] .sc-form-item__label {
    font-size: var(--font-size-sm);
    line-height: 24px;
}

.sc-form[data-size="large"] .sc-form-item__label {
    font-size: var(--font-size-lg);
    line-height: 40px;
}


/* ========================================
   Form Controls: Input / Textarea / Select
   ======================================== */


/* ===== Input ===== */

.sc-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-duration) var(--transition-timing);
}

.sc-input:hover {
    border-color: var(--color-border-light);
}

.sc-input:focus {
    border-color: var(--color-primary);
}

.sc-input::placeholder {
    color: var(--color-text-placeholder);
}

.sc-input[data-disabled="true"],
.sc-input.is-disabled,
.sc-input:disabled {
    background: var(--color-bg-page);
    border-color: var(--color-border-light);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}


/* Input sizes */

.sc-input[data-size="small"],
.sc-form[data-size="small"] .sc-input {
    height: 24px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.sc-input[data-size="large"],
.sc-form[data-size="large"] .sc-input {
    height: 40px;
    padding: 0 var(--spacing-lg);
    font-size: var(--font-size-lg);
}


/* ===== Textarea ===== */

.sc-textarea {
    display: inline-block;
    width: 100%;
    min-height: 80px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color var(--transition-duration) var(--transition-timing);
    line-height: var(--line-height-base);
}

.sc-textarea:hover {
    border-color: var(--color-border-light);
}

.sc-textarea:focus {
    border-color: var(--color-primary);
}

.sc-textarea::placeholder {
    color: var(--color-text-placeholder);
}

.sc-textarea[data-disabled="true"],
.sc-textarea.is-disabled,
.sc-textarea:disabled {
    background: var(--color-bg-page);
    border-color: var(--color-border-light);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    resize: none;
}

.sc-textarea[data-size="small"],
.sc-form[data-size="small"] .sc-textarea {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 60px;
}

.sc-textarea[data-size="large"],
.sc-form[data-size="large"] .sc-textarea {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 100px;
}


/* ===== Select (Custom Dropdown) ===== */

.sc-select {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    box-sizing: border-box;
}

.sc-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 var(--spacing-md) 0 var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color var(--transition-duration) var(--transition-timing);
}

.sc-select__trigger:hover {
    border-color: var(--color-border-light);
}

.sc-select.is-open .sc-select__trigger {
    border-color: var(--color-primary);
}

.sc-select__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    color: var(--color-text-primary);
}

.sc-select.is-placeholder .sc-select__value {
    color: var(--color-text-placeholder);
}

.sc-select__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
    color: var(--color-text-secondary);
    transition: transform var(--transition-duration) var(--transition-timing);
}

.sc-select.is-open .sc-select__arrow {
    transform: rotate(180deg);
}

.sc-select__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-light);
    z-index: 1000;
    box-sizing: border-box;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.sc-select.is-open .sc-select__dropdown {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

.sc-select__option {
    padding: 0 var(--spacing-md);
    line-height: 34px;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease;
}

.sc-select__option:hover {
    background: var(--color-bg-page);
}

.sc-select__option.is-selected {
    color: var(--color-primary);
    background: var(--color-primary-light-9);
    font-weight: var(--font-weight-bold);
}


/* Select sizes */

.sc-select[data-size="small"] .sc-select__trigger,
.sc-form[data-size="small"] .sc-select .sc-select__trigger {
    height: 24px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.sc-select[data-size="small"] .sc-select__value,
.sc-form[data-size="small"] .sc-select .sc-select__value {
    line-height: 22px;
    font-size: var(--font-size-sm);
}

.sc-select[data-size="small"] .sc-select__option,
.sc-form[data-size="small"] .sc-select .sc-select__option {
    line-height: 28px;
    font-size: var(--font-size-sm);
}

.sc-select[data-size="large"] .sc-select__trigger,
.sc-form[data-size="large"] .sc-select .sc-select__trigger {
    height: 40px;
    font-size: var(--font-size-lg);
}

.sc-select[data-size="large"] .sc-select__value,
.sc-form[data-size="large"] .sc-select .sc-select__value {
    line-height: 38px;
    font-size: var(--font-size-lg);
}

.sc-select[data-size="large"] .sc-select__option,
.sc-form[data-size="large"] .sc-select .sc-select__option {
    line-height: 38px;
    font-size: var(--font-size-lg);
}


/* Select disabled */

.sc-select.is-disabled .sc-select__trigger {
    background: var(--color-bg-page);
    border-color: var(--color-border-light);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.sc-select.is-disabled .sc-select__arrow {
    color: var(--color-text-disabled);
}


/* Select error */

.sc-select.is-error .sc-select__trigger {
    border-color: var(--color-danger);
}


/* Error state from form-item */

.sc-form-item.is-error .sc-select .sc-select__trigger {
    border-color: var(--color-danger);
}

.sc-form-item[data-error] .sc-select .sc-select__trigger {
    border-color: var(--color-danger);
}


/* ===== Checkbox ===== */

.sc-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1;
    gap: var(--spacing-sm);
}

.sc-checkbox__input {
    display: none;
}

.sc-checkbox__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    transition: all var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
}

.sc-checkbox__inner::after {
    content: '';
    display: none;
    width: 4px;
    height: 8px;
    border: 2px solid var(--color-bg);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.sc-checkbox__input:checked+.sc-checkbox__inner {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.sc-checkbox__input:checked+.sc-checkbox__inner::after {
    display: block;
}

.sc-checkbox:hover .sc-checkbox__inner {
    border-color: var(--color-primary);
}

.sc-checkbox[data-disabled="true"],
.sc-checkbox.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sc-checkbox[data-size="small"] .sc-checkbox__inner,
.sc-form[data-size="small"] .sc-checkbox .sc-checkbox__inner {
    width: 12px;
    height: 12px;
}

.sc-checkbox[data-size="large"] .sc-checkbox__inner,
.sc-form[data-size="large"] .sc-checkbox .sc-checkbox__inner {
    width: 16px;
    height: 16px;
}


/* ===== Radio ===== */

.sc-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: 1;
    gap: var(--spacing-sm);
}

.sc-radio__input {
    display: none;
}

.sc-radio__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    transition: all var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
}

.sc-radio__inner::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-bg);
    transform: scale(0);
    transition: transform var(--transition-duration) var(--transition-timing);
}

.sc-radio__input:checked+.sc-radio__inner {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.sc-radio__input:checked+.sc-radio__inner::after {
    transform: scale(1);
}

.sc-radio:hover .sc-radio__inner {
    border-color: var(--color-primary);
}

.sc-radio[data-disabled="true"],
.sc-radio.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sc-radio[data-size="small"] .sc-radio__inner,
.sc-form[data-size="small"] .sc-radio .sc-radio__inner {
    width: 12px;
    height: 12px;
}

.sc-radio[data-size="small"] .sc-radio__inner::after,
.sc-form[data-size="small"] .sc-radio .sc-radio__inner::after {
    width: 5px;
    height: 5px;
}

.sc-radio[data-size="large"] .sc-radio__inner,
.sc-form[data-size="large"] .sc-radio .sc-radio__inner {
    width: 16px;
    height: 16px;
}

.sc-radio[data-size="large"] .sc-radio__inner::after,
.sc-form[data-size="large"] .sc-radio .sc-radio__inner::after {
    width: 7px;
    height: 7px;
}


/* ===== Rate 评分 ===== */


/* ===== Rate Component ===== */

.sc-rate {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    gap: 0;
    --_rate-icon-size: 20px;
    --_rate-gap: 6px;
    --_rate-color-empty: var(--color-border);
    --_rate-color-full: var(--color-warning);
}

.sc-rate[data-size="small"] {
    --_rate-icon-size: 16px;
    --_rate-gap: 4px;
}

.sc-rate[data-size="large"] {
    --_rate-icon-size: 28px;
    --_rate-gap: 8px;
}


/* ===== Rate Item ===== */

.sc-rate__item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: var(--spacing-xs);
    line-height: 1;
}

.sc-rate__item+.sc-rate__item {
    margin-left: var(--_rate-gap);
}


/* ===== Rate Icons (SVG) ===== */

.sc-rate__icon {
    width: var(--_rate-icon-size);
    height: var(--_rate-icon-size);
    display: block;
    transition: transform 0.15s ease, color 0.15s ease;
}

.sc-rate__icon--empty {
    color: var(--_rate-color-empty);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.sc-rate__icon--full {
    color: var(--_rate-color-full);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    width: 0;
    overflow: hidden;
}


/* Full state: show full icon, hide empty */

.sc-rate__item.is-full .sc-rate__icon--empty {
    color: transparent;
}

.sc-rate__item.is-full .sc-rate__icon--full {
    width: var(--_rate-icon-size);
    position: static;
}


/* Half state */

.sc-rate__item.is-half .sc-rate__icon--empty {
    color: var(--_rate-color-empty);
}

.sc-rate__item.is-half .sc-rate__icon--full {
    width: calc(var(--_rate-icon-size) / 2);
}


/* ===== Hover Effects ===== */

.sc-rate:not(.is-disabled):not(.is-readonly) .sc-rate__item:hover .sc-rate__icon {
    transform: scale(1.15);
}

.sc-rate:not(.is-disabled):not(.is-readonly) .sc-rate__item:hover .sc-rate__icon--empty {
    color: var(--_rate-color-full);
}


/* ===== Custom Colors ===== */

.sc-rate[data-colors] {
    /* Colors are applied via JS as CSS custom properties */
}


/* ===== Text ===== */

.sc-rate__text {
    margin-left: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    white-space: nowrap;
    line-height: 1;
}

.sc-rate[data-size="small"] .sc-rate__text {
    font-size: var(--font-size-sm);
}

.sc-rate[data-size="large"] .sc-rate__text {
    font-size: var(--font-size-lg);
}


/* ===== Disabled State ===== */

.sc-rate.is-disabled,
.sc-rate[data-disabled] {
    cursor: default;
    opacity: 0.6;
}

.sc-rate.is-disabled .sc-rate__item,
.sc-rate[data-disabled] .sc-rate__item {
    cursor: default;
    pointer-events: none;
}


/* ===== Readonly State ===== */

.sc-rate.is-readonly .sc-rate__item {
    cursor: default;
}


/* ===== Slider 滑块 ===== */


/* ===== Slider Component ===== */

.sc-slider {
    position: relative;
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    --_slider-runway-h: 6px;
    --_slider-btn-size: 16px;
    --_slider-padding-y: 10px;
    padding: var(--_slider-padding-y) 0;
    user-select: none;
}


/* ===== Size Variants ===== */

.sc-slider[data-size="small"] {
    --_slider-runway-h: 4px;
    --_slider-btn-size: 12px;
    --_slider-padding-y: 8px;
}

.sc-slider[data-size="large"] {
    --_slider-runway-h: 8px;
    --_slider-btn-size: 20px;
    --_slider-padding-y: 12px;
}


/* ===== Runway ===== */

.sc-slider__runway {
    position: relative;
    width: 100%;
    height: var(--_slider-runway-h);
    background: var(--color-border-light);
    border-radius: var(--radius-round);
    cursor: pointer;
}


/* ===== Bar (filled area) ===== */

.sc-slider__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-round);
    pointer-events: none;
}


/* ===== Button Wrapper ===== */

.sc-slider__button-wrapper {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: grab;
    touch-action: none;
}

.sc-slider__button-wrapper.is-dragging {
    cursor: grabbing;
    z-index: 2;
}


/* ===== Button ===== */

.sc-slider__button {
    width: var(--_slider-btn-size);
    height: var(--_slider-btn-size);
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sc-slider__button-wrapper:hover .sc-slider__button {
    transform: scale(1.2);
    box-shadow: 0 1px 8px rgba(64, 158, 255, 0.35);
}

.sc-slider__button-wrapper.is-dragging .sc-slider__button {
    transform: scale(1.2);
    box-shadow: 0 1px 8px rgba(64, 158, 255, 0.5);
    cursor: grabbing;
}


/* ===== With Input Layout ===== */

.sc-slider-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
}

.sc-slider-wrapper .sc-slider {
    flex: 1;
    margin: 0;
}


/* ===== Value Display ===== */

.sc-slider__value {
    min-width: 32px;
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}


/* ===== Inline Number Input ===== */

.sc-slider__input input {
    width: 72px;
    height: 32px;
    padding: 0 var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    text-align: center;
    outline: none;
    transition: border-color var(--transition-duration) var(--transition-timing);
    -moz-appearance: textfield;
}

.sc-slider__input input::-webkit-inner-spin-button,
.sc-slider__input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sc-slider__input input:focus {
    border-color: var(--color-primary);
}


/* ===== Marks ===== */

.sc-slider-marks {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
}

.sc-slider-marks__item {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sc-slider-marks__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border);
}

.sc-slider-marks__dot.is-active {
    background: var(--color-primary);
}

.sc-slider-marks__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}


/* ===== Disabled State ===== */

.sc-slider.is-disabled,
.sc-slider[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sc-slider.is-disabled .sc-slider__runway,
.sc-slider[data-disabled] .sc-slider__runway {
    cursor: not-allowed;
}

.sc-slider.is-disabled .sc-slider__button-wrapper,
.sc-slider[data-disabled] .sc-slider__button-wrapper {
    cursor: not-allowed;
}

.sc-slider.is-disabled .sc-slider__bar,
.sc-slider[data-disabled] .sc-slider__bar {
    background: var(--color-info);
}

.sc-slider.is-disabled .sc-slider__button,
.sc-slider[data-disabled] .sc-slider__button {
    border-color: var(--color-info);
    background: var(--color-bg-overlay);
}

.sc-slider.is-disabled .sc-slider__button-wrapper:hover .sc-slider__button,
.sc-slider[data-disabled] .sc-slider__button-wrapper:hover .sc-slider__button {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}


/* ===== Upload 上传 ===== */


/* ===== Upload Component ===== */

.sc-upload {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}


/* ===== Trigger Area ===== */

.sc-upload__trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.sc-upload__input {
    display: none;
}


/* ===== File List (text mode) ===== */

.sc-upload__list {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
}

.sc-upload__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-base);
    transition: background var(--transition-duration) var(--transition-timing);
    position: relative;
    line-height: 1.8;
}

.sc-upload__item:hover {
    background: var(--color-bg-overlay);
}

.sc-upload__item__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-regular);
    font-size: var(--font-size-base);
    transition: color var(--transition-duration) var(--transition-timing);
}

.sc-upload__item:hover .sc-upload__item__name {
    color: var(--color-primary);
}

.sc-upload__item__size {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===== Progress Bar ===== */

.sc-upload__item__progress {
    position: absolute;
    bottom: -2px;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    height: 2px;
    background: var(--color-border-light);
    border-radius: var(--radius-round);
    overflow: hidden;
}

.sc-upload__item__progress-bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-round);
    transition: width 0.3s ease;
}

.sc-upload__item__progress-bar.is-animating {
    animation: sc-upload-progress 1.5s ease-in-out infinite;
}

@keyframes sc-upload-progress {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}


/* ===== Status Icons ===== */

.sc-upload__item__status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
}

.sc-upload__item__status.is-uploading {
    color: var(--color-primary);
}

.sc-upload__item__status.is-success {
    color: var(--color-success);
}

.sc-upload__item__status.is-error {
    color: var(--color-danger);
}

.sc-upload__item__status.is-ready {
    color: var(--color-text-secondary);
}


/* ===== Delete Button ===== */

.sc-upload__item__delete {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1;
    transition: color var(--transition-duration) var(--transition-timing);
}

.sc-upload__item:hover .sc-upload__item__delete {
    display: inline-flex;
}

.sc-upload__item__delete:hover {
    color: var(--color-danger);
}


/* ===== Picture List Mode ===== */

.sc-upload__picture-list {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sc-upload__picture-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    transition: border-color var(--transition-duration) var(--transition-timing);
}

.sc-upload__picture-item:hover {
    border-color: var(--color-primary);
}

.sc-upload__picture-item__thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-base);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border-light);
}

.sc-upload__picture-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-upload__picture-item__name {
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-upload__picture-item__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===== Picture Card (Photo Wall) Mode ===== */

.sc-upload--picture-card {
    width: 100%;
}

.sc-upload__picture-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-upload__picture-card-item {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg);
}

.sc-upload__picture-card-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-upload__picture-card-item__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing);
}

.sc-upload__picture-card-item:hover .sc-upload__picture-card-item__overlay {
    opacity: 1;
}

.sc-upload__picture-card-item__preview,
.sc-upload__picture-card-item__delete {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--color-bg);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    transition: background var(--transition-duration) var(--transition-timing);
}

.sc-upload__picture-card-item__preview:hover,
.sc-upload__picture-card-item__delete:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* ===== Picture Card Trigger ===== */

.sc-upload__picture-card-trigger {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    transition: border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
}

.sc-upload__picture-card-trigger:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sc-upload__picture-card-trigger svg {
    width: 24px;
    height: 24px;
}

.sc-upload__picture-card-trigger p {
    margin: 0;
    font-size: var(--font-size-sm);
}


/* ===== Drag Upload ===== */

.sc-upload--drag {
    width: 100%;
}

.sc-upload__drag-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-4xl) var(--spacing-3xl);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing);
}

.sc-upload__drag-area:hover,
.sc-upload--drag.is-dragover .sc-upload__drag-area {
    border-color: var(--color-primary);
    background: var(--color-primary-light-9);
}

.sc-upload__drag-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
}

.sc-upload--drag.is-dragover .sc-upload__drag-icon {
    color: var(--color-primary);
}

.sc-upload__drag-text {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
}

.sc-upload__drag-text em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.sc-upload__drag-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===== Size Variants ===== */

.sc-upload[data-size="small"] .sc-upload__drag-area {
    padding: var(--spacing-3xl) var(--spacing-2xl);
}

.sc-upload[data-size="small"] .sc-upload__drag-icon {
    width: 36px;
    height: 36px;
}

.sc-upload[data-size="large"] .sc-upload__drag-area {
    padding: var(--spacing-4xl) var(--spacing-4xl);
}

.sc-upload[data-size="large"] .sc-upload__drag-icon {
    width: 60px;
    height: 60px;
}


/* ===== Disabled State ===== */

.sc-upload.is-disabled,
.sc-upload[data-disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.sc-upload.is-disabled .sc-upload__trigger,
.sc-upload[data-disabled] .sc-upload__trigger {
    cursor: not-allowed;
}

.sc-upload.is-disabled .sc-upload__drag-area,
.sc-upload[data-disabled] .sc-upload__drag-area {
    cursor: not-allowed;
    border-color: var(--color-border);
    background: var(--color-bg-overlay);
}

.sc-upload.is-disabled .sc-upload__picture-card-trigger,
.sc-upload[data-disabled] .sc-upload__picture-card-trigger {
    cursor: not-allowed;
    border-color: var(--color-border);
    color: var(--color-text-disabled);
}


/* ===== Exceed Tip ===== */

.sc-upload__tip {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.sc-upload__exceed {
    color: var(--color-danger);
}


/* ===== Badge 标记 ===== */


/* ===== Badge Component ===== */

.sc-badge {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}


/* ===== Badge Content (sup) ===== */

.sc-badge__content {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    min-width: 18px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: #fff;
    background: var(--color-danger);
    border-radius: var(--radius-round);
    white-space: nowrap;
    box-sizing: border-box;
    z-index: 1;
    transition: transform var(--transition-duration) var(--transition-timing);
}


/* ===== Type Variants ===== */

.sc-badge[data-type="primary"] .sc-badge__content,
.sc-badge.is-primary .sc-badge__content {
    background: var(--color-primary);
}

.sc-badge[data-type="success"] .sc-badge__content,
.sc-badge.is-success .sc-badge__content {
    background: var(--color-success);
}

.sc-badge[data-type="warning"] .sc-badge__content,
.sc-badge.is-warning .sc-badge__content {
    background: var(--color-warning);
}

.sc-badge[data-type="danger"] .sc-badge__content,
.sc-badge.is-danger .sc-badge__content {
    background: var(--color-danger);
}

.sc-badge[data-type="info"] .sc-badge__content,
.sc-badge.is-info .sc-badge__content {
    background: var(--color-info);
}


/* ===== Size Variants ===== */

.sc-badge[data-size="small"] .sc-badge__content {
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 10px;
}

.sc-badge[data-size="large"] .sc-badge__content {
    height: 22px;
    min-width: 22px;
    padding: 0 7px;
    font-size: 14px;
}


/* ===== Dot Mode ===== */

.sc-badge[data-dot] .sc-badge__content,
.sc-badge.is-dot .sc-badge__content {
    width: 8px;
    height: 8px;
    min-width: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}


/* ===== Hidden ===== */

.sc-badge[data-hidden] .sc-badge__content,
.sc-badge.is-hidden .sc-badge__content {
    display: none;
}


/* ===== Fixed Position ===== */

.sc-badge.is-fixed .sc-badge__content {
    position: fixed;
}


/* ===== Collapse 折叠面板 ===== */


/* ===== Collapse Component ===== */

.sc-collapse {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    overflow: hidden;
}


/* ===== Collapse Item ===== */

.sc-collapse-item {
    border-bottom: 1px solid var(--color-border);
}

.sc-collapse-item:last-child {
    border-bottom: none;
}


/* ===== Header ===== */

.sc-collapse-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-bg);
    cursor: pointer;
    transition: background-color var(--transition-duration) var(--transition-timing);
    user-select: none;
}

.sc-collapse-item__header:hover {
    background: var(--color-bg-page);
}


/* ===== Title ===== */

.sc-collapse-item__title {
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-primary);
}


/* ===== Arrow ===== */

.sc-collapse-item__arrow {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: transform var(--transition-duration) var(--transition-timing);
}


/* ===== Content ===== */

.sc-collapse-item__content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: var(--color-text-regular);
    line-height: var(--line-height-base);
    transition: max-height var(--transition-duration) var(--transition-timing), padding var(--transition-duration) var(--transition-timing);
}


/* ===== Active State ===== */

.sc-collapse-item.is-active>.sc-collapse-item__content {
    max-height: 500px;
    padding: 0 20px 16px;
}

.sc-collapse-item.is-active>.sc-collapse-item__header .sc-collapse-item__arrow {
    transform: rotate(180deg);
}


/* ===== Disabled State ===== */

.sc-collapse-item[data-disabled]>.sc-collapse-item__header,
.sc-collapse-item.is-disabled>.sc-collapse-item__header {
    cursor: default;
    color: var(--color-text-disabled);
    background: var(--color-bg);
}

.sc-collapse-item[data-disabled]>.sc-collapse-item__header:hover,
.sc-collapse-item.is-disabled>.sc-collapse-item__header:hover {
    background: var(--color-bg);
}

.sc-collapse-item[data-disabled]>.sc-collapse-item__header .sc-collapse-item__title,
.sc-collapse-item.is-disabled>.sc-collapse-item__header .sc-collapse-item__title {
    color: var(--color-text-disabled);
}

.sc-collapse-item[data-disabled]>.sc-collapse-item__header .sc-collapse-item__arrow,
.sc-collapse-item.is-disabled>.sc-collapse-item__header .sc-collapse-item__arrow {
    color: var(--color-text-disabled);
}


/* ===== Table 表格 ===== */


/* ===== Table Component ===== */

.sc-table {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    overflow: auto;
    position: relative;
}

.sc-table__inner {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}


/* ===== Cells ===== */

.sc-table__cell {
    padding: 12px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: middle;
    line-height: var(--line-height-base);
    color: var(--color-text-regular);
}

.sc-table__cell--header {
    background-color: var(--color-bg-page);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    white-space: nowrap;
}


/* ===== Border ===== */

.sc-table[data-border] {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
}

.sc-table[data-border] .sc-table__cell {
    border: 1px solid var(--color-border-light);
    border-bottom: none;
}

.sc-table[data-border] .sc-table__cell--header {
    border-bottom: 1px solid var(--color-border-light);
}

.sc-table[data-border] .sc-table__body .sc-table__row:last-child .sc-table__cell {
    border-bottom: none;
}


/* ===== Stripe ===== */

.sc-table[data-stripe] .sc-table__body .sc-table__row:nth-child(even) .sc-table__cell {
    background-color: var(--color-bg-page);
}


/* ===== Hover ===== */

.sc-table__body .sc-table__row {
    transition: background-color var(--transition-duration) var(--transition-timing);
}

.sc-table__body .sc-table__row:hover>.sc-table__cell {
    background-color: var(--color-bg-page);
}

.sc-table[data-stripe] .sc-table__body .sc-table__row:nth-child(even):hover>.sc-table__cell {
    background-color: var(--color-border-light);
}


/* ===== Status Rows ===== */

.sc-table__row[data-type="success"]>.sc-table__cell {
    background-color: #f0f9eb;
    color: var(--color-success);
}

.sc-table__row[data-type="warning"]>.sc-table__cell {
    background-color: #fdf6ec;
    color: var(--color-warning);
}

.sc-table__row[data-type="danger"]>.sc-table__cell {
    background-color: #fef0f0;
    color: var(--color-danger);
}

.sc-table__row[data-type="info"]>.sc-table__cell {
    background-color: var(--color-primary-light-9);
    color: var(--color-info);
}


/* ===== Fixed Header ===== */

.sc-table[data-height] {
    overflow: auto;
    max-height: var(--sc-table-height, auto);
}

.sc-table[data-height] .sc-table__inner {
    position: relative;
}

.sc-table[data-height] .sc-table__header {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sc-table[data-height] .sc-table__header .sc-table__cell--header {
    background-color: var(--color-bg-page);
}


/* ===== Sort ===== */

.sc-table__cell--sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
}

.sc-table__cell--sortable:hover {
    background-color: var(--color-border-light);
}

.sc-table__sort {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    gap: 1px;
}

.sc-table__sort-asc,
.sc-table__sort-desc {
    width: 8px;
    height: 8px;
    fill: var(--color-text-placeholder);
    transition: fill var(--transition-duration) var(--transition-timing);
}

.sc-table__cell--sortable[data-sort="asc"] .sc-table__sort-asc {
    fill: var(--color-primary);
}

.sc-table__cell--sortable[data-sort="desc"] .sc-table__sort-desc {
    fill: var(--color-primary);
}


/* ===== Filter ===== */

.sc-table__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-placeholder);
    border-radius: var(--radius-sm);
    transition: color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
}

.sc-table__filter:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light-9);
}

.sc-table__filter.is-active {
    color: var(--color-primary);
}

.sc-table__filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 160px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-light);
    padding: 8px 0;
    display: none;
}

.sc-table__filter-dropdown.is-visible {
    display: block;
}

.sc-table__filter-option {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-regular);
    transition: background-color var(--transition-duration) var(--transition-timing);
    gap: 6px;
}

.sc-table__filter-option:hover {
    background-color: var(--color-bg-page);
}

.sc-table__filter-option input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.sc-table__filter-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 4px;
    border-top: 1px solid var(--color-border-light);
    margin-top: 4px;
}

.sc-table__filter-confirm,
.sc-table__filter-reset {
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-duration) var(--transition-timing);
}

.sc-table__filter-confirm {
    color: var(--color-primary);
}

.sc-table__filter-confirm:hover {
    color: var(--color-primary-dark-2);
}

.sc-table__filter-reset {
    color: var(--color-text-secondary);
}

.sc-table__filter-reset:hover {
    color: var(--color-primary);
}


/* ===== Detail Panel ===== */

.sc-table__expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
    color: var(--color-text-regular);
    transition: border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
    vertical-align: middle;
}

.sc-table__expand-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.sc-table__expand-btn svg {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-duration) var(--transition-timing);
}

.sc-table__expand-btn.is-expanded svg {
    transform: rotate(90deg);
}


/* ===== Expand Content (行内展开) ===== */

.sc-table__expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-duration) var(--transition-timing);
    width: 100%;
}

.sc-table__expand-content.is-expanded {
    max-height: 500px;
}

.sc-table__expand-inner {
    padding: 12px 12px 12px 0;
    background-color: var(--color-bg-page);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    color: var(--color-text-regular);
    line-height: var(--line-height-base);
    margin-top: 8px;
}

.sc-table__expand-inner p {
    margin: 0 0 8px;
}

.sc-table__expand-inner p:last-child {
    margin-bottom: 0;
}


/* ===== Size Variants ===== */

.sc-table[data-size="small"] {
    font-size: var(--font-size-sm);
}

.sc-table[data-size="small"] .sc-table__cell {
    padding: 8px;
}

.sc-table[data-size="large"] {
    font-size: 15px;
}

.sc-table[data-size="large"] .sc-table__cell {
    padding: 16px;
}


/* ===== Timeline 时间线 ===== */


/* ===== Timeline Component ===== */

.sc-timeline {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ===== Timeline Item ===== */

.sc-timeline__item {
    position: relative;
    padding: 0 0 24px 28px;
}

.sc-timeline__item:last-child {
    padding-bottom: 0;
}


/* ===== Connecting Line ===== */

.sc-timeline__item::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border-light);
}

.sc-timeline__item:last-child::before {
    display: none;
}


/* ===== Node ===== */

.sc-timeline__node {
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-border);
    border: 2px solid var(--color-bg);
    box-sizing: border-box;
    z-index: 1;
    transition: background-color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing);
}


/* ===== Content ===== */

.sc-timeline__content {
    line-height: var(--line-height-base);
    color: var(--color-text-regular);
}


/* ===== Timestamp ===== */

.sc-timeline__timestamp {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.sc-timeline__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}


/* ===== Type Colors ===== */

.sc-timeline__item[data-type="primary"] .sc-timeline__node {
    background-color: var(--color-primary);
}

.sc-timeline__item[data-type="success"] .sc-timeline__node {
    background-color: var(--color-success);
}

.sc-timeline__item[data-type="warning"] .sc-timeline__node {
    background-color: var(--color-warning);
}

.sc-timeline__item[data-type="danger"] .sc-timeline__node {
    background-color: var(--color-danger);
}

.sc-timeline__item[data-type="info"] .sc-timeline__node {
    background-color: var(--color-info);
}


/* ===== Hollow Node ===== */

.sc-timeline__item[data-hollow] .sc-timeline__node {
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
}

.sc-timeline__item[data-hollow][data-type="primary"] .sc-timeline__node {
    border-color: var(--color-primary);
}

.sc-timeline__item[data-hollow][data-type="success"] .sc-timeline__node {
    border-color: var(--color-success);
}

.sc-timeline__item[data-hollow][data-type="warning"] .sc-timeline__node {
    border-color: var(--color-warning);
}

.sc-timeline__item[data-hollow][data-type="danger"] .sc-timeline__node {
    border-color: var(--color-danger);
}

.sc-timeline__item[data-hollow][data-type="info"] .sc-timeline__node {
    border-color: var(--color-info);
}


/* ===== Custom Node (icon) ===== */

.sc-timeline__node--custom {
    width: 24px;
    height: 24px;
    left: -6px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
}

.sc-timeline__node--custom svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.sc-timeline__item[data-type="primary"] .sc-timeline__node--custom {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sc-timeline__item[data-type="success"] .sc-timeline__node--custom {
    border-color: var(--color-success);
    color: var(--color-success);
}

.sc-timeline__item[data-type="warning"] .sc-timeline__node--custom {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.sc-timeline__item[data-type="danger"] .sc-timeline__node--custom {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.sc-timeline__item[data-type="info"] .sc-timeline__node--custom {
    border-color: var(--color-info);
    color: var(--color-info);
}


/* Adjust line position for custom nodes */

.sc-timeline__item:has(.sc-timeline__node--custom)::before {
    top: 24px;
    left: 5px;
}


/* ===== Size Variants ===== */

.sc-timeline[data-size="small"] .sc-timeline__item {
    padding-bottom: 16px;
    padding-left: 24px;
}

.sc-timeline[data-size="small"] .sc-timeline__node {
    width: 8px;
    height: 8px;
    top: 5px;
}

.sc-timeline[data-size="small"] .sc-timeline__item::before {
    left: 3px;
    top: 13px;
}

.sc-timeline[data-size="small"] .sc-timeline__content {
    font-size: var(--font-size-sm);
}

.sc-timeline[data-size="small"] .sc-timeline__timestamp {
    font-size: 12px;
}

.sc-timeline[data-size="large"] .sc-timeline__item {
    padding-bottom: 32px;
    padding-left: 34px;
}

.sc-timeline[data-size="large"] .sc-timeline__node {
    width: 16px;
    height: 16px;
    top: 2px;
}

.sc-timeline[data-size="large"] .sc-timeline__item::before {
    left: 7px;
    top: 18px;
}

.sc-timeline[data-size="large"] .sc-timeline__content {
    font-size: var(--font-size-lg);
}

.sc-timeline[data-size="large"] .sc-timeline__timestamp {
    font-size: var(--font-size-base);
}


/* ===== Reverse Layout ===== */

.sc-timeline[data-reverse] .sc-timeline__item {
    padding-left: 0;
    padding-right: 28px;
    text-align: right;
}

.sc-timeline[data-reverse] .sc-timeline__node {
    left: auto;
    right: 0;
}

.sc-timeline[data-reverse] .sc-timeline__item::before {
    left: auto;
    right: 5px;
}


/* ===== Card Style ===== */

.sc-timeline[data-card] .sc-timeline__content {
    background-color: var(--color-bg-page);
    border-radius: var(--radius-base);
    padding: 12px 16px;
}


/* ===== Tree 树形控件 ===== */


/* ===== Tree Component ===== */

.sc-tree {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
}


/* ===== Node ===== */

.sc-tree-node {
    position: relative;
}

.sc-tree-node__content {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-base);
    transition: background-color var(--transition-duration) var(--transition-timing);
}

.sc-tree-node__content:hover {
    background-color: var(--color-bg-page);
}

.sc-tree-node__label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    color: var(--color-text-regular);
    font-size: var(--font-size-base);
}


/* ===== Expand Arrow ===== */

.sc-tree-node__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: var(--color-text-secondary);
}

.sc-tree-node__expand svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}


/* Expanded state — rotate arrow */

.is-expanded>.sc-tree-node__content .sc-tree-node__expand {
    transform: rotate(90deg);
}


/* ===== Children ===== */

.sc-tree-node__children {
    padding-left: 18px;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-duration) var(--transition-timing);
}

.is-expanded>.sc-tree-node__children {
    max-height: 2000px;
}


/* ===== Selected ===== */

.is-selected>.sc-tree-node__content {
    background-color: var(--color-primary-light-9);
}

.is-selected>.sc-tree-node__content .sc-tree-node__label {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}


/* ===== Disabled ===== */

.is-disabled>.sc-tree-node__content {
    cursor: not-allowed;
    color: var(--color-text-disabled);
}

.is-disabled>.sc-tree-node__content:hover {
    background-color: transparent;
}

.is-disabled>.sc-tree-node__content .sc-tree-node__label {
    color: var(--color-text-disabled);
}

.is-disabled>.sc-tree-node__content .sc-tree-node__expand {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}


/* ===== Checkbox (Checkable mode) ===== */

.sc-tree-node__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
    position: relative;
    margin-left: 2px;
}

.sc-tree-node__checkbox:hover {
    border-color: var(--color-primary);
}

.sc-tree-node__checkbox svg {
    width: 12px;
    height: 12px;
    fill: var(--color-bg);
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing);
}


/* Checked */

.sc-tree-node__checkbox.is-checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sc-tree-node__checkbox.is-checked svg {
    opacity: 1;
}


/* Indeterminate */

.sc-tree-node__checkbox.is-indeterminate {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sc-tree-node__checkbox.is-indeterminate svg {
    opacity: 1;
}


/* Disabled checkbox */

.is-disabled>.sc-tree-node__content .sc-tree-node__checkbox {
    cursor: not-allowed;
    background-color: var(--color-bg-page);
    border-color: var(--color-border-light);
}

.is-disabled>.sc-tree-node__content .sc-tree-node__checkbox.is-checked {
    background-color: var(--color-text-placeholder);
    border-color: var(--color-text-placeholder);
}


/* ===== Size Variants ===== */

.sc-tree[data-size="small"] {
    font-size: var(--font-size-sm);
}

.sc-tree[data-size="small"] .sc-tree-node__content {
    padding: 2px 6px;
}

.sc-tree[data-size="small"] .sc-tree-node__label {
    font-size: var(--font-size-sm);
}

.sc-tree[data-size="small"] .sc-tree-node__expand {
    width: 18px;
    height: 18px;
}

.sc-tree[data-size="small"] .sc-tree-node__expand svg {
    width: 10px;
    height: 10px;
}

.sc-tree[data-size="large"] {
    font-size: 15px;
}

.sc-tree[data-size="large"] .sc-tree-node__content {
    padding: 6px 10px;
}

.sc-tree[data-size="large"] .sc-tree-node__label {
    font-size: 15px;
}

.sc-tree[data-size="large"] .sc-tree-node__expand {
    width: 22px;
    height: 22px;
}

.sc-tree[data-size="large"] .sc-tree-node__expand svg {
    width: 14px;
    height: 14px;
}


/* ===== Statistic 统计数值 ===== */


/* ===== Statistic Component ===== */

.sc-statistic {
    font-family: var(--font-family);
    display: inline-block;
}


/* ===== Title ===== */

.sc-statistic__title {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-base);
}


/* ===== Content ===== */

.sc-statistic__content {
    display: flex;
    align-items: baseline;
}

.sc-statistic__value {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.sc-statistic__prefix {
    margin-right: var(--spacing-xs);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
}

.sc-statistic__prefix svg {
    fill: currentColor;
}

.sc-statistic__suffix {
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}


/* ===== Size Variants ===== */

.sc-statistic[data-size="small"] .sc-statistic__value,
.sc-statistic[data-size="small"] .sc-statistic__prefix {
    font-size: var(--font-size-xl);
}

.sc-statistic[data-size="large"] .sc-statistic__value,
.sc-statistic[data-size="large"] .sc-statistic__prefix {
    font-size: 30px;
}


/* ===== Type / Status Colors ===== */

.sc-statistic[data-type="success"] .sc-statistic__value,
.sc-statistic[data-type="success"] .sc-statistic__prefix {
    color: var(--color-success);
}

.sc-statistic[data-type="warning"] .sc-statistic__value,
.sc-statistic[data-type="warning"] .sc-statistic__prefix {
    color: var(--color-warning);
}

.sc-statistic[data-type="danger"] .sc-statistic__value,
.sc-statistic[data-type="danger"] .sc-statistic__prefix {
    color: var(--color-danger);
}

.sc-statistic[data-type="info"] .sc-statistic__value,
.sc-statistic[data-type="info"] .sc-statistic__prefix {
    color: var(--color-primary);
}


/* ===== Countdown ===== */

.sc-statistic--countdown .sc-statistic__value {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}


/* ===== Statistic Card ===== */

.sc-statistic-card {
    padding: var(--spacing-xl);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-light);
    transition: box-shadow var(--transition-duration) var(--transition-timing);
}

.sc-statistic-card:hover {
    box-shadow: var(--shadow-dark);
}


/* ===== Steps 步骤条 ===== */


/* ===== Steps Component ===== */

.sc-steps {
    font-family: var(--font-family);
    display: flex;
    align-items: flex-start;
    width: 100%;
}


/* ===== Step Item ===== */

.sc-step {
    flex: 1;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.sc-step__head {
    display: flex;
    align-items: center;
    position: relative;
}

.sc-step__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    transition: all var(--transition-duration) var(--transition-timing);
}

.sc-step__icon svg {
    display: block;
}

.sc-step__main {
    margin-left: var(--spacing-sm);
    white-space: nowrap;
}

.sc-step__title {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    transition: color var(--transition-duration) var(--transition-timing);
}

.sc-step__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
    line-height: var(--line-height-base);
}


/* ===== Connecting Line (horizontal) ===== */

.sc-step__line {
    flex: 1;
    height: 2px;
    margin: 0 var(--spacing-md);
    margin-top: 12px;
    background-color: var(--color-border);
    align-self: flex-start;
    transition: background-color var(--transition-duration) var(--transition-timing);
}

.sc-step__line.is-finish {
    background-color: var(--color-primary);
}


/* ===== Status: wait ===== */

.sc-step.is-wait .sc-step__icon {
    border: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    background-color: transparent;
}

.sc-step.is-wait .sc-step__title {
    color: var(--color-text-secondary);
}

.sc-step.is-wait .sc-step__description {
    color: var(--color-text-secondary);
}


/* ===== Status: process ===== */

.sc-step.is-process .sc-step__icon {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}

.sc-step.is-process .sc-step__title {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

.sc-step.is-process .sc-step__description {
    color: var(--color-text-regular);
}


/* ===== Status: finish ===== */

.sc-step.is-finish .sc-step__icon {
    border: 2px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
}

.sc-step.is-finish .sc-step__icon svg {
    stroke: var(--color-primary);
}

.sc-step.is-finish .sc-step__title {
    color: var(--color-text-primary);
}

.sc-step.is-finish .sc-step__description {
    color: var(--color-text-regular);
}


/* ===== Status: success (alias of finish) ===== */

.sc-step.is-success .sc-step__icon {
    border: 2px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
}

.sc-step.is-success .sc-step__icon svg {
    stroke: var(--color-primary);
}

.sc-step.is-success .sc-step__title {
    color: var(--color-text-primary);
}


/* ===== Status: error ===== */

.sc-step.is-error .sc-step__icon {
    border: 2px solid var(--color-danger);
    background-color: transparent;
    color: var(--color-danger);
}

.sc-step.is-error .sc-step__icon svg {
    stroke: var(--color-danger);
}

.sc-step.is-error .sc-step__title {
    color: var(--color-danger);
}

.sc-step.is-error .sc-step__description {
    color: var(--color-danger);
}


/* ===== Vertical Direction ===== */

.sc-steps[data-direction="vertical"] {
    flex-direction: column;
}

.sc-steps[data-direction="vertical"] .sc-step {
    flex: none;
    flex-direction: row;
    align-items: flex-start;
}

.sc-steps[data-direction="vertical"] .sc-step__main {
    margin-left: var(--spacing-lg);
    padding-bottom: var(--spacing-3xl);
    white-space: normal;
}

.sc-steps[data-direction="vertical"] .sc-step__line {
    display: none;
}


/* Vertical connecting line via pseudo-element */

.sc-steps[data-direction="vertical"] .sc-step::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 28px;
    width: 2px;
    height: calc(100% - 28px);
    background-color: var(--color-border);
    transition: background-color var(--transition-duration) var(--transition-timing);
}

.sc-steps[data-direction="vertical"] .sc-step:last-child::before {
    display: none;
}

.sc-steps[data-direction="vertical"] .sc-step.is-finish::before,
.sc-steps[data-direction="vertical"] .sc-step.is-success::before {
    background-color: var(--color-primary);
}


/* ===== Simple Mode ===== */

.sc-steps[data-simple] .sc-step__icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
}

.sc-steps[data-simple] .sc-step__icon svg {
    width: 12px;
    height: 12px;
}

.sc-steps[data-simple] .sc-step__main {
    margin-left: var(--spacing-sm);
}

.sc-steps[data-simple] .sc-step__description {
    display: none;
}

.sc-steps[data-simple] .sc-step__line {
    margin-top: 9px;
}


/* ===== Icon inside step circle ===== */

.sc-step__icon .sc-step__icon-svg {
    width: 14px;
    height: 14px;
}


/* ===== Interactive Demo Actions ===== */

.sc-steps-actions {
    margin-top: var(--spacing-4xl);
    padding: var(--spacing-3xl) 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3xl);
}


/* ===== Steps Nav Button (base / default) ===== */

.sc-steps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 0 48px;
    height: 64px;
    font-size: 20px;
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-regular);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    user-select: none;
    white-space: nowrap;
    letter-spacing: 2px;
    transition: all var(--transition-duration) var(--transition-timing);
}

.sc-steps-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--color-primary-light-9);
    box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.18);
}

.sc-steps-btn:active {
    color: var(--color-primary-dark-2);
    border-color: var(--color-primary-dark-2);
    background-color: var(--color-primary-light-9);
}


/* ===== Steps Nav Button — Primary variant ===== */

.sc-steps-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
    border-color: transparent;
    box-shadow: 0 8px 28px rgba(64, 158, 255, 0.4);
}

.sc-steps-btn--primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary-light-3) 0%, var(--color-primary) 100%);
    border-color: transparent;
    box-shadow: 0 12px 36px rgba(64, 158, 255, 0.5);
    transform: translateY(-3px);
}

.sc-steps-btn--primary:active {
    color: #fff;
    background: var(--color-primary-dark-2);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    transform: translateY(0);
}


/* ===== Disabled state ===== */

.sc-steps-btn[data-disabled="true"],
.sc-steps-btn:disabled {
    color: var(--color-text-disabled);
    background-color: var(--color-bg-page);
    border-color: var(--color-border-light);
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.sc-steps-btn--primary[data-disabled="true"],
.sc-steps-btn--primary:disabled {
    color: #fff;
    background: var(--color-primary-light-7);
    border-color: transparent;
    box-shadow: none;
    opacity: 0.5;
    pointer-events: none;
}


/* ===== Tabs 标签页 ===== */


/* ===== Tabs Component ===== */

.sc-tabs {
    font-family: var(--font-family);
    width: 100%;
}


/* ===== Tabs Header ===== */

.sc-tabs__header {
    position: relative;
    border-bottom: 2px solid var(--color-border-light);
    margin-bottom: 0;
}

.sc-tabs__nav {
    display: flex;
    align-items: center;
    position: relative;
}


/* ===== Tabs Item ===== */

.sc-tabs__item {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    user-select: none;
    transition: color var(--transition-duration) var(--transition-timing);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.sc-tabs__item:hover {
    color: var(--color-primary);
}

.sc-tabs__item.is-active {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}


/* ===== Active Bar (bottom indicator) ===== */

.sc-tabs__active-bar {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: transform var(--transition-duration) var(--transition-timing), width var(--transition-duration) var(--transition-timing);
    z-index: 1;
}


/* ===== Tabs Content ===== */

.sc-tabs__content {
    padding: var(--spacing-lg) 0;
}

.sc-tabs__panel {
    display: none;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    line-height: var(--line-height-base);
}

.sc-tabs__panel.is-active {
    display: block;
}


/* ===== Close Button ===== */

.sc-tabs__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 1;
    border-radius: 50%;
    color: var(--color-text-secondary);
    transition: all var(--transition-duration) var(--transition-timing);
    opacity: 0;
    flex-shrink: 0;
}

.sc-tabs__item:hover .sc-tabs__close {
    opacity: 1;
}

.sc-tabs__close:hover {
    background-color: var(--color-text-secondary);
    color: #fff;
}


/* ===== Add Button ===== */

.sc-tabs__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: var(--color-text-secondary);
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: transparent;
    transition: all var(--transition-duration) var(--transition-timing);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
    align-self: center;
}

.sc-tabs__add:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}


/* ==========================================
   Card Style: data-type="card"
   ========================================== */

.sc-tabs[data-type="card"] .sc-tabs__header {
    border-bottom: 2px solid var(--color-border-light);
}

.sc-tabs[data-type="card"] .sc-tabs__nav {
    gap: 0;
}

.sc-tabs[data-type="card"] .sc-tabs__item {
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-bg-page);
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    margin-right: -1px;
    transition: all var(--transition-duration) var(--transition-timing);
}

.sc-tabs[data-type="card"] .sc-tabs__item:hover {
    color: var(--color-primary);
}

.sc-tabs[data-type="card"] .sc-tabs__item.is-active {
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: -2px;
    z-index: 1;
}


/* No active bar for card style */

.sc-tabs[data-type="card"] .sc-tabs__active-bar {
    display: none;
}


/* ==========================================
   Bordered Card: data-type="card" data-border
   ========================================== */

.sc-tabs[data-type="card"][data-border] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    overflow: hidden;
}

.sc-tabs[data-type="card"][data-border] .sc-tabs__header {
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-sm) var(--spacing-sm) 0;
}

.sc-tabs[data-type="card"][data-border] .sc-tabs__content {
    padding: var(--spacing-lg);
}

.sc-tabs[data-type="card"][data-border] .sc-tabs__item.is-active {
    border-bottom: 1px solid var(--color-bg);
}


/* ==========================================
   Position: Bottom
   ========================================== */

.sc-tabs[data-position="bottom"] {
    display: flex;
    flex-direction: column-reverse;
}

.sc-tabs[data-position="bottom"] .sc-tabs__header {
    border-bottom: none;
    border-top: 2px solid var(--color-border-light);
}

.sc-tabs[data-position="bottom"] .sc-tabs__active-bar {
    bottom: auto;
    top: -2px;
}

.sc-tabs[data-position="bottom"][data-type="card"] .sc-tabs__item {
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    border-top: none;
    border-bottom: 1px solid var(--color-border);
}

.sc-tabs[data-position="bottom"][data-type="card"] .sc-tabs__item.is-active {
    border-top: 1px solid var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    margin-top: -2px;
    margin-bottom: 0;
}


/* ==========================================
   Position: Left
   ========================================== */

.sc-tabs[data-position="left"] {
    display: flex;
    flex-direction: row;
}

.sc-tabs[data-position="left"] .sc-tabs__header {
    border-bottom: none;
    border-right: 2px solid var(--color-border-light);
    width: 120px;
    flex-shrink: 0;
}

.sc-tabs[data-position="left"] .sc-tabs__nav {
    flex-direction: column;
}

.sc-tabs[data-position="left"] .sc-tabs__item {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    text-align: right;
    justify-content: flex-end;
}

.sc-tabs[data-position="left"] .sc-tabs__active-bar {
    bottom: auto;
    right: -2px;
    top: 0;
    left: auto;
    width: 2px;
    height: auto;
}

.sc-tabs[data-position="left"] .sc-tabs__content {
    padding: 0 var(--spacing-lg);
    flex: 1;
}


/* Left + Card */

.sc-tabs[data-position="left"][data-type="card"] .sc-tabs__header {
    border-right: 2px solid var(--color-border-light);
    border-bottom: none;
}

.sc-tabs[data-position="left"][data-type="card"] .sc-tabs__item {
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-base) 0 0 var(--radius-base);
    margin-right: 0;
    margin-bottom: -1px;
}

.sc-tabs[data-position="left"][data-type="card"] .sc-tabs__item.is-active {
    border-right: 1px solid var(--color-bg);
    margin-right: -2px;
    margin-bottom: -1px;
}


/* ==========================================
   Position: Right
   ========================================== */

.sc-tabs[data-position="right"] {
    display: flex;
    flex-direction: row-reverse;
}

.sc-tabs[data-position="right"] .sc-tabs__header {
    border-bottom: none;
    border-left: 2px solid var(--color-border-light);
    width: 120px;
    flex-shrink: 0;
}

.sc-tabs[data-position="right"] .sc-tabs__nav {
    flex-direction: column;
}

.sc-tabs[data-position="right"] .sc-tabs__item {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    text-align: left;
    justify-content: flex-start;
}

.sc-tabs[data-position="right"] .sc-tabs__active-bar {
    bottom: auto;
    left: -2px;
    top: 0;
    right: auto;
    width: 2px;
    height: auto;
}

.sc-tabs[data-position="right"] .sc-tabs__content {
    padding: 0 var(--spacing-lg);
    flex: 1;
}


/* Right + Card */

.sc-tabs[data-position="right"][data-type="card"] .sc-tabs__header {
    border-left: 2px solid var(--color-border-light);
    border-bottom: none;
}

.sc-tabs[data-position="right"][data-type="card"] .sc-tabs__item {
    border: 1px solid var(--color-border);
    border-left: none;
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    margin-right: 0;
    margin-bottom: -1px;
}

.sc-tabs[data-position="right"][data-type="card"] .sc-tabs__item.is-active {
    border-left: 1px solid var(--color-bg);
    margin-left: -2px;
    margin-bottom: -1px;
}


/* ==========================================
   Position-specific: Bordered Card
   ========================================== */

.sc-tabs[data-position="left"][data-type="card"][data-border] .sc-tabs__item.is-active {
    border-right: 1px solid var(--color-bg);
    margin-right: -2px;
}

.sc-tabs[data-position="right"][data-type="card"][data-border] .sc-tabs__item.is-active {
    border-left: 1px solid var(--color-bg);
    margin-left: -2px;
}


/* ===== Tab Name Input ===== */

.sc-tabs__input {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--color-text-regular);
    outline: none;
    margin-right: var(--spacing-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-duration) var(--transition-timing);
    align-self: center;
}

.sc-tabs__input:focus {
    border-color: var(--color-primary);
}

.sc-tabs__input::placeholder {
    color: var(--color-text-placeholder);
}


/* ===== Left/Right Add button alignment ===== */

.sc-tabs[data-position="left"] .sc-tabs__add,
.sc-tabs[data-position="right"] .sc-tabs__add {
    margin-left: 0;
    margin-top: var(--spacing-sm);
    align-self: center;
}


/* ===== Dialog 对话框 ===== */


/* ===== Dialog Component ===== */


/* ===== Overlay ===== */

.sc-dialog__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration) var(--transition-timing), visibility var(--transition-duration) var(--transition-timing);
}

.sc-dialog__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ===== Dialog Container ===== */

.sc-dialog {
    font-family: var(--font-family);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 90vw;
    width: 50%;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
}

.sc-dialog__overlay.is-visible .sc-dialog {
    transform: scale(1);
    opacity: 1;
}


/* ===== Header ===== */

.sc-dialog__header {
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.sc-dialog__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.sc-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 18px;
    border-radius: var(--radius-base);
    transition: color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
    padding: 0;
}

.sc-dialog__close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-dialog__close:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light-9);
}


/* ===== Body ===== */

.sc-dialog__body {
    padding: var(--spacing-xl);
    max-height: 60vh;
    overflow-y: auto;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    line-height: 1.6;
    flex: 1;
}

.sc-dialog__body p {
    margin: 0 0 var(--spacing-sm);
}

.sc-dialog__body p:last-child {
    margin-bottom: 0;
}


/* ===== Footer ===== */

.sc-dialog__footer {
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}


/* ==========================================
   Center: data-center
   ========================================== */

.sc-dialog[data-center] .sc-dialog__header {
    justify-content: center;
    text-align: center;
}

.sc-dialog[data-center] .sc-dialog__close {
    position: absolute;
    right: var(--spacing-xl);
    top: var(--spacing-lg);
}

.sc-dialog[data-center] .sc-dialog__header {
    position: relative;
}

.sc-dialog[data-center] .sc-dialog__body {
    text-align: center;
}

.sc-dialog[data-center] .sc-dialog__footer {
    justify-content: center;
}


/* ==========================================
   Draggable: data-draggable
   ========================================== */

.sc-dialog[data-draggable] .sc-dialog__header {
    cursor: move;
    user-select: none;
}

.sc-dialog.is-dragging {
    transition: none;
}


/* ==========================================
   Animation: data-animation
   ========================================== */


/* Fade: no scale */

.sc-dialog__overlay[data-animation="fade"] .sc-dialog {
    transform: none;
}

.sc-dialog__overlay[data-animation="fade"].is-visible .sc-dialog {
    transform: none;
}


/* Slide: from top */

.sc-dialog__overlay[data-animation="slide"] .sc-dialog {
    transform: translateY(-100px);
}

.sc-dialog__overlay[data-animation="slide"].is-visible .sc-dialog {
    transform: translateY(0);
}


/* Zoom: default scale */

.sc-dialog__overlay[data-animation="zoom"] .sc-dialog {
    transform: scale(0.9);
}

.sc-dialog__overlay[data-animation="zoom"].is-visible .sc-dialog {
    transform: scale(1);
}


/* ===== Body scroll lock ===== */

body.sc-dialog-open {
    overflow: hidden;
}


/* ===== Drawer 抽屉 ===== */


/* ===== Drawer Component ===== */


/* ===== Overlay ===== */

.sc-drawer__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-duration) var(--transition-timing), visibility var(--transition-duration) var(--transition-timing);
}

.sc-drawer__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ===== Drawer Container ===== */

.sc-drawer {
    font-family: var(--font-family);
    position: fixed;
    background: var(--color-bg);
    box-shadow: var(--shadow-dark);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-duration) var(--transition-timing);
}


/* ===== Direction: right (default) ===== */

.sc-drawer[data-direction="right"] {
    top: 0;
    right: 0;
    height: 100%;
    transform: translateX(100%);
}

.sc-drawer__overlay.is-visible .sc-drawer[data-direction="right"] {
    transform: translateX(0);
}


/* ===== Direction: left ===== */

.sc-drawer[data-direction="left"] {
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
}

.sc-drawer__overlay.is-visible .sc-drawer[data-direction="left"] {
    transform: translateX(0);
}


/* ===== Direction: top ===== */

.sc-drawer[data-direction="top"] {
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
}

.sc-drawer__overlay.is-visible .sc-drawer[data-direction="top"] {
    transform: translateY(0);
}


/* ===== Direction: bottom ===== */

.sc-drawer[data-direction="bottom"] {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
}

.sc-drawer__overlay.is-visible .sc-drawer[data-direction="bottom"] {
    transform: translateY(0);
}


/* ===== Header ===== */

.sc-drawer__header {
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.sc-drawer__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.sc-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 20px;
    border-radius: var(--radius-base);
    transition: color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.sc-drawer__close:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-light-9);
}


/* ===== Body ===== */

.sc-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    line-height: 1.6;
}

.sc-drawer__body p {
    margin: 0 0 var(--spacing-sm);
}

.sc-drawer__body p:last-child {
    margin-bottom: 0;
}


/* ===== Footer ===== */

.sc-drawer__footer {
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}


/* ===== Non-modal mode ===== */

.sc-drawer__overlay[data-modal="false"] {
    background: transparent;
    pointer-events: none;
}

.sc-drawer__overlay[data-modal="false"] .sc-drawer,
.sc-drawer__overlay[data-modal="false"] .sc-drawer * {
    pointer-events: auto;
}


/* ===== Nested drawer z-index ===== */

.sc-drawer__overlay .sc-drawer__overlay {
    z-index: 2001;
}

.sc-drawer__overlay .sc-drawer__overlay .sc-drawer__overlay {
    z-index: 2002;
}


/* ===== Body scroll lock ===== */

body.sc-drawer-open {
    overflow: hidden;
}


/* ===== Watermark 水印 ===== */


/* ===== Watermark Component ===== */


/* ===== Container ===== */

.sc-watermark {
    position: relative;
    overflow: hidden;
    min-height: 200px;
    font-family: var(--font-family);
}


/* ===== Content Area ===== */

.sc-watermark__content {
    position: relative;
    z-index: 1;
    padding: var(--spacing-xl);
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    line-height: var(--line-height-base);
}

.sc-watermark__content p {
    margin: 0 0 var(--spacing-sm);
}

.sc-watermark__content p:last-child {
    margin-bottom: 0;
}


/* ===== Watermark Background Layer ===== */


/* JS Canvas generates base64 image set as background-image on .sc-watermark */

.sc-watermark[data-content],
.sc-watermark[data-image] {
    background-repeat: repeat;
    background-position: 0 0;
}


/* ===== Guide Page 引导页 ===== */


/* ===== Guide Page Component ===== */


/* ===== Overlay ===== */

.sc-guide-page__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition-duration) var(--transition-timing), visibility var(--transition-duration) var(--transition-timing);
}

.sc-guide-page__overlay.is-visible {
    visibility: visible;
    opacity: 1;
}


/* ===== Container ===== */

.sc-guide-page {
    background: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    max-width: 520px;
    width: 90%;
    overflow: hidden;
    position: relative;
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--transition-duration) var(--transition-timing), opacity var(--transition-duration) var(--transition-timing);
}

.is-visible .sc-guide-page {
    transform: scale(1);
    opacity: 1;
}


/* ===== Size Variants ===== */

.sc-guide-page[data-size="small"] {
    max-width: 400px;
}

.sc-guide-page[data-size="large"] {
    max-width: 680px;
}


/* ===== Step Elements ===== */

.sc-guide-page__step {
    display: none;
    flex-direction: column;
}

.sc-guide-page__step.is-active {
    display: flex;
    animation: guideStepFadeIn 0.2s var(--transition-timing);
}

@keyframes guideStepFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== Image Area ===== */

.sc-guide-page__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-primary-light-9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-guide-page__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sc-guide-page__image[hidden] {
    display: none;
}


/* ===== Content Area ===== */

.sc-guide-page__content {
    padding: var(--spacing-xl) var(--spacing-2xl);
}

.sc-guide-page__title {
    margin: 0 0 var(--spacing-sm);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.sc-guide-page__description {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-regular);
    line-height: 1.6;
}


/* ===== Footer ===== */

.sc-guide-page__footer {
    padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ===== Indicators ===== */

.sc-guide-page__indicators {
    display: flex;
    gap: 6px;
    align-items: center;
}

.sc-guide-page__indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-border-light);
    transition: all var(--transition-duration) var(--transition-timing);
}

.sc-guide-page__indicator.is-active {
    width: 16px;
    background: var(--color-primary);
}


/* ===== Buttons ===== */

.sc-guide-page__buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.sc-guide-page__skip {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-base);
    transition: color var(--transition-duration) var(--transition-timing);
    font-family: var(--font-family);
}

.sc-guide-page__skip:hover {
    color: var(--color-primary);
}

.sc-guide-page__prev,
.sc-guide-page__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-bg);
    color: var(--color-text-regular);
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing);
    outline: none;
    white-space: nowrap;
}

.sc-guide-page__prev:hover,
.sc-guide-page__next:hover {
    border-color: var(--color-primary-light-7);
    color: var(--color-primary);
    background: var(--color-primary-light-9);
}

.sc-guide-page__prev:active,
.sc-guide-page__next:active {
    border-color: var(--color-primary-dark-2);
    color: var(--color-primary-dark-2);
}

.sc-guide-page__finish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    line-height: var(--line-height-base);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-base);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    transition: all var(--transition-duration) var(--transition-timing);
    outline: none;
    white-space: nowrap;
}

.sc-guide-page__finish:hover {
    background: var(--color-primary-light-3);
    border-color: var(--color-primary-light-3);
}

.sc-guide-page__prev[hidden],
.sc-guide-page__next[hidden],
.sc-guide-page__finish[hidden],
.sc-guide-page__skip[hidden] {
    display: none;
}


/* ===== Close Button ===== */

.sc-guide-page__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-base);
    transition: color var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing);
    padding: 0;
    line-height: 1;
}

.sc-guide-page__close:hover {
    color: var(--color-primary);
    background: var(--color-primary-light-9);
}


/* ===== Loading Page 加载页 ===== */


/* ===== Loading Page Component ===== */


/* ===== Base Container ===== */

.sc-loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-loading-bg, var(--color-bg));
    transition: opacity var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing), visibility var(--transition-duration) var(--transition-timing);
}


/* ===== Hidden State ===== */

.sc-loading-page.is-hidden {
    display: none;
}


/* ===== Hide Effects ===== */


/* fade */

.sc-loading-page[data-hide-effect="fade"].is-hiding {
    opacity: 0;
}


/* slide-up */

.sc-loading-page[data-hide-effect="slide-up"].is-hiding {
    transform: translateY(-100%);
}


/* scale */

.sc-loading-page[data-hide-effect="scale"].is-hiding {
    opacity: 0;
    transform: scale(0.8);
}


/* none */

.sc-loading-page[data-hide-effect="none"].is-hiding {
    display: none;
}


/* ===== Content Area ===== */

.sc-loading-page__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}


/* ===== Animation Area ===== */

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


/* --- Spinner --- */

.sc-loading-page__animation--spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: sc-loading-spin 0.8s linear infinite;
}

@keyframes sc-loading-spin {
    to {
        transform: rotate(360deg);
    }
}


/* --- Pulse --- */

.sc-loading-page__animation--pulse {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: sc-loading-pulse 1.2s ease-in-out infinite;
}

@keyframes sc-loading-pulse {
    0%,
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}


/* --- Dots --- */

.sc-loading-page__animation--dots {
    display: flex;
    gap: 8px;
}

.sc-loading-page__animation--dots span {
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: sc-loading-dots 1.4s ease-in-out infinite;
}

.sc-loading-page__animation--dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.sc-loading-page__animation--dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes sc-loading-dots {
    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}


/* --- Wave --- */

.sc-loading-page__animation--wave {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 40px;
}

.sc-loading-page__animation--wave span {
    width: 4px;
    height: 20px;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    animation: sc-loading-wave 1.2s ease-in-out infinite;
}

.sc-loading-page__animation--wave span:nth-child(1) {
    animation-delay: 0s;
}

.sc-loading-page__animation--wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.sc-loading-page__animation--wave span:nth-child(3) {
    animation-delay: 0.2s;
}

.sc-loading-page__animation--wave span:nth-child(4) {
    animation-delay: 0.3s;
}

.sc-loading-page__animation--wave span:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes sc-loading-wave {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
    }
}


/* --- Bar --- */

.sc-loading-page__animation--bar {
    width: 200px;
    height: 3px;
    background: var(--color-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.sc-loading-page__animation--bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40%;
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    animation: sc-loading-bar 1.5s ease-in-out infinite;
}

@keyframes sc-loading-bar {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}


/* ===== Text ===== */

.sc-loading-page__text {
    font-size: clamp(13px, 1.5vw, 14px);
    color: var(--color-text-secondary);
    margin: 0;
    font-family: var(--font-family);
}


/* ===== Demo Preview Container ===== */

.sc-loading-page-demo {
    position: relative;
    height: 300px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    background: var(--color-bg);
}

.sc-loading-page-demo .sc-loading-page {
    position: absolute;
    z-index: 1;
}


/* ===== Animation Gallery (Demo 3) ===== */

.sc-loading-page-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-lg);
}

.sc-loading-page-gallery-item {
    position: relative;
    height: 180px;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sc-loading-page-gallery-item .sc-loading-page__animation {
    position: static;
}

.sc-loading-page-gallery-item .gallery-label {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===== Seamless Scroll 无缝滚动 ===== */

.sc-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.sc-marquee__track {
    display: flex;
    gap: 16px;
    will-change: transform;
}

.sc-marquee__item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sc-marquee__item img {
    width: 100%;
    /* height: 120px; */
    /* border-radius: 8px; */
    object-fit: cover;
}

.sc-marquee__item span {
    font-size: 14px;
    color: #606266;
    text-align: center;
    white-space: nowrap;
}


/* ===== Image List 图片列表 ===== */

.sc-image-list {
    display: grid;
    gap: 16px;
}

.sc-image-list__item {
    position: relative;
    overflow: hidden;
    /* border-radius: 0px !important; */
    cursor: pointer;
}

.sc-image-list__img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* 1:1 aspect ratio */
    overflow: hidden;
}

.sc-image-list__img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.sc-image-list__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.sc-image-list__overlay span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    transform: translateY(10px);
    transition: transform 0.4s ease;
}


/* 基础 hover：仅放大 */

.sc-image-list__item:hover .sc-image-list__img-wrap img {
    transform: scale(1.1);
}


/* 特效模式：模糊 + 遮罩（需要 data-effect="overlay"） */

.sc-image-list[data-effect="overlay"] .sc-image-list__item:hover .sc-image-list__img-wrap img {
    filter: blur(3px);
}

.sc-image-list[data-effect="overlay"] .sc-image-list__item:hover .sc-image-list__overlay {
    opacity: 1;
}

.sc-image-list[data-effect="overlay"] .sc-image-list__item:hover .sc-image-list__overlay span {
    transform: translateY(0);
}


/* 文字在图片下方模式 */

.sc-image-list__caption {
    padding: 8px 4px 4px;
    font-size: 14px;
    color: #606266;
    text-align: center;
}


/* 响应式：平板 */

@media (max-width: 1024px) {
    .sc-image-list[data-responsive] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* 响应式：手机 */

@media (max-width: 768px) {
    .sc-image-list[data-responsive] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* 响应式：小屏手机 */

@media (max-width: 480px) {
    .sc-image-list[data-responsive] {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}


/* ===== Magnifier 放大镜 ===== */

.sc-magnifier {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 600px;
}

.sc-magnifier__main {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    cursor: crosshair;
    background: #f5f7fa;
}

.sc-magnifier__large-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}

.sc-magnifier__lens {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-repeat: no-repeat;
    z-index: 10;
}

.sc-magnifier__main:hover .sc-magnifier__lens {
    opacity: 1;
}


/* 手机端隐藏放大镜 */

@media (max-width: 768px) {
    .sc-magnifier__lens {
        display: none !important;
    }
    .sc-magnifier__main {
        cursor: default;
    }
}


/* 缩略图区域 */

.sc-magnifier__thumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-magnifier__thumbs-track {
    display: flex;
    gap: 8px;
    overflow: hidden;
    flex: 1;
}

.sc-magnifier__thumb {
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    text-align: center;
}

.sc-magnifier__thumb img {
    width: 100%;
    height: 80px;
    object-fit: contain !important;
    display: block;
}

.sc-magnifier__thumb span {
    display: block;
    font-size: 12px;
    color: #909399;
    padding: 2px 0 4px;
}

.sc-magnifier__thumb--active {
    border-color: var(--color-primary, #409eff);
}

.sc-magnifier__thumb:hover {
    border-color: var(--color-primary, #409eff);
}


/* 箭头按钮 */

.sc-magnifier__arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #606266;
    transition: all 0.2s ease;
}

.sc-magnifier__arrow:hover {
    border-color: var(--color-primary, #409eff);
    color: var(--color-primary, #409eff);
}

.sc-magnifier__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ===== Number Scroll 数字滚动 ===== */

.sc-number-scroll {
    display: grid;
    gap: 16px;
}

.sc-number-scroll__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.sc-number-scroll__img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}

.sc-number-scroll__number {
    font-size: 32px;
    font-weight: 700;
    color: #303133;
    line-height: 1.2;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.sc-number-scroll__text {
    font-size: 14px;
    color: #909399;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-number-scroll[data-responsive] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ===== Gallery 画廊 ===== */


/* 图片列表部分 */

.sc-gallery {
    display: grid;
    gap: 16px;
}

.sc-gallery--no-caption .sc-gallery__item .sc-gallery__caption {
    display: none !important;
}

.sc-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    cursor: pointer;
}

.sc-gallery__img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sc-gallery__img-wrap img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sc-gallery__item:hover .sc-gallery__img-wrap img {
    transform: scale(1.1);
}

.sc-gallery__caption {
    padding: 8px 4px 4px;
    font-size: 14px;
    color: #606266;
    text-align: center;
}


/* 全屏画廊部分 */

.sc-gallery__viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sc-gallery__viewer.is-active {
    opacity: 1;
    visibility: visible;
}

.sc-gallery__viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sc-gallery__viewer-content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sc-gallery__viewer-main {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sc-gallery__viewer-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.sc-gallery__viewer-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.sc-gallery__viewer-close:hover {
    opacity: 1;
}

.sc-gallery__viewer-prev,
.sc-gallery__viewer-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

.sc-gallery__viewer-prev:hover,
.sc-gallery__viewer-next:hover {
    background: rgba(255, 255, 255, 0.45);
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.sc-gallery__viewer-prev {
    left: -50px;
}

.sc-gallery__viewer-next {
    right: -50px;
}

.sc-gallery__viewer-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.sc-gallery__viewer-thumb {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, border-color 0.3s;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.sc-gallery__viewer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-gallery__viewer-thumb--active {
    opacity: 1;
    border-color: #fff;
}

.sc-gallery__viewer-thumb:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
}

.sc-gallery__viewer-thumb--active:hover {
    border-color: #fff;
    transform: none;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-gallery__viewer-prev {
        left: 10px;
    }
    .sc-gallery__viewer-next {
        right: 10px;
    }
    .sc-gallery__viewer-thumb {
        width: 45px;
        height: 45px;
    }
}


/* 画廊图片列表响应式 */

@media (max-width: 1024px) {
    .sc-gallery[data-responsive] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .sc-gallery[data-responsive] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .sc-gallery[data-responsive] {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Shopping Cart 购物车 ===== */

.sc-shopping-cart {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
}

.sc-shopping-cart__header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f5f7fa;
    font-size: 14px;
    color: #909399;
    gap: 12px;
}

.sc-shopping-cart__header-info {
    flex: 2;
}

.sc-shopping-cart__header-price {
    width: 100px;
    text-align: center;
}

.sc-shopping-cart__header-qty {
    width: 130px;
    text-align: center;
}

.sc-shopping-cart__header-subtotal {
    width: 100px;
    text-align: center;
}

.sc-shopping-cart__header-action {
    width: 60px;
    text-align: center;
}

.sc-shopping-cart__list {
    max-height: 500px;
    overflow-y: auto;
}

.sc-shopping-cart__item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #ebeef5;
    gap: 12px;
    transition: background-color 0.2s ease;
}

.sc-shopping-cart__item:last-child {
    border-bottom: none;
}

.sc-shopping-cart__item.is-checked {
    background: #f0f7ff;
}

.sc-shopping-cart__item-check {
    width: 24px;
    flex-shrink: 0;
}

.sc-shopping-cart__item-info {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sc-shopping-cart__item-img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.sc-shopping-cart__item-name {
    font-size: 14px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-shopping-cart__item-price {
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #606266;
}

.sc-shopping-cart__item-qty {
    width: 130px;
    display: flex;
    justify-content: center;
}

.sc-shopping-cart__qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
}

.sc-shopping-cart__qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f7fa;
    cursor: pointer;
    font-size: 16px;
    color: #606266;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-shopping-cart__qty-btn:hover {
    background: #e6e8eb;
}

.sc-shopping-cart__qty-btn:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.sc-shopping-cart__qty-input {
    width: 48px;
    height: 32px;
    border: none;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    text-align: center;
    font-size: 14px;
    color: #303133;
    outline: none;
}

.sc-shopping-cart__item-subtotal {
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #f56c6c;
    font-weight: 500;
}

.sc-shopping-cart__item-action {
    width: 60px;
    text-align: center;
}

.sc-shopping-cart__item-delete {
    border: none;
    background: none;
    color: #909399;
    cursor: pointer;
    font-size: 14px;
}

.sc-shopping-cart__item-delete:hover {
    color: #f56c6c;
}

.sc-shopping-cart__batch-delete {
    padding: 6px 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #606266;
    cursor: pointer;
    font-size: 14px;
}

.sc-shopping-cart__batch-delete:hover {
    border-color: #f56c6c;
    color: #f56c6c;
}

.sc-shopping-cart__footer {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f5f7fa;
    border-top: 1px solid #ebeef5;
    gap: 16px;
}

.sc-shopping-cart__summary {
    margin-left: auto;
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sc-shopping-cart__selected-count {
    color: #f56c6c;
    font-style: normal;
    font-weight: 500;
}

.sc-shopping-cart__total-price {
    color: #f56c6c;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
}


/* 响应式：移动端 */

@media (max-width: 768px) {
    .sc-shopping-cart__header {
        display: none;
    }
    .sc-shopping-cart__item {
        flex-wrap: wrap;
        padding: 12px;
    }
    .sc-shopping-cart__item-info {
        flex: 1 1 100%;
        margin-bottom: 8px;
    }
    .sc-shopping-cart__item-price,
    .sc-shopping-cart__item-qty,
    .sc-shopping-cart__item-subtotal {
        width: auto;
    }
    .sc-shopping-cart__footer {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sc-shopping-cart__summary {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}


/* ===== Order Checkout 订单结算 ===== */

.sc-order-checkout {
    max-width: 900px;
    margin: 0 auto;
}

.sc-order-checkout__section {
    margin-bottom: 24px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 20px;
}

.sc-order-checkout__section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
}


/* 收货地址 */

.sc-order-checkout__address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sc-order-checkout__address-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-order-checkout__address-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}

.sc-order-checkout__address-phone {
    font-size: 14px;
    color: #909399;
}

.sc-order-checkout__address-detail {
    font-size: 14px;
    color: #606266;
}

.sc-order-checkout__address-add {
    padding: 6px 16px;
    border: 1px solid #409eff;
    border-radius: 4px;
    background: #fff;
    color: #409eff;
    cursor: pointer;
    font-size: 14px;
}

.sc-order-checkout__address-add:hover {
    background: #ecf5ff;
}


/* 商品列表 */

.sc-order-checkout__item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}

.sc-order-checkout__item:last-child {
    border-bottom: none;
}

.sc-order-checkout__item-info {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sc-order-checkout__item-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.sc-order-checkout__item-name {
    font-size: 14px;
    color: #303133;
}

.sc-order-checkout__item-price {
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #606266;
}

.sc-order-checkout__item-qty {
    width: 130px;
    display: flex;
    justify-content: center;
}

.sc-order-checkout__qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
}

.sc-order-checkout__qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f7fa;
    cursor: pointer;
    font-size: 16px;
    color: #606266;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-order-checkout__qty-btn:hover {
    background: #e6e8eb;
}

.sc-order-checkout__qty-btn:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.sc-order-checkout__qty-input {
    width: 48px;
    height: 32px;
    border: none;
    border-left: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    text-align: center;
    font-size: 14px;
    color: #303133;
    outline: none;
}

.sc-order-checkout__item-subtotal {
    width: 100px;
    text-align: center;
    font-size: 14px;
    color: #f56c6c;
    font-weight: 500;
}


/* 支付方式 */

.sc-order-checkout__payments {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sc-order-checkout__payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.sc-order-checkout__payment-option:hover {
    border-color: #409eff;
}

.sc-order-checkout__payment-option input[type="radio"]:checked+.sc-order-checkout__payment-icon {
    color: #409eff;
}

.sc-order-checkout__payment-icon {
    font-size: 14px;
    color: #606266;
}


/* 银行卡列表 */

.sc-order-checkout__banks {
    margin-top: 16px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 4px;
}

.sc-order-checkout__banks-title {
    font-size: 14px;
    color: #606266;
    margin: 0 0 12px 0;
}

.sc-order-checkout__bank-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sc-order-checkout__bank-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    font-size: 14px;
    color: #606266;
    transition: border-color 0.3s;
}

.sc-order-checkout__bank-item:hover {
    border-color: #409eff;
}

.sc-order-checkout__bank-item input[type="radio"]:checked+span {
    color: #409eff;
    font-weight: 500;
}


/* 结算栏 */

.sc-order-checkout__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    gap: 24px;
}

.sc-order-checkout__summary {
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 16px;
}

.sc-order-checkout__summary em {
    font-style: normal;
    color: #f56c6c;
    font-weight: 500;
}

.sc-order-checkout__total {
    font-size: 20px;
    font-weight: 700;
}

.sc-order-checkout__submit {
    padding: 12px 40px;
    background: #f56c6c;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
}

.sc-order-checkout__submit:hover {
    background: #e6534f;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-order-checkout__item {
        flex-wrap: wrap;
    }
    .sc-order-checkout__item-info {
        flex: 1 1 100%;
    }
    .sc-order-checkout__item-price,
    .sc-order-checkout__item-qty,
    .sc-order-checkout__item-subtotal {
        width: auto;
    }
    .sc-order-checkout__bank-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .sc-order-checkout__footer {
        flex-direction: column;
        align-items: stretch;
    }
    .sc-order-checkout__submit {
        width: 100%;
    }
}


/* ===== Shipping Address 收货地址 ===== */

.sc-shipping-address {
    max-width: 560px;
    padding: 24px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
}

.sc-shipping-address__field {
    margin-bottom: 20px;
}

.sc-shipping-address__field--inline {
    margin-top: 8px;
}

.sc-shipping-address__label {
    display: block;
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
    font-weight: 500;
}

.sc-shipping-address__label-required {
    color: #f56c6c;
    margin-right: 4px;
}

.sc-shipping-address__input,
.sc-shipping-address__textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #303133;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.sc-shipping-address__input:focus,
.sc-shipping-address__textarea:focus {
    border-color: #409eff;
}

.sc-shipping-address__input::placeholder,
.sc-shipping-address__textarea::placeholder {
    color: #c0c4cc;
}

.sc-shipping-address__textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}


/* 错误状态 */

.sc-shipping-address__field.is-error .sc-shipping-address__input,
.sc-shipping-address__field.is-error .sc-shipping-address__textarea {
    border-color: #f56c6c;
}

.sc-shipping-address__error-msg {
    font-size: 12px;
    color: #f56c6c;
    margin-top: 4px;
    display: none;
}

.sc-shipping-address__field.is-error .sc-shipping-address__error-msg {
    display: block;
}


/* Checkbox */

.sc-shipping-address__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
}

.sc-shipping-address__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* 按钮区域 */

.sc-shipping-address__actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.sc-shipping-address__btn {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #dcdfe6;
}

.sc-shipping-address__btn--primary {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
}

.sc-shipping-address__btn--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
}

.sc-shipping-address__btn--default {
    background: #fff;
    color: #606266;
}

.sc-shipping-address__btn--default:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-shipping-address {
        padding: 16px;
    }
    .sc-shipping-address__actions {
        flex-direction: column;
    }
    .sc-shipping-address__btn {
        width: 100%;
        text-align: center;
    }
}


/* ===== Personal Center 个人中心 ===== */

.sc-personal-center {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* 用户概览卡片 */

.sc-personal-center__hero {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.sc-personal-center__hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sc-personal-center__hero-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 24px;
    flex-wrap: wrap;
}

.sc-personal-center__hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.sc-personal-center__hero-info {
    flex: 1;
    min-width: 120px;
}

.sc-personal-center__hero-name {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.sc-personal-center__hero-badge {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    backdrop-filter: blur(4px);
}

.sc-personal-center__hero-meta {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.sc-personal-center__hero-stats {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    margin-left: auto;
}

.sc-personal-center__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    min-width: 70px;
}

.sc-personal-center__stat+.sc-personal-center__stat {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.sc-personal-center__stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.sc-personal-center__stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}


/* 快捷功能入口 */

.sc-personal-center__shortcuts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sc-personal-center__shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    flex: 1;
    min-width: 90px;
}

.sc-personal-center__shortcut:hover {
    border-color: #c6e2ff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
    transform: translateY(-2px);
}

.sc-personal-center__shortcut-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecf5ff;
    border-radius: 12px;
    color: #409eff;
    transition: all 0.25s;
}

.sc-personal-center__shortcut:hover .sc-personal-center__shortcut-icon {
    background: #409eff;
    color: #fff;
}

.sc-personal-center__shortcut.is-active {
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.sc-personal-center__shortcut.is-active .sc-personal-center__shortcut-icon {
    background: #409eff;
    color: #fff;
}

.sc-personal-center__shortcut.is-active span {
    color: #409eff;
    font-weight: 500;
}

.sc-personal-center__shortcut span {
    font-size: 13px;
    color: #606266;
    white-space: nowrap;
}


/* 内容面板 */

.sc-personal-center__panels {
    min-height: 200px;
}

.sc-personal-center__panel {
    display: none;
}

.sc-personal-center__panel.is-active {
    display: block;
}

.sc-personal-center__card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    padding: 24px;
}

.sc-personal-center__card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 20px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}


/* 个人信息 */

.sc-personal-center__profile {
    display: flex;
    gap: 28px;
}

.sc-personal-center__profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sc-personal-center__profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.sc-personal-center__avatar-btn {
    padding: 4px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    color: #606266;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.25s;
}

.sc-personal-center__avatar-btn:hover {
    color: #409eff;
    border-color: #409eff;
}

.sc-personal-center__profile-info {
    flex: 1;
}

.sc-personal-center__info-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.sc-personal-center__info-row:last-child {
    border-bottom: none;
}

.sc-personal-center__info-label {
    width: 90px;
    color: #909399;
    flex-shrink: 0;
}

.sc-personal-center__info-value {
    color: #303133;
}


/* 空状态 */

.sc-personal-center__empty {
    text-align: center;
    padding: 48px 0;
    color: #909399;
    font-size: 14px;
}

.sc-personal-center__empty svg {
    margin-bottom: 12px;
}

.sc-personal-center__empty p {
    margin: 0 0 8px 0;
}

.sc-personal-center__link {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
}

.sc-personal-center__link:hover {
    text-decoration: underline;
}


/* 表单 */

.sc-personal-center__form {
    max-width: 400px;
}

.sc-personal-center__form-field {
    margin-bottom: 20px;
}

.sc-personal-center__form-field label {
    display: block;
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
}

.sc-personal-center__form-field input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    color: #303133;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.25s;
}

.sc-personal-center__form-field input:focus {
    border-color: #409eff;
}

.sc-personal-center__form-submit {
    padding: 10px 24px;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s;
}

.sc-personal-center__form-submit:hover {
    background: #66b1ff;
}


/* 地址管理 */

.sc-personal-center__address-card {
    padding: 16px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    margin-bottom: 12px;
}

.sc-personal-center__address-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #303133;
}

.sc-personal-center__address-default {
    padding: 2px 8px;
    background: #409eff;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
}

.sc-personal-center__address-card p {
    font-size: 14px;
    color: #606266;
    margin: 0 0 8px 0;
}

.sc-personal-center__address-card-actions {
    display: flex;
    gap: 16px;
}

.sc-personal-center__address-card-actions a {
    font-size: 14px;
    color: #409eff;
    text-decoration: none;
}

.sc-personal-center__address-card-actions a:hover {
    text-decoration: underline;
}

.sc-personal-center__address-add {
    padding: 8px 20px;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    background: #fff;
    color: #606266;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s;
}

.sc-personal-center__address-add:hover {
    color: #409eff;
    border-color: #409eff;
}


/* 订单状态 */

.sc-personal-center__orders {
    display: flex;
    gap: 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
    overflow: hidden;
}

.sc-personal-center__order-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    flex: 1;
    cursor: pointer;
    transition: background 0.25s;
}

.sc-personal-center__order-status:hover {
    background: #f5f7fa;
}

.sc-personal-center__order-status+.sc-personal-center__order-status {
    border-left: 1px solid #ebeef5;
}

.sc-personal-center__order-count {
    font-size: 22px;
    font-weight: 700;
    color: #303133;
    line-height: 1.2;
}

.sc-personal-center__order-label {
    font-size: 13px;
    color: #909399;
    margin-top: 4px;
}


/* 订单列表 */

.sc-personal-center__order-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sc-personal-center__order-item {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
}

.sc-personal-center__order-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fafafa;
    border-bottom: 1px solid #ebeef5;
    font-size: 13px;
}

.sc-personal-center__order-no {
    color: #909399;
}

.sc-personal-center__order-status-tag {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.sc-personal-center__order-status-tag.is-pending {
    background: #fdf6ec;
    color: #e6a23c;
}

.sc-personal-center__order-status-tag.is-completed {
    background: #f0f9eb;
    color: #67c23a;
}

.sc-personal-center__order-item-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.sc-personal-center__order-item-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.sc-personal-center__order-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sc-personal-center__order-item-name {
    font-size: 14px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-personal-center__order-item-spec {
    font-size: 12px;
    color: #909399;
}

.sc-personal-center__order-item-price {
    text-align: right;
    flex-shrink: 0;
}

.sc-personal-center__order-item-price span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    display: block;
}

.sc-personal-center__order-item-qty {
    font-size: 12px;
    color: #909399;
}

.sc-personal-center__order-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
}

.sc-personal-center__order-total {
    color: #606266;
}

.sc-personal-center__order-total strong {
    color: #f56c6c;
    font-size: 15px;
}

.sc-personal-center__order-item-actions {
    display: flex;
    gap: 12px;
}

.sc-personal-center__order-item-actions a {
    font-size: 13px;
    color: #409eff;
    text-decoration: none;
}

.sc-personal-center__order-item-actions a:hover {
    text-decoration: underline;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-personal-center__hero-content {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
    }
    .sc-personal-center__hero-stats {
        margin-left: 0;
        width: 100%;
        justify-content: space-around;
    }
    .sc-personal-center__stat {
        padding: 10px 12px;
        flex: 1;
    }
    .sc-personal-center__shortcuts {
        gap: 8px;
    }
    .sc-personal-center__shortcut {
        min-width: 70px;
        padding: 12px 8px;
    }
    .sc-personal-center__profile {
        flex-direction: column;
        align-items: center;
    }
    .sc-personal-center__orders {
        flex-wrap: wrap;
    }
    .sc-personal-center__order-status {
        flex: 1 1 50%;
    }
    .sc-personal-center__order-status+.sc-personal-center__order-status {
        border-left: none;
    }
    .sc-personal-center__order-status:nth-child(odd) {
        border-right: 1px solid #ebeef5;
    }
    .sc-personal-center__order-status:nth-child(n+3) {
        border-top: 1px solid #ebeef5;
    }
    .sc-personal-center__order-item-body {
        flex-wrap: wrap;
    }
    .sc-personal-center__order-item-foot {
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
    }
}


/* ===== Logistics Tracking 物流跟踪 ===== */

.sc-logistics-tracking {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
}


/* 搜索区域 */

.sc-logistics-tracking__search {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}

.sc-logistics-tracking__input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #303133;
    outline: none;
    transition: border-color 0.3s;
}

.sc-logistics-tracking__input:focus {
    border-color: #409eff;
}

.sc-logistics-tracking__input::placeholder {
    color: #c0c4cc;
}

.sc-logistics-tracking__btn {
    padding: 10px 24px;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}

.sc-logistics-tracking__btn:hover {
    background: #66b1ff;
}


/* 物流信息摘要 */

.sc-logistics-tracking__info {
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
}

.sc-logistics-tracking__info-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}

.sc-logistics-tracking__label {
    width: 80px;
    color: #909399;
    flex-shrink: 0;
}

.sc-logistics-tracking__value {
    color: #303133;
}

.sc-logistics-tracking__status {
    padding: 2px 10px;
    background: #e6f7ff;
    color: #409eff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}


/* 时间线 */

.sc-logistics-tracking__timeline {
    padding: 20px;
}

.sc-logistics-tracking__node {
    position: relative;
    padding-left: 28px;
    padding-bottom: 24px;
}

.sc-logistics-tracking__node:last-child {
    padding-bottom: 0;
}

.sc-logistics-tracking__node:last-child .sc-logistics-tracking__line {
    display: none;
}


/* 圆点 */

.sc-logistics-tracking__dot {
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #dcdfe6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dcdfe6;
    z-index: 1;
}


/* 连接线 */

.sc-logistics-tracking__line {
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: #ebeef5;
}


/* 内容 */

.sc-logistics-tracking__content {
    padding-top: 0;
}

.sc-logistics-tracking__time {
    font-size: 12px;
    color: #909399;
    margin-bottom: 4px;
}

.sc-logistics-tracking__desc {
    font-size: 14px;
    color: #606266;
    margin-bottom: 2px;
}

.sc-logistics-tracking__location {
    font-size: 12px;
    color: #c0c4cc;
}


/* 当前最新节点 - 着重色（蓝色） */

.sc-logistics-tracking__node--active .sc-logistics-tracking__dot {
    background: #409eff;
    box-shadow: 0 0 0 2px #409eff;
}

.sc-logistics-tracking__node--active .sc-logistics-tracking__desc {
    color: #409eff;
    font-weight: 500;
}

.sc-logistics-tracking__node--active .sc-logistics-tracking__time {
    color: #409eff;
}


/* 已完成状态 - 绿色 */

.sc-logistics-tracking__node--success .sc-logistics-tracking__dot {
    background: #67c23a;
    box-shadow: 0 0 0 2px #67c23a;
}

.sc-logistics-tracking__node--success .sc-logistics-tracking__desc {
    color: #67c23a;
    font-weight: 500;
}


/* 异常状态 - 红色 */

.sc-logistics-tracking__node--error .sc-logistics-tracking__dot {
    background: #f56c6c;
    box-shadow: 0 0 0 2px #f56c6c;
}

.sc-logistics-tracking__node--error .sc-logistics-tracking__desc {
    color: #f56c6c;
    font-weight: 500;
}


/* 响应式 */

@media (max-width: 768px) {
    .sc-logistics-tracking__search {
        flex-direction: column;
    }
    .sc-logistics-tracking__info-row {
        flex-wrap: wrap;
    }
}


/* ===== Product List 商品列表 ===== */

.sc-product-list {
    display: grid;
    gap: 16px;
}

.sc-product-list__card {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s;
}

.sc-product-list__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.sc-product-list__img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.sc-product-list__img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sc-product-list__card:hover .sc-product-list__img-wrap img {
    transform: scale(1.05);
}


/* 操作按钮（悬浮在图片右上角） */

.sc-product-list__actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}

.sc-product-list__card:hover .sc-product-list__actions {
    opacity: 1;
}

.sc-product-list__action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #606266;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sc-product-list__action-btn:hover {
    background: #409eff;
    color: #fff;
}

.sc-product-list__action-btn.is-favorited {
    color: #f56c6c;
}

.sc-product-list__action-btn.is-favorited:hover {
    background: #f56c6c;
    color: #fff;
}


/* 商品信息 */

.sc-product-list__info {
    padding: 12px;
}

.sc-product-list__name {
    font-size: 14px;
    color: #303133;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.sc-product-list__price {
    font-size: 16px;
    color: #f56c6c;
    font-weight: 600;
}


/* 响应式 */

@media (max-width: 1024px) {
    .sc-product-list[data-responsive] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .sc-product-list[data-responsive] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .sc-product-list[data-responsive] {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Language Selector 语言选择 ===== */

.sc-language-selector {
    position: relative;
    display: inline-block;
}

.sc-language-selector__current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #303133;
    transition: border-color 0.3s;
}

.sc-language-selector__current:hover {
    border-color: #409eff;
}

.sc-language-selector__flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}

.sc-language-selector__text {
    white-space: nowrap;
}

.sc-language-selector__arrow {
    transition: transform 0.3s;
    color: #909399;
}

.sc-language-selector.is-open .sc-language-selector__arrow {
    transform: rotate(180deg);
}

.sc-language-selector__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s;
    overflow: hidden;
}

.sc-language-selector.is-open .sc-language-selector__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sc-language-selector__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #606266;
    transition: all 0.2s;
    white-space: nowrap;
}

.sc-language-selector__option:hover {
    background: #f5f7fa;
    color: #409eff;
}

.sc-language-selector__option.is-active {
    color: #409eff;
    font-weight: 500;
    background: #ecf5ff;
}


/* ===== Site Sidebar 网站侧边栏 ===== */


/* Demo preview context */

.demo-box__preview--sidebar-demo {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.demo-box__preview--sidebar-demo .sc-site-sidebar {
    position: absolute;
    z-index: 10;
}

.demo-box__preview--sidebar-demo .sc-site-sidebar[data-position="right"],
.demo-box__preview--sidebar-demo .sc-site-sidebar:not([data-position]) {
    right: 0;
}

.demo-box__preview--sidebar-demo .sc-site-sidebar[data-position="left"] {
    left: 0;
}


/* Container */

.sc-site-sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sc-site-sidebar[data-position="right"],
.sc-site-sidebar:not([data-position]) {
    right: 0;
}

.sc-site-sidebar[data-position="left"] {
    left: 0;
}


/* Toggle button */

.sc-site-sidebar__toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.sc-site-sidebar__toggle:hover {
    background: #337ecc;
}

.sc-site-sidebar__toggle-icon {
    transition: transform 0.3s ease;
}

.sc-site-sidebar.is-collapsed .sc-site-sidebar__toggle-icon {
    transform: rotate(180deg);
}


/* List container */

.sc-site-sidebar__list {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    max-height: 600px;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.sc-site-sidebar.is-collapsed .sc-site-sidebar__list {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}


/* Item */

.sc-site-sidebar__item {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #606266;
    transition: background 0.3s ease;
}

.sc-site-sidebar__item+.sc-site-sidebar__item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* Icon */

.sc-site-sidebar__icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
    flex-shrink: 0;
}


/* Detail panel */

.sc-site-sidebar__detail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 10px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}


/* Right position: detail panel on the left */

.sc-site-sidebar[data-position="right"] .sc-site-sidebar__detail,
.sc-site-sidebar:not([data-position]) .sc-site-sidebar__detail {
    right: 100%;
    margin-right: 8px;
    transform: translateY(-50%) translateX(10px);
}

.sc-site-sidebar[data-position="right"] .sc-site-sidebar__item.is-hover .sc-site-sidebar__detail,
.sc-site-sidebar:not([data-position]) .sc-site-sidebar__item.is-hover .sc-site-sidebar__detail {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}


/* Left position: detail panel on the right */

.sc-site-sidebar[data-position="left"] .sc-site-sidebar__detail {
    left: 100%;
    margin-left: 8px;
    transform: translateY(-50%) translateX(-10px);
}

.sc-site-sidebar[data-position="left"] .sc-site-sidebar__item.is-hover .sc-site-sidebar__detail {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}


/* Detail text */

.sc-site-sidebar__detail-text {
    font-size: 13px;
    color: #303133;
    line-height: 1.4;
    white-space: nowrap;
}


/* Detail QR code image */

.sc-site-sidebar__detail-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}


/* Small triangle arrow on detail panel */

.sc-site-sidebar__detail::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.sc-site-sidebar[data-position="right"] .sc-site-sidebar__detail::after,
.sc-site-sidebar:not([data-position]) .sc-site-sidebar__detail::after {
    right: -12px;
    border-left-color: #fff;
}

.sc-site-sidebar[data-position="left"] .sc-site-sidebar__detail::after {
    left: -12px;
    border-right-color: #fff;
}


/* ===== Friend Links Component ===== */

.sc-friend-links {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}


/* ===== Grid Layout ===== */

.sc-friend-links__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

@media (min-width: 480px) {
    .sc-friend-links__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .sc-friend-links__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .sc-friend-links__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}


/* ===== Item Base ===== */

.sc-friend-links__item {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing), background var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing);
    outline: none;
}

.sc-friend-links__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}


/* ===== Mode: Both (图文模式) ===== */

.sc-friend-links[data-mode="both"] .sc-friend-links__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl) var(--spacing-lg);
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-base);
}

.sc-friend-links[data-mode="both"] .sc-friend-links__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dark);
    border-color: var(--color-primary-light-7);
}

.sc-friend-links[data-mode="both"] .sc-friend-links__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
}

.sc-friend-links[data-mode="both"] .sc-friend-links__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
    line-height: 1.3;
}

.sc-friend-links[data-mode="both"] .sc-friend-links__desc {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.4;
    margin-top: var(--spacing-xs);
}


/* ===== Mode: Text (纯文字模式) ===== */

.sc-friend-links[data-mode="text"] .sc-friend-links__grid {
    grid-template-columns: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.sc-friend-links[data-mode="text"] .sc-friend-links__item {
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-round);
    padding: var(--spacing-xs) var(--spacing-lg);
    flex-direction: row;
    gap: var(--spacing-xs);
}

.sc-friend-links[data-mode="text"] .sc-friend-links__item:hover {
    background: var(--color-primary-light-9);
    border-color: var(--color-primary-light-7);
}

.sc-friend-links[data-mode="text"] .sc-friend-links__item:hover .sc-friend-links__name {
    color: var(--color-primary);
}

.sc-friend-links[data-mode="text"] .sc-friend-links__name {
    font-size: var(--font-size-sm);
    color: var(--color-text-regular);
    white-space: nowrap;
}

.sc-friend-links[data-mode="text"] .sc-friend-links__logo,
.sc-friend-links[data-mode="text"] .sc-friend-links__desc {
    display: none;
}


/* ===== Mode: Image (纯图片模式) ===== */

.sc-friend-links[data-mode="image"] .sc-friend-links__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-base);
}

.sc-friend-links[data-mode="image"] .sc-friend-links__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dark);
}

.sc-friend-links[data-mode="image"] .sc-friend-links__logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--transition-duration) var(--transition-timing);
}

.sc-friend-links[data-mode="image"] .sc-friend-links__item:hover .sc-friend-links__logo {
    transform: scale(1.1);
}

.sc-friend-links[data-mode="image"] .sc-friend-links__name,
.sc-friend-links[data-mode="image"] .sc-friend-links__desc {
    display: none;
}


/* ===== Placeholder Logo Colors ===== */

.sc-friend-links__logo--gh {
    background: #24292e;
}

.sc-friend-links__logo--go {
    background: #4285f4;
}

.sc-friend-links__logo--bd {
    background: #2932e1;
}

.sc-friend-links__logo--yt {
    background: #ff0000;
}

.sc-friend-links__logo--tw {
    background: #1da1f2;
}

.sc-friend-links__logo--wk {
    background: #636363;
}

.sc-friend-links__logo--so {
    background: #f48024;
}

.sc-friend-links__logo--md {
    background: #000000;
}


/* ===== Scroll Mode ===== */

.sc-friend-links__scroll {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.sc-friend-links__track {
    display: flex;
    gap: var(--spacing-lg);
    width: max-content;
    animation: sc-friend-links-scroll-left 20s linear infinite;
}

.sc-friend-links__scroll:hover .sc-friend-links__track {
    animation-play-state: paused;
}

@keyframes sc-friend-links-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.sc-friend-links__track .sc-friend-links__item {
    flex-shrink: 0;
    width: 140px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl) var(--spacing-lg);
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-base);
}

.sc-friend-links__track .sc-friend-links__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dark);
    border-color: var(--color-primary-light-7);
}

.sc-friend-links__track .sc-friend-links__logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
}

.sc-friend-links__track .sc-friend-links__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-align: center;
}

.sc-friend-links__track .sc-friend-links__desc {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-xs);
}


/* ===== Q&A Component ===== */

.sc-qa {
    max-width: var(--qa-max-width, 100%);
    width: 100%;
    margin: 0 auto;
}

.sc-qa__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
    background: var(--color-bg);
    transition: box-shadow var(--transition-duration) var(--transition-timing);
}

.sc-qa__item:last-child {
    margin-bottom: 0;
}

.sc-qa__item:hover {
    box-shadow: var(--shadow-light);
}

.sc-qa__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-primary);
    user-select: none;
    gap: var(--spacing-md);
    transition: background var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing);
}

.sc-qa__question:hover {
    background: var(--color-bg-page);
}

.sc-qa__item--active .sc-qa__question {
    color: var(--color-primary);
}


/* Arrow - pure CSS chevron */

.sc-qa__arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-duration) var(--transition-timing), margin-top var(--transition-duration) var(--transition-timing);
    margin-top: -3px;
    color: var(--color-text-secondary);
}

.sc-qa__item--active .sc-qa__arrow {
    transform: rotate(-135deg);
    margin-top: 3px;
    color: var(--color-primary);
}


/* Answer area - max-height transition */

.sc-qa__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-duration) var(--transition-timing);
}

.sc-qa__answer-inner {
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
    color: var(--color-text-regular);
    line-height: var(--line-height-base);
    font-size: var(--font-size-sm);
}


/* ===== Masonry Gallery Component ===== */

.sc-masonry {
    column-count: var(--masonry-columns, 4);
    column-gap: var(--masonry-gap, 16px);
    width: 100%;
}


/* 响应式断点 */

@media (max-width: 767px) {
    .sc-masonry {
        column-count: var(--masonry-columns-sm, 2);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .sc-masonry {
        column-count: var(--masonry-columns-md, 3);
    }
}

@media (min-width: 1025px) {
    .sc-masonry {
        column-count: var(--masonry-columns-lg, var(--masonry-columns, 4));
    }
}

.sc-masonry__item {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap, 16px);
    border-radius: var(--masonry-radius, 8px);
    overflow: hidden;
    position: relative;
}

.sc-masonry__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-duration) var(--transition-timing);
}


/* hover 效果 */

.sc-masonry__item:hover img {
    transform: scale(1.03);
}

.sc-masonry__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--transition-duration) var(--transition-timing);
    border-radius: inherit;
    pointer-events: none;
}

.sc-masonry__item:hover::after {
    background: rgba(0, 0, 0, 0.1);
}


/* 瀑布流中的懒加载图片 */

.sc-masonry__item.sc-lazy-item {
    aspect-ratio: auto;
}

.sc-masonry__item .sc-lazy-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}


/* ===== Animation Effects Component ===== */


/* 动画网格布局 */

.sc-anim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
}


/* 动画卡片 */

.sc-anim-card {
    position: relative;
    overflow: hidden;
    /* 初始状态：隐藏 */
    opacity: 0;
    transform: translateY(0);
}


/* 卡片内部容器 */

.sc-anim-card__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-duration) var(--transition-timing);
}

.sc-anim-card__inner:hover {
    box-shadow: var(--shadow-light);
}


/* 标签 */

.sc-anim-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-regular);
    font-weight: var(--font-weight-bold);
}


/* 动画完成后保持可见（兜底保留；实际由 fill-mode: both 保证延迟期间隐藏、结束后保持） */

.sc-anim-card--visible {
    opacity: 1;
}


/* 延迟期间保持动画第一帧状态（隐藏），覆盖 --visible 的 opacity，避免“先显示再动画”的闪烁 */

.sc-anim-card[data-animation].sc-anim-card--animate {
    animation-fill-mode: both;
}


/* ===== 动画定义 ===== */


/* Fade In */

.sc-anim-card[data-animation="fade-in"].sc-anim-card--animate {
    animation: sc-anim-fade-in var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Fade In Up */

.sc-anim-card[data-animation="fade-in-up"].sc-anim-card--animate {
    animation: sc-anim-fade-in-up var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Fade In Down */

.sc-anim-card[data-animation="fade-in-down"].sc-anim-card--animate {
    animation: sc-anim-fade-in-down var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Fade In Left */

.sc-anim-card[data-animation="fade-in-left"].sc-anim-card--animate {
    animation: sc-anim-fade-in-left var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Fade In Right */

.sc-anim-card[data-animation="fade-in-right"].sc-anim-card--animate {
    animation: sc-anim-fade-in-right var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Zoom In */

.sc-anim-card[data-animation="zoom-in"].sc-anim-card--animate {
    animation: sc-anim-zoom-in var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Bounce In */

.sc-anim-card[data-animation="bounce-in"].sc-anim-card--animate {
    animation: sc-anim-bounce-in var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Flip In */

.sc-anim-card[data-animation="flip-in"].sc-anim-card--animate {
    animation: sc-anim-flip-in var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-flip-in {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}


/* Rotate In */

.sc-anim-card[data-animation="rotate-in"].sc-anim-card--animate {
    animation: sc-anim-rotate-in var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}


/* Slide In Up */

.sc-anim-card[data-animation="slide-in-up"].sc-anim-card--animate {
    animation: sc-anim-slide-in-up var(--anim-duration, 0.6s) var(--anim-timing, ease) var(--anim-delay, 0s) both;
}

@keyframes sc-anim-slide-in-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 重播区域 */

.sc-anim-replay-area {
    width: 100%;
}


/* 重播按钮 */

.sc-anim-replay-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    transition: background var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing);
}

.sc-anim-replay-btn:hover {
    background: var(--color-primary-dark-2);
    transform: translateY(-1px);
}

.sc-anim-replay-btn:active {
    transform: translateY(0);
}


/* ===== Image Lazy Load Component ===== */

.sc-lazy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
}

.sc-lazy-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--lazy-placeholder-bg, #f0f0f0);
    aspect-ratio: 4 / 3;
}

.sc-lazy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 初始状态：不可见 */
    opacity: 0;
    transition: opacity var(--lazy-transition, 0.4s) var(--transition-timing, ease), transform var(--lazy-transition, 0.4s) var(--transition-timing, ease), filter var(--lazy-transition, 0.4s) var(--transition-timing, ease);
}


/* 占位符 */

.sc-lazy-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lazy-placeholder-bg, #f0f0f0);
    transition: opacity var(--lazy-transition, 0.4s) var(--transition-timing, ease);
    z-index: 1;
}

.sc-lazy-placeholder__icon {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border, #dcdfe6);
    border-top-color: var(--color-primary, #409eff);
    border-radius: 50%;
    animation: sc-lazy-spin 0.8s linear infinite;
}

@keyframes sc-lazy-spin {
    to {
        transform: rotate(360deg);
    }
}


/* 加载完成状态 */

.sc-lazy-item--loaded .sc-lazy-placeholder {
    opacity: 0;
    pointer-events: none;
}


/* === 效果：fade === */

.sc-lazy-item--loaded .sc-lazy-img,
.sc-lazy-item[data-effect="fade"].sc-lazy-item--loaded .sc-lazy-img {
    opacity: 1;
}


/* === 效果：blur === */

.sc-lazy-item[data-effect="blur"] .sc-lazy-img {
    filter: blur(10px);
    opacity: 0.5;
}

.sc-lazy-item[data-effect="blur"].sc-lazy-item--loaded .sc-lazy-img {
    filter: blur(0);
    opacity: 1;
}


/* === 效果：slide-up === */

.sc-lazy-item[data-effect="slide-up"] .sc-lazy-img {
    transform: translateY(20px);
    opacity: 0;
}

.sc-lazy-item[data-effect="slide-up"].sc-lazy-item--loaded .sc-lazy-img {
    transform: translateY(0);
    opacity: 1;
}


/* 响应式 */

@media (max-width: 767px) {
    .sc-lazy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}


/* ===== Attributes Search ===== */

.sc-attr-search {
    position: sticky;
    top: var(--header-height, 56px);
    z-index: 50;
    background: var(--color-bg-page, #f5f7fa);
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-sm) 0;
}

.sc-attr-search__box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 500px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);
}

.sc-attr-search__box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
}

.sc-attr-search__icon {
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
}

.sc-attr-search__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
}

.sc-attr-search__input::placeholder {
    color: var(--color-text-placeholder);
}

.sc-attr-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--color-bg-overlay, #f2f3f5);
    color: var(--color-text-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
    transition: background var(--transition-duration) var(--transition-timing);
}

.sc-attr-search__clear:hover {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

.sc-attr-search__result {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ===== Number Scroll - Stat Card Style ===== */

.sc-ns-stat {
    display: grid;
    grid-template-columns: repeat(var(--ns-stat-columns, 4), 1fr);
    gap: var(--spacing-xl);
    width: 100%;
    text-align: center;
}


/* 响应式列数 */

@media (max-width: 767px) {
    .sc-ns-stat {
        grid-template-columns: repeat(var(--ns-stat-columns-mobile, 2), 1fr);
    }
}

.sc-ns-stat__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.sc-ns-stat__number-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-xs);
}

.sc-ns-stat__number {
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.sc-ns-stat__unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

.sc-ns-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}


/* ============================================
   Data 属性：行内自定义字号 / 文字颜色
   ============================================ */


/* 通过 data-* 属性在任意元素上行内自定义文字大小与颜色：
   data-font-size / data-color          —— 电脑端（>= 768px）生效
   data-font-size-mobile / data-color-mobile —— 手机端（<= 767px）生效
   只写某一端属性则只在该端生效。此处为「预设关键字」的纯 CSS 实现；
   任意 CSS 值（如 18px、#ff6600）由 js/components.js 增强处理。
   注意：
   1. 全部选择器追加 :not(.sc-watermark)，排除水印组件宿主元素
      （sc-watermark 将 data-font-size / data-color 用作水印画布配置）；
   2. 属性值匹配追加 i 标志，关键字大小写不敏感。 */


/* 电脑端关键字（min-width: 768px 内，保证移动端不生效） */

@media (min-width: 768px) {
    /* 字号关键字：xs / sm / base / lg / xl / xxl / title */
    /* 注：设计令牌中暂无 --font-size-xs，故 xs 固定为 12px */
    [data-font-size="xs" i]:not(.sc-watermark) {
        font-size: 12px;
    }
    [data-font-size="sm" i]:not(.sc-watermark) {
        font-size: var(--font-size-sm);
    }
    [data-font-size="base" i]:not(.sc-watermark) {
        font-size: var(--font-size-base);
    }
    [data-font-size="lg" i]:not(.sc-watermark) {
        font-size: var(--font-size-lg);
    }
    [data-font-size="xl" i]:not(.sc-watermark) {
        font-size: var(--font-size-xl);
    }
    [data-font-size="xxl" i]:not(.sc-watermark) {
        font-size: var(--font-size-xxl);
    }
    [data-font-size="title" i]:not(.sc-watermark) {
        font-size: var(--font-size-title);
    }
    /* 颜色关键字：primary / success / warning / danger / info / text-primary / text-regular / text-secondary */
    [data-color="primary" i]:not(.sc-watermark) {
        color: var(--color-primary);
    }
    [data-color="success" i]:not(.sc-watermark) {
        color: var(--color-success);
    }
    [data-color="warning" i]:not(.sc-watermark) {
        color: var(--color-warning);
    }
    [data-color="danger" i]:not(.sc-watermark) {
        color: var(--color-danger);
    }
    [data-color="info" i]:not(.sc-watermark) {
        color: var(--color-info);
    }
    [data-color="text-primary" i]:not(.sc-watermark) {
        color: var(--color-text-primary);
    }
    [data-color="text-regular" i]:not(.sc-watermark) {
        color: var(--color-text-regular);
    }
    [data-color="text-secondary" i]:not(.sc-watermark) {
        color: var(--color-text-secondary);
    }
}


/* 手机端关键字（max-width: 767px 内） */

@media (max-width: 767px) {
    /* 字号关键字：与电脑端同名关键字一一对应 */
    /* 注：设计令牌中暂无 --font-size-xs，故 xs 固定为 12px */
    [data-font-size-mobile="xs" i]:not(.sc-watermark) {
        font-size: 12px;
    }
    [data-font-size-mobile="sm" i]:not(.sc-watermark) {
        font-size: var(--font-size-sm);
    }
    [data-font-size-mobile="base" i]:not(.sc-watermark) {
        font-size: var(--font-size-base);
    }
    [data-font-size-mobile="lg" i]:not(.sc-watermark) {
        font-size: var(--font-size-lg);
    }
    [data-font-size-mobile="xl" i]:not(.sc-watermark) {
        font-size: var(--font-size-xl);
    }
    [data-font-size-mobile="xxl" i]:not(.sc-watermark) {
        font-size: var(--font-size-xxl);
    }
    [data-font-size-mobile="title" i]:not(.sc-watermark) {
        font-size: var(--font-size-title);
    }
    /* 颜色关键字：与电脑端同名关键字一一对应 */
    [data-color-mobile="primary" i]:not(.sc-watermark) {
        color: var(--color-primary);
    }
    [data-color-mobile="success" i]:not(.sc-watermark) {
        color: var(--color-success);
    }
    [data-color-mobile="warning" i]:not(.sc-watermark) {
        color: var(--color-warning);
    }
    [data-color-mobile="danger" i]:not(.sc-watermark) {
        color: var(--color-danger);
    }
    [data-color-mobile="info" i]:not(.sc-watermark) {
        color: var(--color-info);
    }
    [data-color-mobile="text-primary" i]:not(.sc-watermark) {
        color: var(--color-text-primary);
    }
    [data-color-mobile="text-regular" i]:not(.sc-watermark) {
        color: var(--color-text-regular);
    }
    [data-color-mobile="text-secondary" i]:not(.sc-watermark) {
        color: var(--color-text-secondary);
    }
}


/* ==================== Carousel 轮播图 ==================== */

.sc-carousel {
    overflow: hidden;
    position: relative;
}

.sc-carousel__slide-inner {
    position: relative;
    width: 100%;
}

.sc-carousel__slide-inner img {
    width: 100%;
    height: auto;
    display: block;
}

.sc-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: auto;
    top: auto;
    padding: calc(40px + var(--_caption-offset, 0px)) 24px calc(24px + var(--_caption-offset, 0px));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: #fff;
}


/* 右下 */

.sc-carousel[data-caption-position="bottom-right"] .sc-carousel__caption {
    left: auto;
    right: 0;
    text-align: right;
}


/* 居中 */

.sc-carousel[data-caption-position="center"] .sc-carousel__caption {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, calc(-50% - var(--_caption-offset, 0px)));
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 24px 32px;
    border-radius: var(--radius-lg, 8px);
}


/* 左上 */

.sc-carousel[data-caption-position="top-left"] .sc-carousel__caption {
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    padding: calc(24px + var(--_caption-offset, 0px)) 24px calc(40px + var(--_caption-offset, 0px));
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
}


/* 右上 */

.sc-carousel[data-caption-position="top-right"] .sc-carousel__caption {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    text-align: right;
    padding: calc(24px + var(--_caption-offset, 0px)) 24px calc(40px + var(--_caption-offset, 0px));
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
}


/* 正上方居中 */

.sc-carousel[data-caption-position="top-center"] .sc-carousel__caption {
    top: calc(0px + var(--_caption-offset, 0px));
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    padding: calc(24px + var(--_caption-offset, 0px)) 32px calc(40px + var(--_caption-offset, 0px));
    background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
}


/* 正下方居中 */

.sc-carousel[data-caption-position="bottom-center"] .sc-carousel__caption {
    bottom: calc(0px + var(--_caption-offset, 0px));
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    padding: calc(40px + var(--_caption-offset, 0px)) 32px calc(24px + var(--_caption-offset, 0px));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

.sc-carousel__caption h3 {
    margin: 0 0 6px;
    font-size: var(--font-size-xl, 20px);
    font-weight: 600;
    line-height: 1.3;
    color: #FFF;
}

.sc-carousel__caption p {
    margin: 0;
    font-size: var(--font-size-base, 14px);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}


/* 自定义箭头样式 */

.sc-carousel .swiper-button-prev,
.sc-carousel .swiper-button-next {
    color: #fff;
    /* background: rgba(0, 0, 0, 0.3); */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background var(--transition-duration, 0.3s) var(--transition-timing, ease);
}

.sc-carousel .swiper-button-prev:hover,
.sc-carousel .swiper-button-next:hover {
    /* background: rgba(0, 0, 0, 0.5); */
}

.sc-carousel .swiper-button-prev::after,
.sc-carousel .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}


/* 自定义指示器样式 */

.sc-carousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all var(--transition-duration, 0.3s) var(--transition-timing, ease);
}

.sc-carousel .swiper-pagination-bullet-active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}


/* 响应式 */

@media (max-width: 767px) {
    .sc-carousel__caption {
        padding: calc(24px + var(--_caption-offset, 0px)) 16px calc(16px + var(--_caption-offset, 0px));
    }
    .sc-carousel__caption h3 {
        font-size: var(--font-size-lg, 16px);
    }
    .sc-carousel__caption p {
        font-size: var(--font-size-sm, 13px);
    }
    .sc-carousel .swiper-button-prev,
    .sc-carousel .swiper-button-next {
        width: 32px;
        height: 32px;
    }
    .sc-carousel .swiper-button-prev::after,
    .sc-carousel .swiper-button-next::after {
        font-size: 14px;
    }
}


/* ===== Carousel caption 进入动画（复用 Animations 组件 keyframes） ===== */


/* 初始状态：动画播放前隐藏 */

.sc-carousel[data-caption-animation] .sc-carousel__caption h3,
.sc-carousel[data-caption-animation] .sc-carousel__caption p {
    opacity: 0;
}


/* 动画播放时的公共属性 */

.sc-carousel[data-caption-animation] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation] .sc-carousel__caption p.is-animated {
    animation-duration: var(--_caption-duration, 0.8s);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}


/* Fade In */

.sc-carousel[data-caption-animation="fade-in"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="fade-in"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-fade-in;
}


/* Fade In Up（默认） */

.sc-carousel[data-caption-animation="fade-in-up"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="fade-in-up"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-fade-in-up;
}


/* Fade In Down */

.sc-carousel[data-caption-animation="fade-in-down"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="fade-in-down"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-fade-in-down;
}


/* Fade In Left */

.sc-carousel[data-caption-animation="fade-in-left"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="fade-in-left"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-fade-in-left;
}


/* Fade In Right */

.sc-carousel[data-caption-animation="fade-in-right"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="fade-in-right"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-fade-in-right;
}


/* Zoom In */

.sc-carousel[data-caption-animation="zoom-in"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="zoom-in"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-zoom-in;
}


/* Bounce In */

.sc-carousel[data-caption-animation="bounce-in"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="bounce-in"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-bounce-in;
}


/* Flip In */

.sc-carousel[data-caption-animation="flip-in"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="flip-in"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-flip-in;
}


/* Rotate In */

.sc-carousel[data-caption-animation="rotate-in"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="rotate-in"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-rotate-in;
}


/* Slide In Up */

.sc-carousel[data-caption-animation="slide-in-up"] .sc-carousel__caption h3.is-animated,
.sc-carousel[data-caption-animation="slide-in-up"] .sc-carousel__caption p.is-animated {
    animation-name: sc-anim-slide-in-up;
}


/* ==================== Image Accordion 横向图片手风琴 ==================== */

.sc-image-accordion {
    --_accordion-ratio: 3;
    display: flex;
    width: 100%;
    height: var(--_accordion-height, 400px);
    gap: var(--_accordion-gap, 8px);
    overflow: hidden;
}

.sc-image-accordion__item {
    flex: 1 1 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--_accordion-radius, var(--radius-lg, 8px));
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    /* 防止 flex 子项溢出 */
    background-color: #000;
}


/* hover 展开状态 */

.sc-image-accordion__item:hover {
    flex: var(--_accordion-ratio, 3) 1 0;
}

.sc-image-accordion__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.sc-image-accordion__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.sc-image-accordion__item:hover .sc-image-accordion__caption {
    transform: translateY(-12px);
}

.sc-image-accordion__title {
    margin: 0;
    font-size: var(--font-size-lg, 18px);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}


/* 副标题初始隐藏，悬停/展开时显示 */

.sc-image-accordion__subtitle {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    font-size: var(--font-size-sm, 13px);
    line-height: 1.5;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
}

.sc-image-accordion__item:hover .sc-image-accordion__subtitle {
    max-height: 60px;
    opacity: 1;
    margin-top: 8px;
}


/* 响应式：移动端（≤767px）切换为常规图片列表，布局与 Image List 对齐 */

@media (max-width: 767px) {
    .sc-image-accordion {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        height: auto;
        gap: var(--_accordion-gap, 8px);
        overflow: visible;
    }
    /* 移动端列数（复用 Image List 属性体系，data-mobile-columns 支持 1-4） */
    .sc-image-accordion[data-mobile-columns="2"] {
        grid-template-columns: repeat(2, 1fr);
    }
    .sc-image-accordion[data-mobile-columns="3"] {
        grid-template-columns: repeat(3, 1fr);
    }
    .sc-image-accordion[data-mobile-columns="4"] {
        grid-template-columns: repeat(4, 1fr);
    }
    .sc-image-accordion__item {
        background-color: transparent;
        cursor: default;
        transition: none;
    }
    /* 图片按正常比例显示，不再撑满固定高度 */
    .sc-image-accordion__item img {
        height: auto;
    }
    /* 文字说明改为图片下方居中展示（同 Image List caption 样式） */
    .sc-image-accordion__caption {
        position: static;
        padding: 8px 4px 4px;
        color: #606266;
        text-align: center;
        text-shadow: none;
        transform: none;
    }
    .sc-image-accordion__item:hover .sc-image-accordion__caption {
        transform: none;
    }
    .sc-image-accordion__title {
        font-size: var(--font-size-base, 14px);
        color: #303133;
        white-space: normal;
        text-shadow: none;
    }
    .sc-image-accordion__subtitle {
        max-height: none;
        opacity: 1;
        overflow: visible;
        margin-top: 4px;
        font-size: var(--font-size-sm, 12px);
        color: #909399;
    }
}