:root {
    /* ═══════════════════════════════════════════════════════════════
       主题色 - 珊瑚粉 (Coral Pink Theme)
       温暖活泼的动漫周边电商配色
    ═══════════════════════════════════════════════════════════════ */

    /* Primary Colors - 淡粉色 */
    --primary: #ff7b8e;
    --primary-light: #ff9aaa;
    --primary-dark: #ff6b7d;
    --hover: #ff6b7d;
    --accent: #fff0f2;

    /* Secondary Colors - 薄荷绿作为辅助色 */
    --secondary: #2d9c8a;
    --secondary-light: #45b5a3;
    --secondary-dark: #238272;

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;

    /* Surface & Background Colors */
    --surface: #ffffff;
    --surface-warm: #fffbfc;
    --background: #f8f9fa;

    /* Border Colors */
    --border: #e0e0e0;
    --border-light: #f0f0f0;

    /* Shadow Effects */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 0 3px rgba(232, 90, 113, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

    /* Layout */
    --max-width: 1200px;
}

html,
body {
    margin: 0 auto;
    padding: 0;
    height: 100%;
    width: 100%;
    font-size: 10px;
    overflow: hidden;
    background: #ffffff;
    color: #333333;
}

body {
    overflow: auto;
}

a {
    text-decoration: none;
    color: #333333;
}

.vs-vip,
.vs-admin {
    display: none !important;
}

.vp-admin .vs-admin {
    display: inherit !important;
}

.vp-vip .vs-vip {
    display: inherit !important;
}

/* 搜索页面头部对齐样式 */
.bhead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.bhead .pagesize,
.bhead .sortby {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bhead .pagesize label,
.bhead .sortby label {
    margin: 0 !important;
    white-space: nowrap !important;
}

.bhead .pagesize select,
.bhead .sortby select {
    padding: 4px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: white !important;
    min-width: 80px !important;
}

.bhead .pagination {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

/* 四色加载动画 - 替代 loading.gif */
.ani-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
}

.ani-loader .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: aniLoaderPulse 1.2s ease-in-out infinite;
}

.ani-loader .dot:nth-child(1) {
    background: #e94560;
    animation-delay: 0s;
}

.ani-loader .dot:nth-child(2) {
    background: #4caf50;
    animation-delay: 0.15s;
}

.ani-loader .dot:nth-child(3) {
    background: #ffc107;
    animation-delay: 0.3s;
}

.ani-loader .dot:nth-child(4) {
    background: #00c8ff;
    animation-delay: 0.45s;
}

@keyframes aniLoaderPulse {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 小尺寸加载动画 */
.ani-loader.small {
    gap: 4px;
    padding: 10px;
}

.ani-loader.small .dot {
    width: 6px;
    height: 6px;
}

/* 内联加载动画 */
.ani-loader.inline {
    display: inline-flex;
    padding: 5px;
}