/**
 * 首页合并样式文件
 *
 * 功能概述：
 * 1. 合并 global.css 与 index-main.css 的首页样式
 * 2. 保留全局基础样式与首页模块样式
 * 3. 清理首页文件顶部重复变量与基础 body 定义
 * 4. 维护主应用区域、侧栏、iframe 与模态框的基础交互和层级兜底样式
 * 5. 提供低饱和多彩视觉系统，让按钮、卡片与状态组件更丰富但不张扬
 *
 * @author Claude Code
 * @version 1.4
 * @since 2026-04-13
 */

/**
 * 全局通用样式文件
 *
 * 功能概述：
 * 1. CSS 变量定义（颜色、字体、阴影等）
 * 2. 通用组件样式（按钮、卡片、表单、徽章等）
 * 3. 动画效果（旋转、滑动、淡入淡出等）
 * 4. 滚动条样式
 * 5. 响应式工具类
 *
 * @author Claude Code
 * @version 1.0
 * @since 2026-04-11
 */

/* ==================== CSS 变量定义 ==================== */
:root {
    /* 核心色彩（统一苹果风） */
    --theme-1: #1f2937;
    --theme-2: #4a90e2;
    --theme-3: #7daeea;
    --theme-4: #65b87a;
    --theme-5: #cfe0ff;
    --theme-6: #eef4ff;
    --theme-7: #f7f9fc;
    --theme-8: #f1f8f3;
    --theme-9: #e6eefc;
    --theme-10: #111827;

    /* 语义颜色 */
    --primary-color: #4a90e2;
    --primary-hover: #3f83d8;
    --secondary-color: #6f7fd1;
    --success-color: #65b87a;
    --danger-color: #e67c73;
    --warning-color: #f0b94b;
    --info-color: #4a90e2;
    --light-color: #f5f5f7;
    --dark-color: #111827;
    --white-color: #ffffff;

    /* 文字颜色 */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;

    /* 背景颜色 */
    --body-bg: #f5f5f7;
    --card-bg: #fbfcfe;
    --bg-soft: #f8f9fb;
    --bg-accent-soft: rgba(74, 144, 226, 0.05);

    /* 表面层 */
    --surface-1: #fdfdff;
    --surface-2: #f7f9fc;
    --surface-3: #eef2f6;
    --card-bg-muted: #f6f8fb;

    /* 边框与阴影 */
    --border-color: #e7ebf0;
    --border-subtle: #edf1f5;
    --border-strong: #d6dee8;
    --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    --card-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.08);

    /* 圆角 */
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;
    --button-radius: 8px;
    --button-radius-sm: 6px;

    /* 字体 */
    --font-main: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', sans-serif;

    /* 模块变量 */
    --sidebar-bg: #f7f8fa;
    --sidebar-surface: #ffffff;
    --sidebar-line: rgba(107, 114, 128, 0.12);
    --sidebar-icon-bg: rgba(74, 144, 226, 0.08);
    --sidebar-active-bg: #eef4ff;
    --sidebar-active-text: #4a90e2;
    --tabs-bg: #f3f6fa;
    --tabs-active-bg: #ffffff;
    --tabs-active-line: #4a90e2;
    --panel-bg: #f8f9fb;
    --panel-bg-strong: #eef4ff;
    --surface-card: #ffffff;
    --surface-card-soft: #f8fafc;
    --surface-card-success: #f1f8f3;
    --surface-card-warning: #fff8e8;
    --surface-card-danger: #fff1f0;

    /* 主题衍生变量 */
    --accent-color: #4a90e2;
    --accent-strong: #3f83d8;
    --accent-soft: #eaf2ff;
    --accent-soft-strong: #dfeaff;
    --surface-tint: #f6f9ff;
    --surface-tint-strong: #eef4ff;
    --surface-tint-deep: #e6eefc;
    --surface-soft-success: #edf8f0;
    --surface-soft-warning: #fff5dd;
    --surface-soft-danger: #fdedec;
    --surface-soft-info: #eaf2ff;
    --muted-soft: #f3f6fa;
    --control-track: #dce4ee;
    --control-thumb: #4a90e2;
    --control-thumb-hover: #3f83d8;
    --danger-contrast: #c9655c;
    --warning-contrast: #b98512;
    --success-contrast: #4f9b63;

    /* 克制多彩系统：低饱和、轻背景、明确意图 */
    --color-blue: #4a90e2;
    --color-blue-hover: #3f83d8;
    --color-blue-soft: #eef6ff;
    --color-green: #65b87a;
    --color-green-hover: #4f9b63;
    --color-green-soft: #f1f8f3;
    --color-cyan: #55b7c8;
    --color-cyan-hover: #3e9faf;
    --color-cyan-soft: #edf9fb;
    --color-violet: #7d83d4;
    --color-violet-hover: #696fbe;
    --color-violet-soft: #f3f2ff;
    --color-amber: #e6a93d;
    --color-amber-hover: #c98b18;
    --color-amber-soft: #fff8e8;
    --color-rose: #e67c73;
    --color-rose-hover: #c9655c;
    --color-rose-soft: #fff1f0;
    --intent-shadow-blue: rgba(74, 144, 226, 0.18);
    --intent-shadow-green: rgba(101, 184, 122, 0.18);
    --intent-shadow-cyan: rgba(85, 183, 200, 0.18);
    --intent-shadow-violet: rgba(125, 131, 212, 0.18);
    --intent-shadow-amber: rgba(230, 169, 61, 0.18);
    --intent-shadow-rose: rgba(230, 124, 115, 0.18);
    --colorful-card-line: linear-gradient(90deg, var(--color-blue), var(--color-green), var(--color-cyan), var(--color-violet), var(--color-amber));

    /* 全局模块统一变量 */
    --section-accent: var(--primary-color);
    --section-soft: var(--bg-soft);

    /* 过渡速度 */
    --transition-speed: 0.15s;
    --transition-speed-slow: 0.3s;
}



/* ==================== 全局基础样式 ==================== */
body {
    background-color: var(--body-bg);
    font-family: var(--font-main);
    color: var(--text-primary);
}

/* ==================== 卡片样式 ==================== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-speed);
}

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

.card-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* ==================== 按钮样式 ==================== */
.btn {
    border-radius: var(--button-radius);
    transition: all var(--transition-speed);
    font-weight: 500;
    position: relative;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.btn:active,
.btn.active {
    transform: translateY(0);
}

.btn:focus,
.btn:focus-visible,
.btn:focus-within,
.btn:not(:disabled):not(.disabled):active {
    outline: none;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white-color);
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(74, 107, 239, 0.25);
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: var(--white-color);
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--white-color);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover:not(:disabled),
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: rgba(108, 139, 255, 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #ced4da;
}

.btn-outline-secondary:hover:not(:disabled),
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: rgba(108, 117, 125, 0.08);
    border-color: #adb5bd;
    color: #6c757d;
}

.btn-outline-danger {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-outline-danger:hover:not(:disabled),
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: rgba(232, 105, 120, 0.08);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.btn-sm,
.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
}

/* 支付方式按钮选中状态 */
.btn-check:checked + .btn-outline-success {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.btn-check:checked + .btn-outline-success .text-success {
    color: #fff !important;
}

.btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

.btn-check:checked + .btn-outline-primary .text-primary {
    color: #fff !important;
}

.btn-check:checked + .btn-outline-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #000;
}

.btn-check:checked + .btn-outline-info .text-info {
    color: #000 !important;
}

/* ==================== 表单样式 ==================== */
.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    transition: all var(--transition-speed);
    width: 100%;
}

.form-control:hover,
.form-select:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: #adb5bd;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    background-color: var(--white-color);
    box-shadow: 0 0 0 0.2rem rgba(108, 139, 255, 0.25);
    outline: none;
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f1f3f5;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: #6c757d;
    opacity: 1;
}

.form-label,
label {
    font-weight: 500;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.form-control.is-invalid,
input.is-invalid {
    border-color: var(--danger-color);
}

.form-control.is-invalid:focus,
input.is-invalid:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 0.2rem rgba(232, 105, 120, 0.2);
}

.form-control.is-valid,
input.is-valid {
    border-color: var(--success-color);
}

.form-control.is-valid:focus,
input.is-valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.2rem rgba(74, 186, 101, 0.2);
}

/* ==================== 徽章样式 ==================== */
.badge {
    border-radius: var(--border-radius-sm);
    padding: 0.35em 0.65em;
    font-weight: 500;
}

.badge-sm {
    font-size: 0.6rem;
    padding: 3px 6px;
    border-radius: 10px;
}

/* Bootstrap 补充 - bg-orange */
.bg-orange {
    background-color: #fd7e14 !important;
}

.text-orange {
    color: #fd7e14 !important;
}

/* ==================== 进度条样式 ==================== */
.progress {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
    height: 1rem;
}

.progress-bar {
    transition: width var(--transition-speed) ease;
    border-radius: var(--border-radius-sm);
}

/* ==================== 滚动条样式 ==================== */
/* 通用滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 小型滚动条 */
.scrollbar-sm::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* ==================== 动画效果 ==================== */
/* 齿轮旋转动画 */
.fa-cog.fa-spin {
    animation: gear-spin 1s linear infinite;
}

@keyframes gear-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 滑入动画 */
@keyframes slidein {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slidein 0.5s ease-in-out;
}

/* 淡入动画 */
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadein 0.3s ease-in-out;
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 0.5s ease-in-out;
}

/* 旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 0.3s ease-in-out;
}

/* 呼吸动画 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ==================== 公告横幅样式 ==================== */
.announcement-banner {
    background-color: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--primary-color) 16%, var(--border-color));
    border-left: 4px solid var(--primary-color);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
    animation: slidein 0.5s ease-in-out;
}

.announcement-banner.urgent {
    background-color: var(--surface-soft-warning);
    border-left-color: var(--warning-color);
}

.announcement-banner .announcement-content {
    display: flex;
    align-items: flex-start;
    padding-right: 30px;
}

.announcement-banner .announcement-icon {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-right: 15px;
    margin-top: 3px;
}

.announcement-banner.urgent .announcement-icon {
    color: var(--warning-color);
}

.announcement-banner .announcement-text-wrapper {
    flex: 1;
}

.announcement-banner .announcement-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--dark-color);
}

.announcement-banner .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* ==================== Toast 通知样式 ==================== */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
}

.toast {
    min-width: 320px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    display: flex;
    border: none;
    background: var(--white-color);
}

.toast-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.toast-body {
    padding: 0.75rem;
}

/* ==================== 表格样式 ==================== */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.table thead th {
    background-color: var(--light-color);
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--transition-speed);
}

.table tbody tr:hover {
    background-color: rgba(108, 139, 255, 0.05);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ==================== 加载动画容器 ==================== */
.loading-progress-wrapper {
    max-width: 400px;
    margin: 0 auto;
}

/* ==================== 工具类 ==================== */
/* 文字大小补充 */
.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

/* 间距工具 */
.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

/* 可选标签 */
.optional-label {
    color: var(--secondary-color);
    font-size: 0.875rem;
}

/* 禁用状态 */
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== 响应式设计 ==================== */
/* 平板设备 */
@media (max-width: 768px) {
    .loading-progress-wrapper {
        max-width: 300px;
    }

    .card-body {
        padding: 1rem;
    }

    .toast-container {
        right: 10px;
        left: 10px;
    }

    .toast {
        min-width: auto;
    }
}

/* 手机设备 */
@media (max-width: 576px) {
    :root {
        --border-radius: 6px;
    }

    .card-body {
        padding: 0.75rem;
    }

    .btn {
        font-size: 0.875rem;
    }

    .table {
        font-size: 0.875rem;
    }
}

/* 已移除重复的全局按钮、徽章、表单焦点和辅助色覆盖，统一使用文件前部基础定义 */
.text-info { color: #0a84ff !important; }
.bg-primary { background-color: #3B82F6 !important; }
.bg-success { background-color: #22C55E !important; }
.bg-danger { background-color: #EF4444 !important; }
.bg-warning { background-color: #F59E0B !important; }
.bg-info { background-color: #06B6D4 !important; }
.bg-orange { background-color: #F97316 !important; }
.text-orange { color: #F97316 !important; }

/* ==================== 打印样式 ==================== */
@media print {
    .no-print {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}

/* ===== 首页模块样式（合并自 index-main.css）===== */

/* 代理平台系统 - 全新设计 */
/* 代理iframe样式保留在这里 */
        
        /* 齿轮旋转动画 */
        .fa-cog.fa-spin {
            animation: gear-spin 1s linear infinite;
        }
        
        @keyframes gear-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        /* 项目设置面板的滑动动画 */
        #projectHidePanel {
            transition: all 0.15s ease-in-out;
        }
        
        /* 项目设置面板高度限制和滚动 */
        #projectHidePanel .device-panel-body {
            max-height: 200px;
            overflow-y: auto;
        }
        
        /* 自定义滚动条样式 */
        #projectHidePanel .device-panel-body::-webkit-scrollbar {
            width: 4px;
        }
        
        #projectHidePanel .device-panel-body::-webkit-scrollbar-track {
            background: var(--control-track);
            border-radius: 2px;
        }

        #projectHidePanel .device-panel-body::-webkit-scrollbar-thumb {
            background: var(--control-thumb);
            border-radius: 2px;
        }

        #projectHidePanel .device-panel-body::-webkit-scrollbar-thumb:hover {
            background: var(--control-thumb-hover);
        }

        /* 齿轮按钮样式 - 避免点击后背景变色 */
        #projectSettingsToggle {
            border: 1px solid var(--border-color);
            background-color: transparent;
            color: var(--text-muted);
        }

        #projectSettingsToggle:hover,
        #projectSettingsToggle:focus,
        #projectSettingsToggle:active,
        #projectSettingsToggle.active {
            background-color: transparent !important;
            border-color: var(--accent-color) !important;
            color: var(--accent-strong) !important;
            box-shadow: none !important;
        }

        /* 支付方式、订单提示和倍率卡片重复早期实现已移除，统一使用后文完整模块定义 */

        @keyframes slidein {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        /* 新的加载动画样式 - 从素材/index.html提取 */
        .loading-animation {
            --armLength: 110px;
            width: fit-content;
            height: fit-content;
            position: relative;
            transform: scale(0.4);
            margin: 0 auto;
        }
        
        .loading-animation .head {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 195px;
            animation: headmove 0.7s ease infinite;
            z-index: 1;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #d1b4a8;
        }
        
        .loading-animation .head::after {
            content: '';
            width: 20px;
            height: 80px;
            background-color: #d1b4a8;
            position: absolute;
            bottom: -70px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .loading-animation .hair {
            width: 150px;
            height: 100px;
            display: flex;
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }
        
        .loading-animation .hair-l {
            width: 50%;
            height: 100%;
            background-image: linear-gradient(to right, lightgrey, grey);
            border-radius: 65px 21px 76px 14px / 90px 17px 111px 26px;
        }
        
        .loading-animation .hair-r {
            width: 50%;
            height: 100%;
            background-image: linear-gradient(to left, lightgrey, grey);
            border-radius: 33px 85px 29px 99px / 26px 99px 62px 147px;
        }
        
        .loading-animation .kbody {
            position: relative;
            z-index: 2;
            -webkit-clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
            clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
            width: 150px;
            height: 230px;
            background-color: #333;
            animation: bodymove 0.7s ease infinite;
            transform-origin: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .loading-animation .kbody span {
            color: #fff;
            font-size: 350px;
            transform: rotate(10deg);
            line-height: 1;
        }
        
        .loading-animation .arms {
            width: 72%;
            height: 100%;
            position: absolute;
            top: 66px;
            left: 12%;
            animation: armmove 0.7s ease infinite;
        }
        
        .loading-animation .arm {
            background-color: #333;
            position: absolute;
            top: 10px;
            z-index: 1;
            transform-origin: center top;
            width: 30px;
            height: var(--armLength);
        }
        
        .loading-animation .arm-l {
            left: 0;
            transform: rotate(50deg);
            border-radius: 0 0 30px 30px;
        }
        
        .loading-animation .arm-l::after {
            content: '';
            position: absolute;
            width: 26px;
            height: 80px;
            border-radius: 0 0 30px 30px;
            background-color: #333;
            left: 0;
            bottom: -70px;
            transform-origin: center top;
            transform: rotate(-100deg);
        }
        
        .loading-animation .arm-r {
            right: 0px;
            transform: rotate(-20deg);
            border-radius: 0 0 30px 30px;
        }
        
        .loading-animation .arm-r::after {
            content: '';
            position: absolute;
            width: 26px;
            height: 80px;
            border-radius: 0 0 30px 30px;
            background-color: #333;
            left: 0;
            bottom: -70px;
            transform-origin: center top;
            transform: rotate(100deg);
        }
        
        .loading-animation .leg {
            width: 40px;
            height: 128px;
            background-color: #877785;
            position: absolute;
            bottom: -110px;
            z-index: 1;
            transform-origin: center top;
        }
        
        .loading-animation .leg-l {
            left: 12px;
            transform: rotate(20deg);
        }
        
        .loading-animation .leg-l::after {
            content: '';
            position: absolute;
            width: 38px;
            height: 120px;
            background-color: #877785;
            border-radius: 0 0 30px 30px;
            left: 0;
            bottom: -110px;
            transform-origin: center top;
            transform: rotate(-10deg);
        }
        
        .loading-animation .leg-r {
            right: 50px;
            transform: rotate(-30deg);
        }
        
        .loading-animation .leg-r::after {
            content: '';
            position: absolute;
            width: 38px;
            height: 132px;
            background-color: #877785;
            border-radius: 0 0 30px 30px;
            left: 0;
            bottom: -126px;
            transform-origin: center top;
            transform: rotate(10deg);
        }
        
        @keyframes headmove {
            25% {
                bottom: 210px;
            }
            50% {
                bottom: 195px;
            }
            75% {
                bottom: 170px;
            }
        }
        
        @keyframes armmove {
            25% {
                width: 92%;
                top: 60px;
                left: 11%;
            }
            50% {
                width: 72%;
                top: 66px;
                left: 12%;
            }
            75% {
                width: 81%;
                top: 80px;
                left: 14%;
            }
        }
        
        @keyframes bodymove {
            25% {
                -webkit-clip-path: polygon(23% 13%, 98% 10%, 75% 100%, 0% 100%);
                clip-path: polygon(23% 13%, 98% 10%, 75% 100%, 0% 100%);
            }
            50% {
                -webkit-clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
                clip-path: polygon(17% 16%, 63% 29%, 75% 100%, 0% 100%);
            }
            75% {
                -webkit-clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);
                clip-path: polygon(24% 27%, 90% 38%, 75% 100%, 0% 100%);
            }
        }
        
        /* 公告表格样式 */
        #announcementsTable .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-block;
        }
        
        #announcementsTable .status-active {
            background-color: rgba(74, 186, 101, 0.15);
            color: #4aba65;
        }
        
        #announcementsTable .status-inactive {
            background-color: rgba(232, 105, 120, 0.15);
            color: #e86978;
        }
        
        #announcementsTable .announcement-content-cell {
            max-width: 250px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #8c95a0;
        }
        
        /* 排行榜表格样式 */
        #rankingTable {
            white-space: nowrap;
        }
        
        #rankingTable td,
        #rankingTable th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #rankingTable .table-responsive {
            overflow-x: auto;
        }
        
        /* 用户管理表格样式 */
        #userManageTable {
            white-space: nowrap;
        }
        
        #userManageTable td,
        #userManageTable th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #userManageTable .table-responsive {
            overflow-x: auto;
        }
        
        /* 控制面板公告样式 */
        /* ==================== Dashboard 标签页：公告 / 总览 ==================== */
#dashboardAnnouncements .card {
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border: none;
            border-radius: 12px;
            overflow: hidden;
        }
        
        #dashboardAnnouncements .card-header {
            background: var(--surface-card-warning);
            color: var(--text-primary);
            border-bottom: 1px solid color-mix(in srgb, var(--warning-color) 12%, var(--border-color));
            padding: 14px 20px;
        }
        
        #dashboardAnnouncements .list-group-item {
            padding: 18px 20px;
            background-color: #fff;
            transition: all 0.1s ease;
            border-left: 3px solid transparent;
            border-bottom: 1px solid rgba(0,0,0,0.04);
        }
        
        #dashboardAnnouncements .list-group-item:hover {
            background-color: color-mix(in srgb, var(--accent-color) 8%, white 92%);
            border-left-color: var(--accent-color);
        }

        #dashboardAnnouncements .list-group-item:last-child {
            border-bottom: none;
        }

        #dashboardAnnouncements .announcement-content-text {
            white-space: pre-line;
            color: var(--text-secondary);
            margin-bottom: 8px;
            line-height: 1.6;
            font-size: 0.9rem;
        }

        /* 公告卡片整体样式 */
        #dashboardAnnouncements > .card {
            border: 1px solid color-mix(in srgb, var(--primary-color) 18%, var(--border-color));
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        #dashboardAnnouncements > .card > .card-header {
            background: linear-gradient(135deg, var(--surface-tint-strong) 0%, var(--surface-tint) 100%);
            border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 12%, var(--border-color));
            padding: 14px 20px;
        }

        #dashboardAnnouncements > .card > .card-header h5 {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 0.95rem;
        }

        #dashboardAnnouncements > .card > .card-header h5 i {
            color: var(--primary-color);
        }
        
        /* 已移除重复的早期倍率卡片实现，统一使用后文主实现 */
        
        /* 设备列表样式 */
        .device-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .device-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            margin-bottom: 6px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 3px solid #6c8bff;
            transition: all 0.1s ease;
        }
        
        .device-item:hover {
            background-color: #e9ecef;
            transform: translateX(2px);
        }
        
        .device-item.current-device {
            border-left-color: #28a745;
            background-color: #f8fff9;
        }
        
        .device-info {
            flex: 1;
            min-width: 0;
        }
        
        .device-name {
            font-weight: 500;
            font-size: 0.85rem;
            color: #333;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .device-details {
            font-size: 0.75rem;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .device-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
        }
        
        .device-name-row .device-name {
            flex: 1;
            margin-bottom: 0;
            margin-right: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .device-name-row .device-status {
            flex-shrink: 0;
        }
        
        .device-status {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .device-status-badge {
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .device-status-badge.current {
            background-color: #28a745;
            color: white;
        }
        
        .device-status-badge.online {
            background-color: #007bff;
            color: white;
        }
        
        .device-status-badge.offline {
            background-color: #6c757d;
            color: white;
        }
        
        .logout-device-btn {
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 0.7rem;
            cursor: pointer;
            transition: background-color 0.1s ease;
        }
        
        .logout-device-btn:hover {
            background-color: #c82333;
        }
        
        .logout-device-btn:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        
        .device-list::-webkit-scrollbar {
            width: 4px;
        }
        
        .device-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }
        
        .device-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }
        
        .device-list::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
          
        /* 设备面板样式 */
        .device-panel {
            border-radius: 12px;
            background: #ffffff;
            border: 1px solid color-mix(in srgb, var(--accent-color) 8%, var(--border-color));
            box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-1) 6%, transparent);
            margin-top: 6px;
            overflow: hidden;
        }

        .device-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
            background: color-mix(in srgb, var(--card-bg) 90%, var(--accent-soft) 10%);
        }

        .device-panel-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-primary);
            font-weight: 600;
        }

        .device-panel-title i {
            color: var(--accent-color);
            font-size: 11px;
        }

        .device-refresh-btn {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
            background: color-mix(in srgb, var(--card-bg) 92%, white 8%);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s ease;
            font-size: 10px;
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 72%, transparent);
        }

        .device-refresh-btn:hover {
            background: color-mix(in srgb, var(--accent-soft) 76%, white 24%);
            border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
            color: var(--accent-strong);
        }

        .device-refresh-btn:active {
            background: color-mix(in srgb, var(--accent-soft) 86%, var(--surface-tint) 14%);
        }

        .device-panel-actions {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .device-batch-logout-btn {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            border-radius: var(--button-radius-sm);
            border: 1px solid color-mix(in srgb, var(--danger-color) 22%, var(--border-color));
            background: color-mix(in srgb, var(--surface-soft-danger) 78%, white 22%);
            color: var(--danger-color);
            font-size: 9px;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
        }

        .device-batch-logout-btn:hover {
            background: color-mix(in srgb, var(--surface-soft-danger) 52%, white 48%);
            border-color: color-mix(in srgb, var(--danger-color) 44%, var(--border-color));
            color: var(--danger-contrast);
        }

        .device-batch-logout-btn:active {
            background: color-mix(in srgb, var(--surface-soft-danger) 72%, white 28%);
            border-color: color-mix(in srgb, var(--danger-color) 52%, var(--border-color));
        }

        .device-batch-logout-btn i {
            font-size: 8px;
        }

        .device-test-btn {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            border-radius: var(--button-radius-sm);
            border: 1px solid color-mix(in srgb, var(--success-color) 22%, var(--border-color));
            background: color-mix(in srgb, var(--surface-soft-success) 80%, white 20%);
            color: var(--success-color);
            font-size: 9px;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            box-shadow: inset 0 1px 0 color-mix(in srgb, white 70%, transparent);
        }

        .device-test-btn:hover {
            background: color-mix(in srgb, var(--surface-soft-success) 58%, white 42%);
            border-color: color-mix(in srgb, var(--success-color) 40%, var(--border-color));
            color: var(--success-contrast);
        }

        .device-test-btn i {
            font-size: 8px;
        }

        /* 设备列表样式 */
        .device-list {
            max-height: 240px;
            overflow-y: auto;
            padding: 8px;
        }

        .device-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 6px;
            background: var(--card-bg);
            border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
            border-radius: 12px;
            transition: all 0.15s ease;
            box-shadow: none;
        }

        .device-item:hover {
            background: color-mix(in srgb, var(--card-bg) 74%, var(--accent-soft) 26%);
            border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
            transform: translateY(-1px);
        }

        .device-item.current-device {
            background: color-mix(in srgb, var(--surface-soft-success) 64%, white 36%);
            border-color: color-mix(in srgb, var(--success-color) 32%, var(--border-color));
            box-shadow: 0 10px 20px color-mix(in srgb, var(--success-color) 10%, transparent);
        }

        .device-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-soft) 74%, white 26%);
            border: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            color: var(--accent-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            margin-right: 8px;
            flex-shrink: 0;
            box-shadow: none;
        }

        .device-info {
            flex: 1;
            min-width: 0;
        }

        .device-name {
            font-weight: 600;
            font-size: 11px;
            color: var(--text-primary);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .device-name .current-badge {
            background: color-mix(in srgb, var(--surface-soft-success) 56%, white 44%);
            color: var(--success-contrast);
            padding: 1px 6px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 500;
            border: 1px solid color-mix(in srgb, var(--success-color) 18%, var(--border-color));
        }

        .device-details {
            font-size: 10px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .device-details i {
            font-size: 8px;
            color: color-mix(in srgb, var(--accent-color) 44%, var(--text-muted));
        }

        .device-status {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .device-status-badge {
            padding: 2px 6px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 500;
        }

        .device-status-badge.current {
            background: color-mix(in srgb, var(--surface-soft-success) 60%, white 40%);
            color: var(--success-contrast);
            border: 1px solid color-mix(in srgb, var(--success-color) 18%, var(--border-color));
        }

        .device-status-badge.online {
            background: color-mix(in srgb, var(--surface-soft-info) 68%, white 32%);
            color: var(--accent-strong);
            border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
        }

        .device-status-badge.offline {
            background: color-mix(in srgb, var(--muted-soft) 86%, white 14%);
            color: var(--text-secondary);
            border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
        }

        .logout-device-btn {
            padding: 3px 8px;
            border-radius: var(--button-radius-sm);
            border: 1px solid color-mix(in srgb, var(--danger-color) 22%, var(--border-color));
            background: color-mix(in srgb, var(--surface-soft-danger) 78%, white 22%);
            color: var(--danger-color);
            font-size: 9px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .logout-device-btn:hover {
            background: color-mix(in srgb, var(--surface-soft-danger) 54%, white 46%);
            color: var(--danger-contrast);
            border-color: color-mix(in srgb, var(--danger-color) 42%, var(--border-color));
        }

        .logout-device-btn:disabled {
            background: color-mix(in srgb, var(--muted-soft) 88%, white 12%);
            color: var(--text-muted);
            border-color: color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
            cursor: not-allowed;
        }

        .device-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 28px 18px;
            color: var(--text-secondary);
        }

        .device-empty-state i {
            font-size: 24px;
            margin-bottom: 8px;
            opacity: 0.7;
            color: var(--accent-color);
        }

        .device-empty-state span {
            font-size: 11px;
            text-align: center;
        }

        /* 滚动条样式 */
        .device-list::-webkit-scrollbar {
            width: 5px;
        }

        .device-list::-webkit-scrollbar-track {
            background: color-mix(in srgb, var(--surface-tint) 82%, white 18%);
            border-radius: 999px;
        }

        .device-list::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--accent-color) 34%, white 66%);
            border-radius: 999px;
        }

        .device-list::-webkit-scrollbar-thumb:hover {
            background: color-mix(in srgb, var(--accent-color) 48%, white 52%);
        }

        .payment-result-shell {
            padding: 0;
            border-radius: 16px;
            background: var(--panel-bg);
            box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-1) 6%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
        }

        .payment-result-shell .alert {
            border-radius: 14px;
            box-shadow: none;
        }

        .payment-result-success {
            background: var(--surface-card-success);
            border-color: color-mix(in srgb, var(--success-color) 14%, var(--border-color));
        }

        .payment-result-error {
            background: var(--surface-card-danger);
            border-color: color-mix(in srgb, var(--danger-color) 14%, var(--border-color));
        }

        .payment-result-warning {
            background: var(--surface-card-warning);
            border-color: color-mix(in srgb, var(--warning-color) 16%, var(--border-color));
        }

        .payment-result-info {
            background: var(--panel-bg);
        }

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* 卡片样式（首页页面覆盖层，基础样式已收敛到 global.css） */
.card {
    border: none;
    margin-bottom: 20px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.card-header {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}


/* 密钥样式 */
.badge-key {
    background-color: var(--info-color);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balance {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--success-color);
}

/* 导航样式 */
.nav-link {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    color: var(--secondary-color);
    transition: all 0.1s;
}

.nav-link:hover {
    color: var(--primary-color);
}

.active-tab {
    border-bottom: 3px solid var(--primary-color);
}

/* 按钮样式（首页页面覆盖层，基础样式已收敛到 global.css） */
.btn-primary {
    background-color: var(--primary-color);
    border: none;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}


/* ============================================
   认证页面样式已移至 assets/css/auth.css
   ============================================ */

.bg-gradient-primary {
    background: var(--accent-strong) !important;
}

/* 最近访问标签栏 */
.top-header-shell {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: calc(100% + 1rem);
    margin: 0 -0.5rem 0;
    background: color-mix(in srgb, var(--card-bg) 84%, var(--surface-tint) 16%);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow: visible !important;
}

.top-header-shell,
.top-header-shell *,
.top-navbar,
.top-navbar *,
.top-navbar-inner,
.recent-tabs-bar,
.recent-tabs-list,
.recent-tab-item,
.recent-tab-trigger,
.recent-tab-close,
.recent-tab-close span {
    border-radius: 0 !important;
}

.recent-tabs-bar {
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: #f6f7f8;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-bottom: 0;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none;
    overflow: visible !important;
}

.recent-tabs-list {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    margin-bottom: 0;
    scrollbar-width: none;
}

.recent-tabs-list::-webkit-scrollbar {
    display: none;
}

.recent-tab-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 28px;
    margin: 0;
    border-right: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
    background: transparent;
    color: var(--text-muted);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.recent-tab-item:hover {
    background: color-mix(in srgb, var(--tabs-active-bg) 72%, white 28%);
    color: var(--text-secondary);
}

.recent-tab-item.active {
    background: var(--tabs-active-bg);
    color: var(--primary-color);
    box-shadow: none;
}

.recent-tab-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--tabs-active-line);
}

.recent-tab-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 26px;
    padding: 0 6px 0 8px;
    border: 0;
    background: transparent;
    color: inherit;
}

.recent-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-muted) 22%, white 78%);
    border-radius: 5px;
    background: color-mix(in srgb, var(--card-bg) 86%, var(--surface-tint) 14%);
    color: color-mix(in srgb, var(--text-muted) 82%, white 18%);
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    font-size: 11px;
}

.recent-tab-item:hover .recent-tab-close,
.recent-tab-item.active .recent-tab-close {
    border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
    background: color-mix(in srgb, var(--card-bg) 78%, var(--accent-soft) 22%);
}

.recent-tab-close:hover {
    color: var(--danger-contrast);
    border-color: color-mix(in srgb, var(--danger-color) 26%, white 74%);
    background: var(--surface-soft-danger);
}

.recent-tab-trigger:focus-visible,
.recent-tab-close:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-color) 18%, white 82%);
}

.recent-tab-item__title {
    display: block;
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 500;
}

@media (max-width: 767px) {
    .top-header-shell {
        width: 100vw;
        margin: 0 calc(50% - 50vw) 0;
        border-radius: 0;
    }

    .top-navbar-inner {
        min-height: 38px;
        padding: 6px 6px 0;
    }

    .sidebar-toggle {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        margin-top: -2px;
        font-size: 1.08rem;
    }

    .recent-tabs-bar {
        padding: 0;
    }

    .recent-tab-item,
    .recent-tab-trigger {
        height: 28px;
    }

    .recent-tab-item {
        min-height: 28px;
    }

    .recent-tab-trigger {
        padding: 0 8px;
    }

    .recent-tab-close {
        width: 14px;
        height: 14px;
        margin-right: 3px;
        border-radius: 0;
        font-size: 10px;
    }

    .recent-tab-item__title {
        max-width: 72px;
        font-size: 0.7rem;
    }
}

/* 保存的账号列表 */
.saved-accounts-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.saved-accounts-list.expanded {
    max-height: 500px;
    overflow-y: auto;
}

/* 自定义滚动条 */
.saved-accounts-list::-webkit-scrollbar {
    width: 6px;
}

.saved-accounts-list::-webkit-scrollbar-track {
    background: var(--control-track);
    border-radius: 3px;
}

.saved-accounts-list::-webkit-scrollbar-thumb {
    background: var(--control-thumb);
    border-radius: 3px;
}

.saved-accounts-list::-webkit-scrollbar-thumb:hover {
    background: var(--control-thumb-hover);
}

.account-card {
    background: var(--surface-card-soft);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 10%, white 90%) 0%, color-mix(in srgb, var(--primary-color) 8%, white 92%) 100%);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 0;
}

.account-card:hover::before {
    opacity: 1;
}

.account-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-2) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-color) 38%, white 62%);
}

.account-card.active-account {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 18%, white 82%) 0%, color-mix(in srgb, var(--theme-6) 55%, white 45%) 100%);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 26%, transparent);
}

.account-card .account-info {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.account-card .account-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-card .account-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--theme-1) 15%, transparent);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.account-card:hover .account-avatar {
    transform: rotate(8deg) scale(1.1);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--theme-1) 22%, transparent);
}

.account-card .account-details {
    flex: 1;
    min-width: 0;
}

.account-card .account-username {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.account-card .account-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-card .account-meta i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.account-card .account-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.account-card:hover .account-actions {
    opacity: 1;
}

.account-card .btn-remove {
    background: var(--surface-soft-danger);
    border: none;
    color: var(--danger-contrast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.1s ease;
}

.account-card .btn-remove:hover {
    background: var(--danger-color);
    color: var(--white-color);
    transform: rotate(90deg) scale(1.1);
}

.account-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--success-color);
    color: var(--white-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--success-color) 26%, transparent);
}

.account-badge.admin {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--danger-color) 100%);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

/* 快速登录标题优化 */
#savedAccountsSection h6 {
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

#savedAccountsSection h6 i {
    color: var(--accent-strong);
}

#showAllAccountsBtn {
    color: var(--accent-strong);
    transition: all 0.15s ease;
}

#showAllAccountsBtn:hover {
    color: var(--primary-color);
    transform: scale(1.15);
}

#showAllAccountsBtn i {
    transition: transform 0.15s ease;
}

/* 密码显示切换按钮 */
#toggleLoginPassword {
    border-left: none;
}

#toggleLoginPassword:hover {
    background-color: #e9ecef;
}

/* 响应式优化 */
@media (max-width: 576px) {
    .login-box, .register-box {
        max-width: 100%;
        margin: 20px auto;
    }

    .login-container {
        padding: 10px;
    }
}

/* 表格样式 */
#projectsTable th, #projectsTable td,
#transferHistoryTable th, #transferHistoryTable td {
    vertical-align: middle;
    padding: 0.6rem;
    font-size: 0.9rem;
}

.table th {
    font-weight: 600;
    color: var(--secondary-color);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

/* 防止表格标题文字换行 */
.table th {
    white-space: nowrap;
}

/* 历史记录图标 */
.history-type {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
}

.history-type:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
    opacity: 0.7;
}

.history-sent {
    background: var(--danger-color);
}

.history-sent .fas {
    transform: translateY(1px);
}

.history-sent:hover .fas {
    animation: slide-up 0.5s ease;
}

.history-received {
    background: var(--success-color);
}

.history-received .fas {
    transform: translateY(-1px);
}

.history-received:hover .fas {
    animation: slide-down 0.5s ease;
}

@keyframes slide-up {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes slide-down {
    0% { transform: translateY(0); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

/* 复制按钮 */
.copy-btn {
    cursor: pointer;
    transition: all 0.1s;
}

.copy-btn:hover {
    color: var(--primary-color);
}

/* 项目描述样式 */
.project-description {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 0.75rem;
    border-top: 1px solid #e9ecef;
    padding-top: 0.75rem;
    position: relative;
    padding-left: 25px;
}

.project-description .fas {
    position: absolute;
    left: 0;
    top: 0.75rem;
    font-size: 18px;
    color: var(--primary-color); /* Default color that will be overridden by card variants */
    background: rgba(108, 139, 255, 0.1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 0.7rem;
}

/* 侧边栏导航样式 */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -240px;
    z-index: 1030;
    padding: 0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    width: 250px;
    background: var(--sidebar-bg);
    transition: all 0.3s ease;
    overflow-y: auto;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* 桌面端: 侧边栏始终显示 */
@media (min-width: 992px) {
    .sidebar {
        left: 0;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }

    /* 侧边栏触发区域 - 已禁用 */
    .sidebar-trigger-zone {
        display: none;
    }
}

.sidebar-header {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.42);
    color: var(--text-primary);
    border-bottom: 1px solid var(--sidebar-line);
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
}

.sidebar .nav-link {
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    border-radius: 10px;
    border-left: 0;
    margin: 0.18rem 0.55rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-surface);
    color: var(--text-primary);
}

.sidebar .nav-link.active {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
    border-left: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px rgba(10, 132, 255, 0.10);
}

.sidebar .nav-link i {
    margin-right: 0.5rem;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: var(--sidebar-icon-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 0;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    box-shadow: none;
}

.sidebar .nav-link.active i {
    color: var(--sidebar-active-text);
    background: color-mix(in srgb, white 86%, var(--accent-color) 14%);
    border-color: color-mix(in srgb, var(--accent-color) 12%, rgba(0, 0, 0, 0.06) 88%);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-color) 12%, transparent);
    transform: scale(1.04);
}

.sidebar .nav-link:hover i {
    transform: rotate(10deg) scale(1.1);
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
}

.content-wrapper {
    margin-left: 0;
    transition: all 0.15s;
    width: 100%;
}

/* 顶部导航栏样式 */
.top-navbar {
    background: transparent;
    box-shadow: none;
    position: relative;
    top: auto;
    z-index: auto;
    border-bottom: 0;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0;
}

.top-navbar-inner {
    min-height: 38px;
    gap: 6px;
    padding: 0 8px 0;
    align-items: flex-end !important;
    border-radius: 0 !important;
}

.mobile-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    white-space: nowrap;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mobile-theme-toggle:hover,
.mobile-theme-toggle:focus,
.mobile-theme-toggle:active {
    border-color: color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
    background: var(--tabs-active-bg);
    color: var(--text-primary);
}

.theme-toggle-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 64%, white 36%);
    flex: 0 0 10px;
}

.theme-toggle-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* 侧边栏切换按钮 */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 0;
    margin: -2px 0 0;
    font-size: 1.08rem;
    line-height: 1;
    color: #495057;
    transition: color 0.1s;
}

.sidebar-toggle:hover {
    color: var(--primary-color);
}

/* 响应式布局 */
@media (min-width: 992px) {
    .sidebar {
        transform: translateX(0);
    }

    .content-wrapper {
        margin-left: 260px;
        width: calc(100% - 260px);
        transition: margin-left 0.3s ease;
    }

    .top-header-shell,
    .top-navbar {
        display: none;
    }

    .mobile-theme-toggle {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .sidebar {
        left: 0;
        transform: translateX(-250px);
    }

    .sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    /* 移动端隐藏触发区域 */
    .sidebar-trigger-zone {
        display: none;
    }

    .top-navbar {
        margin-bottom: 0 !important;
    }

    .mobile-theme-toggle {
        flex: 0 0 auto;
    }

    .content-wrapper > .container {
        padding-top: 0;
    }

    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(15, 23, 42, 0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1025;
        display: none;
        pointer-events: none;
    }

    .sidebar-mobile-open .sidebar-backdrop {
        display: block;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    .card-title {
        font-size: 1rem;
    }
    .balance {
        font-size: 1.2rem;
    }
    .btn {
        padding: 0.375rem 0.75rem;
    }
    .table-responsive {
        font-size: 0.85rem;
    }
    .navbar-brand {
        font-size: 1.25rem;
    }
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .card-header {
        padding: 0.5rem 0.75rem;
    }
    .card-body {
        padding: 0.75rem;
    }
    .form-control {
        font-size: 0.9rem;
        padding: 0.375rem 0.5rem;
    }
    .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    .form-text {
        font-size: 0.75rem;
    }

    .top-navbar {
        margin-bottom: 0 !important;
        box-shadow: none;
        padding-bottom: 0.35rem !important;
    }

    .content-wrapper > .container {
        padding-top: 0;
    }

    .content-wrapper .tab-content {
        padding-top: 0.35rem;
    }

    .content-wrapper .tab-content > * {
        margin-top: 0 !important;
    }

    .content-wrapper .tab-content > * + * {
        margin-top: 0.5rem !important;
    }

    .content-wrapper .tab-content .card,
    .content-wrapper .tab-content .border,
    .content-wrapper .tab-content .border-top,
    .content-wrapper .tab-content .border-bottom,
    .content-wrapper .tab-content .border-start,
    .content-wrapper .tab-content .border-end {
        border: none !important;
    }

    .content-wrapper .tab-content .card-header {
        border-bottom: none !important;
        box-shadow: none !important;
        padding-bottom: 0.35rem !important;
    }

    .content-wrapper .tab-content hr,
    .content-wrapper .tab-content [style*="border-top"],
    .content-wrapper .tab-content [style*="border-bottom"] {
        border: none !important;
        box-shadow: none !important;
    }

    .content-wrapper .tab-content .row {
        --bs-gutter-y: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .content-wrapper .tab-content {
        padding-top: 0.35rem;
    }
}

/* 内嵌iframe容器样式 */
#projectIframeContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white-color);
    z-index: 2000;
    display: none;
    pointer-events: none;
}

#projectIframeContainer[style*="display: block"],
#projectIframeContainer[style*="display:block"] {
    pointer-events: auto;
}

#projectIframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 悬浮返回按钮样式 */
#backToPlateform {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, #2fd872, #28a745);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    cursor: pointer;
    z-index: 2001;
    transition: all 0.15s;
    border: 3px solid rgba(255, 255, 255, 0.7);
}

#backToPlateform::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 50%, rgba(255,255,255,0.2) 150%);
    border-radius: 50%;
}

#backToPlateform:hover {
    transform: scale(1.15) rotate(5deg);
    background: radial-gradient(circle, #34ea7e, #20c997);
}

#backToPlateform:hover .fas {
    animation: bounce-home 0.8s infinite;
}

@keyframes bounce-home {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* iframe加载状态 */
#iframeLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2005;
}

#iframeError {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 90%;
    display: none;
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 2005;
}

.site-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    padding: 12px 12px 12px 35px;
    border-radius: 12px;
    margin-top: 12px;
    font-size: 0.9em;
    position: relative;
}

.site-warning .fas {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #e0a800;
    animation: pulse-warning 2s infinite;
}

@keyframes pulse-warning {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

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

.btn-icon-text i {
    margin-right: 8px;
}

/* 优化图标样式 */
.fas, .far, .fab {
    transform: scale(1);
    transition: all 0.15s ease;
}

/* 图标旋转类 */
.icon-rotate {
    animation: icon-rotate 2s infinite linear;
}

@keyframes icon-rotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

/* 悬停时图标放大效果 */
a:hover .fas, button:hover .fas, a:hover .far, button:hover .far {
    transform: scale(1.2);
    color: inherit;
}

/* 给按钮中的图标添加弹跳动画 */
@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.jump-btn:hover .fas {
    animation: icon-bounce 0.8s ease infinite;
}

.docs-btn:hover .fas {
    animation: icon-bounce 0.8s ease 0.1s infinite;
}

/* 复制按钮图标旋转效果 */
@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.copy-btn:hover .fas {
    animation: icon-spin 1s linear;
    color: var(--primary-color);
}

/* 项目描述图标呼吸效果 */
@keyframes icon-pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

.project-description .fas {
    animation: icon-pulse 2s infinite;
    /* Color is defined in specific card variants */
}

/* ==================== Recharge 标签页：项目卡片 / 支付方式 / 权益 / 单价 / 结果 ==================== */
/* 优化项目卡片样式 */
.project-card {
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: var(--surface-card);
    position: relative;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.project-card::after {
    content: none;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.12);
    border-color: rgba(10, 132, 255, 0.18);
}

.project-card.clickable {
    cursor: pointer;
}

.project-card.clickable:active {
    transform: scale(0.985);
}

.project-card.disabled-project {
    opacity: 0.92;
}

.project-card .card-header {
    background: var(--surface-card);
    color: var(--text-primary);
    padding: 12px 14px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
    position: relative;
}

.project-card .card-header::after {
    content: none;
}

.project-card .compact-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.project-card .card-header .card-title {
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.project-card .project-id-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: color-mix(in srgb, var(--accent-soft) 72%, white 28%);
    color: var(--accent-strong);
    border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
    flex-shrink: 0;
}

.project-card .card-body {
    padding: 14px;
}

.project-card .balance-container {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(10, 132, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.project-card .balance-container::before {
    content: none;
}

.project-card .balance-container::after {
    content: none;
}

.project-card .balance-meta,
.project-card .balance-row {
    position: relative;
    z-index: 1;
}

.project-card .balance-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.project-card .balance-label {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1;
}

.project-card .balance-trend {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.project-card .balance-trend.is-positive {
    color: var(--success-color);
}

.project-card .balance-trend.is-waiting {
    color: var(--warning-color);
}

.project-card .balance-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.project-card .balance {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0;
    text-shadow: none;
    position: relative;
    line-height: 1;
}

.project-card .balance::before {
    content: "¥";
    font-size: 0.9rem;
    margin-right: 4px;
    color: var(--text-muted);
    font-weight: 700;
}

.project-card .compact-balance {
    padding: 10px 11px;
}

.project-card.simple-mode .balance-container {
    margin-bottom: 10px;
}

.project-card .key-container {
    position: relative;
    margin-bottom: 0;
}

.project-card .compact-key-container {
    margin-top: 12px;
}

.project-card .key-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.project-card .key-label {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    box-shadow: none;
    position: static;
}

.project-card .key-label::before {
    content: "";
}

.project-card .input-group,
.project-card .key-input-group {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    background: rgba(244, 248, 255, 0.92);
}

.project-card .form-control {
    border: none;
    padding: 10px 12px;
    background-color: transparent;
    color: #334155;
    font-size: 0.84rem;
}

.project-card .copy-btn {
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0;
    width: 34px;
    height: 34px;
    background-color: #f8fafc;
    color: #64748b;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.project-card .copy-btn:hover {
    background-color: #eef2ff;
    color: var(--primary-color);
    border-color: rgba(99, 102, 241, 0.2);
}

.project-card .action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 0;
}

.project-card .primary-actions {
    margin-bottom: 0;
}

.project-card .jump-btn {
    flex: 1;
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 42px;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent-soft) 54%, white 46%);
    color: var(--accent-strong);
    border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
    box-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.project-card .jump-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-1) 8%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 70%, white 30%);
}

.project-card .jump-btn:active {
    transform: translateY(0);
}

.project-card .jump-btn.disabled,
.project-card .jump-btn:disabled {
    background: color-mix(in srgb, var(--muted-soft) 88%, white 12%);
    color: var(--text-muted);
    border-color: color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.project-card .jump-btn .fas {
    background: rgba(255, 255, 255, 0.46);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    margin-right: 0;
    flex-shrink: 0;
}

.project-card .docs-btn {
    flex: 1;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--surface-tint) 72%, white 28%);
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--border-color));
    box-shadow: none;
    transition: all 0.1s;
}

.project-card .docs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px color-mix(in srgb, var(--theme-1) 8%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 54%, white 46%);
    color: var(--accent-strong);
}

.project-card .docs-btn .fas {
    background: rgba(255, 255, 255, 0.46);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
}

.project-card .project-card-details {
    margin-top: 12px;
}

.project-card .project-details-toggle {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #f8fafc;
    color: #475569;
    border-radius: 10px;
    min-height: 38px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.15s ease;
}

.project-card .project-details-toggle:hover {
    background: #eef2ff;
    border-color: rgba(99, 102, 241, 0.22);
    color: #3b4cca;
}

.project-card .details-chevron {
    transition: transform 0.18s ease;
    font-size: 0.76rem;
}

.project-card .project-details-toggle[aria-expanded="true"] .details-chevron {
    transform: rotate(180deg);
}

.project-card .project-details-collapse {
    margin-top: 10px;
}

.project-card .project-details-inner {
    padding-top: 2px;
}

.project-card .project-description {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.95);
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.project-card .project-description .fas {
    margin-top: 3px;
    flex-shrink: 0;
    line-height: 1;
}

.project-card.success .card-header,
.project-card.info .card-header,
.project-card.warning .card-header,
.project-card.danger .card-header {
    background: #f8fafc;
}

.project-card.success .project-description .fas,
.project-card.info .project-description .fas,
.project-card.warning .project-description .fas,
.project-card.danger .project-description .fas {
    color: var(--text-secondary);
    background-color: #f3f6fa;
}

/* 移动端优化 */
.input-group {
    flex-wrap: nowrap;
}

.btn-group {
    flex-wrap: nowrap;
}

.table-compact {
    font-size: 0.85rem;
}

.table-compact td, .table-compact th {
    padding: 0.4rem 0.5rem;
}

.compact-card {
    margin-bottom: 10px;
}

.compact-card .card-header {
    padding: 0.5rem 0.75rem;
}

.compact-card .card-body {
    padding: 0.75rem;
}

/* 加强移动端优化 */
@media (max-width: 576px) {
    .btn-sm, .btn-group-sm > .btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
    
    .card-title {
        font-size: 0.9rem;
    }
    
    .table {
        font-size: 0.75rem;
    }
    
    .input-group > .form-control {
        min-width: 0;
    }
    
    .btn-group {
        display: flex;
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .badge-key {
        max-width: 80px;
        font-size: 0.7rem;
    }
    
    /* 表格响应式优化 */
    #transferHistoryTable th, 
    #transferHistoryTable td,
    #projectsTable th, 
    #projectsTable td,
    #userApiKeysTable th,
    #userApiKeysTable td {
        padding: 0.3rem 0.4rem;
        font-size: 0.75rem;
    }
    
    /* 缩小历史记录图标 */
    .history-type {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    /* 改善过长溢出的内容 */
    .table td {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 底部间距 */
    .container {
        padding-bottom: 2rem;
    }
    
    /* Toast通知响应式 */
    .toast-container {
        top: 10px;
        right: 10px;
        max-width: 90%;
    }
    
    .toast {
        font-size: 0.85rem;
        max-width: 100%;
    }
    
    /* 项目卡片响应式优化 */
    .project-card {
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .project-card .card-header {
        padding: 10px 10px 9px;
    }

    .project-card .card-body {
        padding: 10px;
    }

    .project-card .compact-header-row {
        gap: 6px;
    }

    .project-card .card-title {
        font-size: 0.95rem;
    }

    .project-card .project-id-badge {
        min-height: 22px;
        padding: 0 7px;
        font-size: 0.65rem;
    }

    .project-card .balance-container {
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .project-card .balance-meta {
        margin-bottom: 6px;
        gap: 6px;
    }

    .project-card .balance-label,
    .project-card .balance-trend {
        font-size: 0.68rem;
    }

    .project-card .balance {
        font-size: 1.28rem;
    }

    .project-card .action-buttons {
        flex-direction: row;
        gap: 6px;
    }

    .project-card .action-buttons .btn,
    .project-card .jump-btn {
        flex: 1;
        min-height: 38px;
        font-size: 0.76rem;
        padding: 8px 8px;
    }

    .project-card .jump-btn .fas {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 0.7rem;
    }

    .project-card.simple-mode .card-title {
        font-size: 0.88rem;
    }

    .project-card.simple-mode .balance-container {
        padding: 9px;
    }

    .project-card.simple-mode .balance {
        font-size: 1.12rem;
    }

    .project-card .project-card-details {
        margin-top: 10px;
    }

    .project-card .project-details-toggle {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 0.74rem;
        border-radius: 9px;
    }

    .project-card .project-details-collapse {
        margin-top: 8px;
    }

    .project-card .compact-key-container {
        margin-top: 10px;
    }

    .project-card .key-header-row {
        margin-bottom: 6px;
    }

    .project-card .key-label {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
    }

    .project-card .form-control {
        padding: 8px 10px;
        font-size: 0.76rem;
    }

    .project-card .copy-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .project-card .project-description {
        margin-top: 10px !important;
        padding: 8px 9px;
        font-size: 0.74rem;
        line-height: 1.38;
    }

    .project-card .project-description .fas {
        margin-top: 2px;
        font-size: 0.72rem;
    }
}

/* 工单详情内联展示样式 */
.ticket-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    width: 100%;
    height: 80vh;
    max-height: 600px;
    z-index: 1060;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
    transform: translateY(-50%);
}

.ticket-sidebar.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.ticket-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.ticket-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: #ffffff;
    box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
}

.ticket-sidebar.show .ticket-sidebar-content {
    transform: translateX(0);
}

/* 工单侧边栏头部 - 简洁设计 */
.ticket-sidebar-header {
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.ticket-sidebar-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: #495057;
}

.ticket-sidebar-header .btn-close {
    opacity: 0.6;
    transition: opacity 0.1s;
}

.ticket-sidebar-header .btn-close:hover {
    opacity: 1;
}

/* 工单侧边栏主体 - 简洁滚动 */
.ticket-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.ticket-sidebar-body::-webkit-scrollbar {
    width: 4px;
}

.ticket-sidebar-body::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.ticket-sidebar-body::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}

/* 工单信息区域 - 水平布局优化 */
.ticket-info-card {
    padding: 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.ticket-info-header {
    margin-bottom: 1rem;
}

.ticket-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
}

.ticket-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.ticket-id {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 500;
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
}

.ticket-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-status.open {
    background: #fff3cd;
    color: #856404;
}

.ticket-status.processing {
    background: #d1ecf1;
    color: #0c5460;
}

.ticket-status.waiting_user {
    background: #ffeaa7;
    color: #d68910;
}

.ticket-status.resolved {
    background: #d4edda;
    color: #155724;
}

.ticket-status.closed {
    background: #f8d7da;
    color: #721c24;
}

/* 信息水平布局 - 真正利用宽度 */
.ticket-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
    align-items: center;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.info-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.85rem;
    min-width: fit-content;
}

.info-label::after {
    content: ":";
    margin-left: 0.2rem;
}

.info-value {
    color: #495057;
    font-weight: 400;
    font-size: 0.9rem;
    min-width: fit-content;
}

.ticket-description {
    margin-top: 1rem;
}

.description-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.description-content {
    color: #495057;
    line-height: 1.5;
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9rem;
    border: 1px solid #e9ecef;
}

/* 管理员控制区域 - 紧凑水平布局 */
.admin-controls {
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.admin-controls-header h6 {
    color: #495057;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

/* 控制组水平布局 */
.admin-controls-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: end;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 120px;
}

.control-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.8rem;
}

.control-group .form-select {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #ffffff;
    min-width: 120px;
}

.control-group .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 120px;
}

.control-group .btn-warning {
    background: #ffc107;
    border-color: #ffc107;
    color: #000;
}

.control-group .btn-info {
    background: #0dcaf0;
    border-color: #0dcaf0;
    color: #000;
}

.control-group .btn-success {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

/* 全宽操作按钮 */
.control-group.full-width {
    width: 100%;
    margin-top: 0.5rem;
}

.control-group.full-width .btn {
    min-width: 100%;
}

/* 回复区域 - 紧凑对话设计 */
.replies-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.replies-header h6 {
    color: #495057;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.replies-container {
    max-height: 350px;
    overflow-y: auto;
}

.replies-container::-webkit-scrollbar {
    width: 4px;
}

.replies-container::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.replies-container::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 2px;
}

.reply-item {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #6c8bff;
}

.reply-item.admin-reply {
    border-left-color: #ffc107;
    background: #fffbf0;
}

.reply-item:last-child {
    margin-bottom: 0;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.reply-author {
    font-weight: 600;
    color: #495057;
    font-size: 0.85rem;
}

/* 管理员回复作者样式 */
.reply-item.admin-reply .reply-author {
    color: #856404;
    font-weight: 700;
}

.reply-item.admin-reply .reply-author::before {
    content: "👑 ";
    font-size: 0.75rem;
    margin-right: 3px;
}

.reply-time {
    color: #6c757d;
    font-size: 0.8rem;
    font-family: monospace;
}

.reply-content {
    color: #495057;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.9rem;
}

.no-replies-message {
    text-align: center;
    color: #6c757d;
    padding: 2rem;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px dashed #dee2e6;
}

/* 回复表单区域 - 拟态风格设计 */
.reply-form-section {
    padding: 1.5rem 1.5rem;
    background: linear-gradient(145deg, #f0f4f8, #e8eef5);
    border-top: none;
    border-radius: 20px;
    margin: 1rem 1.25rem;
    box-shadow:
        8px 8px 16px rgba(163, 177, 198, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
}

.reply-form-section h6.section-title {
    color: #495057;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.reply-form-section .form-control {
    border: none;
    border-radius: 15px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    background: linear-gradient(145deg, #e8eef5, #f0f4f8);
    box-shadow:
        inset 4px 4px 8px rgba(163, 177, 198, 0.3),
        inset -4px -4px 8px rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 80px;
    color: #2c3e50;
}

.reply-form-section .form-control::placeholder {
    color: #95a5b8;
    opacity: 1;
}

.reply-form-section .form-control:focus {
    outline: none;
    background: linear-gradient(145deg, #e4ebf2, #ecf2f9);
    box-shadow:
        inset 6px 6px 12px rgba(163, 177, 198, 0.35),
        inset -6px -6px 12px rgba(255, 255, 255, 0.75);
}

.reply-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* 拟态风格按钮 */
.reply-form-section .btn {
    font-size: 0.85rem;
    padding: 0.65rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    position: relative;
}

.reply-form-section .btn-primary {
    background: linear-gradient(145deg, #667eea, #764ba2);
    color: white;
    box-shadow:
        6px 6px 12px rgba(118, 75, 162, 0.3),
        -6px -6px 12px rgba(102, 126, 234, 0.3);
}

.reply-form-section .btn-primary:hover {
    background: linear-gradient(145deg, #5568d3, #6a4191);
    box-shadow:
        4px 4px 8px rgba(118, 75, 162, 0.4),
        -4px -4px 8px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
}

.reply-form-section .btn-primary:active {
    box-shadow:
        inset 3px 3px 6px rgba(118, 75, 162, 0.4),
        inset -3px -3px 6px rgba(102, 126, 234, 0.2);
    transform: translateY(0);
}

.reply-form-section .btn-outline-secondary {
    background: linear-gradient(145deg, #f0f4f8, #e8eef5);
    color: #495057;
    box-shadow:
        5px 5px 10px rgba(163, 177, 198, 0.35),
        -5px -5px 10px rgba(255, 255, 255, 0.7);
}

.reply-form-section .btn-outline-secondary:hover {
    background: linear-gradient(145deg, #e8eef5, #e0e8f0);
    box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.4),
        -3px -3px 6px rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    color: #495057;
}

.reply-form-section .btn-outline-secondary:active {
    box-shadow:
        inset 3px 3px 6px rgba(163, 177, 198, 0.3),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5);
    transform: translateY(0);
}

/* 文件输入完全隐藏 */
.file-input-completely-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 文件预览容器 - 拟态风格 */
.reply-form-section .file-preview-container {
    background: linear-gradient(145deg, #e0e8f0, #ecf2f9);
    border-radius: 15px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow:
        inset 3px 3px 6px rgba(163, 177, 198, 0.25),
        inset -3px -3px 6px rgba(255, 255, 255, 0.6);
}

.reply-form-section .file-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.reply-form-section .file-preview-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #495057;
    font-weight: 500;
    font-size: 0.9rem;
}

.reply-form-section .file-preview-title i {
    color: #667eea;
}

.reply-form-section .file-remove-btn {
    background: linear-gradient(145deg, #f0f4f8, #e8eef5);
    color: #dc3545;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        4px 4px 8px rgba(163, 177, 198, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.reply-form-section .file-remove-btn:hover {
    box-shadow:
        2px 2px 4px rgba(163, 177, 198, 0.4),
        -2px -2px 4px rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.reply-form-section .file-remove-btn:active {
    box-shadow:
        inset 2px 2px 4px rgba(163, 177, 198, 0.3),
        inset -2px -2px 4px rgba(255, 255, 255, 0.5);
    transform: translateY(0);
}

.reply-form-section .file-preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.3),
        -3px -3px 6px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.reply-form-section .file-preview-image:hover {
    transform: scale(1.02);
}

.reply-form-section .file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.reply-form-section .file-size-badge {
    background: linear-gradient(145deg, #667eea, #764ba2);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow:
        2px 2px 4px rgba(118, 75, 162, 0.3),
        -2px -2px 4px rgba(102, 126, 234, 0.2);
}

/* 错误提示拟态风格 */
.reply-form-section .alert-danger {
    background: linear-gradient(145deg, #ffe0e0, #ffecec);
    color: #dc3545;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    box-shadow:
        inset 2px 2px 4px rgba(220, 53, 69, 0.15),
        inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}

/* 移动端优化 - 紧凑布局 */
@media (max-width: 768px) {
    .ticket-sidebar {
        height: 85vh;
        max-height: none;
    }

    .ticket-sidebar-content {
        max-width: 100%;
        border-radius: 8px 8px 0 0;
    }

    .ticket-info-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .info-item {
        width: 100%;
        justify-content: space-between;
    }

    .admin-controls-grid {
        flex-direction: column;
        gap: 0.75rem;
    }

    .control-group {
        min-width: 100%;
    }

    .replies-container {
        max-height: 280px;
    }

    .reply-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .reply-actions .btn,
    .reply-form-section .btn {
        width: 100%;
    }

    /* 移动端拟态表单优化 */
    .reply-form-section {
        padding: 1rem 1rem;
        margin: 0.75rem 1rem;
        border-radius: 16px;
    }

    .reply-form-section .form-control {
        padding: 0.75rem 0.85rem;
        font-size: 0.85rem;
        min-height: 70px;
    }
}

@media (max-width: 480px) {
    .ticket-sidebar {
        height: 90vh;
    }
    
    .ticket-sidebar-header {
        padding: 0.75rem;
    }
    
    .ticket-sidebar-header h5 {
        font-size: 1rem;
    }
    
    .ticket-info-card {
        padding: 1rem;
    }
    
    .admin-controls,
    .replies-section {
        padding: 0.75rem 1rem;
    }

    .reply-form-section {
        padding: 0.85rem 0.85rem;
        margin: 0.5rem 0.75rem;
        border-radius: 14px;
    }

    .ticket-title {
        font-size: 0.95rem;
    }

    .ticket-id,
    .ticket-status {
        font-size: 0.8rem;
    }

    .info-label,
    .info-value {
        font-size: 0.85rem;
    }

    .description-content {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .reply-item {
        padding: 0.6rem;
        margin-bottom: 0.5rem;
    }

    .reply-author {
        font-size: 0.8rem;
    }

    .reply-content {
        font-size: 0.85rem;
    }

    .reply-form-section h6.section-title {
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    .reply-form-section .form-control {
        font-size: 0.85rem;
        min-height: 60px;
        padding: 0.65rem 0.75rem;
        border-radius: 12px;
    }

    .reply-form-section .btn {
        font-size: 0.8rem;
        padding: 0.55rem 1rem;
    }

    .replies-container {
        max-height: 200px;
    }
}
/* 工单详情页面样式 */
#ticketDetailPage {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 20px 0;
    animation: fadeIn 0.3s ease-out;
}

/* 工单徽章通用样式 */
#ticketDetailPage .ticket-meta .badge {
    display: inline-block;
    min-width: auto;
    text-align: center;
    vertical-align: middle;
}

#ticketDetailPage .page-header {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

#ticketDetailPage .card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: none;
}

#ticketDetailPage .section-title {
    color: #495057;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

#ticketDetailPage .info-item {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid #6c8bff;
}

#ticketDetailPage .info-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 4px;
}

#ticketDetailPage .info-value {
    color: #495057;
    font-weight: 600;
    font-size: 1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#ticketDetailSection .card-header {
    background: linear-gradient(135deg, #7a97ff, #a2b3ff);
    color: white;
    border-bottom: none;
}

#ticketDetailSection .card-header h5 {
    font-weight: 600;
    margin: 0;
}

/* 工单标题和状态样式 */
.ticket-title {
    color: #495057;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;
}

.ticket-meta .badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
}

.ticket-meta .ticket-id {
    font-family: monospace;
}

/* 状态颜色 */
.badge.open {
    background: #fff3cd;
    color: #856404;
}

.badge.processing {
    background: #d1ecf1;
    color: #0c5460;
}

.badge.waiting_user {
    background: #ffeaa7;
    color: #d68910;
}

.badge.resolved {
    background: #d4edda;
    color: #155724;
}

.badge.closed {
    background: #f8d7da;
    color: #721c24;
}

/* 优先级颜色 */
.badge.low {
    background: #e2e3e5;
    color: #6c757d;
}

.badge.medium {
    background: #d1ecf1;
    color: #0c5460;
}

.badge.high {
    background: #fff3cd;
    color: #856404;
}

.badge.critical {
    background: #f8d7da;
    color: #721c24;
}

/* Bootstrap兼容的bg-orange类 */
.bg-orange {
    background-color: #ff8c00 !important;
    color: #ffffff !important;
}

/* 回复区域样式 - 拟态风格 (Neumorphism) */
.replies-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: #e8ecf1;
    border-radius: 20px;
    /* 内凹拟态效果 */
    box-shadow:
        inset 8px 8px 16px #d1d5db,
        inset -8px -8px 16px #ffffff;
}

.replies-container::-webkit-scrollbar {
    width: 6px;
}

.replies-container::-webkit-scrollbar-track {
    background: transparent;
}

.replies-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c5cdd8, #a8b2c1);
    border-radius: 10px;
    box-shadow:
        2px 2px 4px rgba(0,0,0,0.1),
        -2px -2px 4px rgba(255,255,255,0.5);
}

.replies-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #b5bdc8, #98a2b1);
}

.reply-item {
    margin-bottom: 1.2rem;
    padding: 1.2rem;
    background: #e8ecf1;
    border-radius: 18px;
    /* 外凸拟态效果 - 用户回复 */
    box-shadow:
        10px 10px 20px #c5cdd8,
        -10px -10px 20px #ffffff,
        inset 0 0 0 1px rgba(255,255,255,0.5);
    border-left: 4px solid #6c8bff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 拟态光泽效果 */
.reply-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}

.reply-item:hover {
    transform: translateY(-3px);
    box-shadow:
        12px 12px 24px #c5cdd8,
        -12px -12px 24px #ffffff,
        inset 0 0 0 1px rgba(255,255,255,0.7);
}

.reply-item.admin-reply {
    background: #fff8e8;
    border-left: 4px solid #ffc107;
    /* 管理员回复特殊拟态效果 */
    box-shadow:
        10px 10px 20px #e8dfc8,
        -10px -10px 20px #fffef8,
        inset 0 0 0 1px rgba(255,255,255,0.6);
}

.reply-item.admin-reply::before {
    background: linear-gradient(180deg, rgba(255,248,220,0.5) 0%, transparent 100%);
}

.reply-item.admin-reply:hover {
    box-shadow:
        12px 12px 24px #e8dfc8,
        -12px -12px 24px #fffef8,
        inset 0 0 0 1px rgba(255,255,255,0.8);
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
}

.reply-author {
    font-weight: 700;
    color: #495057;
    font-size: 0.95rem;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reply-time {
    color: #6c757d;
    font-size: 0.8rem;
    font-family: 'Monaco', 'Courier New', monospace;
    background: rgba(255,255,255,0.5);
    padding: 4px 10px;
    border-radius: 12px;
    box-shadow:
        2px 2px 5px rgba(0,0,0,0.05),
        -2px -2px 5px rgba(255,255,255,0.7);
}

.reply-content {
    color: #495057;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* 移动端专用样式 */
.ticket-mobile-header {
    border-radius: 8px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 12px;
    margin: -12px -12px 12px -12px;
}

.ticket-status-badges {
    display: flex;
    gap: 4px;
    align-items: center;
}

.mobile-info-grid {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.mobile-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    min-height: 44px;
}

.mobile-info-row:last-child {
    border-bottom: none;
}

.mobile-info-label {
    color: #6c757d;
    font-weight: 500;
    font-size: 0.9rem;
    flex-shrink: 0;
    min-width: 60px;
}

.mobile-info-value {
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    word-break: break-word;
    flex: 1;
    margin-left: 15px;
}

/* Bootstrap fs-7 补充 */
.fs-7 {
    font-size: 0.75rem !important;
}

/* 工单详情页面移动端响应式样式 */
@media (max-width: 768px) {
    #ticketDetailPage {
        padding: 10px 0;
        background-color: #f8f9fa;
    }
    
    #ticketDetailPage .page-header {
        margin: 0 10px 15px 10px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    #ticketDetailPage .container-fluid {
        padding: 0 10px;
    }
    
    #ticketDetailPage .card {
        margin: 0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    #ticketDetailPage .card-header {
        padding: 15px;
        background: white;
        border-bottom: 1px solid #e9ecef;
    }
    
    #ticketDetailPage .ticket-title {
        font-size: 1.1rem;
        line-height: 1.3;
        color: #495057;
        margin: 0;
    }
    
    /* 移动端列布局优化 */
    #ticketDetailPage .row {
        margin: 0;
    }
    
    #ticketDetailPage .col-lg-8,
    #ticketDetailPage .col-lg-4 {
        padding: 15px;
    }
    
    #ticketDetailPage .col-lg-4 {
        order: -1;
        padding-bottom: 0;
    }
    
    #ticketDetailPage .sticky-top {
        position: static !important;
    }
    
    /* 移动端区域标题 */
    #ticketDetailPage .section-title {
        font-size: 1rem;
        margin-bottom: 12px;
        color: #495057;
        font-weight: 600;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 8px;
    }
    
    /* 问题描述优化 */
    #ticketDetailPage .description-content {
        padding: 15px;
        font-size: 0.9rem;
        line-height: 1.6;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        word-break: break-word;
    }
    
    /* 回复区域优化 - 拟态风格 */
    #ticketDetailPage .replies-container {
        background: #e8ecf1;
        border-radius: 16px;
        padding: 10px;
        box-shadow:
            inset 6px 6px 12px #d1d5db,
            inset -6px -6px 12px #ffffff;
    }

    #ticketDetailPage .reply-item {
        padding: 15px;
        margin-bottom: 12px;
        border-radius: 16px;
        background: #e8ecf1;
        border-left: 4px solid #6c8bff;
        box-shadow:
            8px 8px 16px #c5cdd8,
            -8px -8px 16px #ffffff,
            inset 0 0 0 1px rgba(255,255,255,0.5);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    #ticketDetailPage .reply-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
        border-radius: 16px 16px 0 0;
        pointer-events: none;
    }

    #ticketDetailPage .reply-item:hover {
        transform: translateY(-2px);
        box-shadow:
            10px 10px 20px #c5cdd8,
            -10px -10px 20px #ffffff,
            inset 0 0 0 1px rgba(255,255,255,0.7);
    }

    /* 管理员回复特殊样式 */
    #ticketDetailPage .reply-item.admin-reply {
        background: #fff8e8 !important;
        border-left: 4px solid #ffc107 !important;
        box-shadow:
            8px 8px 16px #e8dfc8,
            -8px -8px 16px #fffef8,
            inset 0 0 0 1px rgba(255,255,255,0.6) !important;
    }

    #ticketDetailPage .reply-item.admin-reply::before {
        background: linear-gradient(180deg, rgba(255,248,220,0.4) 0%, transparent 100%);
    }

    #ticketDetailPage .reply-item.admin-reply:hover {
        box-shadow:
            10px 10px 20px #e8dfc8,
            -10px -10px 20px #fffef8,
            inset 0 0 0 1px rgba(255,255,255,0.8) !important;
    }
    
    #ticketDetailPage .reply-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    #ticketDetailPage .reply-author {
        font-size: 0.9rem;
        font-weight: 700;
        color: #495057;
        text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
    }

    /* 管理员回复的作者样式 */
    #ticketDetailPage .reply-item.admin-reply .reply-author {
        color: #856404;
        font-weight: 700;
    }

    #ticketDetailPage .reply-item.admin-reply .reply-author::before {
        content: "👑 ";
        font-size: 0.8rem;
        margin-right: 2px;
    }

    #ticketDetailPage .reply-time {
        font-size: 0.75rem;
        color: #6c757d;
        font-family: 'Monaco', 'Courier New', monospace;
        background: rgba(255,255,255,0.5);
        padding: 3px 8px;
        border-radius: 10px;
        box-shadow:
            2px 2px 4px rgba(0,0,0,0.05),
            -2px -2px 4px rgba(255,255,255,0.7);
    }

    #ticketDetailPage .reply-content {
        font-size: 0.9rem;
        line-height: 1.6;
        color: #495057;
        word-break: break-word;
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    }

    #ticketDetailPage .replies-container {
        max-height: 300px;
    }
    
    /* 回复表单优化 - 覆盖保持拟态风格 */
    #ticketDetailPage .reply-form-section {
        /* 继承拟态风格,无需覆盖 */
    }

    #ticketDetailPage .reply-form-section textarea {
        /* 继承拟态风格,无需覆盖 */
    }
    
    #ticketDetailPage .d-grid button {
        padding: 12px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    #ticketDetailPage {
        padding: 5px 0;
    }
    
    #ticketDetailPage .page-header {
        margin: 0 5px 10px 5px;
        padding: 12px;
    }
    
    #ticketDetailPage .container-fluid {
        padding: 0 5px;
    }
    
    #ticketDetailPage .card-header,
    #ticketDetailPage .col-lg-8,
    #ticketDetailPage .col-lg-4 {
        padding: 12px;
    }
    
    #ticketDetailPage .ticket-title {
        font-size: 1rem;
    }
    
    .ticket-status-badges .badge {
        font-size: 0.7rem !important;
        padding: 3px 6px !important;
    }
    
    .mobile-info-row {
        padding: 10px 12px;
        min-height: 40px;
    }
    
    .mobile-info-label {
        font-size: 0.85rem;
        min-width: 50px;
    }
    
    .mobile-info-value {
        font-size: 0.85rem;
        margin-left: 10px;
    }
    
    #ticketDetailPage .section-title {
        font-size: 0.95rem;
    }
    
    #ticketDetailPage .description-content {
        padding: 12px;
        font-size: 0.85rem;
    }
    
    #ticketDetailPage .reply-item {
        padding: 12px;
        /* 确保用户回复的蓝色样式 */
        background: #f8f9fa;
        border-left: 4px solid #6c8bff;
    }
    
    #ticketDetailPage .reply-item.admin-reply {
        background: #fffbf0 !important;
        border-left: 4px solid #ffc107 !important;
        border-color: #ffeaa7 !important;
    }
    
    #ticketDetailPage .reply-author {
        font-size: 0.85rem;
    }
    
    /* 小屏幕管理员回复样式 */
    #ticketDetailPage .reply-item.admin-reply .reply-author {
        color: #856404;
        font-weight: 700;
    }
    
    #ticketDetailPage .reply-item.admin-reply .reply-author::before {
        content: "👑 ";
        font-size: 0.7rem;
        margin-right: 2px;
    }
    
    #ticketDetailPage .reply-time {
        font-size: 0.75rem;
    }
    
    #ticketDetailPage .reply-content {
        font-size: 0.85rem;
    }
    
    #ticketDetailPage .replies-container {
        max-height: 200px;
    }
    
    #ticketDetailPage .reply-form-section {
        /* 继承拟态风格,只调整移动端间距 */
        padding: 0.85rem;
        margin: 0.5rem 0.75rem;
    }

    #ticketDetailPage .reply-form-section textarea {
        /* 继承拟态风格 */
    }
    
    #ticketDetailPage .d-grid button {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* 数据统计样式 */
.statistics-content {
    padding: 15px;
    font-size: 0.9rem;
}

.statistics-overview h6 {
    color: #495057;
    font-weight: 600;
}

.project-stat-card {
    transition: all 0.1s ease;
}

.project-stat-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

.stat-details {
    margin-bottom: 10px;
}

.stat-item {
    text-align: center;
    padding: 8px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.stat-item small {
    font-size: 0.75rem;
    color: #6c757d;
}

.user-project-details .user-stat-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.1s ease;
}

.user-project-details .user-stat-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-badge {
    background: #6c757d;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.username {
    font-weight: 500;
    color: #495057;
}

.user-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-details {
    font-size: 0.8rem;
    color: #6c757d;
}

.user-bill-details .transfer-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.1s ease;
}

.user-bill-details .transfer-item:hover {
    background: #e9ecef;
}

.transfer-item .badge {
    font-size: 0.75rem;
}

.statistics-empty-state {
    text-align: center;
    padding: 30px;
    color: #6c757d;
}

.statistics-empty-state i {
    font-size: 2rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* 简约模式下的数据统计样式 */
.simple-mode .statistics-content {
    padding: 10px;
}

.simple-mode .project-stat-card {
    padding: 10px;
    margin-bottom: 8px;
}

.simple-mode .stat-item {
    padding: 6px;
}

.simple-mode .user-stat-card {
    padding: 8px;
    margin-bottom: 6px;
}

.simple-mode .user-info {
    gap: 6px;
}

.simple-mode .rank-badge {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

.simple-mode .transfer-item {
    padding: 8px;
    margin-bottom: 6px;
}

.simple-mode .statistics-empty-state {
    padding: 20px;
}

.simple-mode .statistics-empty-state i {
    font-size: 1.5rem;
}

/* 项目收益统计样式 */
#projectNetProfitContainer .cc-net-profit-summary-card {
    border: 1px solid rgba(13, 110, 253, 0.08);
}

#projectNetProfitContainer .cc-net-profit-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#projectNetProfitContainer .cc-net-profit-kpi {
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 12px;
}

#projectNetProfitContainer .cc-net-profit-kpi-primary {
    background-color: #f8fbff !important;
}

#projectNetProfitContainer .cc-net-profit-kpi-success {
    background-color: #f5fcf8 !important;
}

#projectNetProfitContainer .cc-net-profit-kpi-danger {
    background-color: #fff8f8 !important;
}

#projectNetProfitContainer .cc-net-profit-project-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

#projectNetProfitContainer .cc-net-profit-action-btn {
    border-radius: var(--button-radius);
    font-weight: 600;
}

#projectNetProfitContainer .cc-net-profit-card-positive {
    border-top: 3px solid rgba(25, 135, 84, 0.55) !important;
}

#projectNetProfitContainer .cc-net-profit-card-negative {
    border-top: 3px solid rgba(220, 53, 69, 0.5) !important;
}

#projectNetProfitContainer .cc-net-profit-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
}

#projectNetProfitContainer .cc-net-profit-main-number {
    font-size: 1.7rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#projectNetProfitContainer .cc-net-profit-mini-card {
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 10px;
}

#projectNetProfitContainer .cc-net-profit-mini-number {
    font-size: 1.05rem;
}

#projectNetProfitContainer .cc-net-profit-formula {
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.08);
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    #projectNetProfitContainer .cc-net-profit-main-number {
        font-size: 1.4rem;
    }

    #projectNetProfitContainer .cc-net-profit-caption {
        justify-content: flex-start;
    }
}

.stat-overview-item {
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: transform 0.2s ease;
}

.stat-overview-item:hover {
    transform: translateY(-2px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.15s ease;
}

.stat-overview-item:hover .stat-icon {
    transform: scale(1.1);
}

.stat-value {
    font-weight: 700;
    margin: 0;
    transition: color 0.15s ease;
}

.stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.project-stat-card {
    transition: all 0.15s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.project-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.stat-item {
    transition: all 0.15s ease;
    border-radius: var(--border-radius);
}

.stat-item:hover {
    background-color: rgba(108, 139, 255, 0.05);
    transform: translateY(-2px);
}

.stat-item .stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-size: 0.9rem;
}

.hover-shadow-transition {
    transition: all 0.15s ease;
}

.hover-shadow-transition:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* 统计页面动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-overview-item,
.project-stat-card {
    animation: fadeInUp 0.6s ease-out;
}

.stat-overview-item:nth-child(1) { animation-delay: 0.1s; }
.stat-overview-item:nth-child(2) { animation-delay: 0.2s; }
.stat-overview-item:nth-child(3) { animation-delay: 0.3s; }
.stat-overview-item:nth-child(4) { animation-delay: 0.4s; }

.project-stat-card:nth-child(1) { animation-delay: 0.5s; }
.project-stat-card:nth-child(2) { animation-delay: 0.6s; }


/* 随机密钥模态框样式 - 简约快捷选择风格 */
.project-selection-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}

.project-selection-card {
    position: relative;
    transition: all 0.25s ease;
    border: 1.5px solid #dee2e6;
    border-radius: 6px;
    padding: 8px 14px;
    background: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

.project-selection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    border-color: #17a2b8;
}

.project-selection-card.selected {
    border-color: #17a2b8;
    background: linear-gradient(135deg, #e6f7f9 0%, #f0f9fa 100%);
    box-shadow: 0 3px 12px rgba(23, 162, 184, 0.2);
}

.project-selection-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17a2b8, #138496);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    flex-shrink: 0;
}

.project-selection-name {
    font-weight: 500;
    color: #2c3e50;
}

.project-selection-balance {
    font-size: 0.75rem;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.project-selection-balance i {
    color: #ffc107;
    font-size: 10px;
}

.project-selection-card.selected .project-selection-balance {
    color: #17a2b8;
    font-weight: 600;
}

/* 选中标记 */
.project-selection-card::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #17a2b8;
    color: white;
    font-size: 8px;
    display: none;
    align-items: center;
    justify-content: center;
}

.project-selection-card.selected::after {
    display: flex;
}

@media (max-width: 768px) {
    .project-selection-card {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        justify-content: center;
    }
}

/* ============ 客户工单优化样式 ============ */

/* 桌面端表格优化 */
@media (min-width: 768px) {
    #customerTicketsListDesktop tr {
        transition: background-color 0.15s ease;
    }
    #customerTicketsListDesktop tr:hover {
        background-color: rgba(74, 107, 239, 0.03);
    }
    #customerTicketsListDesktop .btn-group-sm > .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* 移动端工单卡片优化 */
#customerTicketsListMobile .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#customerTicketsListMobile .card:active {
    transform: scale(0.98);
}

/* 工单详情模态框优化 */
#customerTicketDetailModal .modal-content {
    border-radius: 12px;
}

#customerTicketDetailModal .modal-header {
    padding: 1rem 1.5rem;
}

#customerTicketDetailModal .badge {
    padding: 0.4em 0.8em;
    font-weight: 500;
}

/* 回复聊天气泡样式 */
#ctDetailReplies .card {
    border-radius: 12px;
}

#ctDetailReplies .card.bg-light {
    background-color: #f8f9fa !important;
}

#ctDetailReplies .card:not(.bg-light) {
    background: linear-gradient(135deg, rgba(74, 107, 239, 0.08) 0%, rgba(74, 107, 239, 0.05) 100%) !important;
}

/* 图片预览模态框 */
#imagePreviewModal .modal-content {
    background: transparent;
}

#imagePreviewModal .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

#imagePreviewModal .btn-close {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 补偿信息卡片边框 */
#ctCompensationCard {
    border-left-width: 4px !important;
}

/* 响应式调整 */
@media (max-width: 576px) {
    #customerTicketDetailModal .modal-dialog {
        margin: 0.5rem;
    }

    #customerTicketDetailModal .modal-body {
        padding: 1rem !important;
    }

    #customerTicketsListMobile .btn-group-sm .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
}

/* 状态徽章颜色增强 */
.badge.bg-info.bg-opacity-10 {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: #0dcaf0 !important;
}

.badge.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #dc3545 !important;
}

.badge.bg-primary.bg-opacity-10 {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #0d6efd !important;
}

/* 空状态图标动画 */
#customerTicketsListDesktop .fa-inbox,
#customerTicketsListMobile .fa-inbox {
    opacity: 0.5;
}

#ctDetailReplies .fa-comment-slash {
    opacity: 0.4;
}

/* 客户工单表格不换行样式 */
#customerTicketsTable {
    white-space: nowrap;
}
#customerTicketsTable td, #customerTicketsTable th {
    white-space: nowrap;
}

/* ==================== History 标签页：筛选 / 统计 / 表格 ==================== */
/* ============ 交易历史移动端优化 ============ */
#history-content .card-header h5 {
    line-height: 1.35;
}

#history-content #historyTypeFilter .btn {
    white-space: nowrap;
}

#history-content #transferHistoryTable td,
#history-content #transferHistoryTable th {
    vertical-align: middle;
}

#history-content #transferHistoryTable {
    min-width: 680px;
}

#history-content #transferHistoryTable th,
#history-content #transferHistoryTable td {
    white-space: nowrap;
}

#history-content #transferHistoryTable th {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    background-color: #f8f9fa;
}

#history-content #transferHistoryTable td {
    font-size: 0.92rem;
}

#history-content .badge.rounded-pill {
    color: #495057 !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    font-weight: 500;
}

#history-content #totalReceived {
    color: #198754 !important;
    text-shadow: none;
}

#history-content #totalSent {
    color: #dc3545 !important;
    text-shadow: none;
}

#history-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    #history-content .card-header {
        padding: 0.75rem 0.75rem 0.55rem !important;
    }

    #history-content .history-header-row {
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    #history-content .history-header-badges {
        flex-shrink: 0;
    }

    #history-content .card-body.bg-light {
        padding: 0.5rem !important;
    }

    #history-content .badge.rounded-pill {
        font-size: 0.66rem;
        padding: 0.24rem 0.5rem !important;
        line-height: 1.2;
    }

    #history-content .form-label.small {
        font-size: 0.68rem;
        margin-bottom: 0.28rem !important;
        white-space: nowrap;
    }

    #history-content .searchable-select,
    #history-content .select2-container--bootstrap-5 .select2-selection {
        min-height: 34px;
        height: 34px;
        font-size: 0.78rem;
    }

    #history-content .history-filter-top {
        margin-bottom: 0.4rem !important;
    }

    #history-content .history-filter-grid {
        --bs-gutter-x: 0.45rem;
        --bs-gutter-y: 0.35rem;
    }

    #history-content #historyTypeFilter {
        display: flex;
        width: 100%;
        box-shadow: none !important;
        flex-wrap: nowrap;
    }

    #history-content #historyTypeFilter .btn {
        flex: 1 1 0;
        padding: 0.42rem 0.15rem;
        font-size: 0.74rem;
        line-height: 1.15;
        border-radius: 0 !important;
    }

    #history-content #historyTypeFilter .btn:first-child {
        border-top-left-radius: 0.375rem !important;
        border-bottom-left-radius: 0.375rem !important;
    }

    #history-content #historyTypeFilter .btn:last-child {
        border-top-right-radius: 0.375rem !important;
        border-bottom-right-radius: 0.375rem !important;
    }

    #history-content .history-stats-row {
        --bs-gutter-x: 0.45rem;
        --bs-gutter-y: 0.45rem;
    }

    #history-content .history-stat-icon,
    #history-content .rounded-circle[style*='52px'] {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px;
    }

    #history-content .fs-4 {
        font-size: 0.95rem !important;
        line-height: 1.15;
        white-space: nowrap;
    }

    #history-content #transferHistoryTable {
        min-width: 560px;
    }

    #history-content #transferHistoryTable th,
    #history-content #transferHistoryTable td {
        padding-top: 0.46rem;
        padding-bottom: 0.46rem;
        font-size: 0.76rem;
    }

    #history-content #transferHistoryTable th:first-child,
    #history-content #transferHistoryTable td:first-child {
        padding-left: 0.6rem !important;
    }

    #history-content #transferHistoryTable th:last-child,
    #history-content #transferHistoryTable td:last-child {
        padding-right: 0.6rem !important;
    }

    #history-content #noHistoryMessage {
        padding-top: 0.5rem !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 576px) {
    #history-content .card-header {
        padding: 0.6rem 0.6rem 0.45rem !important;
    }

    #history-content .card-header h5 {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    #history-content .card-header p {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #history-content .card-body.bg-light {
        padding: 0.4rem !important;
    }

    #history-content .bg-white.border.rounded-3 {
        border-radius: 0.55rem !important;
    }

    #history-content .badge.rounded-pill {
        font-size: 0.62rem;
        padding: 0.2rem 0.38rem !important;
    }

    #history-content .history-filter-top small {
        font-size: 0.66rem;
        white-space: nowrap;
    }

    #history-content .table-responsive {
        margin-left: -0.4rem;
        margin-right: -0.4rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    #history-content #transferHistoryTable {
        min-width: 540px;
    }

    #history-content #transferHistoryTable th,
    #history-content #transferHistoryTable td {
        font-size: 0.72rem;
        padding-top: 0.42rem;
        padding-bottom: 0.42rem;
    }
}

/* ===== END assets/css/styles.css ===== */

/* ===== BEGIN assets/css/inline.css ===== */
        /* 字体加载优化 - 解决网络环境差导致的字体问题 */
        @font-face {
            font-family: 'Font Awesome 6 Free';
            font-style: normal;
            font-weight: 900;
            font-display: swap; /* 字体加载期间先显示系统字体 */
            src: url('../fonts/fa-solid-900.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Font Awesome 6 Free';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/fa-regular-400.woff2') format('woff2');
        }
        @font-face {
            font-family: 'Font Awesome 6 Brands';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/fa-brands-400.woff2') format('woff2');
        }

        /* ========================================
           🎨 现代化CSS设计令牌系统 (Design Tokens)
           ======================================== */

        /* 全局禁用点击波纹和高亮效果 */
        * {
            -webkit-tap-highlight-color: transparent !important;
        }

        *:focus,
        *:focus-visible,
        *:active {
            outline: none !important;
        }

        .card,
        .card:active,
        .card:focus,
        .card:focus-visible,
        .card *:active,
        .card *:focus,
        .card *:focus-visible {
            outline: none !important;
            box-shadow: none !important;
        }

        /* 特别针对项目卡片 */
        .project-card,
        .project-card:focus,
        .project-card:focus-visible,
        .project-card:active {
            outline: none !important;
            box-shadow: var(--shadow-md) !important;
        }

        .project-card:hover {
            box-shadow: var(--shadow-xl) !important;
        }

        /* 移除Bootstrap的focus-ring */
        .focus-ring,
        .focus-ring:focus,
        .focus-ring:focus-visible {
            box-shadow: none !important;
            outline: none !important;
        }

        :root {
            /* 🎨 主题衍生系统（基于 global.css 的 data-theme 变量） */
            --primary-50: color-mix(in srgb, var(--theme-6) 72%, white 28%);
            --primary-100: color-mix(in srgb, var(--theme-6) 88%, var(--theme-5) 12%);
            --primary-200: var(--theme-6);
            --primary-300: color-mix(in srgb, var(--theme-5) 72%, var(--theme-6) 28%);
            --primary-400: var(--theme-5);
            --primary-500: var(--theme-3);
            --primary-600: var(--theme-2);
            --primary-700: color-mix(in srgb, var(--theme-2) 84%, var(--theme-1) 16%);
            --primary-800: color-mix(in srgb, var(--theme-1) 72%, var(--theme-2) 28%);
            --primary-900: var(--theme-1);

            /* 🟢 成功色 */
            --success-50: color-mix(in srgb, var(--success-color) 10%, white 90%);
            --success-500: var(--success-color);
            --success-600: color-mix(in srgb, var(--success-color) 88%, var(--theme-1) 12%);
            --success-700: color-mix(in srgb, var(--success-color) 74%, var(--theme-1) 26%);

            /* 🔴 危险色 */
            --danger-50: color-mix(in srgb, var(--danger-color) 10%, white 90%);
            --danger-500: var(--danger-color);
            --danger-600: color-mix(in srgb, var(--danger-color) 88%, var(--theme-1) 12%);

            /* 🟡 警告色 */
            --warning-50: color-mix(in srgb, var(--warning-color) 10%, white 90%);
            --warning-500: var(--warning-color);
            --warning-600: color-mix(in srgb, var(--warning-color) 88%, var(--theme-1) 12%);

            /* 🔵 信息色 */
            --info-50: color-mix(in srgb, var(--info-color) 12%, white 88%);
            --info-500: var(--info-color);
            --info-600: color-mix(in srgb, var(--info-color) 86%, var(--theme-2) 14%);

            /* 🌑 中性色系统 */
            --gray-50: color-mix(in srgb, var(--theme-6) 45%, white 55%);
            --gray-100: color-mix(in srgb, var(--theme-6) 72%, white 28%);
            --gray-200: color-mix(in srgb, var(--theme-5) 32%, white 68%);
            --gray-300: color-mix(in srgb, var(--theme-5) 56%, white 44%);
            --gray-400: color-mix(in srgb, var(--theme-5) 72%, var(--theme-2) 28%);
            --gray-500: var(--text-muted);
            --gray-600: var(--text-secondary);
            --gray-700: color-mix(in srgb, var(--text-primary) 84%, var(--theme-2) 16%);
            --gray-800: color-mix(in srgb, var(--theme-1) 80%, var(--theme-2) 20%);
            --gray-900: var(--theme-1);

            /* 📝 文本颜色 */
            --text-primary: #1f3448;
            --text-secondary: #4f6b7d;
            --text-muted: #7b97a8;
            --text-white: #ffffff;
            --text-link: var(--primary-color);
            --text-link-hover: var(--primary-hover);

            /* 🎨 背景颜色 */
            --bg-primary: var(--card-bg);
            --bg-secondary: var(--body-bg);
            --bg-tertiary: var(--bg-soft);
            --bg-dark: var(--theme-1);
            --bg-overlay: rgba(0, 0, 0, 0.5);

            /* 📏 间距系统 (4px基准) */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 12px;
            --spacing-lg: 16px;
            --spacing-xl: 20px;
            --spacing-2xl: 24px;
            --spacing-3xl: 32px;
            --spacing-4xl: 48px;

            /* 🔤 字体系统 */
            --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-family-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

            --font-size-xs: 0.65rem;    /* 10.4px */
            --font-size-sm: 0.75rem;    /* 12px */
            --font-size-base: 0.875rem; /* 14px */
            --font-size-md: 0.9375rem;  /* 15px */
            --font-size-lg: 1rem;       /* 16px */
            --font-size-xl: 1.125rem;   /* 18px */
            --font-size-2xl: 1.25rem;   /* 20px */
            --font-size-3xl: 1.5rem;    /* 24px */
            --font-size-4xl: 2rem;      /* 32px */

            --font-weight-light: 300;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;

            --line-height-tight: 1.25;
            --line-height-normal: 1.5;
            --line-height-relaxed: 1.75;

            /* 🔲 圆角系统 */
            --radius-none: 0;
            --radius-sm: 4px;
            --radius-md: 6px;
            --radius-lg: 8px;
            --radius-xl: 12px;
            --radius-2xl: 16px;
            --radius-full: 9999px;

            /* 🌑 阴影系统 */
            --shadow-xs: 0 1px 2px rgba(2, 16, 36, 0.05);
            --shadow-sm: 0 2px 4px rgba(2, 16, 36, 0.08);
            --shadow-md: 0 4px 8px rgba(2, 16, 36, 0.1);
            --shadow-lg: 0 8px 16px rgba(2, 16, 36, 0.12);
            --shadow-xl: 0 12px 24px rgba(2, 16, 36, 0.15);
            --shadow-2xl: 0 16px 40px rgba(2, 16, 36, 0.18);

            /* ⚡ 过渡和动画 */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

            /* 📐 边框 */
            --border-width: 1px;
            --border-width-thick: 2px;
            --border-color-light: color-mix(in srgb, var(--border-color) 72%, white 28%);
            --border-color-dark: color-mix(in srgb, var(--border-color) 84%, var(--theme-2) 16%);

            /* 🔍 Z-index层级 */
            --z-dropdown: 1000;
            --z-sticky: 1020;
            --z-fixed: 1030;
            --z-modal-backdrop: 1040;
            --z-modal: 1050;
            --z-popover: 1060;
            --z-tooltip: 1070;
        }

        /* ========================================
           🎯 全局基础样式优化
           ======================================== */

        * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: var(--font-family-base);
            font-size: var(--font-size-base);
            line-height: var(--line-height-normal);
            color: var(--text-primary);
            background-color: var(--bg-secondary);
        }

      /* 代理iframe样式保留在这里 */

        /* 隐藏页面滚动条 */
        body {
            overflow-x: hidden;
        }
        
        body::-webkit-scrollbar {
            width: 0px;
            background: transparent;
        }
        
        html {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE和Edge */
        }
        
        /* iframe全屏显示样式 */
        #currentProjectIframe {
            position: relative;
            z-index: 1;
        }

            
        /* 当显示iframe时，让dashboard-content容器支持全宽显示 */
        #dashboard-content.iframe-mode {
            overflow: visible;
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            position: relative;
            margin-bottom: 0;
        }
        
        /* 当在iframe模式时，减少容器的上边距 */
        body.iframe-active .container {
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        body.iframe-active .top-navbar {
            margin-bottom: 0;
        }
        
        /* iframe控制按钮样式 */
        #iframeControls {
            transition: all 0.3s ease;
            display: flex;
            flex-direction: row;
            gap: 8px;
        }
        
        #iframeControls .btn {
            border-radius: 4px;
            width: 35px;
            height: 35px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            #iframeControls .btn {
                width: 32px;
                height: 32px;
                font-size: 14px;
            }
            
            #iframeControls {
                gap: 6px;
            }
        }
        
        /* ========================================
           🔘 按钮系统优化 (使用设计令牌)
           ======================================== */

        .btn {
            font-weight: var(--font-weight-medium);
            border-radius: var(--radius-md);
            padding: var(--spacing-sm) var(--spacing-lg);
            transition: all var(--transition-fast) !important;
            border-width: var(--border-width);
            font-size: var(--font-size-base);
            line-height: var(--line-height-tight);
            position: relative;
            overflow: hidden;
        }

        /* 按钮活跃状态 - 缩放效果 */
        .btn:active,
        .btn.active {
            transform: scale(0.96) !important;
        }

        .btn:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md) !important;
        }

        /* 禁用按钮的悬停效果,但保留缩放 */
        .btn:focus,
        .btn:active,
        .btn:focus-visible,
        .btn:focus-within,
        .btn.focus,
        .btn:not(:disabled):not(.disabled):active {
            outline: none !important;
        }

        /* 主要按钮样式 */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
            border-color: var(--primary-500);
            color: var(--text-white);
            box-shadow: var(--shadow-sm);
        }

        .btn-primary:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-700)) !important;
            border-color: var(--primary-600) !important;
            color: var(--text-white) !important;
        }

        /* 成功按钮 */
        .btn-success {
            background: linear-gradient(135deg, var(--success-500), var(--success-600));
            border-color: var(--success-500);
            box-shadow: var(--shadow-sm);
        }

        .btn-success:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--success-600), var(--success-700)) !important;
            border-color: var(--success-600) !important;
        }

        /* 危险按钮 */
        .btn-danger {
            background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
            border-color: var(--danger-500);
            box-shadow: var(--shadow-sm);
        }

        .btn-danger:hover:not(:disabled) {
            background: linear-gradient(135deg, var(--danger-600), #bd2130) !important;
            border-color: var(--danger-600) !important;
        }

        /* Outline按钮优化 */
        .btn-outline-primary {
            color: var(--primary-500);
            border-color: var(--primary-500);
            background-color: transparent;
        }

        .btn-outline-primary:hover:not(:disabled),
        .btn-outline-primary:focus,
        .btn-outline-primary:active {
            background-color: rgba(33, 150, 243, 0.08) !important;
            border-color: var(--primary-500) !important;
            color: var(--primary-500) !important;
        }

        .btn-outline-secondary {
            color: var(--gray-600);
            border-color: var(--gray-400);
        }

        .btn-outline-secondary:hover:not(:disabled),
        .btn-outline-secondary:focus,
        .btn-outline-secondary:active {
            background-color: rgba(108, 117, 125, 0.08) !important;
            border-color: var(--gray-500) !important;
            color: var(--gray-600) !important;
        }

        .btn-outline-danger {
            color: var(--danger-500);
            border-color: var(--danger-500);
        }

        .btn-outline-danger:hover:not(:disabled),
        .btn-outline-danger:focus,
        .btn-outline-danger:active {
            background-color: rgba(220, 53, 69, 0.08) !important;
            border-color: var(--danger-500) !important;
            color: var(--danger-500) !important;
        }

        /* 小号按钮 */
        .btn-sm {
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--font-size-sm);
            border-radius: var(--radius-sm);
        }

        /* 大号按钮 */
        .btn-lg {
            padding: var(--spacing-md) var(--spacing-2xl);
            font-size: var(--font-size-lg);
            border-radius: var(--radius-lg);
        }
        
        /* ========================================
           🔐 登录/注册页面样式 - 优化版
           修复移动端背景分层问题
           ======================================== */

        /* 登录/注册页面时设置body背景，防止白边 */
        body:has(#loginPage:not(.d-none)),
        body:has(#registerPage:not(.d-none)) {
            background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%) !important;
            overflow: hidden !important;
        }

        /* 核心容器优化 - 修复移动端分层和白边 */
        #loginPage, #registerPage {
            background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%);
            /* 修复移动端分层核心：使用 dvh 兼容动态视口 */
            min-height: 100vh;
            min-height: 100dvh;
            width: 100vw;
            margin: 0;
            padding: var(--spacing-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            /* 使用fixed定位确保全屏覆盖，消除白边 */
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            background-attachment: fixed;
            overflow: hidden;
            box-sizing: border-box;
            /* iOS Safari 修复 - 创建新的堆叠上下文 */
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            pointer-events: auto !important;
        }

        /* 修复伪元素层级和定位 - 解决分层问题 */
        #loginPage::before, #registerPage::before,
        #loginPage::after, #registerPage::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            z-index: 0;
            pointer-events: none;
        }

        #loginPage::before, #registerPage::before {
            top: -10%;
            right: -10%;
            width: 50vh;
            height: 50vh;
            background: radial-gradient(circle, rgba(90, 200, 250, 0.16) 0%, transparent 72%);
            animation: float 25s infinite ease-in-out;
        }

        #loginPage::after, #registerPage::after {
            bottom: -10%;
            left: -10%;
            width: 45vh;
            height: 45vh;
            background: radial-gradient(circle, rgba(52, 199, 89, 0.10) 0%, transparent 72%);
            animation: float 20s infinite ease-in-out reverse;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(20px, -20px); }
        }

        /* 登录卡片精细化 - 增强毛玻璃效果 */
        .auth-card {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.24);
            border: 1px solid rgba(255, 255, 255, 0.72);
            position: relative;
            z-index: 10000;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            /* iOS Safari 修复 */
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            pointer-events: auto !important;
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 卡片顶部装饰条已移除，保持简洁设计 */

        .auth-card .card-body {
            padding: var(--spacing-3xl) var(--spacing-2xl);
        }

        /* 头部排版优化 */
        .auth-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .auth-header h4 {
            font-weight: 700;
            color: var(--text-primary);
            font-size: var(--font-size-2xl);
            margin-bottom: var(--spacing-xs);
            letter-spacing: -0.5px;
        }

        .auth-header p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin: 0;
        }

        /* 输入框交互体验升级 */
        .auth-form .form-label {
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            display: block;
        }

        .auth-form .form-control {
            padding: 0.85rem 1rem;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            background-color: rgba(255,255,255,0.9);
            font-size: 1rem;
            transition: all 0.2s ease;
            color: var(--text-primary);
            pointer-events: auto !important;
            position: relative;
            z-index: 200;
            /* iOS Safari 修复 */
            -webkit-touch-callout: text;
            -webkit-user-select: text;
            user-select: text;
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            cursor: text;
            /* 创建新的堆叠上下文 */
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
        }

        .auth-form .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12);
            background-color: rgba(255, 255, 255, 0.96);
            outline: none;
        }

        .auth-form .form-control::placeholder {
            color: var(--text-muted);
        }

        /* 主按钮优化 */
        .auth-form .btn-auth-primary {
            background: linear-gradient(135deg, #18a0fb, #0a84ff);
            border: none;
            border-radius: 16px;
            padding: 0.85rem;
            font-weight: 600;
            color: #ffffff;
            font-size: 1rem;
            letter-spacing: 0.3px;
            transition: all 0.2s ease;
            box-shadow: 0 12px 24px rgba(10, 132, 255, 0.24);
            position: relative;
            overflow: hidden;
        }

        .auth-form .btn-auth-primary::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .auth-form .btn-auth-primary:hover::after {
            left: 100%;
        }

        .auth-form .btn-auth-primary:hover {
            background: linear-gradient(135deg, #33afff, #0a84ff);
            transform: translateY(-2px);
            box-shadow: 0 16px 30px rgba(10, 132, 255, 0.28);
        }

        .auth-form .btn-auth-primary:active {
            transform: scale(0.98);
        }

        /* 次要按钮优化 */
        .auth-form .btn-auth-secondary {
            border-radius: var(--radius-lg);
            padding: 0.75rem;
            font-weight: 500;
            font-size: 0.95rem;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .auth-form .btn-auth-secondary:hover {
            color: var(--primary-color);
            background: rgba(10, 132, 255, 0.08);
        }

        /* 错误提示优化 */
        .auth-form .alert {
            border-radius: var(--radius-md);
            font-size: var(--font-size-sm);
            padding: var(--spacing-md) var(--spacing-lg);
            border: none;
            animation: shake 0.4s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            75% { transform: translateX(8px); }
        }

        .auth-form .optional-label {
            color: var(--text-muted);
            font-size: var(--font-size-xs);
            margin-left: var(--spacing-xs);
        }

        /* 移动端深度适配 - 修复分层 */
        @media (max-width: 576px) {
            #loginPage, #registerPage {
                padding: var(--spacing-md);
                align-items: center;
            }

            .auth-card {
                box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                background: rgba(255, 255, 255, 0.95);
                border: none;
            }

            .auth-card .card-body {
                padding: var(--spacing-xl) var(--spacing-lg);
            }

            .auth-header h4 {
                font-size: var(--font-size-xl);
            }

            /* 修复背景气泡在小屏过大的问题 */
            #loginPage::before, #registerPage::before {
                width: 280px;
                height: 280px;
                top: -15%;
                right: -15%;
            }

            #loginPage::after, #registerPage::after {
                width: 220px;
                height: 220px;
                bottom: -15%;
                left: -15%;
            }
        }

        /* 超小屏幕适配 (iPhone SE等) */
        @media (max-width: 375px) {
            .auth-card .card-body {
                padding: var(--spacing-lg);
            }

            .auth-form .form-control {
                padding: 0.75rem 0.875rem;
            }

            .auth-form .btn-auth-primary {
                padding: 0.75rem;
            }
        }

        /* 齿轮旋转动画 */
        .fa-cog.fa-spin {
            animation: gear-spin 1s linear infinite;
        }

        @keyframes gear-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* ========================================
           📋 通用卡片组件优化 (使用设计令牌)
           ======================================== */

        .card {
            border-radius: var(--radius-lg);
            border: var(--border-width) solid var(--border-color-light);
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-base);
            background: var(--bg-primary);
        }

        .card:hover {
            box-shadow: var(--shadow-md);
        }

        .card-header {
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            border-bottom: var(--border-width) solid var(--border-color-light);
            padding: var(--spacing-lg) var(--spacing-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }

        .card-body {
            padding: var(--spacing-xl);
        }

        .card-footer {
            background: var(--bg-secondary);
            border-top: var(--border-width) solid var(--border-color-light);
            padding: var(--spacing-lg) var(--spacing-xl);
        }

        /* 项目卡片特殊样式 */
        .project-card {
            border-radius: var(--radius-xl);
            border: var(--border-width-thick) solid var(--border-color-light);
            transition: all var(--transition-slow);
            overflow: hidden;
            position: relative;
            outline: none !important;
        }

        .project-card:focus,
        .project-card:active {
            outline: none !important;
            box-shadow: none !important;
        }

        .project-card *:focus,
        .project-card *:active {
            outline: none !important;
        }

        /* 移除点击波纹效果 */
        .project-card,
        .project-card *,
        .project-card .btn,
        .project-card button {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-touch-callout: none !important;
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .project-card::after,
        .project-card *::after {
            display: none !important;
        }

        /* 移除项目卡片顶部蓝色渐变条 */
        .project-card::before {
            display: none !important;
        }

        .project-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-xl);
        }

        /* 项目设置面板的滑动动画 */
        #projectHidePanel {
            transition: all var(--transition-slow);
        }

        /* 项目设置面板高度限制和滚动 */
        #projectHidePanel .device-panel-body {
            max-height: 200px;
            overflow-y: auto;
        }

        /* 自定义滚动条样式 */
        #projectHidePanel .device-panel-body::-webkit-scrollbar {
            width: 4px;
        }

        #projectHidePanel .device-panel-body::-webkit-scrollbar-track {
            background: var(--gray-100);
            border-radius: var(--radius-sm);
        }

        #projectHidePanel .device-panel-body::-webkit-scrollbar-thumb {
            background: var(--gray-300);
            border-radius: var(--radius-sm);
        }

        #projectHidePanel .device-panel-body::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }

        /* 通用滚动条优化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gray-300);
            border-radius: var(--radius-sm);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--gray-400);
        }

        /* ========================================
           🎯 侧边栏导航系统优化 (使用设计令牌)
           ======================================== */

        .sidebar {
            background: var(--sidebar-bg);
            border-right: var(--border-width) solid var(--border-color-light);
            box-shadow: var(--shadow-lg);
            overflow-y: auto;
            overflow-x: hidden;
        }

        /* 隐藏侧边栏滚动条 */
        .sidebar::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .sidebar {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        .sidebar-header {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            flex-wrap: nowrap !important;
            padding: var(--spacing-xl);
            border-bottom: var(--border-width) solid var(--border-color-light);
            background: var(--sidebar-surface);
        }

        .sidebar-header img {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            margin-right: var(--spacing-md);
            object-fit: cover;
            display: inline-block;
            vertical-align: middle;
            flex-shrink: 0;
            box-shadow: var(--shadow-sm);
        }

        .sidebar-title {
            display: inline-block;
            vertical-align: middle;
            white-space: nowrap;
            color: var(--text-primary);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xl);
            margin: 0;
        }

        .nav-item {
            margin: var(--spacing-xs) 0;
        }

        .nav-link {
            color: var(--text-secondary);
            padding: var(--spacing-md) var(--spacing-xl);
            border-radius: 0;
            transition: all var(--transition-base);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            margin: 0;
            position: relative;
            overflow: hidden;
            width: 100%;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary-500);
            transform: scaleY(0);
            transition: transform var(--transition-base);
        }

        .nav-link:hover {
            background: var(--sidebar-surface);
            color: var(--primary-500);
            transform: translateX(0);
        }

        .nav-link:hover::before {
            transform: scaleY(1);
        }

        .nav-link.active {
            background: var(--sidebar-active-bg);
            color: var(--sidebar-active-text);
            font-weight: var(--font-weight-semibold);
            box-shadow: var(--shadow-xs);
        }

        .nav-link.active::before {
            transform: scaleY(1);
        }

        .nav-link i {
            width: 20px;
            text-align: center;
            font-size: var(--font-size-lg);
        }

        .nav-link .badge {
            font-size: var(--font-size-xs);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-full);
        }

        .sidebar-footer {
            padding: var(--spacing-xl);
            border-top: var(--border-width) solid var(--border-color-light);
            background: var(--bg-secondary);
        }

        .sidebar-footer .bg-light {
            background: var(--bg-primary) !important;
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            border: var(--border-width) solid var(--border-color-light);
        }

        @media (max-width: 768px) {
            .sidebar {
                box-shadow: var(--shadow-2xl);
            }
        }

        /* 移动端侧边栏展开状态 */
        body.sidebar-mobile-open .sidebar {
            left: 0 !important;
            z-index: 1050;
        }

        /* ========================================
           📝 统一表单控件样式 (使用设计令牌)
           ======================================== */

        /* 表单验证状态 */
        .form-control.is-valid,
        input.is-valid {
            border-color: var(--success-500);
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        .form-control.is-valid:focus,
        input.is-valid:focus {
            border-color: var(--success-500);
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
        }

        .form-control.is-invalid,
        input.is-invalid {
            border-color: var(--danger-500);
        }

        .form-control.is-invalid:focus,
        input.is-invalid:focus {
            border-color: var(--danger-500);
            box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
        }

        .valid-feedback {
            display: none;
            width: 100%;
            margin-top: var(--spacing-xs);
            font-size: var(--font-size-sm);
            color: var(--success-500);
        }

        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: var(--spacing-xs);
            font-size: var(--font-size-sm);
            color: var(--danger-500);
        }

        .was-validated .form-control:valid ~ .valid-feedback,
        .was-validated input:valid ~ .valid-feedback,
        .form-control.is-valid ~ .valid-feedback,
        input.is-valid ~ .valid-feedback {
            display: block;
        }

        .was-validated .form-control:invalid ~ .invalid-feedback,
        .was-validated input:invalid ~ .invalid-feedback,
        .form-control.is-invalid ~ .invalid-feedback,
        input.is-invalid ~ .invalid-feedback {
            display: block;
        }

        /* 复选框和单选框 */
        .form-check-input {
            width: 1.25em;
            height: 1.25em;
            margin-top: 0.125em;
            vertical-align: top;
            background-color: var(--bg-primary);
            border: var(--border-width) solid var(--border-color);
            border-radius: var(--radius-sm);
            transition: all var(--transition-base);
        }

        .form-check-input:checked {
            background-color: var(--primary-500);
            border-color: var(--primary-500);
        }

        .form-check-input:focus {
            border-color: var(--primary-500);
            outline: 0;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

        .form-check-input[type="radio"] {
            border-radius: var(--radius-full);
        }

        .form-check-label {
            margin-left: var(--spacing-sm);
            font-weight: var(--font-weight-normal);
            color: var(--text-primary);
        }

        /* 选择器下拉箭头 */
        .form-select,
        select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            padding-right: 2.5rem;
        }

        /* 输入组 */
        .input-group {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            width: 100%;
        }

        .input-group > .form-control,
        .input-group > .form-select {
            position: relative;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
        }

        .input-group-text {
            display: flex;
            align-items: center;
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-normal);
            color: var(--text-secondary);
            text-align: center;
            white-space: nowrap;
            background-color: var(--bg-tertiary);
            border: var(--border-width) solid var(--border-color);
            border-radius: var(--radius-md);
        }

        /* 表单文本提示 */
        .form-text {
            margin-top: var(--spacing-xs);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        /* 响应式 */
        @media (max-width: 576px) {
            .form-control,
            .form-select,
            input,
            textarea,
            select {
                font-size: var(--font-size-base);
                padding: var(--spacing-sm) var(--spacing-md);
            }
        }

        /* ========================================
           💰 余额显示组件样式 (使用设计令牌)
           ======================================== */

        /* 余额卡片容器 */
        .balance-card,
        .alert.alert-success:has(#currentProjectBalance),
        .alert.alert-success:has(#estimatedAmount) {
            background: linear-gradient(135deg, var(--success-50) 0%, rgba(255, 255, 255, 0.9) 100%);
            border: var(--border-width-medium) solid var(--success-200);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-base);
        }

        .balance-card:hover,
        .alert.alert-success:has(#currentProjectBalance):hover,
        .alert.alert-success:has(#estimatedAmount):hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        /* 余额卡片背景装饰 */
        .balance-card::before,
        .alert.alert-success:has(#currentProjectBalance)::before,
        .alert.alert-success:has(#estimatedAmount)::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(40, 167, 69, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: float 6s ease-in-out infinite;
        }

        /* 余额数字样式 */
        #currentProjectBalance,
        #currentBalance,
        #estimatedAmount,
        #currentKeyBalance,
        #customerProjectBalance,
        [id*="Balance"],
        .fw-bold.text-success,
        .text-success.fw-bold {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: #52c41a !important;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
            position: relative;
            display: inline-block;
            transition: all var(--transition-base);
        }

        /* 余额数字悬停效果 */
        #currentProjectBalance:hover,
        #currentBalance:hover,
        #estimatedAmount:hover {
            transform: scale(1.05);
            color: var(--success-700) !important;
        }

        /* 余额图标动画 */
        .balance-card .fas.fa-coins,
        .balance-card .fas.fa-calculator,
        .alert:has([id*="Balance"]) .fas.fa-coins,
        .alert:has([id*="Balance"]) .fas.fa-calculator {
            animation: pulse 2s ease-in-out infinite;
            color: var(--success-500);
            filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.3));
        }

        /* 余额标签文字 */
        .balance-card .text-muted,
        .alert:has([id*="Balance"]) .text-muted {
            font-size: var(--font-size-sm);
            color: var(--gray-600) !important;
            font-weight: var(--font-weight-medium);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* 表格中的余额列 */
        .table th:has-text("余额"),
        .table th:contains("余额"),
        .table td:nth-child(4):has([id*="balance"]),
        .table .text-end:has(#currentProjectBalance) {
            font-weight: var(--font-weight-semibold);
            color: var(--success-600);
            font-variant-numeric: tabular-nums;
        }

        /* 余额统计卡片 (交易历史页面) */
        .alert-success:has(#totalReceived),
        .alert-danger:has(#totalSent) {
            border-radius: var(--radius-lg);
            border: none;
            padding: var(--spacing-lg);
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-xs);
            transition: all var(--transition-base);
        }

        .alert-success:has(#totalReceived) {
            background: linear-gradient(135deg, var(--success-500), var(--success-600));
            color: white;
        }

        .alert-danger:has(#totalSent) {
            background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
            color: white;
        }

        .alert-success:has(#totalReceived):hover,
        .alert-danger:has(#totalSent):hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        #totalReceived,
        #totalSent {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: white !important;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-variant-numeric: tabular-nums;
        }

        /* 余额输入框优化 */
        #editKeyBalance,
        #customerBalance,
        input[id*="balance"],
        input[id*="Balance"] {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
            transition: all var(--transition-base);
        }

        #editKeyBalance:focus,
        #customerBalance:focus,
        input[id*="balance"]:focus,
        input[id*="Balance"]:focus {
            border-color: var(--success-500);
            box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
            transform: scale(1.02);
        }


        /* 数字滚动动画效果 */
        @keyframes countUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .balance-animated {
            animation: countUp 0.5s ease-out;
        }

        /* 余额变化闪烁提示 */
        @keyframes balanceFlash {
            0%, 100% {
                background-color: transparent;
            }
            50% {
                background-color: rgba(40, 167, 69, 0.2);
            }
        }

        .balance-updated {
            animation: balanceFlash 1s ease-in-out;
            border-radius: var(--radius-sm);
            padding: var(--spacing-xs) var(--spacing-sm);
        }

        /* 余额不足提示样式 */
        .balance-insufficient {
            color: var(--danger-500) !important;
            animation: shake 0.5s ease-in-out;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            #currentProjectBalance,
            #currentBalance,
            #estimatedAmount {
                font-size: var(--font-size-xl);
            }

            .balance-card,
            .alert:has([id*="Balance"]) {
                padding: var(--spacing-md);
            }

            #totalReceived,
            #totalSent {
                font-size: var(--font-size-xl);
            }
        }

        /* ========================================
           🎫 工单系统界面样式 (使用设计令牌)
           ======================================== */

        /* 工单卡片容器 */
        #tickets-content .card {
            border: none;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: all var(--transition-base);
        }

        #tickets-content .card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        /* 工单表格样式 */
        #ticketsTable {
            margin-bottom: 0;
        }

        #ticketsTable thead {
            background: linear-gradient(135deg, var(--primary-50) 0%, var(--bg-secondary) 100%);
            border-bottom: var(--border-width-medium) solid var(--primary-200);
        }

        #ticketsTable thead th {
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            text-transform: uppercase;
            font-size: var(--font-size-xs);
            letter-spacing: 0.5px;
            padding: var(--spacing-md) var(--spacing-lg);
            border: none;
        }

        #ticketsTable tbody tr {
            transition: all var(--transition-fast);
            border-bottom: 1px solid var(--border-color);
        }

        #ticketsTable tbody tr:hover {
            background: linear-gradient(135deg, var(--primary-50) 0%, transparent 100%);
            transform: translateX(4px);
            box-shadow: inset 3px 0 0 var(--primary-500);
        }

        #ticketsTable tbody td {
            padding: var(--spacing-md) var(--spacing-lg);
            vertical-align: middle;
            color: var(--text-secondary);
        }

        /* 工单状态徽章 */
        #ticketsTable .badge {
            padding: var(--spacing-xs) var(--spacing-md);
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xs);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: var(--shadow-xs);
            transition: all var(--transition-base);
        }

        #ticketsTable .badge:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-sm);
        }

        /* 工单状态颜色 */
        .badge.bg-warning {
            background: linear-gradient(135deg, var(--warning-500), var(--warning-600)) !important;
        }

        .badge.bg-info {
            background: linear-gradient(135deg, var(--info-500), var(--info-600)) !important;
        }

        .badge.bg-success {
            background: linear-gradient(135deg, var(--success-500), var(--success-600)) !important;
        }

        .badge.bg-secondary {
            background: linear-gradient(135deg, var(--gray-500), var(--gray-600)) !important;
        }

        .badge.bg-danger {
            background: linear-gradient(135deg, var(--danger-500), var(--danger-600)) !important;
        }

        .badge.bg-primary {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
        }


        /* 工单筛选器 */
        #ticketStatusFilter,
        #ticketPriorityFilter,
        #ticketProjectFilter {
            border-radius: var(--radius-lg);
            border: var(--border-width-thin) solid var(--border-color);
            padding: var(--spacing-sm) var(--spacing-md);
            transition: all var(--transition-base);
            background-color: var(--bg-primary);
        }

        #ticketStatusFilter:hover,
        #ticketPriorityFilter:hover,
        #ticketProjectFilter:hover {
            border-color: var(--primary-300);
            box-shadow: var(--shadow-xs);
        }

        #ticketStatusFilter:focus,
        #ticketPriorityFilter:focus,
        #ticketProjectFilter:focus {
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
            outline: none;
        }

        /* 创建工单按钮 */
        #tickets-content .btn-primary {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
            border: none;
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-lg);
            font-weight: var(--font-weight-semibold);
            box-shadow: var(--shadow-sm);
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }

        #tickets-content .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        #tickets-content .btn-primary:hover::before {
            left: 100%;
        }

        #tickets-content .btn-primary:hover {
            background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        #tickets-content .btn-primary:active {
            transform: translateY(0);
            box-shadow: var(--shadow-xs);
        }

        /* 工单操作按钮 */
        #ticketsTable .btn-sm {
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-md);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            transition: all var(--transition-base);
            border: var(--border-width-thin) solid transparent;
        }

        #ticketsTable .btn-outline-info {
            border-color: var(--info-300);
            color: var(--info-600);
        }

        #ticketsTable .btn-outline-info:hover {
            background: linear-gradient(135deg, var(--info-500), var(--info-600));
            color: white;
            border-color: transparent;
            box-shadow: var(--shadow-sm);
            transform: scale(1.05);
        }

        /* 工单标题样式 */
        #ticketsTable tbody td:nth-child(2) {
            font-weight: var(--font-weight-medium);
            color: var(--text-primary);
        }

        /* 工单ID样式 */
        #ticketsTable tbody td:first-child {
            font-weight: var(--font-weight-semibold);
            color: var(--primary-500);
            font-family: 'Courier New', monospace;
        }

        /* 工单模态框优化 */
        #createTicketModal .modal-content,
        #viewTicketModal .modal-content {
            border: none;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-2xl);
            overflow: hidden;
        }

        #createTicketModal .modal-header,
        #viewTicketModal .modal-header {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
            color: white;
            border-bottom: none;
            padding: var(--spacing-lg) var(--spacing-xl);
        }

        #createTicketModal .modal-header .modal-title,
        #viewTicketModal .modal-header .modal-title {
            font-weight: var(--font-weight-bold);
            display: flex;
            align-items: center;
        }

        #createTicketModal .modal-header .btn-close,
        #viewTicketModal .modal-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
            transition: all var(--transition-base);
        }

        #createTicketModal .modal-header .btn-close:hover,
        #viewTicketModal .modal-header .btn-close:hover {
            opacity: 1;
            transform: rotate(90deg);
        }

        #createTicketModal .modal-body,
        #viewTicketModal .modal-body {
            padding: var(--spacing-xl);
            background: var(--bg-primary);
        }

        #createTicketModal .modal-footer,
        #viewTicketModal .modal-footer {
            background: var(--bg-secondary);
            border-top: var(--border-width-thin) solid var(--border-color);
            padding: var(--spacing-lg) var(--spacing-xl);
        }

        /* 工单回复区域 */
        .ticket-replies {
            max-height: 400px;
            overflow-y: auto;
            padding: var(--spacing-md);
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            margin-bottom: var(--spacing-lg);
        }

        .ticket-reply-item {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            border-left: 3px solid var(--primary-500);
            box-shadow: var(--shadow-xs);
            transition: all var(--transition-base);
        }

        .ticket-reply-item:hover {
            box-shadow: var(--shadow-sm);
            transform: translateX(4px);
        }

        .ticket-reply-item.admin-reply {
            border-left-color: var(--success-500);
            background: color-mix(in srgb, var(--card-bg) 86%, var(--surface-soft-success) 14%);
        }

        .ticket-reply-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--spacing-sm);
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--border-color);
        }

        .ticket-reply-author {
            font-weight: var(--font-weight-semibold);
            color: var(--primary-600);
        }

        .ticket-reply-time {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
        }

        .ticket-reply-content {
            color: var(--text-secondary);
            line-height: var(--line-height-relaxed);
        }

        /* 无数据提示 */
        #noTicketsMessage {
            padding: var(--spacing-3xl) 0;
            text-align: center;
            color: var(--text-muted);
        }

        #noTicketsMessage i {
            font-size: 3rem;
            color: var(--gray-300);
            margin-bottom: var(--spacing-lg);
            opacity: 0.5;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            #ticketsTable {
                font-size: var(--font-size-sm);
            }

            #ticketsTable thead th,
            #ticketsTable tbody td {
                padding: var(--spacing-sm) var(--spacing-md);
            }

            #createTicketModal .modal-body,
            #viewTicketModal .modal-body {
                padding: var(--spacing-lg);
            }

            .ticket-replies {
                max-height: 300px;
            }
        }

        /* ========================================
           📊 数据表格通用样式优化 (使用设计令牌)
           ======================================== */

        /* 表格容器 */
        .table-responsive {
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xs);
            overflow-x: auto;
            overflow-y: hidden;
            background: var(--bg-primary);
            margin-bottom: var(--spacing-lg);
        }

        /* 通用表格样式 */
        .table {
            margin-bottom: 0;
            border-collapse: separate;
            border-spacing: 0;
        }

        /* 表头样式 */
        .table thead {
            background: color-mix(in srgb, var(--card-bg) 84%, var(--surface-2) 16%);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .table thead th {
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            text-transform: uppercase;
            font-size: var(--font-size-xs);
            letter-spacing: 0.5px;
            padding: var(--spacing-md) var(--spacing-lg);
            border-bottom: var(--border-width-medium) solid var(--border-color);
            white-space: nowrap;
            vertical-align: middle;
            transition: all var(--transition-base);
        }

        .table thead th:hover {
            background: color-mix(in srgb, var(--surface-2) 86%, white 14%);
        }

        /* 表格行样式 */
        .table tbody tr {
            transition: all var(--transition-fast);
            border-bottom: 1px solid var(--border-color);
        }

        .table tbody tr:hover {
            background: color-mix(in srgb, var(--card-bg) 82%, var(--surface-2) 18%);
            transform: none;
            box-shadow: none;
        }

        .table tbody tr:last-child {
            border-bottom: none;
        }

        /* 表格单元格样式 */
        .table tbody td {
            padding: var(--spacing-md) var(--spacing-lg);
            vertical-align: middle;
            color: var(--text-secondary);
            font-size: var(--font-size-base);
            transition: all var(--transition-base);
        }

        /* 表格中的操作按钮组 */
        .table .btn-group {
            display: flex;
            gap: var(--spacing-xs);
        }

        .table .btn-sm {
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-md);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            transition: all var(--transition-base);
            white-space: nowrap;
        }

        /* 表格操作按钮悬停效果 */
        .table .btn-outline-primary:hover {
            background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-soft) 22%);
            color: var(--text-primary);
            border-color: rgba(74, 144, 226, 0.18);
            box-shadow: none;
            transform: translateY(-1px);
        }

        .table .btn-outline-success:hover {
            background: color-mix(in srgb, var(--card-bg) 80%, var(--surface-soft-success) 20%);
            color: var(--text-primary);
            border-color: rgba(101, 184, 122, 0.18);
            box-shadow: none;
            transform: translateY(-1px);
        }

        .table .btn-outline-warning:hover {
            background: color-mix(in srgb, var(--card-bg) 80%, var(--surface-soft-warning) 20%);
            color: var(--text-primary);
            border-color: rgba(240, 185, 75, 0.18);
            box-shadow: none;
            transform: translateY(-1px);
        }

        .table .btn-outline-danger:hover {
            background: color-mix(in srgb, var(--card-bg) 80%, var(--surface-soft-danger) 20%);
            color: var(--text-primary);
            border-color: rgba(230, 124, 115, 0.18);
            box-shadow: none;
            transform: translateY(-1px);
        }

        .table .btn-outline-info:hover {
            background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-soft) 22%);
            color: var(--text-primary);
            border-color: rgba(74, 144, 226, 0.18);
            box-shadow: none;
            transform: translateY(-1px);
        }

        /* 表格中的复选框 */
        .table input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            border: 2px solid var(--border-color);
            transition: all var(--transition-base);
        }

        .table input[type="checkbox"]:hover {
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

        .table input[type="checkbox"]:checked {
            background-color: var(--primary-500);
            border-color: var(--primary-500);
        }

        /* 表格中的徽章 */
        .table .badge {
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xs);
            box-shadow: var(--shadow-xs);
            transition: all var(--transition-base);
        }

        .table .badge:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-sm);
        }

        /* 表格中的代码/密钥显示 */
        .table code,
        .table .font-monospace {
            background: var(--gray-100);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            font-family: 'Courier New', monospace;
            font-size: var(--font-size-sm);
            color: var(--primary-600);
            border: 1px solid var(--border-color);
        }

        /* 表格分页样式 */
        .pagination {
            margin-bottom: 0;
            gap: var(--spacing-xs);
        }

        .pagination .page-item {
            transition: all var(--transition-base);
        }

        .pagination .page-link {
            border: var(--border-width-thin) solid var(--border-color);
            border-radius: var(--radius-md);
            padding: var(--spacing-xs) var(--spacing-md);
            color: var(--text-secondary);
            font-weight: var(--font-weight-medium);
            transition: all var(--transition-base);
            margin: 0 var(--spacing-xs);
        }

        .pagination .page-link:hover {
            background: color-mix(in srgb, var(--card-bg) 82%, var(--surface-2) 18%);
            border-color: rgba(74, 144, 226, 0.16);
            color: var(--text-primary);
            transform: translateY(-1px);
            box-shadow: none;
        }

        .pagination .page-item.active .page-link {
            background: color-mix(in srgb, var(--theme-surface) 78%, var(--theme-primary-soft) 22%) !important;
            border-color: rgba(74, 144, 226, 0.18) !important;
            color: var(--theme-text) !important;
            box-shadow: none;
            font-weight: var(--font-weight-bold);
        }

        .pagination .page-item.disabled .page-link {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--bg-secondary);
        }

        /* 表格排序指示器 */
        .table thead th.sortable {
            cursor: pointer;
            user-select: none;
            position: relative;
            padding-right: var(--spacing-2xl);
        }

        .table thead th.sortable::after {
            content: '⇅';
            position: absolute;
            right: var(--spacing-md);
            opacity: 0.3;
            transition: all var(--transition-base);
        }

        .table thead th.sortable:hover::after {
            opacity: 1;
            transform: scale(1.2);
        }

        .table thead th.sortable.asc::after {
            content: '↑';
            opacity: 1;
            color: var(--primary-500);
        }

        .table thead th.sortable.desc::after {
            content: '↓';
            opacity: 1;
            color: var(--primary-500);
        }

        /* 表格行选中状态 */
        .table tbody tr.selected {
            background: color-mix(in srgb, var(--card-bg) 78%, var(--accent-soft) 22%);
            box-shadow: inset 3px 0 0 rgba(74, 144, 226, 0.7);
        }

        /* 表格空状态 */
        .table tbody tr.empty-state td {
            padding: var(--spacing-3xl) var(--spacing-xl);
            text-align: center;
            color: var(--text-muted);
        }

        .table tbody tr.empty-state i {
            font-size: 3rem;
            color: var(--gray-300);
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
            display: block;
        }

        /* 表格加载状态 */
        .table tbody tr.loading-state td {
            padding: var(--spacing-3xl) var(--spacing-xl);
            text-align: center;
        }

        .table .spinner-border {
            color: var(--primary-500);
            animation: spinner-border 0.75s linear infinite;
        }

        /* 表格数据高亮 */
        .table tbody td.highlight {
            background: color-mix(in srgb, var(--card-bg) 78%, var(--surface-soft-warning) 22%);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }

        /* 表格中的数字列样式 */
        .table tbody td.text-end {
            font-variant-numeric: tabular-nums;
            font-weight: var(--font-weight-medium);
        }

        /* 表格统计行 */
        .table tfoot tr {
            background: var(--gray-50);
            font-weight: var(--font-weight-bold);
            border-top: 2px solid var(--border-color);
        }

        .table tfoot td {
            padding: var(--spacing-lg);
            color: var(--text-primary);
        }

        /* 响应式表格优化 */
        @media (max-width: 768px) {
            .table-responsive {
                border-radius: var(--radius-md);
            }

            .table {
                font-size: var(--font-size-sm);
            }

            .table thead th,
            .table tbody td {
                padding: var(--spacing-sm) var(--spacing-md);
            }

            .table thead th {
                font-size: var(--font-size-2xs);
            }

            .table .btn-sm {
                padding: 2px 6px;
                font-size: 10px;
            }

            .pagination .page-link {
                padding: var(--spacing-xs) var(--spacing-sm);
                font-size: var(--font-size-xs);
            }
        }

        /* 特定表格的额外优化 */
        #userApiKeysTable tbody tr:hover,
        #transferHistoryTable tbody tr:hover,
        #announcementsTable tbody tr:hover,
        #customersTableBody tr:hover {
            cursor: pointer;
        }

        /* 表格中的链接样式 */
        .table a {
            color: var(--primary-600);
            text-decoration: none;
            font-weight: var(--font-weight-medium);
            transition: all var(--transition-base);
        }

        .table a:hover {
            color: var(--primary-700);
            text-decoration: underline;
        }

        /* 表格中的图标 */
        .table i.fas,
        .table i.fab {
            margin-right: var(--spacing-xs);
            transition: all var(--transition-base);
        }

        .table tbody tr:hover i.fas,
        .table tbody tr:hover i.fab {
            transform: scale(1.1);
        }

        /* 齿轮按钮样式 - 避免点击后背景变色 */
        #projectSettingsToggle {
            border: 1px solid #6c757d;
            background-color: transparent;
            color: #6c757d;
        }
        
        #projectSettingsToggle:hover,
        #projectSettingsToggle:focus,
        #projectSettingsToggle:active,
        #projectSettingsToggle.active {
            background-color: transparent !important;
            border-color: #6c757d !important;
            color: #6c757d !important;
            box-shadow: none !important;
        }
        
        .network-tips .alert-sm {
            padding: 8px 12px;
            font-size: 12px;
        }
        
        /* 增强的进度条样式 */
        .progress {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        /* 响应式调整 */
        /* ========================================
           📢 公告横幅样式 (使用设计令牌)
           ======================================== */

        .announcement-banner {
            background: linear-gradient(135deg, var(--primary-50) 0%, rgba(255, 255, 255, 0.8) 100%);
            border-left: var(--border-width-thick) solid var(--primary-500);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg) var(--spacing-xl);
            margin-bottom: var(--spacing-xl);
            box-shadow: var(--shadow-sm);
            position: relative;
            animation: slidein var(--transition-slower) ease-in-out;
            backdrop-filter: blur(10px);
            transition: all var(--transition-base);
        }

        .announcement-banner:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-1px);
        }

        .announcement-banner.urgent {
            background: linear-gradient(135deg, var(--warning-50) 0%, rgba(255, 255, 255, 0.8) 100%);
            border-left-color: var(--warning-500);
        }

        .announcement-banner .announcement-content {
            display: flex;
            align-items: flex-start;
            padding-right: var(--spacing-3xl);
        }

        .announcement-banner .announcement-icon {
            color: var(--primary-500);
            font-size: var(--font-size-3xl);
            margin-right: var(--spacing-lg);
            margin-top: var(--spacing-xs);
            flex-shrink: 0;
            transition: transform var(--transition-base);
        }

        .announcement-banner:hover .announcement-icon {
            transform: scale(1.1);
        }

        .announcement-banner.urgent .announcement-icon {
            color: var(--warning-500);
        }

        .announcement-banner .announcement-text-wrapper {
            flex: 1;
        }

        .announcement-banner .announcement-title {
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xl);
            margin-bottom: var(--spacing-xs);
            color: var(--text-primary);
            line-height: var(--line-height-tight);
        }
        
        /* ==================== Recharge 标签页：支付方式 ==================== */
        /* ========================================
           💳 支付方式按钮样式 (使用设计令牌)
           ======================================== */

        .payment-methods-container .payment-method-btn {
            height: 50px;
            border: var(--border-width-thick) solid;
            border-radius: var(--radius-lg);
            padding: var(--spacing-md) var(--spacing-lg);
            transition: all var(--transition-base);
            background: var(--bg-primary);
            position: relative;
            overflow: hidden;
            justify-content: flex-start;
            box-shadow: var(--shadow-xs);
        }

        .payment-methods-container .payment-method-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
            border-width: var(--border-width-thick);
        }

        .payment-methods-container .payment-method-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: var(--shadow-sm);
        }

        .payment-methods-container .payment-method-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: var(--bg-secondary);
        }

        .payment-methods-container .payment-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        .payment-methods-container .payment-name {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            color: var(--gray-600);
            margin: 0;
        }

        .payment-methods-container .payment-method-btn:not(:disabled) .payment-name {
            color: inherit;
        }

        .payment-methods-container .payment-method-btn:not(:disabled):hover .payment-name {
            font-weight: var(--font-weight-bold);
        }

        /* 状态徽章样式 */
        .payment-methods-container .badge {
            font-size: var(--font-size-xs);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-semibold);
        }

        /* 可用支付方式特殊样式 */
        .payment-methods-container .payment-method-btn.btn-available {
            border-width: var(--border-width-thick);
            background: var(--bg-primary);
        }

        .payment-methods-container .payment-method-btn.btn-available:hover {
            background: var(--bg-primary);
        }

        /* 特定支付方式的悬停效果 */
        .payment-methods-container .btn-outline-success:hover:not(:disabled) {
            background-color: rgba(40, 167, 69, 0.08);
            border-color: var(--success-500);
        }

        .payment-methods-container .btn-outline-primary:hover:not(:disabled) {
            background-color: rgba(33, 150, 243, 0.08);
            border-color: var(--primary-500);
        }

        .payment-methods-container .btn-outline-warning:hover:not(:disabled) {
            background-color: rgba(255, 193, 7, 0.08);
            border-color: var(--warning-500);
        }

        .payment-methods-container .btn-outline-info:hover:not(:disabled) {
            background-color: rgba(13, 202, 240, 0.08);
            border-color: var(--info-500);
        }
        
        /* 响应式调整 */
        @media (max-width: 767px) {
            .payment-methods-container .payment-method-btn {
                height: 45px;
                padding: 10px 12px;
            }
            
            .payment-methods-container .payment-icon {
                width: 22px;
                height: 22px;
            }
            
            .payment-methods-container .payment-icon i {
                font-size: 0.9rem !important;
            }
            
            .payment-methods-container .payment-name {
                font-size: 0.75rem;
            }
            
            .payment-methods-container .badge {
                font-size: 0.5rem;
                padding: 2px 3px;
            }
        }
        
        @media (max-width: 575px) {
            .payment-methods-container .payment-method-btn {
                height: 42px;
                padding: 8px 10px;
            }
            
            .payment-methods-container .payment-icon {
                width: 20px;
                height: 20px;
                margin-right: 8px !important;
            }
            
            .payment-methods-container .payment-name {
                font-size: 0.7rem;
            }
        }
        
        /* 可点击订单样式 */
        .order-clickable {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .order-clickable:hover {
            background-color: #f8f9fa;
            border-left-color: #ffc107;
            transform: translateX(2px);
        }
        
        .order-clickable:active {
            transform: translateX(0);
        }
        
        /* ==================== Recharge 标签页：单价 / 倍率卡片 ==================== */
        /* ========================================
           💰 充值倍率卡片样式 (使用设计令牌)
           ======================================== */

        .multiplier-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 1rem;
            margin-bottom: 0;
        }

        .multiplier-card {
            min-width: 0;
            max-width: none;
            min-height: 132px;
            background: color-mix(in srgb, var(--card-bg) 92%, var(--surface-2) 8%);
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 18px;
            padding: 18px 18px 12px;
            cursor: pointer;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 6px;
        }

        .multiplier-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
            opacity: 0;
            transition: opacity 0.22s ease;
            pointer-events: none;
        }

        .multiplier-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
            border-color: rgba(74, 144, 226, 0.22);
            background: color-mix(in srgb, var(--card-bg) 88%, var(--surface-2) 12%);
        }

        .multiplier-card:hover::before {
            opacity: 1;
        }

        .multiplier-card.selected {
            border-color: color-mix(in srgb, var(--primary-color) 20%, rgba(15, 23, 42, 0.08) 80%);
            background: color-mix(in srgb, var(--card-bg) 97%, var(--primary-color) 3%);
            box-shadow: 0 12px 24px rgba(74, 144, 226, 0.08);
        }

        .multiplier-card .card-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 8px;
        }

        .multiplier-card .project-name {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .multiplier-card .multiplier-badge {
            background: #eef9fc;
            color: #247f98;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 12px;
            border: 1px solid #b9deea;
            position: absolute;
            top: 8px;
            right: 8px;
            box-shadow: none;
        }

        .multiplier-card .multiplier-info {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .multiplier-card .balance-info {
            font-size: 0.7rem;
            color: #1f8f43;
            font-weight: 600;
            margin-bottom: 0;
        }

        .multiplier-card > div:last-child {
            margin-top: auto;
        }

        /* ========================================
           🛒 购物车样式已迁移至 head 内 (shadcn/ui 风格)
           ======================================== */

        /* Payment Method Card Styling */
        .payment-method-btn {
            min-height: 78px;
            padding: 16px 18px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 16px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
            color: var(--text-primary);
            background: color-mix(in srgb, var(--card-bg) 90%, var(--surface-2) 10%);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
        }

        .payment-method-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
            border-color: rgba(74, 144, 226, 0.18);
            background: color-mix(in srgb, var(--card-bg) 94%, white 6%);
        }

        .payment-method-btn:active:not(:disabled) {
            transform: translateY(0);
        }

        .payment-method-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
        }

        .payment-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--surface-2) 88%, white 12%);
            border-radius: 14px;
            transition: background 0.2s ease, transform 0.2s ease;
            flex-shrink: 0;
        }

        .payment-method-btn:hover .payment-icon {
            background: color-mix(in srgb, var(--accent-soft) 18%, white 82%);
            transform: scale(1.04);
        }

        /* Custom Scrollbar for lists */
        .custom-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scroll::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        .multiplier-card .select-hint {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: color-mix(in srgb, var(--surface-2) 90%, white 10%);
            color: var(--text-secondary);
            text-align: center;
            padding: 4px;
            font-size: 0.65rem;
            font-weight: 600;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            border-top: 1px solid rgba(148, 163, 184, 0.12);
        }

        .multiplier-card:hover .select-hint {
            transform: translateY(0);
        }

        /* ==================== Transfer 标签页：转账流程 / 快捷选择 / 熟悉用户 ==================== */
        /* 快捷选择按钮样式 - 超迷你版（自适应宽度） */
        #quickSelectButtons, #customerQuickSelectButtons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .quick-select-btn-mini, .customer-quick-select-btn {
            position: relative;
            transition: all 0.25s ease;
            border: 1.5px solid #dee2e6;
            border-radius: 6px;
            padding: 6px 12px;
            background: #fff;
            font-size: 0.85rem;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
        }

        .quick-select-btn-mini:hover, .customer-quick-select-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-color: #007bff;
        }

        .quick-select-btn-mini.active, .customer-quick-select-btn.active {
            border-color: rgba(101, 184, 122, 0.26);
            background: color-mix(in srgb, var(--card-bg) 86%, var(--surface-soft-success) 14%);
            box-shadow: 0 3px 12px rgba(101, 184, 122, 0.10);
        }

        .quick-select-btn-mini .btn-text, .customer-quick-select-btn .btn-text {
            font-weight: 500;
        }

        .quick-select-btn-mini .btn-balance, .customer-quick-select-btn .btn-balance {
            display: none;
            margin-left: 6px;
            font-size: 0.75rem;
            color: #28a745;
            font-weight: 600;
        }

        .quick-select-btn-mini.active .btn-balance, .customer-quick-select-btn.active .btn-balance {
            display: inline;
        }

        /* 备用样式 - 网格版本（如需恢复使用 .quick-select-btn 类名） */
        .quick-select-btn {
            transition: all 0.3s ease;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 12px;
            background: #fff;
        }

        .quick-select-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            border-color: #007bff;
        }

        .quick-select-btn.active {
            border-color: rgba(101, 184, 122, 0.26);
            background: color-mix(in srgb, var(--card-bg) 86%, var(--surface-soft-success) 14%);
            box-shadow: 0 4px 15px rgba(101, 184, 122, 0.12);
        }

        /* 响应式调整 */
        @media (max-width: 767px) {
            .multiplier-grid {
                gap: 8px;
            }
            
            .multiplier-card {
                min-width: 140px;
                max-width: none;
                flex: 1 1 calc(50% - 4px);
                padding: 12px;
            }
            
            .multiplier-card .project-name {
                font-size: 0.8rem;
            }
            
            .multiplier-card .multiplier-badge {
                font-size: 0.7rem;
                padding: 2px 6px;
            }
        }
        
        
        @keyframes slidein {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* 按钮焦点状态优化 - 移除白色焦点，保留原色 */
        .btn-primary:focus,
        .btn-primary.focus,
        .btn-primary:active,
        .btn-primary.active {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
            color: #fff !important;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
        }

        .btn-danger:focus,
        .btn-danger.focus,
        .btn-danger:active,
        .btn-danger.active {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #fff !important;
            box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
        }

        .btn-success:focus,
        .btn-success.focus,
        .btn-success:active,
        .btn-success.active {
            background-color: #198754 !important;
            border-color: #198754 !important;
            color: #fff !important;
            box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
        }

        /* 按钮禁用状态下仍保持颜色 */
        .btn-primary:disabled,
        .btn-primary.disabled,
        .btn-primary:disabled:focus,
        .btn-primary:disabled:active {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
            color: #fff !important;
            opacity: 0.75;
        }

        .btn-danger:disabled,
        .btn-danger.disabled,
        .btn-danger:disabled:focus,
        .btn-danger:disabled:active {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #fff !important;
            opacity: 0.75;
        }

        .btn-success:disabled,
        .btn-success.disabled,
        .btn-success:disabled:focus,
        .btn-success:disabled:active {
            background-color: #198754 !important;
            border-color: #198754 !important;
            color: #fff !important;
            opacity: 0.75;
        }

        /* 移动端触摸优化 - 移除点击高亮 */
        .btn {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .d-flex.flex-wrap .form-control,
            .d-flex.flex-wrap .form-select {
                flex: 1 1 auto !important;
                min-width: 120px !important;
                max-width: none !important;
            }

            .d-flex.flex-wrap .btn {
                flex: 0 0 auto;
            }

            .card-header .btn-group {
                flex-wrap: wrap;
                gap: 0.25rem;
            }
        }
        
        /* 公告轮播样式 */
        .announcement-carousel {
            position: relative;
            overflow: hidden;
            height: auto;
            min-height: 100px;
            cursor: grab;
            user-select: none;
        }
        
        .announcement-carousel:active {
            cursor: grabbing;
        }
        
        .announcement-carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }
        
        .announcement-carousel-item {
            flex: 0 0 100%;
            width: 100%;
            padding: 18px 20px 32px;
            background-color: var(--card-bg);
            border-left: 3px solid transparent;
            transition: all 0.2s ease;
        }

        .announcement-carousel-item:hover {
            background-color: var(--surface-tint);
            border-left-color: var(--primary-color);
        }

        .announcement-carousel-controls {
            position: absolute;
            bottom: 10px;
            left: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .announcement-carousel-dots {
            display: flex;
            gap: 6px;
        }

        .announcement-carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: color-mix(in srgb, var(--primary-color) 28%, white 72%);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .announcement-carousel-dot.active {
            background-color: var(--primary-color);
            transform: scale(1.2);
        }

        .announcement-title {
            color: var(--text-primary);
        }

        .announcement-carousel-nav {
            background: none;
            border: none;
            color: var(--primary-color);
            font-size: 14px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            opacity: 0.7;
        }

        .announcement-carousel-nav:hover {
            background-color: var(--surface-tint-strong);
            opacity: 1;
        }
        
        .announcement-carousel-nav:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }
        
        .announcement-carousel-counter {
            font-size: 12px;
            color: var(--text-muted);
            margin: 0 8px;
        }
        
        /* 已移除重复的倍率卡片实现，统一使用单一主实现 */
        
        /* ========================================
           📱 设备管理界面优化 (使用设计令牌)
           ======================================== */

        .device-list {
            max-height: 300px;
            overflow-y: auto;
            padding: var(--spacing-xs);
        }

        .device-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-md) var(--spacing-lg);
            margin-bottom: var(--spacing-sm);
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            border-radius: var(--radius-lg);
            border-left: 3px solid var(--primary-500);
            transition: all var(--transition-base);
            box-shadow: var(--shadow-xs);
            position: relative;
            overflow: hidden;
        }

        .device-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(33, 150, 243, 0.03) 100%);
            opacity: 0;
            transition: opacity var(--transition-base);
        }

        .device-item:hover::before {
            opacity: 1;
        }

        .device-item:hover {
            transform: translateX(4px);
            box-shadow: var(--shadow-md);
        }

        .device-item.current-device {
            border-left-color: var(--success-500);
            background: linear-gradient(135deg, var(--success-50) 0%, rgba(255, 255, 255, 0.9) 100%);
            box-shadow: var(--shadow-sm), 0 0 0 1px rgba(40, 167, 69, 0.1);
        }

        .device-info {
            flex: 1;
            min-width: 0;
            position: relative;
            z-index: 1;
        }

        .device-name {
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-base);
            color: var(--text-primary);
            margin-bottom: var(--spacing-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .device-details {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .device-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--spacing-xs);
        }

        .device-name-row .device-name {
            flex: 1;
            margin-bottom: 0;
            margin-right: var(--spacing-md);
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
        }

        .device-name-row .device-status {
            flex-shrink: 0;
        }

        .device-status {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
        }

        .device-status-badge {
            font-size: var(--font-size-xs);
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-semibold);
            box-shadow: var(--shadow-xs);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        .device-status-badge.current {
            background: linear-gradient(135deg, var(--success-500), var(--success-600));
            color: var(--text-white);
        }

        .device-status-badge.online {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
            color: var(--text-white);
        }

        .device-status-badge.offline {
            background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
            color: var(--text-white);
        }

        .logout-device-btn {
            background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
            color: var(--text-white);
            border: none;
            border-radius: var(--radius-sm);
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-xs);
            position: relative;
            z-index: 1;
        }

        .logout-device-btn:hover {
            background: linear-gradient(135deg, var(--danger-600), #bd2130);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .logout-device-btn:active {
            transform: translateY(0);
        }

        .logout-device-btn:disabled {
            background: var(--gray-400);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .device-list::-webkit-scrollbar {
            width: 4px;
        }

        .device-list::-webkit-scrollbar-track {
            background: var(--gray-100);
            border-radius: var(--radius-sm);
        }
        
        .device-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }
        
        .device-list::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
          
        .device-refresh-btn {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            background: #ffffff;
            color: #6c757d;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            font-size: 10px;
        }
        
        .device-refresh-btn:hover {
            background: #f8f9fa;
            border-color: #adb5bd;
        }
        
        .device-refresh-btn:active {
            background: #e9ecef;
        }
        
        .device-panel-actions {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        
        .device-batch-logout-btn {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 2px 6px;
            border-radius: 3px;
            border: 1px solid #dc3545;
            background: #ffffff;
            color: #dc3545;
            font-size: 9px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        .device-batch-logout-btn:hover {
            background: #dc3545;
            color: white;
        }

            
        /* 文件上传优雅UI样式 */
        .file-upload-container {
            position: relative;
            margin: 10px 0;
        }
        
        .file-upload-area {
            border: 2px dashed #e9ecef;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .file-upload-area:hover {
            border-color: #007bff;
            background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,123,255,0.1);
        }
        
        .file-upload-area.dragover {
            border-color: #28a745;
            background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
            box-shadow: 0 0 20px rgba(40,167,69,0.2);
        }
        
        .file-upload-icon {
            font-size: 2.5rem;
            color: #6c757d;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }
        
        .file-upload-area:hover .file-upload-icon {
            color: #007bff;
            transform: scale(1.1);
        }
        
        .file-upload-text {
            margin: 0;
            font-weight: 500;
            color: #495057;
        }
        
        .file-upload-hint {
            font-size: 0.875rem;
            color: #6c757d;
            margin-top: 8px;
        }
        
        /* 文件上传区域内的隐藏输入控件 - 覆盖整个区域 */
        .file-input-hidden {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            top: 0;
            left: 0;
        }
        
        /* 完全隐藏的文件输入控件 - 不干扰任何元素 */
        .file-input-completely-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
            top: -9999px;
            left: -9999px;
            z-index: -1;
        }
        
        .file-preview-container {
            margin-top: 16px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 12px;
            border: 1px solid #e9ecef;
            position: relative;
        }
        
        .file-preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .file-preview-title {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #495057;
            font-size: 0.9rem;
        }
        
        .file-preview-title i {
            margin-right: 8px;
            color: #28a745;
        }
        
        .file-remove-btn {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            font-size: 0.875rem;
            padding: 4px 8px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .file-remove-btn:hover {
            background: #dc3545;
            color: white;
        }
        
        .file-preview-image {
            max-width: 100%;
            max-height: 200px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
        }
        
        .file-preview-image:hover {
            transform: scale(1.02);
            cursor: pointer;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.875rem;
            color: #6c757d;
            margin-top: 8px;
        }
        
        .file-size-badge {
            background: #e9ecef;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
        }
        
        /* 紧凑模式的文件上传样式 */
        .file-upload-compact {
            padding: 12px;
        }
        
        .file-upload-compact .file-upload-icon {
            font-size: 1.2rem;
            margin-bottom: 6px;
        }
        
        .file-upload-compact .file-upload-text {
            font-size: 0.8rem;
            margin: 0;
        }
        
        .file-upload-compact .file-upload-hint {
            font-size: 0.7rem;
            margin-top: 2px;
        }
        
        /* 超小尺寸的文件上传样式 - 移动端专用 */
        .file-upload-mini {
            padding: 8px 12px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #e9ecef;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.75rem;
            height: 38px; /* 与按钮高度一致 */
        }
        
        .file-upload-mini:hover {
            border-color: #007bff;
            background: #e3f2fd;
            color: #007bff;
        }
        
        .file-upload-mini .file-upload-icon {
            font-size: 1rem;
            margin: 0;
        }
        
        .file-upload-mini .file-upload-text {
            margin: 0;
            font-size: 0.75rem;
            white-space: nowrap;
        }
        
        /* 极小屏幕下只显示图标 */
        @media (max-width: 576px) {
            .file-upload-mini {
                padding: 8px;
                min-width: 38px;
                justify-content: center;
            }
        }
        
        /* 移动端样式调整 */
        @media (max-width: 768px) {
            .file-upload-area {
                padding: 16px;
            }
            
            .file-upload-icon {
                font-size: 2rem;
                margin-bottom: 8px;
            }
            
            .file-upload-text {
                font-size: 0.8rem;
            }
            
            .file-upload-hint {
                font-size: 0.7rem;
            }
        }
        
        /* 动画效果 */
        @keyframes uploadSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .upload-success {
            animation: uploadSuccess 0.6s ease-in-out;
        }
        
        /* 进度条样式 */
        .upload-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, #007bff, #28a745);
            transition: width 0.3s ease;
            border-radius: 0 0 12px 12px;
        }
        
        /* 回复中的图片直接展示样式 */
        .reply-image-direct {
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .reply-image-direct:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        /* 移动端图片样式 */
        @media (max-width: 768px) {
            .reply-image-direct {
                max-height: 200px;
            }
        }
        
        .device-batch-logout-btn:active {
            background: #c82333;
            border-color: #bd2130;
        }
        
        .device-batch-logout-btn i {
            font-size: 8px;
        }
        
        .device-test-btn {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 2px 6px;
            border-radius: 3px;
            border: 1px solid #28a745;
            background: #ffffff;
            color: #28a745;
            font-size: 9px;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        
        .device-test-btn:hover {
            background: #28a745;
            color: white;
        }
        
        .device-test-btn i {
            font-size: 8px;
        }
        
        /* 设备列表样式 */
        .device-list {
            max-height: 240px;
            overflow-y: auto;
            padding: 6px;
        }
        
        .device-item {
            display: flex;
            align-items: center;
            padding: 8px;
            margin-bottom: 4px;
            background: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .device-item:hover {
            background: #f8f9fa;
            border-color: #dee2e6;
        }
        
        .device-item.current-device {
            background: #f8f9fa;
            border-color: #28a745;
        }
        
        .device-icon {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            margin-right: 8px;
            flex-shrink: 0;
        }
        
        .device-info {
            flex: 1;
            min-width: 0;
        }
        
        .device-name {
            font-weight: 500;
            font-size: 11px;
            color: #495057;
            margin-bottom: 1px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .device-name .current-badge {
            background: #28a745;
            color: white;
            padding: 1px 4px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 400;
        }
        
        .device-details {
            font-size: 10px;
            color: #6c757d;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .device-details i {
            font-size: 8px;
            color: #adb5bd;
        }
        
        .device-status {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .device-status-badge {
            padding: 1px 5px;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 400;
        }
        
        .device-status-badge.current {
            background: #28a745;
            color: white;
        }
        
        .device-status-badge.online {
            background: #007bff;
            color: white;
        }
        
        .device-status-badge.offline {
            background: #6c757d;
            color: white;
        }
        
        .logout-device-btn {
            padding: 2px 6px;
            border-radius: 3px;
            border: 1px solid #dc3545;
            background: #ffffff;
            color: #dc3545;
            font-size: 9px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .logout-device-btn:hover {
            background: #dc3545;
            color: white;
        }
        
        .logout-device-btn:disabled {
            background: #f8f9fa;
            color: #6c757d;
            border-color: #dee2e6;
            cursor: not-allowed;
        }

        /* 设备Cookie查看功能样式 - 卡片翻转效果 */
        .device-list {
            perspective: 1000px;
        }

        .device-item {
            cursor: pointer;
            position: relative;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .device-item:hover:not(.flipped) {
            background: #e7f3ff;
            border-color: #007bff;
            transform: translateX(2px);
            box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
        }

        /* 翻转效果 */
        .device-item.flipped {
            transform: rotateY(180deg);
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border-color: #28a745;
            box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
        }

        .device-item.flipped .device-icon,
        .device-item.flipped .device-info {
            opacity: 0;
        }

        .device-item.flipped::before {
            content: '✓ Cookie已复制到剪贴板';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateY(180deg);
            color: white;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            width: 100%;
            padding: 0 10px;
            z-index: 10;
        }

        .device-item.flipped .logout-device-btn {
            display: none;
        }

        .device-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            color: #6c757d;
        }
        
        .device-empty-state i {
            font-size: 24px;
            margin-bottom: 6px;
            opacity: 0.5;
        }
        
        .device-empty-state span {
            font-size: 11px;
            text-align: center;
        }
        
        /* 设备类型图标 - 统一灰色 */
        .device-icon { background: #f8f9fa; border-color: #e9ecef; color: #6c757d; }
        
        /* 滚动条样式 */
        .device-list::-webkit-scrollbar {
            width: 4px;
        }
        
        .device-list::-webkit-scrollbar-track {
            background: #f8f9fa;
        }
        
        .device-list::-webkit-scrollbar-thumb {
            background: #dee2e6;
            border-radius: 2px;
        }
        
        .device-list::-webkit-scrollbar-thumb:hover {
            background: #adb5bd;
        }

        /* ========== 赌场样式 ========== */

        /* 项目快捷按钮样式 */
        /* 赌场快捷选择按钮 - 与生成客户样式一致 */
        #casinoQuickSelectButtons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .casino-quick-btn {
            position: relative;
            transition: all 0.25s ease;
            border: 1.5px solid #dee2e6;
            border-radius: 6px;
            padding: 6px 12px;
            background: #fff;
            font-size: 0.85rem;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
        }

        .casino-quick-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.08);
            border-color: #007bff;
        }

        .casino-quick-btn.active {
            border-color: #28a745;
            background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
            box-shadow: 0 3px 12px rgba(40, 167, 69, 0.15);
        }

        .casino-quick-btn .btn-text {
            font-weight: 500;
        }

        .casino-quick-btn .btn-balance {
            display: none;
            margin-left: 6px;
            font-size: 0.75rem;
            color: #28a745;
            font-weight: 600;
        }

        .casino-quick-btn.active .btn-balance {
            display: inline;
        }

        .casino-quick-btn .badge {
            margin-left: 8px;
            font-size: 12px;
        }

        /* 转盘外层容器 */
        .casino-wheel-wrapper {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Canvas容器 */
        .casino-canvas-container {
            position: relative;
            width: 750px;
            height: 750px;
            margin: 0 auto;
        }

        /* Canvas元素 */
        #casinoWheelCanvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* 顶部指针 */
        .casino-pointer {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            color: #f1c40f;
            font-size: 4rem;
            z-index: 200;
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
            text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
        }

        .casino-history-item {
            padding: 10px 12px;
            margin-bottom: 10px;
            border-radius: 8px;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }

        .casino-history-item:hover {
            transform: translateX(5px);
        }

        .casino-history-item.win {
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            border-left: 4px solid #28a745;
            box-shadow: 0 2px 8px rgba(40,167,69,0.2);
        }

        .casino-history-item.lose {
            background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
            border-left: 4px solid #dc3545;
            box-shadow: 0 2px 8px rgba(220,53,69,0.2);
        }

        /* 响应式样式 */
        @media (max-width: 992px) {
            .casino-wheel-wrapper {
                padding: 20px;
            }

            .casino-canvas-container {
                width: 400px;
                height: 400px;
            }

            .casino-pointer {
                font-size: 2rem;
            }

            .casino-spin-btn {
                width: 100px;
                height: 100px;
                font-size: 20px;
            }
        }

        @media (max-width: 576px) {
            .casino-canvas-container {
                width: 300px;
                height: 300px;
            }

            .casino-pointer {
                font-size: 1.5rem;
            }

            .casino-spin-btn {
                width: 80px;
                height: 80px;
                font-size: 18px;
                border-width: 3px;
            }
        }

        /* ========== 转盘奖励弹窗样式 ========== */
        .prize-modal-content {
            border: none;
            border-radius: 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
        }

        .prize-modal-content::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .prize-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            width: 35px;
            height: 35px;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        .prize-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            opacity: 1;
            transform: rotate(90deg);
        }

        /* ========================================
           🔔 Modal弹窗优化 (使用设计令牌)
           ======================================== */

        .modal-content {
            border-radius: var(--radius-xl);
            border: none;
            box-shadow: var(--shadow-2xl);
            overflow: hidden;
        }

        .modal-header {
            background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
            color: var(--text-white);
            border-bottom: none;
            padding: var(--spacing-xl);
        }

        .modal-header .modal-title {
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-xl);
        }

        .modal-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
        }

        .modal-header .btn-close:hover {
            opacity: 1;
        }

        .modal-body {
            position: relative;
            z-index: 1;
            padding: var(--spacing-2xl);
        }

        .modal-footer {
            background: var(--bg-secondary);
            border-top: var(--border-width) solid var(--border-color-light);
            padding: var(--spacing-lg) var(--spacing-xl);
        }

        .modal-backdrop {
            background-color: var(--bg-overlay);
            backdrop-filter: blur(4px);
        }

        /* 防止模态框打开时页面滚动 */
        body.modal-open {
            overflow: hidden !important;
            width: 100% !important;
        }

        /* Modal动画 */
        .modal.fade .modal-dialog {
            transform: scale(0.8) translateY(-50px);
            opacity: 0;
            transition: all var(--transition-slow);
        }

        .modal.show .modal-dialog {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        /* ========================================
           🔔 Toast通知优化 (使用设计令牌)
           ======================================== */

        /* ========================================
           🔔 Toast通知样式优化 (现代卡片设计)
           ======================================== */

        .toast-container {
            position: fixed;
            top: 80px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            max-width: 420px;
        }

        .toast {
            min-width: 350px;
            background: white;
            border-radius: var(--radius-xl);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
            border: none;
            overflow: hidden;
            position: relative;
            animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            padding: 0;
            margin-bottom: 0;
        }

        /* 滑入动画 */
        @keyframes toastSlideIn {
            from {
                transform: translateX(120%) scale(0.9);
                opacity: 0;
            }
            to {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
        }

        /* 滑出动画 */
        @keyframes toastSlideOut {
            from {
                transform: translateX(0) scale(1);
                opacity: 1;
            }
            to {
                transform: translateX(120%) scale(0.9);
                opacity: 0;
            }
        }

        .toast.hiding {
            animation: toastSlideOut 0.3s ease-out forwards;
        }

        /* 左侧色条 - 已移除 */

        /* Toast内容布局 */
        .toast-content {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-lg);
            flex: 1;
        }

        /* 图标容器 */
        .toast-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-2xl);
            flex-shrink: 0;
            background: rgba(33, 150, 243, 0.1);
            color: var(--primary-500);
        }

        .toast.toast-success .toast-icon {
            background: rgba(40, 167, 69, 0.1);
            color: var(--success-500);
        }

        .toast.toast-danger .toast-icon,
        .toast.toast-error .toast-icon {
            background: rgba(220, 53, 69, 0.1);
            color: var(--danger-500);
        }

        .toast.toast-warning .toast-icon {
            background: rgba(255, 193, 7, 0.1);
            color: var(--warning-600);
        }

        .toast.toast-info .toast-icon {
            background: rgba(13, 202, 240, 0.1);
            color: var(--info-500);
        }

        /* 文字内容 */
        .toast-message {
            flex: 1;
            color: var(--text-primary);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
        }

        /* 关闭按钮 */
        .toast-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-md);
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            flex-shrink: 0;
        }

        .toast-close:hover {
            background: var(--gray-100);
            color: var(--text-primary);
        }

        /* 进度条 */
        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 4px;
            right: 0;
            height: 3px;
            background: rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .toast-progress-bar {
            height: 100%;
            background: var(--primary-500);
            animation: toastProgress 3s linear forwards;
        }

        .toast.toast-success .toast-progress-bar {
            background: var(--success-500);
        }

        .toast.toast-danger .toast-progress-bar,
        .toast.toast-error .toast-progress-bar {
            background: var(--danger-500);
        }

        .toast.toast-warning .toast-progress-bar {
            background: var(--warning-500);
        }

        .toast.toast-info .toast-progress-bar {
            background: var(--info-500);
        }

        @keyframes toastProgress {
            from {
                width: 100%;
            }
            to {
                width: 0%;
            }
        }

        /* 响应式调整 */
        @media (max-width: 576px) {
            .toast-container {
                top: var(--spacing-md);
                right: var(--spacing-md);
                left: auto;
                max-width: 90%;
            }

            .toast {
                min-width: auto;
                width: auto;
            }

            .toast-icon {
                width: 40px;
                height: 40px;
                font-size: var(--font-size-xl);
            }

            .toast-content {
                padding: var(--spacing-md);
            }

            .toast-message {
                font-size: var(--font-size-sm);
            }
        }

        /* 奖杯图标动画 */
        .prize-icon-wrapper {
            position: relative;
            display: inline-block;
        }

        .prize-icon-circle {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
            animation: pulse 2s ease-in-out infinite, float 3s ease-in-out infinite;
        }

        .prize-icon {
            font-size: 60px;
            color: #fff;
            animation: bounce 1s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4); }
            50% { box-shadow: 0 15px 40px rgba(255, 215, 0, 0.6); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* 粒子效果 */
        .prize-particles {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .prize-particles::before,
        .prize-particles::after {
            content: '✨';
            position: absolute;
            font-size: 24px;
            animation: particle 2s ease-out infinite;
        }

        .prize-particles::before {
            top: 0;
            left: 0;
            animation-delay: 0s;
        }

        .prize-particles::after {
            bottom: 0;
            right: 0;
            animation-delay: 1s;
        }

        @keyframes particle {
            0% {
                opacity: 0;
                transform: translate(0, 0) scale(0);
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate(var(--tx, 50px), var(--ty, -50px)) scale(1.5);
            }
        }

        /* 标题样式 */
        .prize-title {
            color: #fff;
            font-weight: 700;
            font-size: 2rem;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            animation: slideInDown 0.5s ease-out;
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 金额显示 */
        .prize-amount {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 20px;
            animation: slideInRight 0.7s ease-out;
        }

        .amount-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.85rem;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .amount-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 盈亏提示 */
        .prize-profit {
            font-size: 1.1rem;
            font-weight: 600;
            padding: 10px 20px;
            border-radius: 25px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            animation: zoomIn 0.8s ease-out;
        }

        .prize-profit.profit {
            background: rgba(52, 211, 153, 0.2);
            color: #10b981;
        }

        .prize-profit.loss {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .prize-profit i {
            font-size: 1.2rem;
        }

        .prize-profit.loss i {
            transform: rotate(180deg);
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 确认按钮 */
        .prize-confirm-btn {
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            border: none;
            color: #764ba2;
            font-weight: 700;
            padding: 15px 50px;
            border-radius: 12px;
            font-size: 1.1rem;
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
            transition: all 0.3s ease;
            animation: slideInUp 0.9s ease-out;
        }

        .prize-confirm-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 15px 35px rgba(255, 215, 0, 0.4);
            background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
            color: #5a3d7a;
        }

        .prize-confirm-btn:active {
            transform: translateY(-1px) scale(1.02);
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 失败状态样式 */
        .prize-modal-content.loss-mode {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .loss-mode .prize-icon-circle {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        .loss-mode .prize-icon {
            content: '😔';
        }

        /* Modal进入动画 */
        .modal.fade .modal-dialog {
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        }

        .modal.show .modal-dialog {
            animation: modalZoomIn 0.5s ease-out;
        }

        @keyframes modalZoomIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-50px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 可享优惠列表自定义滚动条 */
        #userBenefitsList::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        #userBenefitsList::-webkit-scrollbar-track {
            background: rgba(82, 196, 26, 0.1);
            border-radius: 3px;
        }

        #userBenefitsList::-webkit-scrollbar-thumb {
            background: rgba(82, 196, 26, 0.3);
            border-radius: 3px;
        }

        #userBenefitsList::-webkit-scrollbar-thumb:hover {
            background: rgba(82, 196, 26, 0.5);
        }

        /* 客户列表排序控件优化 */
        #customerSortBy,
        #customerSortOrder {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #fff;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        #customerSortBy:hover,
        #customerSortOrder:hover {
            border-color: #1890ff;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
        }

        #customerSortBy:focus,
        #customerSortOrder:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
            outline: none;
        }

        /* 客户列表表格优化 */
        #customersTableBody td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
        }

        #customersTableBody td code {
            font-size: 0.85em;
            padding: 2px 6px;
            background: #f5f5f5;
            border-radius: 3px;
        }

        /* ========================================
           🔌 插件中心样式 - 列表模式
           ======================================== */

        /* 插件列表项 */
        #plugins-content .card {
            border: none;
            border-radius: 18px;
            box-shadow: 0 10px 28px color-mix(in srgb, var(--theme-1) 8%, transparent);
            overflow: hidden;
        }

        #plugins-content .card-header {
            background: linear-gradient(135deg, color-mix(in srgb, var(--card-bg) 84%, white 16%) 0%, color-mix(in srgb, var(--accent-soft) 40%, white 60%) 100%);
            border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            padding: 1rem 1.1rem;
        }

        #plugins-content .card-body {
            padding: 1rem;
            background: linear-gradient(180deg, color-mix(in srgb, var(--surface-tint) 80%, white 20%) 0%, var(--card-bg) 100%);
        }

        #pluginsList {
            scroll-behavior: smooth;
            display: grid;
            gap: 0.9rem;
        }

        .plugin-list-item {
            background: linear-gradient(180deg, var(--card-bg) 0%, color-mix(in srgb, var(--surface-tint) 78%, white 22%) 100%);
            border: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            border-radius: 18px;
            padding: 1rem;
            transition: all 0.2s ease;
            animation: fadeIn 0.3s ease-out;
            box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-1) 6%, transparent);
        }

        .plugin-list-item:hover {
            box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-1) 10%, transparent);
            border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
            transform: translateY(-1px);
        }

        .plugin-card-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .plugin-card-top {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            flex: 1;
            min-width: 0;
        }

        .plugin-icon-wrap {
            flex-shrink: 0;
        }

        .plugin-list-item .plugin-icon {
            width: 52px;
            height: 52px;
            min-width: 52px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--accent-strong) 0%, var(--primary-color) 56%, var(--accent-color) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.35rem;
            transition: transform 0.2s ease;
            box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-1) 12%, transparent);
        }

        .plugin-list-item:hover .plugin-icon {
            transform: scale(1.04);
        }

        .plugin-info {
            flex: 1;
            min-width: 0;
        }

        .plugin-info-header {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin-bottom: 0.45rem;
            flex-wrap: wrap;
        }

        .plugin-name {
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.35;
        }

        .plugin-version-tag {
            font-size: 0.72rem;
            color: var(--accent-strong);
            background: var(--accent-soft);
            padding: 4px 10px;
            border-radius: 999px;
            white-space: nowrap;
            font-weight: 600;
            border: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
        }

        .plugin-version-tag-muted {
            color: var(--text-muted);
            background: var(--muted-soft);
            border-color: color-mix(in srgb, var(--text-muted) 14%, white 86%);
        }

        .plugin-description {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin: 0;
            line-height: 1.6;
            white-space: normal;
            word-break: break-word;
        }

        .plugin-card-bottom {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-shrink: 0;
        }

        .plugin-downloads {
            min-width: 88px;
            text-align: right;
            display: flex;
            flex-direction: column;
            gap: 0.18rem;
        }

        .plugin-downloads-label {
            font-size: 0.74rem;
            color: var(--text-muted);
            line-height: 1;
        }

        .plugin-downloads-value {
            font-size: 0.92rem;
            color: var(--text-secondary);
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.35rem;
        }

        .plugin-downloads-value i {
            color: var(--accent-strong);
            font-size: 0.86rem;
        }

        .plugin-download-btn {
            background: linear-gradient(135deg, var(--accent-strong) 0%, var(--primary-color) 56%, var(--accent-color) 100%);
            border: none;
            color: white;
            padding: 10px 18px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.2s ease;
            text-decoration: none;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 44px;
            box-shadow: 0 10px 20px color-mix(in srgb, var(--theme-1) 12%, transparent);
        }

        .plugin-download-btn:hover {
            box-shadow: 0 12px 24px color-mix(in srgb, var(--theme-1) 16%, transparent);
            transform: translateY(-1px);
            color: white;
        }

        .plugin-download-btn:active {
            transform: translateY(0);
            box-shadow: 0 6px 14px color-mix(in srgb, var(--theme-1) 10%, transparent);
        }

        .plugin-download-btn:focus {
            outline: 2px solid var(--accent-color);
            outline-offset: 2px;
        }

        #pluginsEmpty {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-muted);
        }

        #pluginsEmpty i {
            font-size: 3rem;
            color: color-mix(in srgb, var(--accent-color) 24%, transparent);
            animation: pulse 2s infinite;
        }

        /* 动画 */
        @keyframes pulse {
            0%, 100% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.6;
            }
        }

        /* 淡入动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式 - 移动端优化 */
        @media (max-width: 768px) {
            #plugins-content .card {
                border-radius: 16px;
            }

            #plugins-content .card-header {
                padding: 0.95rem 1rem;
            }

            #plugins-content .card-body {
                padding: 0.85rem;
            }

            #pluginsList {
                gap: 0.8rem;
            }

            .plugin-list-item {
                padding: 0.95rem;
                border-radius: 16px;
                margin-bottom: 0;
            }

            .plugin-card-main {
                flex-direction: column;
                align-items: stretch;
                gap: 0.85rem;
            }

            .plugin-card-top {
                gap: 0.85rem;
            }

            .plugin-list-item .plugin-icon {
                width: 50px;
                height: 50px;
                min-width: 50px;
                font-size: 1.3rem;
                border-radius: 14px;
            }

            .plugin-info-header {
                margin-bottom: 0.4rem;
            }

            .plugin-name {
                font-size: 1rem;
            }

            .plugin-version-tag {
                font-size: 0.68rem;
                padding: 3px 8px;
            }

            .plugin-description {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                line-height: 1.55;
            }

            .plugin-card-bottom {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr auto;
                gap: 0.75rem;
                padding-top: 0.8rem;
                border-top: 1px solid rgba(226, 232, 240, 0.85);
            }

            .plugin-downloads {
                min-width: 0;
                text-align: left;
                justify-content: center;
            }

            .plugin-downloads-value {
                justify-content: flex-start;
            }

            .plugin-download-btn {
                min-width: 120px;
                padding: 0.85rem 1rem;
                border-radius: 14px;
                -webkit-tap-highlight-color: rgba(102, 126, 234, 0.12);
                user-select: none;
                -webkit-user-select: none;
            }

            .plugin-list-item:active {
                background: #f8fafc;
            }
        }

        /* 小屏幕进一步优化 */
        @media (max-width: 480px) {
            #plugins-content .card-header {
                padding: 0.9rem 0.95rem;
            }

            #plugins-content .card-body {
                padding: 0.75rem;
            }

            .plugin-list-item {
                padding: 0.88rem;
                border-radius: 15px;
            }

            .plugin-card-top {
                gap: 0.75rem;
            }

            .plugin-list-item .plugin-icon {
                width: 46px;
                height: 46px;
                min-width: 46px;
                font-size: 1.15rem;
                border-radius: 12px;
            }

            .plugin-name {
                font-size: 0.96rem;
            }

            .plugin-description {
                font-size: 0.84rem;
                -webkit-line-clamp: 2;
                line-height: 1.45;
            }

            .plugin-card-bottom {
                grid-template-columns: 1fr;
                gap: 0.65rem;
                padding-top: 0.7rem;
            }

            .plugin-downloads {
                background: #f8fafc;
                border: 1px solid rgba(226, 232, 240, 0.9);
                border-radius: 12px;
                padding: 0.65rem 0.75rem;
            }

            .plugin-download-btn {
                width: 100%;
                padding: 0.82rem 1rem;
                font-size: 0.94rem;
            }

            .plugin-download-btn i {
                font-size: 0.9rem;
            }
        }

        /* 超大屏幕优化 */
        @media (min-width: 1400px) {
            .plugin-list-item {
                padding: 1.25rem 1.5rem;
            }

            .plugin-downloads {
                min-width: 120px;
            }
        }

        /* ========== 购物车样式 (与全局card风格统一) ========== */
        .cart-wrapper {
            border: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            border-radius: 20px;
            overflow: hidden;
            background: color-mix(in srgb, var(--card-bg) 88%, var(--surface-2) 12%);
            box-shadow: 0 18px 42px color-mix(in srgb, var(--theme-1) 10%, transparent);
            position: sticky;
            top: 1.25rem;
        }
        .cart-header {
            padding: 18px 22px;
            background: color-mix(in srgb, var(--card-bg) 82%, var(--accent-soft) 18%);
            border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cart-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .cart-header-icon {
            width: 36px; height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent-strong) 0%, var(--primary-color) 56%, var(--accent-color) 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            box-shadow: 0 10px 18px color-mix(in srgb, var(--theme-1) 12%, transparent);
        }
        .cart-header-title { font-weight: 600; font-size: .95rem; color: var(--text-primary); line-height: 1.2; }
        .cart-header-sub   { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
        .cart-count-badge {
            min-width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 999px;
            font-weight: 700; font-size: .8rem;
            background: linear-gradient(135deg, var(--accent-strong) 0%, var(--primary-color) 56%, var(--accent-color) 100%);
            color: #fff;
            padding: 0 8px;
            box-shadow: 0 8px 16px color-mix(in srgb, var(--theme-1) 10%, transparent);
        }

        .cart-body {
            padding: 14px;
            background: color-mix(in srgb, var(--card-bg) 84%, var(--surface-2) 16%);
        }

        /* 单个购物车项 */
        .cart-item {
            background: color-mix(in srgb, var(--card-bg) 90%, white 10%);
            border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
            position: relative;
            transition: border-color .2s, box-shadow .2s;
        }
        .cart-item:last-child { margin-bottom: 0; }
        .cart-item:hover {
            border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent);
        }

        .cart-item-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .cart-item-name {
            font-weight: 600;
            font-size: .88rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cart-item-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent-color) 100%);
            flex-shrink: 0;
        }
        .cart-item-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .cart-tag {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: .72rem; font-weight: 500;
            padding: 3px 8px;
            border-radius: 6px;
            border: 1px solid transparent;
        }
        .cart-tag-rate {
            background: color-mix(in srgb, var(--accent-soft) 52%, white 48%);
            color: var(--text-secondary);
            border-color: color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
        }
        .cart-tag-credit {
            background: color-mix(in srgb, var(--surface-soft-success) 52%, white 48%);
            color: var(--text-secondary);
            border-color: color-mix(in srgb, var(--success-color) 18%, var(--border-color));
        }

        /* 删除按钮 */
        .cart-remove-btn {
            width: 26px; height: 26px;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            background: #fff;
            color: #adb5bd;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .15s;
            font-size: 11px;
            padding: 0;
            flex-shrink: 0;
        }
        .cart-remove-btn:hover {
            background: #fef2f2;
            border-color: #fca5a5;
            color: #dc3545;
        }

        /* 金额输入 */
        .cart-amount-group {
            display: flex;
            align-items: center;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            overflow: hidden;
            background: #f8f9fa;
            transition: border-color .2s, box-shadow .2s;
        }
        .cart-amount-group:focus-within {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102,126,234,.1);
        }
        .cart-amount-prefix {
            padding: 0 12px;
            font-weight: 700;
            font-size: .9rem;
            color: var(--text-secondary);
            user-select: none;
        }
        .cart-item-amount {
            border: none !important;
            background: transparent !important;
            font-weight: 600;
            font-size: .9rem;
            color: var(--text-primary);
            padding: 8px 12px 8px 0;
            outline: none !important;
            box-shadow: none !important;
            width: 100%;
        }

        /* 空状态 */
        .cart-empty {
            text-align: center;
            padding: 52px 20px;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .cart-empty-icon {
            width: 64px; height: 64px;
            border-radius: 50%;
            background: rgba(102,126,234,.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            color: #667eea;
            font-size: 24px;
        }
        .cart-empty-title {
            font-weight: 600;
            font-size: .9rem;
            color: #212529;
            margin-bottom: 4px;
        }
        .cart-empty-sub {
            font-size: .8rem;
            color: var(--text-secondary);
        }

        /* 购物车底部汇总 */
        .cart-footer {
            padding: 16px 18px;
            background: color-mix(in srgb, var(--card-bg) 80%, var(--accent-soft) 20%);
            border-top: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
            display: none;
            backdrop-filter: none;
        }
        .cart-footer-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
            gap: 8px;
        }
        .cart-footer-label {
            font-size: .8rem;
            color: var(--text-secondary);
        }
        .cart-footer-total {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .cart-footer-original {
            text-decoration: line-through;
            color: color-mix(in srgb, var(--text-muted) 56%, white 44%);
            font-size: .85rem;
            margin-right: 6px;
        }
        .cart-footer-discount {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: .7rem; font-weight: 500;
            padding: 2px 6px;
            border-radius: 6px;
            background: var(--surface-soft-success);
            color: var(--success-contrast);
            border: 1px solid color-mix(in srgb, var(--success-color) 20%, white 80%);
            white-space: nowrap;
        }
        .cart-footer-fee {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: .7rem; font-weight: 500;
            padding: 2px 6px;
            border-radius: 6px;
            white-space: nowrap;
        }
        .cart-footer-fee.positive {
            background: var(--surface-soft-danger);
            color: var(--danger-contrast);
            border: 1px solid color-mix(in srgb, var(--danger-color) 20%, white 80%);
        }
        .cart-footer-fee.negative {
            background: var(--surface-soft-success);
            color: var(--success-contrast);
            border: 1px solid color-mix(in srgb, var(--success-color) 20%, white 80%);
        }
        .cart-clear-btn {
            font-size: .8rem;
            padding: 9px 13px;
            border-radius: 10px;
            border: 1px solid color-mix(in srgb, var(--success-color) 24%, white 76%);
            background: #ffffff;
            color: var(--success-color);
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
            flex-shrink: 0;
            font-weight: 600;
        }
        .cart-clear-btn:hover {
            background: color-mix(in srgb, white 92%, var(--success-color) 8%);
            border-color: color-mix(in srgb, var(--success-color) 36%, white 64%);
            color: color-mix(in srgb, var(--success-color) 88%, black 12%);
        }

        #recharge-content .multiplier-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            align-items: stretch;
        }

        #mainPage #recharge-content .add-to-cart-btn-soft {
            background: #ffffff !important;
            color: #4b9fff !important;
            border: 1px solid #beddff !important;
            border-radius: 6px;
            font-weight: 500;
            box-shadow: none !important;
            opacity: 1 !important;
        }

        #mainPage #recharge-content .add-to-cart-btn-soft:hover,
        #mainPage #recharge-content .add-to-cart-btn-soft:focus,
        #mainPage #recharge-content .add-to-cart-btn-soft:active {
            background: #f3f9ff !important;
            color: #318dff !important;
            border-color: #9fcdff !important;
            box-shadow: none !important;
            opacity: 1 !important;
        }

        #mainPage #recharge-content .add-to-cart-btn-soft:not(:hover):not(:focus):not(:active) {
            background: #ffffff !important;
        }

        #mainPage #recharge-content .add-to-cart-btn-soft.in-cart,
        #mainPage #recharge-content .add-to-cart-btn-soft.in-cart:hover,
        #mainPage #recharge-content .add-to-cart-btn-soft.in-cart:focus,
        #mainPage #recharge-content .add-to-cart-btn-soft.in-cart:active,
        #mainPage #recharge-content .add-to-cart-btn-soft.disabled,
        #mainPage #recharge-content .add-to-cart-btn-soft.disabled:hover,
        #mainPage #recharge-content .add-to-cart-btn-soft.disabled:focus,
        #mainPage #recharge-content .add-to-cart-btn-soft.disabled:active {
            background: #eaf4ff !important;
            color: #2d86f2 !important;
            border-color: #98c6f4 !important;
            box-shadow: none !important;
            opacity: 1 !important;
        }

        @media (min-width: 992px) {
            #recharge-content .card > .card-body {
                padding: 1.25rem 1.25rem 1.5rem;
            }

            #recharge-content > .card:first-child .card-body {
                padding: 1rem 1.2rem;
            }

            #recharge-content > .card:first-child .d-flex.align-items-center {
                align-items: flex-start !important;
                gap: 0.9rem;
                flex-wrap: wrap;
            }

            #recharge-content > .card:first-child .mx-3 {
                margin-left: 0.25rem !important;
                margin-right: 0.25rem !important;
            }

            #recharge-content #multiplierTableContainer {
                margin-bottom: 1.25rem !important;
            }

            #recharge-content .multiplier-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, 220px);
                gap: 12px;
                align-items: stretch;
                justify-content: start;
            }

            #recharge-content .multiplier-card {
                width: 220px;
                min-width: 220px;
                max-width: 220px;
                margin: 0;
                padding: 14px;
            }

            #recharge-content .col-md-5 {
                width: 36%;
            }

            #recharge-content .col-md-7 {
                width: 64%;
            }

            #recharge-content .cart-wrapper {
                top: 1rem;
            }

            #recharge-content .cart-body {
                padding: 12px;
            }

            #recharge-content .cart-empty {
                min-height: 150px;
                padding: 32px 18px;
            }

            #recharge-content .cart-empty-icon {
                width: 56px;
                height: 56px;
                margin-bottom: 10px;
            }

            #recharge-content .payment-methods-container {
                padding: 0.1rem 0 0;
            }

            #recharge-content .payment-methods-container .row {
                --bs-gutter-x: 0.9rem;
                --bs-gutter-y: 0.9rem;
            }

            #recharge-content .payment-methods-container #additionalPaymentMethods {
                margin-top: 0 !important;
            }

            #recharge-content .payment-methods-container .payment-method-btn {
                height: 76px;
                border-radius: 14px;
                padding: 14px 16px;
            }

            #recharge-content .payment-methods-container .payment-icon {
                width: 34px;
                height: 34px;
            }

            #recharge-content .payment-methods-container .payment-name {
                font-size: 1rem;
            }

            #recharge-content #rechargeHistoryContainer {
                max-height: 520px !important;
            }
        }

        @media (min-width: 1200px) {
            #recharge-content .multiplier-grid {
                grid-template-columns: repeat(auto-fill, 220px);
            }

            #recharge-content .col-md-5 {
                width: 34%;
            }

            #recharge-content .col-md-7 {
                width: 66%;
            }
        }

        /* 滚动条 */
        #cartItemsContainer::-webkit-scrollbar { width: 4px; }
        #cartItemsContainer::-webkit-scrollbar-track { background: transparent; }
        #cartItemsContainer::-webkit-scrollbar-thumb {
            background: #dee2e6;
            border-radius: 4px;
        }
        #cartItemsContainer::-webkit-scrollbar-thumb:hover {
            background: #adb5bd;
        }

        /* 购物车项添加动画 */
        @keyframes cartItemSlideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .cart-item { animation: cartItemSlideIn .25s ease-out; }


/* ===== END assets/css/inline.css ===== */

/* ===== BEGIN assets/css/revenue.css ===== */
        /* ==================== 统计卡片样式 ==================== */
        .stat-card-modern {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat-card-modern:active {
            transform: scale(0.98);
        }
        .stat-card-modern.stat-card-primary { border-left: 4px solid #0d6efd; }
        .stat-card-modern.stat-card-success { border-left: 4px solid #198754; }
        .stat-card-modern.stat-card-warning { border-left: 4px solid #ffc107; }
        .stat-card-modern.stat-card-danger { border-left: 4px solid #dc3545; }

        .stat-icon-modern {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .stat-card-primary .stat-icon-modern { background: #0d6efd12; color: #0d6efd; }
        .stat-card-success .stat-icon-modern { background: #19875412; color: #198754; }
        .stat-card-warning .stat-icon-modern { background: #ffc10712; color: #ffc107; }
        .stat-card-danger .stat-icon-modern { background: #dc354512; color: #dc3545; }

        .stat-content { flex: 1; min-width: 0; }
        .stat-value-modern {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.2;
        }
        .stat-card-primary .stat-value-modern { color: #0d6efd; }
        .stat-card-success .stat-value-modern { color: #198754; }
        .stat-card-warning .stat-value-modern { color: #ffc107; }
        .stat-card-danger .stat-value-modern { color: #dc3545; }
        .stat-label-modern {
            font-size: 12px;
            color: #6c757d;
            margin-top: 2px;
        }

        /* ==================== Recharge 标签页：充值记录 / 结果卡片 ==================== */
        /* ==================== 充值卡片样式 ==================== */
        .recharge-cards-container {
            margin: 0 -8px;
        }

        .recharge-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e9ecef;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            margin: 0 8px 12px;
        }
        .recharge-card.border-success { border-left: 4px solid #198754; }
        .recharge-card.border-warning { border-left: 4px solid #ffc107; }
        .recharge-card.border-danger { border-left: 4px solid #dc3545; }
        .recharge-card.border-secondary { border-left: 4px solid #6c757d; }

        .recharge-card-header {
            padding: 12px 14px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .recharge-order-id {
            font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
            font-size: 12px;
            color: #6c757d;
            word-break: break-all;
        }

        .recharge-card-body {
            padding: 14px;
        }
        .recharge-user-info,
        .recharge-project-info {
            display: flex;
            align-items: center;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .recharge-user-info i,
        .recharge-project-info i {
            width: 18px;
            text-align: center;
            color: #adb5bd;
            margin-right: 8px;
        }

        .recharge-amounts {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 12px;
            margin: 0 -14px;
            width: calc(100% + 28px);
        }
        .recharge-amount-box {
            text-align: center;
        }
        .recharge-amount-label {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 4px;
        }
        .recharge-amount-value {
            font-size: 18px;
            font-weight: 600;
            color: #212529;
        }

        .recharge-card-footer {
            padding: 10px 14px;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            font-size: 11px;
        }
        .recharge-time {
            font-size: 12px;
            color: #495057;
            margin-top: 2px;
        }

        /* 徽章样式优化 */
        .recharge-card .badge {
            font-size: 11px;
            padding: 5px 10px;
            font-weight: 500;
        }
        .recharge-project-info .badge {
            font-size: 12px;
            padding: 4px 8px;
        }

        /* 空状态 */
        .empty-state-icon {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
        }

        /* ==================== 桌面端表格样式 ==================== */
        @media (min-width: 768px) {
            .table-responsive {
                border-radius: 12px;
                overflow-x: auto;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            }
            .table thead th {
                background: #f8f9fa;
                font-weight: 600;
                text-transform: uppercase;
                font-size: 11px;
                letter-spacing: 0.5px;
                color: #495057;
                padding: 12px 16px;
                border-bottom: 2px solid #dee2e6;
            }
            .table tbody td {
                padding: 12px 16px;
                vertical-align: middle;
                font-size: 14px;
            }
            .table tbody tr:hover {
                background: #f8f9fa;
            }
        }

        /* 移动端优化表格样式 */
        @media (max-width: 767px) {
            /* 收益表格移动端优化 */
            .recharge-table-wrapper {
                border-radius: 12px;
                overflow-x: auto;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            }
            .recharge-table-wrapper .table {
                font-size: 12px;
                white-space: nowrap;
            }
            .recharge-table-wrapper .table thead th {
                padding: 10px 8px;
                font-size: 11px;
                background: #f8f9fa;
                border-bottom: 2px solid #dee2e6;
            }
            .recharge-table-wrapper .table tbody td {
                padding: 10px 8px;
            }
            /* 分页组件移动端优化 */
            .recharge-table-wrapper + nav .pagination {
                font-size: 12px;
            }
            .recharge-table-wrapper + nav .page-link {
                padding: 0.375rem 0.6rem;
            }
            /* 移动端隐藏大屏卡片样式的表格 */
            .table-responsive.d-none.d-md-block {
                display: none !important;
            }
        }

/* ===== END assets/css/revenue.css ===== */


/* iOS Safari 兼容性修复 - 不使用:has()选择器，通过JS控制 */

/* iOS Safari 侧边栏导航点击修复 */
.sidebar .nav-link {
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(108, 139, 255, 0.2);
    touch-action: manipulation;
    position: relative;
    z-index: 1;
}

/* 确保 #app 元素可以正常接收点击事件 */
#app {
    pointer-events: auto !important;
}

/* 修复表格中按钮区域的空白问题 */
table .btn-group .btn,
table td .btn {
    margin-bottom: 0;
}

table td {
    vertical-align: middle;
}

/* 表格内按钮容器样式优化 */
table td .d-flex,
table td .btn-group {
    white-space: nowrap;
}

/* 移除表格内按钮之间的多余间距 */
table td > .btn:not(:last-child) {
    margin-right: 4px;
}

/* 全局优化表格内按钮样式 - 减少空白区域 */
table td {
    vertical-align: middle !important;
}

/* 表格内紧凑按钮组 */
table .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* 表格内单个按钮 */
table td .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* 移除表格按钮下方多余空白 */
table td .btn {
    margin-bottom: 0 !important;
}

/* 表格按钮组紧凑排列 */
table .btn-group {
    white-space: nowrap;
}

/* 进一步优化表格按钮间距 */
table td > .btn {
    margin-right: 2px !important;
}

table td > .btn:last-child {
    margin-right: 0 !important;
}

/* 用户列表操作按钮压缩，避免遮挡表格内容 */
#userManageTable .cc-user-actions-cell {
    width: 1%;
    white-space: nowrap;
}

#userManageTable .cc-user-actions .btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

#userManageTable .cc-user-actions .btn i {
    margin: 0 !important;
}

/* 表格内按钮组紧凑化 */
table .btn-group .btn {
    border-radius: 0 !important;
}

table .btn-group .btn:first-child {
    border-top-left-radius: 0.2rem !important;
    border-bottom-left-radius: 0.2rem !important;
}

table .btn-group .btn:last-child {
    border-top-right-radius: 0.2rem !important;
    border-bottom-right-radius: 0.2rem !important;
}

/* 修复表格按钮组垂直空白问题 - 让按钮组填满单元格高度 */
table td .btn-group {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: unset !important;
    vertical-align: middle !important;
}

/* 确保表格内的按钮紧凑无多余间距 */
table td .btn-group .btn {
    margin: 0 !important;
    padding: 0.35rem 0.5rem !important;
    line-height: 1 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
}

/* 表格按钮图标和文字间距 */
table td .btn-group .btn i {
    margin-right: 2px;
}

/* 减少表格单元格内边距以匹配按钮高度 */
table td {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    line-height: 1.3 !important;
}

/* 确保整个表格行高度一致且紧凑 */
table tbody tr {
    height: auto !important;
}

table tbody tr td {
    height: auto !important;
}

/* ============================================
   首页样式合并补充
   功能概述：
   1. 承接 index.php 中抽离出的首页内联样式
   2. 提供首页局部通用工具类，减少重复 style
   3. 合并原 index-theme-refactor.css 的首页主题覆盖
   @author Claude Code
   @version 1.0
   @since 2026-04-13
   ============================================ */

/* 显示与交互 */
.cc-d-none { display: none; }
.cc-d-none-important { display: none !important; }
.cc-nowrap { white-space: nowrap !important; }
.cc-cursor-pointer { cursor: pointer !important; }
.cc-z-2000 { z-index: 2000 !important; }

/* 文字 */
.cc-text-primary { color: var(--text-primary) !important; }
.cc-text-secondary { color: var(--text-secondary) !important; }
.cc-text-primary-color { color: var(--primary-color) !important; }
.cc-text-success-color { color: var(--success-color) !important; }
.cc-text-accent-cool { color: var(--info-color) !important; }
.cc-text-accent-strong { color: var(--accent-strong) !important; }
.cc-text-payment-success { color: #52c41a !important; }
.cc-text-green-strong { color: #166534 !important; }
.cc-text-danger-strong { color: #dc3545 !important; }
.cc-text-success-strong { color: #28a745 !important; }
.cc-text-warning-strong { color: #92400e !important; }

/* 字号与字重 */
.cc-fs-65em { font-size: .65em !important; }
.cc-fs-09em { font-size: 0.9em !important; }
.cc-fs-70 { font-size: 0.7rem !important; }
.cc-fs-75 { font-size: 0.75rem !important; }
.cc-fs-78 { font-size: 0.78rem !important; }
.cc-fs-80 { font-size: 0.8rem !important; }
.cc-fs-82 { font-size: 0.82rem !important; }
.cc-fs-85 { font-size: 0.85rem !important; }
.cc-fs-875 { font-size: 0.875rem !important; }
.cc-fs-90 { font-size: 0.9rem !important; }
.cc-fs-95 { font-size: 0.95rem !important; }
.cc-fs-100 { font-size: 1rem !important; }
.cc-fs-14 { font-size: 14px !important; }
.cc-fw-600 { font-weight: 600 !important; }
.cc-lh-14 { line-height: 1.4 !important; }
.cc-icon-sm { font-size: 14px !important; }
.cc-empty-icon { font-size: 4rem !important; color: var(--text-secondary) !important; }
.cc-mono-key { font-family: monospace !important; font-size: 0.9em !important; }

/* 尺寸与滚动 */
.cc-w-40 { width: 40px !important; }
.cc-w-60 { width: 60px !important; }
.cc-w-70 { width: 70px !important; }
.cc-w-90 { width: 90px !important; }
.cc-w-100 { width: 100px !important; }
.cc-w-110 { width: 110px !important; }
.cc-w-120 { width: 120px !important; }
.cc-w-150 { width: 150px !important; }
.cc-w-160 { width: 160px !important; }
.cc-w-200 { width: 200px !important; }
.cc-min-w-120 { min-width: 120px !important; }
.cc-min-w-1200 { min-width: 1200px !important; }
.cc-max-w-95vw { max-width: 95vw !important; }
.cc-max-w-full { max-width: 100% !important; }
.cc-max-h-40 { max-height: 40px !important; }
.cc-max-h-400 { max-height: 400px !important; }
.cc-max-h-85vh { max-height: 85vh !important; }
.cc-scroll-y-80 { max-height: 80px !important; overflow-y: auto !important; }
.cc-scroll-y-200 { max-height: 200px !important; overflow-y: auto !important; }
.cc-scroll-y-400 { max-height: 400px !important; overflow-y: auto !important; }
.cc-scroll-y-420 { max-height: 420px !important; overflow-y: auto !important; }
.cc-stat-circle { width: 52px !important; height: 52px !important; }
.cc-empty-circle { width: 72px !important; height: 72px !important; }
.cc-chart-shell { height: 600px !important; overflow: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.cc-chart-shell::-webkit-scrollbar { display: none !important; }
.cc-chart-iframe { width: 100% !important; height: 100% !important; border: none !important; }

/* 间距 */
.cc-py-03 { padding: 0.3rem 0 !important; }
.cc-p-2px { padding: 2px !important; }

/* 按钮与徽章 */
.cc-btn-compact { font-size: 0.8rem !important; padding: 0.4rem 0.8rem !important; }
.cc-btn-xs { font-size: 0.75rem !important; padding: 0.25rem !important; }
.cc-badge-sm { font-size: 0.75rem !important; padding: 0.25rem 0.5rem !important; }
.cc-badge-xs { font-size: 0.7rem !important; padding: 0.2rem 0.4rem !important; }
.cc-badge-accent-soft { background: var(--accent-soft) !important; color: var(--accent-strong) !important; font-weight: 500 !important; border: 1px solid var(--border-color) !important; }
.cc-badge-muted-soft { background: var(--muted-soft) !important; color: var(--text-muted) !important; }
.cc-badge-warning-soft { background: var(--surface-soft-warning) !important; color: var(--warning-contrast) !important; font-size: 9px !important; }
.cc-badge-success-soft { background: var(--surface-soft-success) !important; color: var(--success-contrast) !important; font-size: 9px !important; }
.cc-badge-odds { font-size: 0.7rem !important; padding: 0.25rem 0.4rem !important; }
.cc-badge-odds-10x { background: rgba(193, 232, 255, 0.88) !important; color: var(--text-primary) !important; }
.cc-badge-odds-theme1 { background: var(--theme-1) !important; color: #ffffff !important; }
.cc-badge-odds-theme2 { background: var(--theme-2) !important; color: #ffffff !important; }
.cc-badge-odds-theme3 { background: var(--theme-3) !important; color: #ffffff !important; }
.cc-badge-odds-theme4 { background: var(--theme-4) !important; color: #ffffff !important; }
.cc-badge-odds-theme5 { background: var(--theme-5) !important; color: var(--text-primary) !important; }
.cc-badge-odds-warning { background: var(--warning-color) !important; color: #ffffff !important; }
.cc-badge-odds-danger { background: var(--danger-color) !important; color: #ffffff !important; }
.cc-badge-odds-maroon { background: #7a3140 !important; color: #ffffff !important; }

/* 结构与容器 */
.cc-clear-project-btn { z-index: 10; border: none !important; background: none !important; }
.cc-project-dropdown-menu { max-height: 200px; overflow-y: auto; z-index: 1050; }
.cc-bg-light-card { background: #f8f9fa !important; }
.cc-bg-surface-tint { background: var(--surface-tint) !important; }
.cc-gradient-pink-card { background: #fff1f0 !important; color: var(--text-primary) !important; }
.cc-gradient-blue-card { background: #eef4ff !important; color: var(--text-primary) !important; }
.cc-radius-8 { border-radius: 8px !important; }
.cc-customer-dashboard-toggle { cursor: pointer; background: #eef4ff !important; border: 1px solid rgba(74, 144, 226, 0.14) !important; border-radius: 8px !important; }
.cc-toggle-icon { font-size: 0.6rem !important; transition: transform 0.3s; }
.cc-border-bottom-light { border-bottom: 1px solid #dee2e6 !important; }
.cc-border-bottom-theme { border-bottom: 1px solid var(--border-color) !important; }
.cc-border-left-accent { border-left: 4px solid; }
.cc-border-top-strong { border-top: 2px solid #dee2e6 !important; }
.cc-recharge-icon-box { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-color); display: flex; align-items: center; justify-content: center; }
.cc-benefit-divider { width: 1px; height: 35px; background: var(--border-color); }
.cc-select-compact { font-size: 0.8rem !important; padding: 0.25rem 0.5rem !important; }
.cc-textarea-compact { font-size: 0.85rem !important; padding: 0.5rem !important; }


/* ===== BEGIN merged index-theme-refactor.css ===== */
#mainPage {
    --theme-page-bg: var(--body-bg);
    --theme-surface: var(--card-bg);
    --theme-surface-soft: var(--surface-2);
    --theme-surface-muted: var(--surface-3);
    --theme-border: var(--border-color);
    --theme-border-strong: var(--border-strong);
    --theme-text: var(--text-primary);
    --theme-text-secondary: var(--text-secondary);
    --theme-text-muted: var(--text-muted);
    --theme-sidebar: #f7f8fa;
    --theme-sidebar-soft: #f3f6fa;
    --theme-sidebar-border: rgba(107, 114, 128, 0.12);
    --theme-sidebar-text: #5f6b7a;
    --theme-sidebar-muted: #9ca3af;
    --theme-primary: var(--primary-color);
    --theme-primary-hover: var(--primary-hover);
    --theme-primary-soft: var(--accent-soft);
    --theme-primary-soft-strong: var(--accent-soft-strong);
    --theme-accent: var(--secondary-color);
    --theme-accent-soft: var(--muted-soft);
    --theme-success: var(--success-color);
    --theme-success-soft: var(--surface-card-success);
    --theme-danger: var(--danger-color);
    --theme-danger-soft: var(--surface-card-danger);
    --theme-warning: var(--warning-color);
    --theme-warning-soft: var(--surface-card-warning);
    --theme-info: var(--info-color);
    --theme-info-soft: var(--surface-soft-info);
    --theme-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04);
    --theme-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05);
    --theme-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    background: var(--theme-page-bg) !important;
    color: var(--theme-text) !important;
}

/* ==================== mainPage 统一 section 变量 ==================== */
#mainPage #dashboard-content,
#mainPage #transfer-content,
#mainPage #user-info-content,
#mainPage #history-content,
#mainPage #ranking-content,
#mainPage #statistics-content,
#mainPage #website-management-content,
#mainPage #users-content,
#mainPage #tickets-content,
#mainPage #customer-tickets-content,
#mainPage #plugins-content,
#mainPage #customers-content,
#mainPage #recharge-content,
#mainPage #casino-content {
    --section-accent: var(--primary-color);
    --section-soft: var(--bg-soft);
}

#mainPage,
#mainPage .content-wrapper,
#mainPage .container,
#mainPage .tab-content {
    background: transparent !important;
}

#mainPage .top-header-shell,
#mainPage .content-wrapper,
#mainPage .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#mainPage .content-wrapper {
    padding-top: 0;
}

#mainPage .sidebar {
    background: var(--theme-sidebar) !important;
    border-right: 1px solid var(--theme-sidebar-border) !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#mainPage .sidebar::before {
    content: none;
}

#mainPage .sidebar-header,
#mainPage .sidebar-footer {
    border-color: var(--theme-sidebar-border) !important;
    position: relative;
    z-index: 1;
}

#mainPage .sidebar-title,
#mainPage .sidebar-footer,
#mainPage .sidebar .nav-link,
#mainPage .sidebar .nav-link i {
    color: var(--theme-sidebar-text) !important;
}

#mainPage .sidebar-title {
    letter-spacing: 0.02em;
}

#mainPage .sidebar .nav-link {
    margin: 0 12px 8px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

#mainPage .sidebar .nav-link::before {
    content: none;
}

#mainPage .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(60, 60, 67, 0.05) !important;
    transform: none !important;
}

#mainPage .sidebar .nav-link.active {
    background: #ffffff !important;
    border-color: rgba(142, 164, 186, 0.12) !important;
    box-shadow: 0 1px 2px rgba(29, 29, 31, 0.04) !important;
}

#mainPage .sidebar .nav-link:hover::before,
#mainPage .sidebar .nav-link.active::before {
    opacity: 1;
}

#mainPage .sidebar .nav-link:hover i,
#mainPage .sidebar .nav-link.active i {
    color: var(--theme-primary) !important;
}

#mainPage .sidebar-footer .bg-light {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(60, 60, 67, 0.06) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#mainPage #currentBrowseTime,
#mainPage #totalBrowseTime {
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    font-weight: 600;
    box-shadow: none !important;
}

#mainPage #currentBrowseTime {
    background: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-primary-soft) 18%) !important;
    color: var(--theme-text) !important;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 14%, var(--theme-border) 86%) !important;
}

#mainPage #totalBrowseTime {
    background: color-mix(in srgb, var(--theme-surface) 82%, var(--surface-soft-success) 18%) !important;
    color: var(--theme-text) !important;
    border: 1px solid color-mix(in srgb, var(--theme-success) 14%, var(--theme-border) 86%) !important;
}

#mainPage .sidebar-footer .btn {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(108, 139, 255, 0.12) !important;
    color: var(--theme-sidebar-text) !important;
    box-shadow: none !important;
}

#mainPage .sidebar-footer .btn:hover {
    background: #ffffff !important;
    border-color: rgba(108, 139, 255, 0.2) !important;
    color: var(--theme-text) !important;
}

#mainPage #changeUsernameBtn {
    background: rgba(108, 139, 255, 0.12) !important;
    border-color: rgba(108, 139, 255, 0.24) !important;
    color: #4f6fff !important;
}

#mainPage #changeUsernameBtn:hover {
    background: rgba(108, 139, 255, 0.18) !important;
    border-color: rgba(108, 139, 255, 0.3) !important;
    color: #3f5ef0 !important;
}

#mainPage #randomApiKeyBtn {
    background: rgba(35, 191, 155, 0.12) !important;
    border-color: rgba(35, 191, 155, 0.24) !important;
    color: #169c7b !important;
}

#mainPage #randomApiKeyBtn:hover {
    background: rgba(35, 191, 155, 0.18) !important;
    border-color: rgba(35, 191, 155, 0.3) !important;
    color: #0f8a6c !important;
}

#mainPage .top-navbar {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
}

#mainPage .top-navbar.mb-4,
#mainPage #recentTabsBar {
    margin-bottom: 0 !important;
}

#mainPage .recent-tabs-bar {
    margin-top: 0 !important;
}

#mainPage .announcement-banner {
    margin: 12px 16px 0;
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-left: 3px solid var(--theme-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#mainPage .card,
#mainPage .unified-history-tab > .card,
#mainPage .unified-history-tab > .row > [class*="col-"] > .card,
#mainPage .unified-history-tab > .row > .col-md-7 > form,
#mainPage .unified-history-tab > .row > .col-md-5 > .cart-wrapper,
#mainPage .unified-history-tab .card.shadow-sm.border-0,
#mainPage .unified-history-tab .card.mb-3,
#mainPage .unified-history-tab .card.mb-2 {
    background: var(--card-bg) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#mainPage .card:hover {
    box-shadow: 0 8px 20px rgba(29, 29, 31, 0.045) !important;
}

#mainPage .card-header,
#mainPage .unified-history-tab .card > .card-header,
#mainPage .unified-history-tab .cart-header {
    background: var(--card-info) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    color: var(--theme-text) !important;
    position: relative;
}

#mainPage .card-header::after,
#mainPage .unified-history-tab .card > .card-header::after,
#mainPage .unified-history-tab .cart-header::after,
#mainPage .card-body::before,
#mainPage .premium-history-section .card-body.bg-light::before {
    display: none !important;
}

#mainPage .card-body,
#mainPage .unified-history-tab .card > .card-body,
#mainPage .unified-history-tab .cart-body,
#mainPage .unified-history-tab .cart-footer {
    background: transparent !important;
}

/* ==================== mainPage 覆盖：Dashboard 标签页 ==================== */
#mainPage .premium-dashboard-section {
    padding-top: 0;
    padding-bottom: 10px;
}

#mainPage .premium-announcements-zone {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

/* ==================== mainPage 覆盖：User Info 标签页 ==================== */
#mainPage .premium-user-info-section .premium-info-tile,
#mainPage .premium-user-info-section .premium-finance-tile,
#mainPage .premium-user-info-section .premium-section-block,
#mainPage .premium-history-section .premium-filter-shell,
#mainPage .premium-history-section .premium-stat-shell,
#mainPage .premium-history-section .premium-table-shell,
#mainPage .unified-history-tab .table-responsive,
#mainPage .unified-history-tab #pluginsList,
#mainPage .unified-history-tab #rechargeHistoryContainer,
#mainPage .unified-history-tab #projectStatisticsContainer,
#mainPage .unified-history-tab #websiteManagementTabs,
#mainPage .unified-history-tab #quickSelectButtons,
#mainPage .unified-history-tab #familiarUserButtons,
#mainPage #ranking-content #rankingTableContainer,
#mainPage #ranking-content #noRankingData,
#mainPage #ranking-content #selectProjectPrompt,
#mainPage #users-content .table-responsive,
#mainPage #website-management-content .table-responsive,
#mainPage #paymentResult,
#mainPage #orderStatusResult,
#mainPage #orderStatusInfo {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#mainPage .premium-user-info-section .premium-finance-accent {
    background: #ffffff !important;
}

#mainPage .premium-user-info-section .premium-ghost-btn,
#mainPage .premium-user-info-section #inviteLinkInput,
#mainPage .premium-user-info-section .input-group-text {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    color: var(--theme-text-secondary) !important;
}

#mainPage .premium-dashboard-tip,
#mainPage .alert.alert-info,
#mainPage .unified-history-tab .alert:not(.alert-danger):not(.alert-success) {
    background: var(--card-info) !important;
    border: 1px solid rgba(74, 144, 226, 0.14) !important;
    color: var(--theme-text-secondary) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#mainPage .table,
#mainPage .table-responsive {
    color: var(--theme-text) !important;
}

#mainPage .unified-history-tab .table thead th,
#mainPage #customerDashboardBody table thead th,
#mainPage #customerDashboardBody table tfoot td,
#mainPage #rechargePaymentModal .table-light,
#mainPage #rechargePaymentModal tfoot.table-light,
#mainPage #rechargePaymentModal .card-header.bg-light {
    background: #f8fafc !important;
    color: var(--theme-text-secondary) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    font-size: 0.79rem;
    font-weight: 600 !important;
}

#mainPage .unified-history-tab .table tbody td,
#mainPage #customerDashboardBody table tbody td {
    color: var(--theme-text) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    vertical-align: middle !important;
}

#mainPage .unified-history-tab .table-hover tbody tr:hover,
#mainPage #customerDashboardBody table tbody tr:hover {
    background: #f9fbfd !important;
}

#mainPage .form-control,
#mainPage .form-select,
#mainPage .input-group-text,
#mainPage textarea,
#mainPage .btn-group > .btn,
#mainPage .unified-history-tab .form-control,
#mainPage .unified-history-tab .form-select,
#mainPage .unified-history-tab .input-group-text,
#mainPage .unified-history-tab textarea {
    background: #ffffff !important;
    color: var(--theme-text) !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#mainPage .form-control:focus,
#mainPage .form-select:focus,
#mainPage textarea:focus,
#mainPage #customerSearchInput:focus,
#mainPage #customerSortBy:focus,
#mainPage #customerSortOrder:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.10) !important;
}

#mainPage .btn,
#mainPage .pagination .page-link {
    border-radius: var(--button-radius) !important;
}

#mainPage .btn-sm,
#mainPage .btn-group-sm > .btn {
    border-radius: var(--button-radius-sm) !important;
}

#mainPage .badge {
    border-radius: var(--border-radius-sm) !important;
}

#mainPage .btn-primary,
#mainPage .unified-history-tab .btn-primary {
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#mainPage .btn-primary:hover,
#mainPage .unified-history-tab .btn-primary:hover {
    background: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
    color: #ffffff !important;
}

#mainPage .btn-outline-primary,
#mainPage .btn-outline-secondary,
#mainPage .btn-outline-info,
#mainPage .btn-outline-success,
#mainPage .btn-outline-danger,
#mainPage .unified-history-tab .btn-check:checked + .btn-outline-primary,
#mainPage .unified-history-tab .btn-check:active + .btn-outline-primary,
#mainPage .unified-history-tab .btn-outline-primary.active,
#mainPage .unified-history-tab .btn-outline-primary.dropdown-toggle.show,
#mainPage .unified-history-tab .btn-check:checked + .btn-outline-success,
#mainPage .unified-history-tab .btn-check:active + .btn-outline-success,
#mainPage .unified-history-tab .btn-outline-success.active,
#mainPage .unified-history-tab .btn-outline-success.dropdown-toggle.show,
#mainPage .unified-history-tab .btn-check:checked + .btn-outline-danger,
#mainPage .unified-history-tab .btn-check:active + .btn-outline-danger,
#mainPage .unified-history-tab .btn-outline-danger.active,
#mainPage .unified-history-tab .btn-outline-danger.dropdown-toggle.show,
#mainPage .unified-history-tab .btn-check:checked + .btn-outline-secondary,
#mainPage .unified-history-tab .btn-check:active + .btn-outline-secondary,
#mainPage .unified-history-tab .btn-outline-secondary.active,
#mainPage .unified-history-tab .btn-outline-secondary.dropdown-toggle.show,
#mainPage .unified-history-tab .btn-check:checked + .btn-outline-info,
#mainPage .unified-history-tab .btn-check:active + .btn-outline-info,
#mainPage .unified-history-tab .btn-outline-info.active,
#mainPage .unified-history-tab .btn-outline-info.dropdown-toggle.show {
    background: #ffffff !important;
    color: var(--theme-text-secondary) !important;
    border-color: #dce4ee !important;
    box-shadow: none !important;
}

/* ==================== mainPage 覆盖：Transfer / History 标签页 ==================== */
#mainPage .btn-outline-primary:hover,
#mainPage .btn-outline-secondary:hover,
#mainPage .btn-outline-info:hover,
#mainPage .btn-outline-success:hover,
#mainPage .btn-outline-danger:hover,
#mainPage .transfer-history-tab #quickSelectButtons .btn:hover,
#mainPage .transfer-history-tab #familiarUserButtons .btn:hover,
#mainPage .transfer-history-tab #quickSelectButtons .btn.active,
#mainPage .transfer-history-tab #familiarUserButtons .btn.active,
#mainPage .premium-history-section #historyTypeFilter .btn.active,
#mainPage .unified-history-tab #websiteManagementTabs .nav-link.active,
#mainPage .unified-history-tab #websiteManagementTabs .nav-link:hover {
    background: #f8fafc !important;
    color: var(--theme-text-secondary) !important;
    border-color: #dce4ee !important;
    box-shadow: none !important;
}

#mainPage .btn-success,
#mainPage .unified-history-tab .btn-success,
#mainPage .unified-history-tab .badge.bg-success,
#mainPage #orderStatusLabel.bg-success {
    background: var(--theme-success) !important;
    color: #ffffff !important;
    border: 1px solid rgba(101, 184, 122, 0.2) !important;
    box-shadow: none !important;
}

#mainPage .btn-danger,
#mainPage .unified-history-tab .btn-danger,
#mainPage .unified-history-tab .badge.bg-danger,
#mainPage #orderStatusLabel.bg-danger {
    background: var(--theme-danger) !important;
    color: #ffffff !important;
    border: 1px solid rgba(230, 124, 115, 0.24) !important;
    box-shadow: none !important;
}

#mainPage .btn-warning,
#mainPage .unified-history-tab .btn-warning,
#mainPage .unified-history-tab .badge.bg-warning,
#mainPage .unified-history-tab .badge.text-bg-warning,
#mainPage #orderStatusLabel.bg-warning {
    background: var(--theme-warning) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240, 185, 75, 0.25) !important;
    box-shadow: none !important;
}

#mainPage .btn-info,
#mainPage .unified-history-tab .btn-info,
#mainPage .unified-history-tab .badge.bg-info,
#mainPage .unified-history-tab .badge.text-bg-light,
#mainPage .unified-history-tab .badge.bg-primary {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    border: 1px solid rgba(74, 144, 226, 0.2) !important;
    box-shadow: none !important;
}

#mainPage .transfer-history-tab .btn-group[role="group"],
#mainPage .transfer-history-tab #quickSelectButtons,
#mainPage .transfer-history-tab #familiarUserButtons,
#mainPage .unified-history-tab #websiteManagementTabs {
    padding: 8px !important;
    background: #f8fafc !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

#mainPage .transfer-history-tab .btn-group[role="group"] > .btn {
    min-height: 44px;
    font-weight: 600;
}

#mainPage .premium-history-section .premium-stat-shell,
#mainPage .premium-history-section .premium-stat-shell .fw-bold {
    color: var(--theme-text) !important;
}

#mainPage .premium-history-section .premium-stat-icon.positive {
    background: #edf7f0 !important;
    color: var(--theme-success) !important;
}

#mainPage .premium-history-section .premium-stat-icon.negative {
    background: #fbf1f1 !important;
    color: var(--theme-danger) !important;
}

#mainPage h1,
#mainPage h2,
#mainPage h3,
#mainPage h4,
#mainPage h5,
#mainPage h6,
#mainPage .card-title,
#mainPage .card-header h5,
#mainPage .card-header h6,
#mainPage .premium-section-block h6,
#mainPage .text-dark,
#mainPage .sidebar-title,
#mainPage .announcement-title,
#mainPage .announcement-content-text,
#mainPage .premium-filter-shell .fw-semibold,
#mainPage .premium-stat-shell .fw-bold,
#mainPage .card-header {
    color: var(--theme-text) !important;
}

#mainPage .text-primary,
#mainPage .premium-section-block .text-primary,
#mainPage .card-header .text-primary,
#mainPage #thresholdFeeModal .text-info,
#mainPage #editRechargeRuleModal .text-info,
#mainPage #editRechargeRuleModal small.text-info,
#mainPage .unified-history-tab .text-info,
#mainPage .unified-history-tab small.text-info,
#mainPage .unified-history-tab .small.text-info {
    color: var(--theme-primary) !important;
}

#mainPage #paymentDiscountRow th,
#mainPage #paymentBalanceDeductRow th,
#mainPage #paymentFeeRow th {
    color: var(--theme-text-secondary) !important;
}

#mainPage #paymentDiscountRow span,
#mainPage #paymentBalanceDeductRow span,
#mainPage #multiplierModal #previewPrice,
#mainPage #paymentAmount,
#mainPage #paymentFeeRow span {
    color: var(--theme-text) !important;
}

#mainPage .text-muted,
#mainPage small.text-muted,
#mainPage .form-text,
#mainPage .page-description,
#mainPage .premium-dashboard-tip,
#mainPage .premium-user-info-section small,
#mainPage .premium-history-section .small,
#mainPage .unified-history-tab .text-muted,
#mainPage .unified-history-tab small.text-muted,
#mainPage .unified-history-tab .small.text-muted,
#mainPage .unified-history-tab .form-text,
#mainPage .unified-history-tab .pagination,
#mainPage .unified-history-tab .pagination .page-link {
    color: var(--theme-text-secondary) !important;
}

#mainPage .pagination .page-link {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.07) !important;
    color: var(--theme-text-secondary) !important;
}

#mainPage .pagination .page-item.active .page-link,
#mainPage .pagination .page-link:hover {
    background: #eef3f8 !important;
    border-color: rgba(124, 143, 166, 0.16) !important;
    color: #7c8fa6 !important;
}

#mainPage #paymentIframe,
#mainPage #orderStatusIframe,
#mainPage #thresholdFeeModal .card.bg-light {
    background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-surface-soft) 12%) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

#mainPage #multiplierModal .card.bg-light {
    background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-surface-soft) 8%) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

#mainPage #selectAllCustomers {
    accent-color: #8fa0b2;
}

#mainPage .alert-danger,
#mainPage .alert-success,
#mainPage .alert-warning,
#mainPage .alert-info {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

#mainPage .alert-danger {
    background: rgba(232, 105, 120, 0.12) !important;
    color: #e86978 !important;
    border-color: rgba(232, 105, 120, 0.2) !important;
}

#mainPage .alert-success {
    background: rgba(74, 186, 101, 0.12) !important;
    color: #4aba65 !important;
    border-color: rgba(74, 186, 101, 0.2) !important;
}

#mainPage .alert-warning {
    background: rgba(255, 206, 84, 0.18) !important;
    color: #b98900 !important;
    border-color: rgba(255, 206, 84, 0.24) !important;
}

#mainPage .alert-info {
    background: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-primary-soft) 18%) !important;
    color: var(--theme-text-secondary) !important;
    border-color: color-mix(in srgb, var(--theme-primary) 14%, var(--theme-border) 86%) !important;
}

#mainPage #transfer-content .alert.alert-info i,
#mainPage .premium-dashboard-tip i {
    color: var(--theme-primary) !important;
}

#mainPage .bg-light,
#mainPage .table-light,
#mainPage .text-bg-light,
#mainPage .bg-white.border.rounded-3,
#mainPage .card-body.bg-light,
#mainPage .description-content.p-2.bg-light.rounded {
    background: #f4f6f8 !important;
    color: var(--theme-text) !important;
    border-color: rgba(60, 60, 67, 0.05) !important;
}

#mainPage .modal-content {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(29, 29, 31, 0.08) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

#mainPage .modal-header,
#mainPage .modal-header.bg-primary,
#mainPage .modal-header.bg-danger,
#mainPage .modal-header.bg-warning,
#mainPage .modal-header.bg-info,
#mainPage .modal-header.bg-light {
    background: rgba(248, 249, 251, 0.9) !important;
    color: var(--theme-text) !important;
    border-bottom: 1px solid rgba(60, 60, 67, 0.06) !important;
}

#mainPage .modal-footer {
    border-top: 1px solid rgba(60, 60, 67, 0.06) !important;
}

#mainPage .card.bg-primary,
#mainPage .card.bg-light,
#mainPage .bg-primary,
#mainPage .bg-info,
#mainPage .bg-warning,
#mainPage .bg-success,
#mainPage .bg-danger {
    color: var(--theme-text) !important;
    border-color: rgba(60, 60, 67, 0.06) !important;
}

#mainPage .card.bg-primary,
#mainPage .bg-primary {
    background: #f1f4f7 !important;
}

#mainPage .card.bg-light,
#mainPage .bg-light {
    background: rgba(250, 250, 252, 0.82) !important;
}

#mainPage .bg-info {
    background: #f2f5f7 !important;
}

#mainPage .bg-warning {
    background: #fbf6ef !important;
}

#mainPage .bg-success {
    background: #f2f6f3 !important;
}

#mainPage .bg-danger {
    background: #fbf1f1 !important;
}

#mainPage .badge,
#mainPage .badge.bg-primary,
#mainPage .badge.bg-info,
#mainPage .badge.bg-success,
#mainPage .badge.bg-danger,
#mainPage .badge.bg-warning,
#mainPage .badge.text-bg-light,
#mainPage .badge.text-dark.bg-light.border {
    border-radius: var(--border-radius-sm) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

#mainPage .badge.bg-primary,
#mainPage .badge.bg-info,
#mainPage .badge.text-bg-light,
#mainPage .badge.text-dark.bg-light.border {
    background: rgba(108, 139, 255, 0.12) !important;
    color: #6c8bff !important;
    border: 1px solid rgba(108, 139, 255, 0.16) !important;
}

#mainPage .badge.bg-success {
    background: rgba(74, 186, 101, 0.12) !important;
    color: #4aba65 !important;
    border: 1px solid rgba(74, 186, 101, 0.16) !important;
}

#mainPage .badge.bg-danger {
    background: rgba(229, 72, 93, 0.14) !important;
    color: #d92f47 !important;
    border: 1px solid rgba(229, 72, 93, 0.22) !important;
}

#mainPage .badge.bg-warning {
    background: rgba(255, 206, 84, 0.18) !important;
    color: #b98900 !important;
    border: 1px solid rgba(255, 206, 84, 0.18) !important;
}

#mainPage .rounded-circle.bg-success.bg-opacity-10,
#mainPage .rounded-circle.bg-danger.bg-opacity-10,
#mainPage .rounded-circle.bg-light,
#mainPage .history-stat-icon,
#mainPage .premium-stat-icon {
    box-shadow: none !important;
}

#mainPage .rounded-circle.bg-success.bg-opacity-10 {
    background: #edf7f0 !important;
    color: #5f8a68 !important;
}

#mainPage .rounded-circle.bg-danger.bg-opacity-10 {
    background: #fbf1f1 !important;
    color: #a56f6f !important;
}

#mainPage .rounded-circle.bg-light {
    background: #f3f5f8 !important;
    color: #8b99a8 !important;
}

#mainPage .btn-outline-primary,
#mainPage .btn-outline-secondary,
#mainPage .btn-outline-danger,
#mainPage .btn-outline-success,
#mainPage .btn-outline-info,
#mainPage .btn-outline-warning {
    background: rgba(255, 255, 255, 0.92) !important;
}

#mainPage .btn-success {
    background: #8fb29a !important;
    border-color: #8fb29a !important;
    color: #ffffff !important;
}

#mainPage .btn-danger {
    background: #e5485d !important;
    border-color: #e5485d !important;
    color: #ffffff !important;
}

#mainPage .btn-warning {
    background: #ccb28c !important;
    border-color: #ccb28c !important;
    color: #ffffff !important;
}

#mainPage .btn-info {
    background: #9eb1c4 !important;
    border-color: #9eb1c4 !important;
    color: #ffffff !important;
}

#mainPage .btn-success:hover,
#mainPage .btn-danger:hover,
#mainPage .btn-warning:hover,
#mainPage .btn-info:hover {
    filter: brightness(0.97);
}

#mainPage .input-group-text {
    background: rgba(248, 249, 251, 0.96) !important;
}

#mainPage .nav-link.website-tab-btn,
#mainPage .website-tab-btn,
#mainPage .game-select-btn {
    border-radius: 14px !important;
}

#mainPage .game-select-btn.active,
#mainPage .website-tab-btn.active,
#mainPage .nav-link.website-tab-btn.active {
    background: #eef3f8 !important;
    color: #7f92a6 !important;
    border-color: rgba(142, 164, 186, 0.14) !important;
}

#mainPage .btn-secondary,
#mainPage .btn-light,
#mainPage .btn-outline-warning,
#mainPage .btn-outline-light,
#mainPage .btn-outline-dark {
    background: rgba(255, 255, 255, 0.9);
    color: var(--theme-text-secondary);
    border-color: rgba(60, 60, 67, 0.08);
    box-shadow: none;
}

#mainPage .btn-secondary:hover,
#mainPage .btn-light:hover,
#mainPage .btn-outline-warning:hover,
#mainPage .btn-outline-light:hover,
#mainPage .btn-outline-dark:hover {
    background: #eef3f8;
    color: var(--theme-text);
    border-color: rgba(142, 164, 186, 0.16);
}

#mainPage .modal-header.text-white,
#mainPage .modal-header.text-dark,
#mainPage .card.text-white,
#mainPage .bg-primary.text-white,
#mainPage .bg-info.text-white,
#mainPage .bg-danger.text-white,
#mainPage .bg-warning.text-dark,
#mainPage .bg-success.text-white {
    color: var(--theme-text) !important;
}

#mainPage #casino-content .card[style*="linear-gradient"],
#mainPage #casino-content .cc-gradient-pink-card,
#mainPage #casino-content .cc-gradient-blue-card,
#mainPage #customers-content [style*="linear-gradient"],
#mainPage #customers-content .cc-customer-dashboard-toggle,
#mainPage #casino-content [style*="background: #f8f9fa"],
#mainPage #casino-content .cc-bg-light-card,
#mainPage #customers-content [style*="border-radius: 8px"],
#mainPage #customers-content .cc-radius-8,
#mainPage #customers-content .cc-customer-dashboard-toggle,
#mainPage #recharge-content [style*="background: var(--surface-tint)"],
#mainPage #recharge-content .cc-bg-surface-tint,
#mainPage #recharge-content [style*="border-bottom: 1px solid var(--border-color)"],
#mainPage #recharge-content .cc-border-bottom-theme,
#mainPage #recharge-content [style*="background: var(--primary-color)"],
#mainPage #recharge-content .cc-recharge-icon-box,
#mainPage #recharge-content [style*="background: var(--accent-soft)"],
#mainPage #recharge-content .cc-badge-accent-soft,
#mainPage #recharge-content [style*="background: var(--surface-soft-warning)"],
#mainPage #recharge-content .cc-badge-warning-soft,
#mainPage #recharge-content [style*="background: var(--muted-soft)"],
#mainPage #recharge-content .cc-badge-muted-soft,
#mainPage #recharge-content [style*="background: var(--surface-soft-success)"],
#mainPage #recharge-content .cc-badge-success-soft {
    background-image: none !important;
}

#mainPage #casino-content .card[style*="linear-gradient"],
#mainPage #casino-content .cc-gradient-pink-card,
#mainPage #casino-content .cc-gradient-blue-card,
#mainPage #customers-content [style*="background: linear-gradient"],
#mainPage #customers-content .cc-customer-dashboard-toggle,
#mainPage #customers-content .card-header[data-bs-target="#customerDashboardBody"] {
    background: #ffffff !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--theme-border) !important;
    box-shadow: none !important;
}

#mainPage #casino-content .card[style*="linear-gradient"] .card-body,
#mainPage #casino-content .card[style*="linear-gradient"] small,
#mainPage #casino-content .card[style*="linear-gradient"] .fw-bold,
#mainPage #casino-content .cc-gradient-pink-card .card-body,
#mainPage #casino-content .cc-gradient-pink-card small,
#mainPage #casino-content .cc-gradient-pink-card .fw-bold,
#mainPage #casino-content .cc-gradient-blue-card .card-body,
#mainPage #casino-content .cc-gradient-blue-card small,
#mainPage #casino-content .cc-gradient-blue-card .fw-bold,
#mainPage #customers-content .card-header[data-bs-target="#customerDashboardBody"] small,
#mainPage #customers-content .card-header[data-bs-target="#customerDashboardBody"] i {
    color: var(--theme-text) !important;
}

#mainPage #casino-content .badge[style*="background:"],
#mainPage #casino-content .cc-badge-odds,
#mainPage #recharge-content .badge[style*="background:"],
#mainPage #recharge-content .cc-badge-accent-soft,
#mainPage #recharge-content .cc-badge-muted-soft,
#mainPage #recharge-content .cc-badge-warning-soft,
#mainPage #recharge-content .cc-badge-success-soft,
#mainPage #customers-content .badge[style*="background:"] {
    border-radius: var(--border-radius-sm) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: none !important;
}

#mainPage #casino-content .badge[style*="background:"],
#mainPage #casino-content .cc-badge-odds,
#mainPage #recharge-content .badge[style*="background: var(--accent-soft)"],
#mainPage #recharge-content .cc-badge-accent-soft,
#mainPage #recharge-content .badge[style*="background: var(--muted-soft)"],
#mainPage #recharge-content .cc-badge-muted-soft,
#mainPage #recharge-content .badge[style*="background: var(--surface-soft-warning)"],
#mainPage #recharge-content .cc-badge-warning-soft,
#mainPage #recharge-content .badge[style*="background: var(--surface-soft-success)"],
#mainPage #recharge-content .cc-badge-success-soft {
    background: #eef9fc !important;
    color: #247f98 !important;
}

#mainPage #recharge-content .badge.benefit-count-badge,
#mainPage #recharge-content .badge[style*="background: #eef6ff"],
#mainPage #recharge-content .badge[style*="background: #eef9fc"] {
    background: #eef6ff !important;
    color: #2f7fe8 !important;
    border: 1px solid #b8d9f0 !important;
}

/* ==================== mainPage 覆盖：Recharge 标签页 ==================== */
#mainPage #recharge-content .recharge-benefits-card,
#mainPage #recharge-content .payment-methods-container .btn,
#mainPage #recharge-content .payment-methods-container .btn-check:checked + .btn,
#mainPage #recharge-content #userBenefitsSummary .badge,
#mainPage #recharge-content .cart-footer-label .badge {
    border-color: rgba(60, 60, 67, 0.08) !important;
    box-shadow: none !important;
}

#mainPage #recharge-content .recharge-benefits-card,
#mainPage #recharge-content .payment-methods-container .btn,
#mainPage #recharge-content .payment-methods-container .btn-check:checked + .btn {
    background: #ffffff !important;
    color: var(--theme-text) !important;
}

#mainPage #recharge-content .payment-methods-container .btn-check:checked + .btn {
    border-color: #9fcdff !important;
    background: #eef6ff !important;
    color: #2f7fe8 !important;
}

#mainPage #user-info-content [style*="color: #166534"],
#mainPage #user-info-content .cc-text-green-strong,
#mainPage #recharge-content [style*="color: #166534"],
#mainPage #recharge-content .cc-text-green-strong,
#mainPage #recharge-content [style*="color: var(--accent-strong)"],
#mainPage #recharge-content .cc-text-accent-strong,
#mainPage #customers-content [style*="color: var(--text-primary)"],
#mainPage #customers-content .cc-text-primary,
#mainPage #customers-content [style*="color: var(--text-secondary)"],
#mainPage #customers-content .cc-text-secondary {
    color: var(--theme-text-secondary) !important;
}

#mainPage #recharge-content .cc-recharge-icon-box i,
#mainPage #recharge-content .cart-header-icon i,
#mainPage #recharge-content .recharge-benefits-card .fa-wallet {
    color: #4b9fff !important;
}

#mainPage #recharge-content [style*="background: var(--primary-color)"],
#mainPage #recharge-content .cc-recharge-icon-box,
#mainPage #recharge-content .cart-header-icon {
    background: #eef6ff !important;
    color: #7f92a6 !important;
}

#mainPage #recharge-content [style*="border-bottom: 1px solid var(--border-color)"],
#mainPage #recharge-content .cc-border-bottom-theme,
#mainPage #customers-content [style*="border-bottom: 1px solid #dee2e6"],
#mainPage #customers-content .cc-border-bottom-light {
    border-bottom: 1px solid rgba(60, 60, 67, 0.08) !important;
}

#mainPage #customerDashboardBody,
#mainPage #customerDashboardBody .px-2.py-1,
#mainPage #customerDashboardBody table,
#mainPage #customerDashboardBody thead tr,
#mainPage #customerDashboardBody tbody tr,
#mainPage #customerDashboardBody tfoot {
    background: transparent !important;
}

#mainPage #customerDashboardBody table th,
#mainPage #customerDashboardBody table td {
    border-color: rgba(60, 60, 67, 0.06) !important;
}

#mainPage #ticketDetailModal .card.border-warning,
#mainPage #customerTicketDetailModal .card.border-warning,
#mainPage #secondReviewModal .alert.alert-warning,
#mainPage #refundConfirmModal .alert.alert-warning {
    background: #fbf6ef !important;
    border-color: rgba(183, 155, 117, 0.16) !important;
    color: #a78d66 !important;
}

#mainPage #ticketDetailModal .admin-refund-controls,
#mainPage #customerTicketDetailModal .admin-refund-controls,
#mainPage #customerTicketDetailModal .reply-form-section,
#mainPage #ticketDetailModal .reply-form-section {
    border-color: rgba(60, 60, 67, 0.06) !important;
}

#mainPage #customerTicketDetailModal .card,
#mainPage #ticketDetailModal .card,
#mainPage #rechargePaymentModal .card,
#mainPage #multiplierModal .card,
#mainPage #thresholdFeeModal .card,
#mainPage #refundConfirmModal .refund-confirm-info,
#mainPage #orderStatusModal #orderStatusInfo {
    background: #ffffff !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

#mainPage [style*="linear-gradient"],
#mainPage [style*="radial-gradient"],
#mainPage [style*="conic-gradient"],
#mainPage .bg-gradient-primary,
#mainPage .cc-gradient-pink-card,
#mainPage .cc-gradient-blue-card {
    background-image: none !important;
}

#mainPage [style*="linear-gradient"],
#mainPage [style*="radial-gradient"],
#mainPage [style*="conic-gradient"],
#mainPage .bg-gradient-primary {
    background: #ffffff !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    box-shadow: none !important;
}

#mainPage .badge[style*="linear-gradient"],
#mainPage .badge[style*="radial-gradient"],
#mainPage .badge[style*="conic-gradient"] {
    background: #eef4ff !important;
    color: var(--theme-primary) !important;
    border: 1px solid rgba(74, 144, 226, 0.14) !important;
}

#mainPage .btn[style*="linear-gradient"],
#mainPage .btn[style*="radial-gradient"],
#mainPage .btn[style*="conic-gradient"] {
    background: var(--theme-primary) !important;
    color: #ffffff !important;
    border-color: var(--theme-primary) !important;
}

#mainPage #customerTicketDetailModal .modal-body,
#mainPage #ticketDetailModal .modal-body,
#mainPage #rechargePaymentModal .modal-body,
#mainPage #orderStatusModal .modal-body,
#mainPage #thresholdFeeModal .modal-body,
#mainPage #refundConfirmModal .modal-body {
    background: rgba(248, 249, 251, 0.5) !important;
}

#mainPage #multiplierModal .modal-body {
    background: color-mix(in srgb, var(--theme-page-bg) 84%, white 16%) !important;
}

#mainPage #customerTicketDetailModal .section-title,
#mainPage #ticketDetailModal .section-title,
#mainPage #customerTicketDetailModal .info-value,
#mainPage #ticketDetailModal .info-value,
#mainPage #customerTicketDetailModal strong,
#mainPage #ticketDetailModal strong,
#mainPage #rechargePaymentModal strong,
#mainPage #orderStatusModal strong {
    color: var(--theme-text) !important;
}

#mainPage #customerTicketDetailModal .info-label,
#mainPage #ticketDetailModal .info-label,
#mainPage #customerTicketDetailModal .mobile-info-label,
#mainPage #ticketDetailModal .mobile-info-label,
#mainPage #rechargePaymentModal .text-muted,
#mainPage #orderStatusModal .text-muted,
#mainPage #multiplierModal .text-muted,
#mainPage #thresholdFeeModal .text-muted {
    color: var(--theme-text-secondary) !important;
}

#mainPage #customerTicketDetailModal [style*="border-left: 4px solid"],
#mainPage #customerTicketDetailModal .cc-border-left-accent,
#mainPage #ticketDetailModal [style*="border-left: 4px solid"],
#mainPage #ticketDetailModal .cc-border-left-accent {
    border-left: 1px solid rgba(183, 155, 117, 0.18) !important;
}

#mainPage #ticketDetailModal #refundAmountDisplay,
#mainPage #customerTicketDetailModal #ctDetailCompensationAmount {
    color: #a56f6f !important;
}

#mainPage #ticketDetailModal #actualRefundAmountDisplay,
#mainPage #customerTicketDetailModal #customerProjectBalance,
#mainPage #multiplierModal #previewBalance {
    color: #5f8a68 !important;
}

#mainPage #multiplierModal .text-info,
#mainPage #thresholdFeeModal .text-info,
#mainPage #rechargePaymentModal .text-success,
#mainPage #rechargePaymentModal [style*="color: #52c41a"],
#mainPage #rechargePaymentModal .cc-text-payment-success,
#mainPage #rechargePaymentModal #paymentAmount,
#mainPage #orderStatusModal .text-success {
    color: #239a48 !important;
}

#mainPage #multiplierModal .card.bg-light .card-body {
    background: transparent !important;
}

#mainPage #multiplierModal .card.bg-light .row.text-center > .col-4 + .col-4 {
    border-left: 1px solid rgba(15, 23, 42, 0.06) !important;
}

#mainPage #multiplierModal #previewPrice {
    color: var(--theme-text) !important;
}

#mainPage #rechargePaymentModal [style*="border-top: 2px solid #dee2e6"],
#mainPage #rechargePaymentModal .cc-border-top-strong,
#mainPage #customerTicketDetailModal [style*="border-top:"],
#mainPage #ticketDetailModal [style*="border-top:"] {
    border-top: 1px solid rgba(60, 60, 67, 0.08) !important;
}

#mainPage #rechargePaymentModal .table tfoot th,
#mainPage #rechargePaymentModal .table tfoot td,
#mainPage #rechargePaymentModal .table thead th,
#mainPage #rechargePaymentModal .table tbody td {
    border-color: rgba(60, 60, 67, 0.06) !important;
}

#mainPage #rechargePaymentModal #paymentDiscountRow th,
#mainPage #rechargePaymentModal #paymentDiscountRow span,
#mainPage #rechargePaymentModal .text-success.fs-5,
#mainPage #ticketDetailModal .text-success,
#mainPage #customerTicketDetailModal .text-success {
    color: #5f8a68 !important;
}

#mainPage #customerTicketDetailModal .btn.btn-sm.btn-light,
#mainPage #ticketDetailModal .btn.btn-sm.btn-light,
#mainPage #customerTicketDetailModal .btn-close,
#mainPage #ticketDetailModal .btn-close,
#mainPage #rechargePaymentModal .btn-close,
#mainPage #orderStatusModal .btn-close,
#mainPage #multiplierModal .btn-close,
#mainPage #thresholdFeeModal .btn-close,
#mainPage #refundConfirmModal .btn-close {
    box-shadow: none !important;
}

#mainPage #customerTicketDetailModal .btn.btn-sm.btn-light {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(60, 60, 67, 0.08) !important;
    color: var(--theme-text-secondary) !important;
}

#mainPage #adjustSubordinateModal .bg-warning.bg-opacity-10,
#mainPage #adjustSubordinateModal [style*="color: #92400e"],
#mainPage #adjustSubordinateModal .cc-text-warning-strong {
    background: #fbf6ef !important;
    color: #a78d66 !important;
    border-color: rgba(183, 155, 117, 0.14) !important;
}

@media (max-width: 768px) {
    #mainPage .announcement-banner {
        margin: 10px 10px 0;
        border-radius: 16px !important;
    }

    #mainPage .top-navbar {
        border-radius: 0 !important;
    }

    #mainPage .card,
    #mainPage .unified-history-tab > .card,
    #mainPage .unified-history-tab > .row > [class*="col-"] > .card,
    #mainPage .modal-content {
        border-radius: 18px !important;
    }

    #mainPage .sidebar .nav-link {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}
/* ===== 对接中心查阅体验 ===== */
#mainPage #integration-center-content .cc-min-w-320 {
    min-width: min(100%, 520px);
}

#mainPage .integration-ai-docs-output {
    max-height: 520px;
    overflow: auto;
    padding: 16px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid rgba(148, 163, 184, 0.22);
}

#mainPage .integration-ai-docs-output.is-collapsed {
    max-height: 180px;
}

#mainPage #integrationAiDocsCard,
#mainPage #integrationDocsBrowser {
    scroll-margin-top: 78px;
}

#mainPage .integration-doc-nav-card {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow: hidden;
}

#mainPage .integration-doc-nav {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    gap: 6px;
}

#mainPage .integration-doc-nav .list-group-item {
    border: 0;
    border-radius: 10px;
    margin-bottom: 6px;
    text-align: left;
    transition: background-color .2s ease, box-shadow .2s ease;
}

#mainPage .integration-doc-nav .list-group-item:hover,
#mainPage .integration-doc-nav .list-group-item:focus {
    background: rgba(13, 110, 253, 0.08);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

#mainPage .integration-doc-reader {
    min-width: 0;
}

#mainPage .integration-doc-panel {
    scroll-margin-top: 78px;
}

#mainPage .cc-sticky-doc-header {
    top: 0;
    z-index: 2;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

#mainPage .integration-doc-content {
    line-height: 1.7;
}

#mainPage .integration-doc-content h6.text-primary,
#mainPage .integration-api-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(13, 110, 253, 0.08);
    border-left: 4px solid #0d6efd;
    scroll-margin-top: 92px;
}

#mainPage .integration-api-block {
    margin-bottom: 18px;
    padding: 4px 0 14px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
}

#mainPage .integration-api-block.integration-doc-hit {
    background: rgba(255, 243, 205, 0.35);
    border-radius: 14px;
    padding: 8px 10px 14px;
}

#mainPage .integration-doc-mark {
    padding: 1px 4px;
    border-radius: 4px;
    background: #ffe08a;
    color: #5c3b00;
}

#mainPage .integration-doc-content pre {
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: #111827 !important;
    color: #e5e7eb !important;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

#mainPage .integration-doc-content pre code {
    color: inherit;
    background: transparent;
    padding: 0;
}

#mainPage .integration-doc-content code {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 5px;
    padding: 2px 6px;
}

#mainPage .integration-doc-content .table-responsive {
    margin: 12px 0;
    border-radius: 12px;
}

#mainPage .integration-doc-content table {
    font-size: 0.9rem;
}

#mainPage .integration-doc-content table th {
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.04);
}

@media (max-width: 991.98px) {
    #mainPage .integration-doc-nav-card {
        position: static;
        max-height: none;
    }

    #mainPage .integration-doc-nav {
        max-height: 280px;
    }

    #mainPage .cc-sticky-doc-header {
        position: static !important;
    }
}





/* ==================== 注册安全滑块验证 ==================== */
.register-verify-box {
    margin: -0.25rem 0 1.25rem;
    padding: 0.85rem;
    border: 1px solid rgba(74, 144, 226, 0.16);
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, rgba(234, 242, 255, 0.86), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 24px rgba(15, 23, 42, 0.06);
}

.register-verify-preview {
    position: relative;
    height: 96px;
    margin-bottom: 0.75rem;
    border-radius: 14px;
    overflow: hidden;
    background-color: #eef4ff;
    background-image: url('../爽歪歪.jpeg');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.register-verify-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
    pointer-events: none;
}

.register-slider-target {
    position: absolute;
    top: 24px;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.98);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.46);
    box-shadow:
        0 0 0 999px rgba(15, 23, 42, 0.18),
        inset 0 0 0 2px rgba(0, 0, 0, 0.22),
        inset 0 8px 18px rgba(0, 0, 0, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.22);
    transform: none;
    z-index: 1;
}

.register-slider-piece {
    position: absolute;
    left: 0;
    top: 24px;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background-image: url('../爽歪歪.jpeg');
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.36), inset 0 1px 0 rgba(255,255,255,0.42);
    z-index: 3;
    pointer-events: none;
    transition: box-shadow 0.18s ease;
}

.register-slider-track {
    position: relative;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8fafc, #eef4ff);
    border: 1px solid rgba(74, 144, 226, 0.18);
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

.register-slider-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.register-slider-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    box-shadow: 0 8px 16px rgba(74, 144, 226, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 2;
    transition: box-shadow 0.18s ease, background 0.18s ease;
    touch-action: none;
}

.register-slider-handle.dragging {
    cursor: grabbing;
    box-shadow: 0 10px 22px rgba(74, 144, 226, 0.34);
    transition: none;
}

.register-slider-success {
    border-color: rgba(101, 184, 122, 0.36);
    background: linear-gradient(135deg, rgba(241, 248, 243, 0.96), rgba(255,255,255,0.98));
}

.register-slider-success .register-slider-handle {
    background: linear-gradient(135deg, var(--success-color), #4f9b63);
}

.register-slider-success .register-slider-text {
    color: var(--success-contrast);
    font-weight: 600;
}

.register-slider-error {
    border-color: rgba(230, 124, 115, 0.34);
    background: linear-gradient(135deg, rgba(255, 241, 240, 0.96), rgba(255,255,255,0.98));
}

.register-slider-error .register-slider-text {
    color: var(--danger-contrast);
}

/* ==================== 克制多彩增强层 ==================== */
#mainPage {
    background:
        radial-gradient(circle at 8% 10%, rgba(74, 144, 226, 0.07), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(101, 184, 122, 0.06), transparent 24%),
        radial-gradient(circle at 70% 86%, rgba(125, 131, 212, 0.055), transparent 30%),
        linear-gradient(180deg, #f7f9fc 0%, #f5f6f8 100%) !important;
}

#mainPage .sidebar-footer .btn {
    position: relative;
    overflow: hidden;
    border-width: 1px !important;
    background: rgba(255, 255, 255, 0.78) !important;
}

#mainPage #changeUsernameBtn,
#mainPage #accountManageBtn,
#mainPage #addAccountBtn {
    color: var(--color-blue) !important;
    border-color: rgba(74, 144, 226, 0.26) !important;
    background: linear-gradient(135deg, rgba(238, 246, 255, 0.96), rgba(255, 255, 255, 0.82)) !important;
}

#mainPage #changeUsernameBtn:hover,
#mainPage #accountManageBtn:hover,
#mainPage #addAccountBtn:hover {
    border-color: rgba(74, 144, 226, 0.44) !important;
    box-shadow: 0 8px 18px var(--intent-shadow-blue) !important;
}

#mainPage #randomApiKeyBtn {
    color: var(--color-green) !important;
    border-color: rgba(101, 184, 122, 0.30) !important;
    background: linear-gradient(135deg, rgba(241, 248, 243, 0.98), rgba(255, 255, 255, 0.84)) !important;
}

#mainPage #randomApiKeyBtn:hover {
    border-color: rgba(101, 184, 122, 0.48) !important;
    box-shadow: 0 8px 18px var(--intent-shadow-green) !important;
}

#mainPage #changePasswordBtn,
#mainPage #projectSettingsToggle,
#mainPage #refreshChatBtn,
#mainPage #refreshRechargeBtn,
#mainPage #toggleIntegrationAiDocsBtn {
    color: var(--color-violet) !important;
    border-color: rgba(125, 131, 212, 0.24) !important;
    background: linear-gradient(135deg, rgba(243, 242, 255, 0.95), rgba(255, 255, 255, 0.82)) !important;
}

#mainPage #sidebarLogoutBtn,
#mainPage .btn-outline-danger,
#mainPage .btn-danger {
    border-color: rgba(230, 124, 115, 0.32) !important;
}

#mainPage #sidebarLogoutBtn {
    color: var(--color-rose) !important;
    background: linear-gradient(135deg, rgba(255, 241, 240, 0.98), rgba(255, 255, 255, 0.84)) !important;
}

#mainPage #sidebarLogoutBtn:hover,
#mainPage .btn-outline-danger:hover:not(:disabled) {
    box-shadow: 0 8px 18px var(--intent-shadow-rose) !important;
}

#mainPage #dashboard-content { --section-accent: var(--color-blue); --section-soft: var(--color-blue-soft); }
#mainPage #transfer-content { --section-accent: var(--color-cyan); --section-soft: var(--color-cyan-soft); }
#mainPage #user-info-content { --section-accent: var(--color-green); --section-soft: var(--color-green-soft); }
#mainPage #history-content { --section-accent: var(--color-violet); --section-soft: var(--color-violet-soft); }
#mainPage #ranking-content { --section-accent: var(--color-amber); --section-soft: var(--color-amber-soft); }
#mainPage #statistics-content { --section-accent: var(--color-violet); --section-soft: var(--color-violet-soft); }
#mainPage #website-management-content,
#mainPage #users-content { --section-accent: var(--color-blue); --section-soft: var(--color-blue-soft); }
#mainPage #tickets-content,
#mainPage #customer-tickets-content { --section-accent: var(--color-cyan); --section-soft: var(--color-cyan-soft); }
#mainPage #plugins-content { --section-accent: var(--color-green); --section-soft: var(--color-green-soft); }
#mainPage #customers-content { --section-accent: var(--color-violet); --section-soft: var(--color-violet-soft); }
#mainPage #recharge-content { --section-accent: var(--color-amber); --section-soft: var(--color-amber-soft); }
#mainPage #chat-content,
#mainPage #integration-center-content { --section-accent: var(--color-cyan); --section-soft: var(--color-cyan-soft); }

#mainPage .premium-section-block,
#mainPage .premium-info-tile,
#mainPage .premium-finance-tile,
#mainPage .premium-stat-shell,
#mainPage .recharge-benefits-card,
#mainPage .integration-doc-nav-card,
#mainPage .cc-customer-dashboard-toggle {
    position: relative;
    border-color: color-mix(in srgb, var(--section-accent, var(--color-blue)) 18%, var(--border-color)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--section-soft, var(--color-blue-soft)) 68%, white 32%), rgba(255,255,255,0.86)) !important;
}

#mainPage .btn-primary,
#mainPage .btn-success,
#mainPage .btn-info,
#mainPage .btn-warning {
    border: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

#mainPage .btn-primary {
    background: linear-gradient(135deg, var(--color-blue), var(--color-blue-hover)) !important;
}

#mainPage .btn-success {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-hover)) !important;
}

#mainPage .btn-info {
    background: linear-gradient(135deg, var(--color-cyan), var(--color-cyan-hover)) !important;
    color: #fff !important;
}

#mainPage .btn-warning {
    background: linear-gradient(135deg, #f0c15a, var(--color-amber-hover)) !important;
    color: #4a3510 !important;
}

#mainPage .btn-outline-primary,
#mainPage .integration-doc-filter[data-doc-filter="customer"],
#mainPage .integration-center-jump[data-integration-doc-module="customer"] {
    color: var(--color-blue) !important;
    border-color: rgba(74, 144, 226, 0.32) !important;
    background: rgba(238, 246, 255, 0.48) !important;
}

#mainPage .btn-outline-success,
#mainPage .integration-doc-filter[data-doc-filter="ticket"],
#mainPage .integration-center-jump[data-integration-doc-module="ticket"] {
    color: var(--color-green) !important;
    border-color: rgba(101, 184, 122, 0.34) !important;
    background: rgba(241, 248, 243, 0.55) !important;
}

#mainPage .btn-outline-info {
    color: var(--color-cyan) !important;
    border-color: rgba(85, 183, 200, 0.34) !important;
    background: rgba(237, 249, 251, 0.55) !important;
}

#mainPage .btn-outline-warning {
    color: var(--color-amber-hover) !important;
    border-color: rgba(230, 169, 61, 0.38) !important;
    background: rgba(255, 248, 232, 0.65) !important;
}

#mainPage .btn-outline-secondary {
    background: rgba(248, 250, 252, 0.72) !important;
    border-color: rgba(124, 143, 166, 0.18) !important;
}

#mainPage .btn-outline-primary:hover:not(:disabled),
#mainPage .btn-outline-success:hover:not(:disabled),
#mainPage .btn-outline-info:hover:not(:disabled),
#mainPage .btn-outline-warning:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #fff !important;
}

#mainPage .badge.bg-primary,
#mainPage .badge.text-bg-primary,
#mainPage .badge.bg-info {
    background: var(--color-blue-soft) !important;
    color: var(--color-blue-hover) !important;
    border: 1px solid rgba(74, 144, 226, 0.18);
}

#mainPage .badge.bg-success,
#mainPage .badge.text-bg-success {
    background: var(--color-green-soft) !important;
    color: var(--color-green-hover) !important;
    border: 1px solid rgba(101, 184, 122, 0.20);
}

#mainPage .badge.bg-warning,
#mainPage .badge.text-bg-warning {
    background: var(--color-amber-soft) !important;
    color: var(--color-amber-hover) !important;
    border: 1px solid rgba(230, 169, 61, 0.22);
}

#mainPage .badge.bg-danger,
#mainPage .badge.text-bg-danger {
    background: var(--color-rose-soft) !important;
    color: var(--color-rose-hover) !important;
    border: 1px solid rgba(230, 124, 115, 0.22);
}

#mainPage .recent-tabs-bar {
    background:
        linear-gradient(90deg, rgba(238, 246, 255, 0.72), rgba(241, 248, 243, 0.58), rgba(243, 242, 255, 0.62)) !important;
    border-bottom: 1px solid rgba(124, 143, 166, 0.12) !important;
}

#mainPage .recent-tab-item.active {
    border-color: color-mix(in srgb, var(--section-accent, var(--color-blue)) 28%, rgba(124, 143, 166, 0.16)) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--section-accent, var(--color-blue)) 18%, transparent) !important;
}

#mainPage .project-card.primary { --project-accent: var(--color-blue); --project-soft: var(--color-blue-soft); }
#mainPage .project-card.success { --project-accent: var(--color-green); --project-soft: var(--color-green-soft); }
#mainPage .project-card.info { --project-accent: var(--color-cyan); --project-soft: var(--color-cyan-soft); }
#mainPage .project-card.warning { --project-accent: var(--color-amber); --project-soft: var(--color-amber-soft); }
#mainPage .project-card.danger { --project-accent: var(--color-rose); --project-soft: var(--color-rose-soft); }

#mainPage .project-card {
    border-color: color-mix(in srgb, var(--project-accent, var(--color-blue)) 18%, rgba(255,255,255,0.82)) !important;
}

#mainPage .project-card .card-header {
    background: linear-gradient(135deg, color-mix(in srgb, var(--project-soft, var(--color-blue-soft)) 72%, white 28%), rgba(255,255,255,0.92)) !important;
}

#mainPage .project-card .project-id-badge,
#mainPage .account-badge,
#mainPage .badge-key {
    background: color-mix(in srgb, var(--project-soft, var(--color-blue-soft)) 76%, white 24%) !important;
    color: color-mix(in srgb, var(--project-accent, var(--color-blue)) 78%, #1f2937 22%) !important;
    border-color: color-mix(in srgb, var(--project-accent, var(--color-blue)) 22%, transparent) !important;
}

#mainPage .table .btn,
#mainPage .table .badge {
    border-radius: 999px;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
    #mainPage .premium-section-block,
    #mainPage .premium-info-tile,
    #mainPage .premium-finance-tile {
        border-color: rgba(74, 144, 226, 0.18) !important;
    }
}

@media (max-width: 480px) {
    .register-verify-preview {
        height: 84px;
    }

    .register-slider-target,
    .register-slider-piece {
        top: 18px;
    }
}


/* ==================== 网站管理风险监控 ==================== */
.risk-summary-card {
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    background: var(--surface-card);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.risk-summary-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.risk-summary-card strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.risk-summary-danger strong,
.risk-money-negative {
    color: var(--danger-contrast) !important;
}

.risk-project-card {
    padding: 12px 14px;
    border: 1px solid rgba(230, 124, 115, 0.18);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, rgba(255, 241, 240, 0.72), rgba(255, 255, 255, 0.96));
}

#riskMonitorTable th,
#riskMonitorTable td {
    white-space: nowrap;
    font-size: 0.88rem;
}

#riskMonitorTable .text-end {
    font-variant-numeric: tabular-nums;
}