/* 关键CSS - 现代化UI设计 */
body {
    background: #e8f4fd;
}
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --danger: #ef4444;
    --warning: #f59e0b;
    --success: #10b981;
    --info: #3b82f6;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --bg-color: #f9fafb;
    --card-bg: #ffffff;
    --text-color: #111827;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
}

/* 暗黑模式 - 跟随子比主题 */
[data-theme="dark"] .xhw-container,
html.dark .xhw-container,
.dark-theme .xhw-container,
body.dark-theme .xhw-container {
    --gray-50: #1f2937;
    --gray-100: #374151;
    --gray-200: #4b5563;
    --gray-300: #6b7280;
    --gray-400: #9ca3af;
    --gray-500: #d1d5db;
    --gray-600: #e5e7eb;
    --gray-700: #f3f4f6;
    --gray-800: #f9fafb;
    --gray-900: #ffffff;
    --bg-color: #111827;
    --card-bg: #1f2937;
    --text-color: #ffffff;
    --text-secondary: #d1d5db;
    --border-color: #374151;
    background: #111827;
}

/* 暗黑模式 - 统计卡片 */
[data-theme="dark"] .xhw-stat-card,
html.dark .xhw-stat-card,
.dark-theme .xhw-stat-card,
body.dark-theme .xhw-stat-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-stat-content h3,
html.dark .xhw-stat-content h3,
.dark-theme .xhw-stat-content h3,
body.dark-theme .xhw-stat-content h3 {
    color: var(--text-color);
}
[data-theme="dark"] .xhw-stat-content p,
html.dark .xhw-stat-content p,
.dark-theme .xhw-stat-content p,
body.dark-theme .xhw-stat-content p {
    color: var(--text-secondary);
}
[data-theme="dark"] .xhw-status-dot,
html.dark .xhw-status-dot,
.dark-theme .xhw-status-dot,
body.dark-theme .xhw-status-dot {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    animation: dark-status-pulse 2s ease-in-out infinite;
}
[data-theme="dark"] .xhw-status-dot::before,
html.dark .xhw-status-dot::before,
.dark-theme .xhw-status-dot::before,
body.dark-theme .xhw-status-dot::before {
    background: rgba(52, 211, 153, 0.4);
}
[data-theme="dark"] .xhw-status-dot::after,
html.dark .xhw-status-dot::after,
.dark-theme .xhw-status-dot::after,
body.dark-theme .xhw-status-dot::after {
    background: rgba(52, 211, 153, 0.2);
}
[data-theme="dark"] .xhw-status-text,
html.dark .xhw-status-text,
.dark-theme .xhw-status-text,
body.dark-theme .xhw-status-text {
    color: #60a5fa;
}
[data-theme="dark"] .xhw-status-divider,
html.dark .xhw-status-divider,
.dark-theme .xhw-status-divider,
body.dark-theme .xhw-status-divider {
    color: #93c5fd;
}
@keyframes dark-status-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
    }
}

/* 暗黑模式 - 页面标题 */
[data-theme="dark"] .xhw-page-header,
html.dark .xhw-page-header,
.dark-theme .xhw-page-header,
body.dark-theme .xhw-page-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: var(--border-color);
    color: #f1f5f9;
}
[data-theme="dark"] .xhw-page-header h1,
html.dark .xhw-page-header h1,
.dark-theme .xhw-page-header h1,
body.dark-theme .xhw-page-header h1 {
    color: #f8fafc;
}
[data-theme="dark"] .xhw-page-header h1 i,
html.dark .xhw-page-header h1 i,
.dark-theme .xhw-page-header h1 i,
body.dark-theme .xhw-page-header h1 i {
    color: #60a5fa;
}
[data-theme="dark"] .xhw-page-header p,
html.dark .xhw-page-header p,
.dark-theme .xhw-page-header p,
body.dark-theme .xhw-page-header p {
    color: #94a3b8;
}

/* 暗黑模式 - 公告 */
[data-theme="dark"] .xhw-alert,
html.dark .xhw-alert,
.dark-theme .xhw-alert,
body.dark-theme .xhw-alert {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-alert h4,
html.dark .xhw-alert h4,
.dark-theme .xhw-alert h4,
body.dark-theme .xhw-alert h4 {
    color: #f8fafc;
}
[data-theme="dark"] .xhw-alert p,
html.dark .xhw-alert p,
.dark-theme .xhw-alert p,
body.dark-theme .xhw-alert p {
    color: #cbd5e1;
}

/* 暗黑模式 - 提示条 */
[data-theme="dark"] .xhw-tips-bar,
html.dark .xhw-tips-bar,
.dark-theme .xhw-tips-bar,
body.dark-theme .xhw-tips-bar {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}
[data-theme="dark"] .xhw-tips-bar i,
html.dark .xhw-tips-bar i,
.dark-theme .xhw-tips-bar i,
body.dark-theme .xhw-tips-bar i {
    color: #fbbf24;
}
[data-theme="dark"] .xhw-tips-bar-close,
html.dark .xhw-tips-bar-close,
.dark-theme .xhw-tips-bar-close,
body.dark-theme .xhw-tips-bar-close {
    background: transparent;
    color: #fcd34d;
}
[data-theme="dark"] .xhw-tips-bar-close:hover,
html.dark .xhw-tips-bar-close:hover,
.dark-theme .xhw-tips-bar-close:hover,
body.dark-theme .xhw-tips-bar-close:hover {
    background: transparent;
    color: #fde68a;
}

/* 暗黑模式 - 图表卡片 */
[data-theme="dark"] .xhw-chart-card,
html.dark .xhw-chart-card,
.dark-theme .xhw-chart-card,
body.dark-theme .xhw-chart-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-chart-header,
html.dark .xhw-chart-header,
.dark-theme .xhw-chart-header,
body.dark-theme .xhw-chart-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: var(--border-color);
    color: #f1f5f9;
}
[data-theme="dark"] .xhw-chart-header h4 i,
html.dark .xhw-chart-header h4 i,
.dark-theme .xhw-chart-header h4 i,
body.dark-theme .xhw-chart-header h4 i {
    color: #60a5fa;
}
[data-theme="dark"] .xhw-chart-header .chart-period button,
html.dark .xhw-chart-header .chart-period button,
.dark-theme .xhw-chart-header .chart-period button,
body.dark-theme .xhw-chart-header .chart-period button {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
[data-theme="dark"] .xhw-chart-header .chart-period button:hover,
html.dark .xhw-chart-header .chart-period button:hover,
.dark-theme .xhw-chart-header .chart-period button:hover,
body.dark-theme .xhw-chart-header .chart-period button:hover,
[data-theme="dark"] .xhw-chart-header .chart-period button.active,
html.dark .xhw-chart-header .chart-period button.active,
.dark-theme .xhw-chart-header .chart-period button.active,
body.dark-theme .xhw-chart-header .chart-period button.active {
    background: #3b82f6;
    color: #fff;
}

/* 暗黑模式 - 规则卡片 */
[data-theme="dark"] .xhw-rules-card,
html.dark .xhw-rules-card,
.dark-theme .xhw-rules-card,
body.dark-theme .xhw-rules-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-rules-header,
html.dark .xhw-rules-header,
.dark-theme .xhw-rules-header,
body.dark-theme .xhw-rules-header {
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-rules-title h3,
html.dark .xhw-rules-title h3,
.dark-theme .xhw-rules-title h3,
body.dark-theme .xhw-rules-title h3 {
    color: var(--text-color);
}
[data-theme="dark"] .xhw-rule-item,
html.dark .xhw-rule-item,
.dark-theme .xhw-rule-item,
body.dark-theme .xhw-rule-item {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .xhw-rule-item:hover,
html.dark .xhw-rule-item:hover,
.dark-theme .xhw-rule-item:hover,
body.dark-theme .xhw-rule-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .xhw-rule-content h4,
html.dark .xhw-rule-content h4,
.dark-theme .xhw-rule-content h4,
body.dark-theme .xhw-rule-content h4 {
    color: var(--text-color);
}
[data-theme="dark"] .xhw-rule-content p,
html.dark .xhw-rule-content p,
.dark-theme .xhw-rule-content p,
body.dark-theme .xhw-rule-content p {
    color: var(--text-secondary);
}
[data-theme="dark"] .xhw-rules-toggle,
html.dark .xhw-rules-toggle,
.dark-theme .xhw-rules-toggle,
body.dark-theme .xhw-rules-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="dark"] .xhw-rules-toggle:hover,
html.dark .xhw-rules-toggle:hover,
.dark-theme .xhw-rules-toggle:hover,
body.dark-theme .xhw-rules-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-color);
}

/* 暗黑模式 - 表格卡片 */
[data-theme="dark"] .xhw-table-card,
html.dark .xhw-table-card,
.dark-theme .xhw-table-card,
body.dark-theme .xhw-table-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-table-header,
html.dark .xhw-table-header,
.dark-theme .xhw-table-header,
body.dark-theme .xhw-table-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: #4b5563;
}
[data-theme="dark"] .xhw-table-header h3,
html.dark .xhw-table-header h3,
.dark-theme .xhw-table-header h3,
body.dark-theme .xhw-table-header h3 {
    color: #f1f5f9;
}
[data-theme="dark"] .xhw-table-header .count,
html.dark .xhw-table-header .count,
.dark-theme .xhw-table-header .count,
body.dark-theme .xhw-table-header .count {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
[data-theme="dark"] .xhw-table-header-left i,
html.dark .xhw-table-header-left i,
.dark-theme .xhw-table-header-left i,
body.dark-theme .xhw-table-header-left i {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
[data-theme="dark"] .xhw-table,
html.dark .xhw-table,
.dark-theme .xhw-table,
body.dark-theme .xhw-table {
    background: transparent;
}
[data-theme="dark"] .xhw-table thead th,
html.dark .xhw-table thead th,
.dark-theme .xhw-table thead th,
body.dark-theme .xhw-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-table tbody tr:hover,
html.dark .xhw-table tbody tr:hover,
.dark-theme .xhw-table tbody tr:hover,
body.dark-theme .xhw-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .xhw-table tbody td,
html.dark .xhw-table tbody td,
.dark-theme .xhw-table tbody td,
body.dark-theme .xhw-table tbody td {
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-table thead th.sortable:hover,
html.dark .xhw-table thead th.sortable:hover,
.dark-theme .xhw-table thead th.sortable:hover,
body.dark-theme .xhw-table thead th.sortable:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .xhw-table-wrapper,
html.dark .xhw-table-wrapper,
.dark-theme .xhw-table-wrapper,
body.dark-theme .xhw-table-wrapper {
    background: #1f2937;
    border-color: #4b5563;
}

/* 暗黑模式 - 徽章 */
[data-theme="dark"] .xhw-badge-ban,
html.dark .xhw-badge-ban,
.dark-theme .xhw-badge-ban,
body.dark-theme .xhw-badge-ban {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}
[data-theme="dark"] .xhw-badge-blackroom,
html.dark .xhw-badge-blackroom,
.dark-theme .xhw-badge-blackroom,
body.dark-theme .xhw-badge-blackroom {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .xhw-badge-forever,
html.dark .xhw-badge-forever,
.dark-theme .xhw-badge-forever,
body.dark-theme .xhw-badge-forever {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    border-color: rgba(124, 58, 237, 0.3);
}
[data-theme="dark"] .xhw-badge-temp,
html.dark .xhw-badge-temp,
.dark-theme .xhw-badge-temp,
body.dark-theme .xhw-badge-temp {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .xhw-badge-level,
html.dark .xhw-badge-level,
.dark-theme .xhw-badge-level,
body.dark-theme .xhw-badge-level {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

/* 暗黑模式 - 分页 */
[data-theme="dark"] .xhw-pagination-wrapper,
html.dark .xhw-pagination-wrapper,
.dark-theme .xhw-pagination-wrapper,
body.dark-theme .xhw-pagination-wrapper {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="dark"] .xhw-pagination a,
html.dark .xhw-pagination a,
.dark-theme .xhw-pagination a,
body.dark-theme .xhw-pagination a {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-pagination a:hover,
html.dark .xhw-pagination a:hover,
.dark-theme .xhw-pagination a:hover,
body.dark-theme .xhw-pagination a:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .xhw-pagination .current,
html.dark .xhw-pagination .current,
.dark-theme .xhw-pagination .current,
body.dark-theme .xhw-pagination .current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

/* 暗黑模式 - 空状态 */
[data-theme="dark"] .xhw-empty-state,
html.dark .xhw-empty-state,
.dark-theme .xhw-empty-state,
body.dark-theme .xhw-empty-state {
    background: transparent;
}
[data-theme="dark"] .xhw-empty-state i,
html.dark .xhw-empty-state i,
.dark-theme .xhw-empty-state i,
body.dark-theme .xhw-empty-state i {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-empty-state h4,
html.dark .xhw-empty-state h4,
.dark-theme .xhw-empty-state h4,
body.dark-theme .xhw-empty-state h4 {
    color: var(--text-color);
}

/* 暗黑模式 - 页脚 */
[data-theme="dark"] .xhw-footer,
html.dark .xhw-footer,
.dark-theme .xhw-footer,
body.dark-theme .xhw-footer {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-color: var(--border-color);
}
[data-theme="dark"] .xhw-footer p,
html.dark .xhw-footer p,
.dark-theme .xhw-footer p,
body.dark-theme .xhw-footer p {
    color: #cbd5e1;
}

/* 暗黑模式 - 词云标签 */
[data-theme="dark"] .xhw-word-tag.size-1,
html.dark .xhw-word-tag.size-1,
.dark-theme .xhw-word-tag.size-1,
body.dark-theme .xhw-word-tag.size-1 { background: rgba(3, 105, 161, 0.2); color: #7dd3fc; }
    [data-theme="dark"] .xhw-word-tag.size-2,
    html.dark .xhw-word-tag.size-2,
    .dark-theme .xhw-word-tag.size-2,
body.dark-theme .xhw-word-tag.size-2 { background: rgba(29, 78, 216, 0.2); color: #93c5fd; }
    [data-theme="dark"] .xhw-word-tag.size-3,
    html.dark .xhw-word-tag.size-3,
    .dark-theme .xhw-word-tag.size-3,
body.dark-theme .xhw-word-tag.size-3 { background: rgba(109, 40, 217, 0.2); color: #c4b5fd; }
    [data-theme="dark"] .xhw-word-tag.size-4,
    html.dark .xhw-word-tag.size-4,
    .dark-theme .xhw-word-tag.size-4,
body.dark-theme .xhw-word-tag.size-4 { background: rgba(190, 24, 93, 0.2); color: #f9a8d4; }
    [data-theme="dark"] .xhw-word-tag.size-5,
    html.dark .xhw-word-tag.size-5,
    .dark-theme .xhw-word-tag.size-5,
body.dark-theme .xhw-word-tag.size-5 { background: rgba(180, 83, 9, 0.2); color: #fcd34d; }

    /* 暗黑模式 - 搜索筛选区域 */
    [data-theme="dark"] .xhw-table-filter,
    html.dark .xhw-table-filter,
    .dark-theme .xhw-table-filter,
    body.dark-theme .xhw-table-filter {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-color: #4b5563;
    }
    [data-theme="dark"] .xhw-table-filter-group,
    html.dark .xhw-table-filter-group,
    .dark-theme .xhw-table-filter-group,
    body.dark-theme .xhw-table-filter-group {
        background: rgba(30, 41, 59, 0.8);
        border-color: var(--border-color);
    }
    [data-theme="dark"] .xhw-table-filter-group:hover,
    html.dark .xhw-table-filter-group:hover,
    .dark-theme .xhw-table-filter-group:hover,
    body.dark-theme .xhw-table-filter-group:hover {
        background: rgba(30, 41, 59, 1);
        border-color: #475569;
    }
    [data-theme="dark"] .xhw-table-filter-group i,
    html.dark .xhw-table-filter-group i,
    .dark-theme .xhw-table-filter-group i,
    body.dark-theme .xhw-table-filter-group i {
        color: #94a3b8;
    }
    [data-theme="dark"] .xhw-table-filter-group input,
    html.dark .xhw-table-filter-group input,
    .dark-theme .xhw-table-filter-group input,
    body.dark-theme .xhw-table-filter-group input,
    [data-theme="dark"] .xhw-table-filter-group select,
    html.dark .xhw-table-filter-group select,
    .dark-theme .xhw-table-filter-group select,
    body.dark-theme .xhw-table-filter-group select {
        color: #f1f5f9;
    }
    [data-theme="dark"] .xhw-table-filter-group input::placeholder,
    html.dark .xhw-table-filter-group input::placeholder,
    .dark-theme .xhw-table-filter-group input::placeholder,
    body.dark-theme .xhw-table-filter-group input::placeholder {
        color: #64748b;
    }
    [data-theme="dark"] .xhw-table-filter-search,
    html.dark .xhw-table-filter-search,
    .dark-theme .xhw-table-filter-search,
    body.dark-theme .xhw-table-filter-search {
        background: #3b82f6;
        color: #fff;
    }
    [data-theme="dark"] .xhw-table-filter-search:hover,
    html.dark .xhw-table-filter-search:hover,
    .dark-theme .xhw-table-filter-search:hover,
    body.dark-theme .xhw-table-filter-search:hover {
        background: #2563eb;
    }
    [data-theme="dark"] .xhw-table-filter-reset,
    html.dark .xhw-table-filter-reset,
    .dark-theme .xhw-table-filter-reset,
    body.dark-theme .xhw-table-filter-reset {
        background: rgba(30, 41, 59, 0.8);
        border-color: var(--border-color);
        color: #94a3b8;
    }
    [data-theme="dark"] .xhw-table-filter-reset:hover,
    html.dark .xhw-table-filter-reset:hover,
    .dark-theme .xhw-table-filter-reset:hover,
    body.dark-theme .xhw-table-filter-reset:hover {
        background: rgba(30, 41, 59, 1);
        border-color: #475569;
        color: #f1f5f9;
    }

    [data-theme="dark"] .xhw-table-filter-search:disabled,
    html.dark .xhw-table-filter-search:disabled,
    .dark-theme .xhw-table-filter-search:disabled,
    body.dark-theme .xhw-table-filter-search:disabled,
    [data-theme="dark"] .xhw-table-filter-reset:disabled,
    html.dark .xhw-table-filter-reset:disabled,
    .dark-theme .xhw-table-filter-reset:disabled,
    body.dark-theme .xhw-table-filter-reset:disabled {
        opacity: 0.5;
    }

.wp-posts-content p{margin: 0 0 10px;}

    /* ===== 主容器 ===== */
    .xhw-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background: #e8f4fd;
    }

    /* ===== 未授权提示 ===== */
    .xhw-unauthorized-notice {
        text-align: center;
        padding: 60px 40px;
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-radius: 16px;
        border: 2px solid #f59e0b;
    }
    .xhw-unauthorized-icon {
        width: 80px;
        height: 80px;
        background: rgba(245, 158, 11, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
    }
    .xhw-unauthorized-icon i {
        font-size: 36px;
        color: #f59e0b;
    }
    .xhw-unauthorized-notice h3 {
        font-size: 24px;
        color: #92400e;
        margin-bottom: 12px;
        font-weight: 600;
    }
    .xhw-unauthorized-notice p {
        font-size: 16px;
        color: #a16207;
        margin-bottom: 24px;
    }
    .xhw-unauthorized-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: #fff;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    .xhw-unauthorized-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
        color: #fff;
    }

    /* 暗黑模式 - 未授权提示 */
    [data-theme="dark"] .xhw-unauthorized-notice,
    html.dark .xhw-unauthorized-notice,
    .dark-theme .xhw-unauthorized-notice,
    body.dark-theme .xhw-unauthorized-notice {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
        border-color: rgba(245, 158, 11, 0.3);
    }
    [data-theme="dark"] .xhw-unauthorized-icon,
    html.dark .xhw-unauthorized-icon,
    .dark-theme .xhw-unauthorized-icon,
    body.dark-theme .xhw-unauthorized-icon {
        background: rgba(245, 158, 11, 0.2);
    }
    [data-theme="dark"] .xhw-unauthorized-notice h3,
    html.dark .xhw-unauthorized-notice h3,
    .dark-theme .xhw-unauthorized-notice h3,
    body.dark-theme .xhw-unauthorized-notice h3 {
        color: #fcd34d;
    }
    [data-theme="dark"] .xhw-unauthorized-notice p,
    html.dark .xhw-unauthorized-notice p,
    .dark-theme .xhw-unauthorized-notice p,
    body.dark-theme .xhw-unauthorized-notice p {
        color: #fde68a;
    }

    /* ===== 页面标题区域 ===== */
    .xhw-page-header {
        text-align: center;
        margin-bottom: 24px;
        padding: 32px 24px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 12px;
        color: #334155;
        position: relative;
        overflow: hidden;
        border: 1px solid #e2e8f0;
    }

    .xhw-page-header h1 {
        font-size: 28px;
        margin-bottom: 8px;
        position: relative;
        z-index: 1;
        font-weight: 700;
        color: #1e293b;
    }
    .xhw-page-header h1 i {
        color: #3b82f6;
        margin-right: 8px;
    }
    .xhw-page-header p {
        color: #64748b;
        font-size: 14px;
        position: relative;
        z-index: 1;
        font-weight: 400;
    }

    /* ===== 统计卡片区域 ===== */
    .xhw-stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
    }
    .xhw-stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        transition: all 0.2s ease;
        border: 1px solid var(--gray-200);
    }
    .xhw-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .xhw-stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .xhw-stat-icon i {
        font-size: 20px;
    }
    .xhw-stat-icon.danger {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        color: #dc2626;
        border: 1px solid #fecaca;
    }
    .xhw-stat-icon.danger i {
        color: #dc2626;
    }
    .xhw-stat-icon.warning {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
        border: 1px solid #fcd34d;
    }
    .xhw-stat-icon.warning i {
        color: #d97706;
    }
    .xhw-stat-icon.info {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        color: #2563eb;
        border: 1px solid #bfdbfe;
    }
    .xhw-stat-icon.info i {
        color: #2563eb;
        animation: blink 3s infinite;
    }
    @keyframes blink {
        0%, 100% {
            transform: scaleY(1);
        }
        5% {
            transform: scaleY(0.1);
        }
        10% {
            transform: scaleY(1);
        }
        15% {
            transform: scaleY(0.1);
        }
        20% {
            transform: scaleY(1);
        }
    }
    .xhw-system-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: 20px;
        font-size: 13px;
        color: #3b82f6;
        line-height: 36px;
    }
    .xhw-status-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
        border-radius: 50%;
        position: relative;
        animation: status-pulse 2s ease-in-out infinite;
    }
    .xhw-status-dot::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background: rgba(16, 185, 129, 0.3);
        border-radius: 50%;
        animation: status-ripple 2s ease-out infinite;
    }
    .xhw-status-dot::after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 16px;
        height: 16px;
        background: rgba(16, 185, 129, 0.15);
        border-radius: 50%;
        animation: status-ripple 2s ease-out infinite;
        animation-delay: 0.5s;
    }
    .xhw-status-text {
        font-weight: 500;
        color: #3b82f6;
        font-size: 13px;
    }
    .xhw-status-divider {
        color: #60a5fa;
        font-weight: 600;
    }
    @keyframes status-pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
        }
    }
    @keyframes status-ripple {
        0% {
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 1;
        }
        100% {
            transform: translate(-50%, -50%) scale(2.5);
            opacity: 0;
        }
    }
    .xhw-stat-icon.success {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #059669;
        border: 1px solid #a7f3d0;
    }
    .xhw-stat-icon.success i {
        color: #059669;
    }
    .xhw-stat-content h3 {
        font-size: 22px;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }
    .xhw-stat-content p {
        font-size: 12px;
        color: var(--gray-500);
        margin: 4px 0 0 0;
    }

    /* ===== 警告提示框 ===== */
    .xhw-alert {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 8px;
        padding: 16px 24px;
        margin-bottom: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid #e2e8f0;
    }
    .xhw-alert-title {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .xhw-alert-title i {
        font-size: 14px;
        color: #3b82f6;
    }
    .xhw-alert-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .xhw-alert-icon {
        font-size: 20px;
        height: 24px;
        line-height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    .xhw-alert-content h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #1e293b;
        display: none;
    }
    .xhw-alert-content p {
        font-size: 16px;
        color: #dc2626;
        line-height: 1.5;
        margin: 0;
        font-weight: 700;
    }

    /* ===== 表格内搜索筛选行 ===== */
    .xhw-table-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        white-space: nowrap;
        border: 1px solid #e2e8f0;
        border-bottom: none;
    }
    .xhw-table-filter::-webkit-scrollbar {
        display: none;
    }
    .xhw-table-filter-group {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,0.8);
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 4px 10px;
        transition: all 0.2s ease;
    }
    .xhw-table-filter-group:hover {
        background: #fff;
        border-color: #cbd5e1;
    }
    .xhw-table-filter-group i {
        color: #64748b;
        font-size: 13px;
    }
    .xhw-table-filter-group input,
    .xhw-table-filter-group select {
        background: transparent;
        border: none;
        color: #334155;
        font-size: 13px;
        outline: none;
        min-width: 100px;
        width: 100px;
        height: 24px;
        line-height: 24px;
        padding: 0;
        flex-shrink: 0;
    }
    .xhw-table-filter-group input::placeholder {
        color: #94a3b8;
    }
    .xhw-table-filter-group select option {
        background: var(--card-bg);
        color: var(--text-color);
    }
    .xhw-table-filter-search {
        height: 32px;
        padding: 0 16px;
        border-radius: 6px;
        background: rgba(255,255,255,0.8);
        border: 1px solid #e2e8f0;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    .xhw-table-filter-search:hover {
        background: #fff;
        border-color: #cbd5e1;
        color: #334155;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    .xhw-table-filter-reset {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: rgba(255,255,255,0.8);
        border: 1px solid #e2e8f0;
        color: #64748b;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }
    .xhw-table-filter-reset:hover {
        background: #fff;
        border-color: #cbd5e1;
        color: #334155;
    }

    .xhw-table-filter-search:disabled,
    .xhw-table-filter-reset:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }

    .xhw-btn-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: xhw-btn-spin 0.6s linear infinite;
        display: inline-block;
    }

    @keyframes xhw-btn-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ===== 规则说明卡片 ===== */
    .xhw-rules-card {
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: 1px solid var(--gray-200);
    }
    .xhw-rules-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--gray-200);
    }
    .xhw-rules-title {
        display: flex;
        align-items: center;
    }
    .xhw-rules-title i {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7c3aed;
        font-size: 14px;
        margin-right: 8px;
        border: 1px solid #c4b5fd;
    }
    .xhw-rules-title h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }
    .xhw-rules-toggle {
        width: 32px;
        height: 32px;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-600);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .xhw-rules-toggle:hover {
        background: var(--gray-200);
        color: var(--gray-800);
    }
    .xhw-rules-toggle i {
        transition: transform 0.3s ease;
    }
    .xhw-rules-card.collapsed .xhw-rules-toggle i {
        transform: rotate(180deg);
    }
    .xhw-rules-content {
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        max-height: 500px;
        opacity: 1;
    }
    .xhw-rules-card.collapsed .xhw-rules-content {
        max-height: 0;
        opacity: 0;
    }
    .xhw-rule-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        padding: 12px;
        background: var(--gray-50);
        border-radius: 6px;
        transition: background 0.2s ease;
    }
    .xhw-rule-item:hover {
        background: var(--gray-100);
    }
    .xhw-rule-item:last-child {
        margin-bottom: 0;
    }
    .xhw-rule-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
        border: 1px solid #c4b5fd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7c3aed;
        font-size: 16px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .xhw-rule-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .xhw-rule-content h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 2px 0;
        display: flex;
        align-items: center;
    }
    .xhw-rule-content h4 i {
        margin-right: 6px;
        color: var(--primary);
        font-size: 12px;
    }
    .xhw-rule-content p {
        font-size: 13px;
        color: var(--gray-600);
        line-height: 1.4;
        margin: 0;
    }

    /* ===== 表格卡片 ===== */
    .xhw-table-card {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        margin-bottom: 24px;
        border: none;
    }
    .xhw-table-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #334155;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 8px 8px 0 0;
        border: 1px solid #e2e8f0;
        border-bottom: none;
    }
    .xhw-table-header-left {
        display: flex;
        align-items: center;
    }
    .xhw-table-header-left i {
        width: 28px;
        height: 28px;
        background: rgba(59, 130, 246, 0.1);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-right: 8px;
        color: #3b82f6;
    }
    .xhw-table-header h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
    }
    .xhw-table-header .count {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        padding: 4px 10px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
    }

    /* ===== 现代化表格 ===== */
    .xhw-table-wrapper {
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-radius: 0 0 8px 8px;
        border: 1px solid #e2e8f0;
        border-top: none;
        background: #fff;
        position: relative;
    }
    .xhw-table-wrapper::-webkit-scrollbar {
        display: none;
    }
    .xhw-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .xhw-table thead th {
        background: var(--gray-50);
        color: var(--gray-700);
        font-weight: 600;
        padding: 10px 14px;
        text-align: center;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px dashed var(--gray-200);
        vertical-align: middle;
    }
    .xhw-table thead th i {
        margin-right: 4px;
        color: var(--primary);
        font-size: 11px;
    }
    .xhw-table thead th.sortable {
        cursor: pointer;
        user-select: none;
        transition: background 0.2s ease;
    }
    .xhw-table thead th.sortable:hover {
        background: var(--gray-100);
    }
    .xhw-table thead th.sortable .sort-icon {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        vertical-align: middle;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--gray-400);
        transition: transform 0.2s ease;
    }
    .xhw-table thead th.sortable.sorted-asc .sort-icon {
        border-top: none;
        border-bottom: 5px solid var(--primary);
    }
    .xhw-table thead th.sortable.sorted-desc .sort-icon {
        border-top-color: var(--primary);
    }
    .xhw-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px dashed var(--gray-200);
        color: var(--gray-700);
        font-size: 13px;
        text-align: center;
        vertical-align: middle;
    }
    .xhw-table tbody td:nth-child(6),
    .xhw-table tbody td:nth-child(7) {
        text-align: left;
    }
    .xhw-table tbody tr {
        transition: background 0.15s ease;
    }
    .xhw-table tbody tr:hover {
        background-color: var(--gray-50);
    }
    .xhw-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* 用户单元格 */
    .xhw-user-cell {
        text-align: left !important;
    }
    .xhw-user-info {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        vertical-align: middle;
    }
    .xhw-user-avatar-wrapper {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }
    .xhw-user-avatar-wrapper img {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        border: 1px solid var(--gray-200);
        display: block;
    }
    .xhw-user-name {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        font-weight: 500;
        color: var(--gray-900);
        font-size: 13px;
    }
    .xhw-user-name a {
        color: var(--primary);
        text-decoration: none;
        cursor: pointer;
    }
    .xhw-user-name a:hover {
        text-decoration: underline;
    }

    /* 单元格图标 */
    .xhw-cell-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-right: 4px;
        color: var(--gray-400);
        font-size: 10px;
        vertical-align: middle;
    }

    /* 备注气泡提示 */
    .xhw-desc-tooltip {
        position: relative;
        cursor: pointer;
        color: var(--primary);
        border-bottom: 1px dashed var(--primary);
    }
    .xhw-table tbody td {
        position: relative;
        overflow: visible !important;
    }
    .xhw-desc-tooltip:hover::after {
        content: attr(data-full-text);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--gray-800);
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1001;
        margin-bottom: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        pointer-events: none;
    }
    .xhw-desc-tooltip:hover::before {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: var(--gray-800);
        margin-bottom: -2px;
        z-index: 1002;
        pointer-events: none;
    }

    /* 黑暗模式 - 气泡提示 */
    [data-theme="dark"] .xhw-desc-tooltip:hover::after,
    html.dark .xhw-desc-tooltip:hover::after,
    .dark-theme .xhw-desc-tooltip:hover::after,
    body.dark-theme .xhw-desc-tooltip:hover::after {
        background: #374151;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    [data-theme="dark"] .xhw-desc-tooltip:hover::before,
    html.dark .xhw-desc-tooltip:hover::before,
    .dark-theme .xhw-desc-tooltip:hover::before,
    body.dark-theme .xhw-desc-tooltip:hover::before {
        border-top-color: #374151;
    }

    /* ===== 弹窗样式 ===== */
    .xhw-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .xhw-popup {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        width: 90%;
        max-width: 450px;
        max-height: 75vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 1000;
        position: relative;
    }
    .xhw-popup-title {
        padding: 14px 18px;
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid var(--gray-200);
        color: var(--gray-800);
    }
    .xhw-popup-content {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
        font-size: 13px;
        line-height: 1.5;
        color: var(--gray-700);
    }
    .xhw-popup-loading {
        padding: 40px 20px;
        text-align: center;
        color: var(--gray-500);
    }
    .xhw-popup-close {
        padding: 10px 18px;
        border: none;
        background: var(--gray-50);
        color: var(--gray-700);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease;
        border-top: 1px solid var(--gray-200);
    }
    .xhw-popup-close:hover {
        background: var(--gray-100);
        color: var(--gray-900);
    }

    /* 黑暗模式 - 弹窗 */
    [data-theme="dark"] .xhw-popup,
    html.dark .xhw-popup,
    .dark-theme .xhw-popup,
    body.dark-theme .xhw-popup {
        background: #1f2937;
        border: 1px solid #374151;
    }
    [data-theme="dark"] .xhw-popup-title,
    html.dark .xhw-popup-title,
    .dark-theme .xhw-popup-title,
    body.dark-theme .xhw-popup-title {
        background: #111827;
        border-bottom: 1px solid #374151;
        color: #ffffff;
    }
    [data-theme="dark"] .xhw-popup-content,
    html.dark .xhw-popup-content,
    .dark-theme .xhw-popup-content,
    body.dark-theme .xhw-popup-content {
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-popup-loading,
    html.dark .xhw-popup-loading,
    .dark-theme .xhw-popup-loading,
    body.dark-theme .xhw-popup-loading {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-popup-close,
    html.dark .xhw-popup-close,
    .dark-theme .xhw-popup-close,
    body.dark-theme .xhw-popup-close {
        background: #111827;
        border-top: 1px solid #374151;
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-popup-close:hover,
    html.dark .xhw-popup-close:hover,
    .dark-theme .xhw-popup-close:hover,
    body.dark-theme .xhw-popup-close:hover {
        background: #374151;
    }

    /* 用户详情弹窗 - 隐藏滚动条 */
    [id^="user-details-modal-"] .modal-body .mini-scrollbar,
    [id^="user-details-modal-"] .modal-body .scroll-y {
        overflow: visible !important;
        max-height: none !important;
    }
    /* 用户详情弹窗 - 字体调整 */
    [id^="user-details-modal-"] .modal-body {
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
    }
    /* 用户详情弹窗 - 紧凑布局 */
    [id^="user-details-modal-"] .modal-body .flex,
    [id^="user-details-modal-"] .modal-body [class*="flex"] {
        margin-bottom: 4px !important;
    }
    [id^="user-details-modal-"] .modal-body .mb10,
    [id^="user-details-modal-"] .modal-body [class*="mb"] {
        margin-bottom: 8px !important;
    }
    [id^="user-details-modal-"] .modal-body .border-bottom {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
    [id^="user-details-modal-"] .modal-body .muted-2-color {
        min-width: 60px;
        margin-right: 10px;
    }

    /* 弹窗管控徽章样式 */
    .xhw-ban-badge-in-modal {
        margin: 10px 15px;
        padding: 8px 12px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
        font-size: 12px;
    }
    .xhw-ban-badge-in-modal i {
        margin-right: 5px;
    }
    .xhw-ban-badge-type {
        margin-left: 8px;
        color: #991b1b;
    }
    .xhw-ban-badge-time {
        margin-top: 4px;
        color: #7f1d1d;
    }

    /* 黑暗模式 - 弹窗管控徽章 */
    [data-theme="dark"] .xhw-ban-badge-in-modal,
    html.dark .xhw-ban-badge-in-modal,
    .dark-theme .xhw-ban-badge-in-modal,
    body.dark-theme .xhw-ban-badge-in-modal {
        background: #371f1f;
        border: 1px solid #5b2121;
        color: #fecaca;
    }
    [data-theme="dark"] .xhw-ban-badge-type,
    html.dark .xhw-ban-badge-type,
    .dark-theme .xhw-ban-badge-type,
    body.dark-theme .xhw-ban-badge-type {
        color: #f87171;
    }
    [data-theme="dark"] .xhw-ban-badge-time,
    html.dark .xhw-ban-badge-time,
    .dark-theme .xhw-ban-badge-time,
    body.dark-theme .xhw-ban-badge-time {
        color: #fca5a5;
    }

    /* ===== 信誉查询弹窗样式 ===== */
    .xhw-credit-user-card {
        margin-bottom: 16px;
        padding: 12px;
        background: var(--gray-50);
        border-radius: 10px;
    }
    .xhw-credit-user-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .xhw-credit-user-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .xhw-credit-user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--border-color, #e5e7eb);
        display: block;
    }
    .xhw-credit-user-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .xhw-credit-user-name-row {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }
    .xhw-credit-user-info-row {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
    }
    .xhw-credit-user-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--gray-800);
        white-space: nowrap;
    }
    .xhw-credit-user-id {
        font-size: 11px;
        color: var(--gray-500);
        padding: 2px 6px;
        background: var(--gray-100);
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
    .xhw-credit-user-vip,
    .xhw-credit-user-auth,
    .xhw-credit-user-level {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .xhw-credit-user-vip img,
    .xhw-credit-user-vip svg,
    .xhw-credit-user-auth img,
    .xhw-credit-user-auth svg,
    .xhw-credit-user-level img,
    .xhw-credit-user-level svg {
        height: 18px;
        width: auto;
        display: block;
    }
    .xhw-credit-user-medals {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .xhw-credit-user-medals a {
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .xhw-credit-user-medals img {
        vertical-align: middle;
    }
    .xhw-credit-rating {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 600;
    }
    .xhw-credit-rating-excellent {
        background: rgba(16, 185, 129, 0.15);
        color: #10b981;
        border: 1px solid #10b981;
    }
    .xhw-credit-rating-average {
        background: rgba(245, 158, 11, 0.15);
        color: #f59e0b;
        border: 1px solid #f59e0b;
    }
    .xhw-credit-rating-poor {
        background: rgba(239, 68, 68, 0.15);
        color: #ef4444;
        border: 1px solid #ef4444;
    }
    .xhw-credit-status-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .xhw-credit-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 14px;
        font-size: 11px;
    }
    .xhw-credit-status-banned {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
    }
    .xhw-credit-status-normal {
        background: rgba(16, 185, 129, 0.1);
        color: #10b981;
    }
    .xhw-credit-bans-count {
        color: var(--gray-500);
        font-size: 12px;
    }
    .xhw-credit-register-time {
        color: var(--gray-500);
        font-size: 12px;
        white-space: nowrap;
    }
    .xhw-credit-current-ban {
        margin-bottom: 16px;
        padding: 12px;
        background: rgba(239, 68, 68, 0.05);
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 8px;
    }
    .xhw-credit-current-ban-title {
        margin: 0 0 8px 0;
        color: #ef4444;
        font-size: 13px;
        font-weight: 600;
    }
    .xhw-credit-info-row {
        font-size: 12px;
        line-height: 1.7;
        color: var(--gray-700);
    }
    .xhw-credit-info-label {
        color: var(--gray-500);
        min-width: 70px;
        display: inline-block;
    }
    .xhw-credit-logs-title {
        margin: 0 0 12px 0;
        color: var(--gray-800);
        font-size: 13px;
        font-weight: 600;
    }
    .xhw-credit-logs-container {
        max-height: 240px;
        overflow-y: auto;
    }
    .xhw-credit-log-item {
        margin-bottom: 10px;
        padding: 10px;
        background: var(--gray-50);
        border-radius: 6px;
    }
    .xhw-credit-log-item-ban {
        border-left: 3px solid #ef4444;
    }
    .xhw-credit-log-item-blackroom {
        border-left: 3px solid #f59e0b;
    }
    .xhw-credit-log-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .xhw-credit-log-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .xhw-credit-log-index {
        background: var(--gray-200);
        color: var(--gray-600);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 11px;
    }
    .xhw-credit-log-time {
        color: var(--gray-500);
        font-size: 12px;
    }
    .xhw-credit-log-content {
        font-size: 13px;
        line-height: 1.7;
        color: var(--gray-700);
    }
    .xhw-credit-empty {
        text-align: center;
        color: var(--gray-500);
        padding: 30px 0;
    }
    .xhw-credit-empty i {
        font-size: 32px;
        color: #10b981;
        margin-bottom: 10px;
        display: block;
    }

    /* 黑暗模式 - 信誉查询弹窗 */
    [data-theme="dark"] .xhw-credit-user-card,
    html.dark .xhw-credit-user-card,
    .dark-theme .xhw-credit-user-card,
    body.dark-theme .xhw-credit-user-card {
        background: #1f2937;
    }
    [data-theme="dark"] .xhw-credit-user-avatar,
    html.dark .xhw-credit-user-avatar,
    .dark-theme .xhw-credit-user-avatar,
    body.dark-theme .xhw-credit-user-avatar {
        border-color: #374151;
    }
    [data-theme="dark"] .xhw-credit-user-name,
    html.dark .xhw-credit-user-name,
    .dark-theme .xhw-credit-user-name,
    body.dark-theme .xhw-credit-user-name {
        color: #f3f4f6;
    }
    [data-theme="dark"] .xhw-credit-user-id,
    html.dark .xhw-credit-user-id,
    .dark-theme .xhw-credit-user-id,
    body.dark-theme .xhw-credit-user-id {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-rating-excellent,
    html.dark .xhw-credit-rating-excellent,
    .dark-theme .xhw-credit-rating-excellent,
    body.dark-theme .xhw-credit-rating-excellent {
        background: rgba(16, 185, 129, 0.2);
        color: #34d399;
        border-color: #34d399;
    }
    [data-theme="dark"] .xhw-credit-rating-average,
    html.dark .xhw-credit-rating-average,
    .dark-theme .xhw-credit-rating-average,
    body.dark-theme .xhw-credit-rating-average {
        background: rgba(245, 158, 11, 0.2);
        color: #fbbf24;
        border-color: #fbbf24;
    }
    [data-theme="dark"] .xhw-credit-rating-poor,
    html.dark .xhw-credit-rating-poor,
    .dark-theme .xhw-credit-rating-poor,
    body.dark-theme .xhw-credit-rating-poor {
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
        border-color: #f87171;
    }
    [data-theme="dark"] .xhw-credit-status-banned,
    html.dark .xhw-credit-status-banned,
    .dark-theme .xhw-credit-status-banned,
    body.dark-theme .xhw-credit-status-banned {
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
    }
    [data-theme="dark"] .xhw-credit-status-normal,
    html.dark .xhw-credit-status-normal,
    .dark-theme .xhw-credit-status-normal,
    body.dark-theme .xhw-credit-status-normal {
        background: rgba(16, 185, 129, 0.2);
        color: #34d399;
    }
    [data-theme="dark"] .xhw-credit-bans-count,
    html.dark .xhw-credit-bans-count,
    .dark-theme .xhw-credit-bans-count,
    body.dark-theme .xhw-credit-bans-count {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-register-time,
    html.dark .xhw-credit-register-time,
    .dark-theme .xhw-credit-register-time,
    body.dark-theme .xhw-credit-register-time {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-current-ban,
    html.dark .xhw-credit-current-ban,
    .dark-theme .xhw-credit-current-ban,
    body.dark-theme .xhw-credit-current-ban {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
    }
    [data-theme="dark"] .xhw-credit-current-ban-title,
    html.dark .xhw-credit-current-ban-title,
    .dark-theme .xhw-credit-current-ban-title,
    body.dark-theme .xhw-credit-current-ban-title {
        color: #f87171;
    }
    [data-theme="dark"] .xhw-credit-info-row,
    html.dark .xhw-credit-info-row,
    .dark-theme .xhw-credit-info-row,
    body.dark-theme .xhw-credit-info-row {
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-credit-info-label,
    html.dark .xhw-credit-info-label,
    .dark-theme .xhw-credit-info-label,
    body.dark-theme .xhw-credit-info-label {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-logs-title,
    html.dark .xhw-credit-logs-title,
    .dark-theme .xhw-credit-logs-title,
    body.dark-theme .xhw-credit-logs-title {
        color: #f3f4f6;
    }
    [data-theme="dark"] .xhw-credit-log-item,
    html.dark .xhw-credit-log-item,
    .dark-theme .xhw-credit-log-item,
    body.dark-theme .xhw-credit-log-item {
        background: #1f2937;
    }
    [data-theme="dark"] .xhw-credit-log-index,
    html.dark .xhw-credit-log-index,
    .dark-theme .xhw-credit-log-index,
    body.dark-theme .xhw-credit-log-index {
        background: #374151;
        color: #d1d5db;
    }
    [data-theme="dark"] .xhw-credit-log-time,
    html.dark .xhw-credit-log-time,
    .dark-theme .xhw-credit-log-time,
    body.dark-theme .xhw-credit-log-time {
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-log-content,
    html.dark .xhw-credit-log-content,
    .dark-theme .xhw-credit-log-content,
    body.dark-theme .xhw-credit-log-content {
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-credit-empty,
    html.dark .xhw-credit-empty,
    .dark-theme .xhw-credit-empty,
    body.dark-theme .xhw-credit-empty {
        color: #9ca3af;
    }

    /* ===== 信用分显示 ===== */
    .xhw-credit-score-card {
        margin-bottom: 20px;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        text-align: center;
        color: #fff;
    }
    .xhw-credit-score-title {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 8px;
    }
    .xhw-credit-score-value {
        font-size: 48px;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 8px;
    }
    .xhw-credit-score-level {
        font-size: 16px;
        opacity: 0.95;
    }
    .xhw-credit-details {
        margin-bottom: 20px;
    }
    .xhw-credit-details-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 12px;
    }
    .xhw-credit-detail-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        background: var(--gray-50);
        border-radius: 6px;
        margin-bottom: 8px;
    }
    .xhw-credit-detail-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .xhw-credit-detail-name {
        font-size: 14px;
        color: var(--gray-700);
        font-weight: 500;
    }
    .xhw-credit-detail-value {
        font-size: 12px;
        color: var(--gray-500);
        background: var(--gray-200);
        padding: 2px 8px;
        border-radius: 10px;
    }
    .xhw-credit-detail-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .xhw-credit-progress-bar {
        width: 200px;
        height: 8px;
        background: var(--gray-200);
        border-radius: 4px;
        overflow: hidden;
    }
    .xhw-credit-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    .xhw-credit-progress-fill.warning {
        background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    }
    .xhw-credit-progress-fill.danger {
        background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    }
    .xhw-credit-score-text {
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-700);
        min-width: 40px;
        text-align: right;
    }
    .xhw-credit-weight {
        font-size: 11px;
        color: var(--gray-400);
        min-width: 35px;
        text-align: right;
    }
    .xhw-credit-penalty-item {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.2);
    }
    [data-theme="dark"] .xhw-credit-penalty-item,
    html.dark .xhw-credit-penalty-item,
    .dark-theme .xhw-credit-penalty-item,
    body.dark-theme .xhw-credit-penalty-item {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.3);
    }
    .xhw-credit-toggle {
        cursor: pointer;
        user-select: none;
    }
    .xhw-credit-toggle:hover {
        opacity: 0.8;
    }
    .xhw-credit-toggle i {
        transition: transform 0.3s ease;
    }
    .xhw-credit-toggle.collapsed i {
        transform: rotate(-90deg);
    }
    .xhw-credit-details-content {
        overflow: hidden;
        transition: max-height 0.3s ease;
        max-height: 1000px;
    }
    .xhw-credit-details-content.collapsed {
        max-height: 0;
    }
    .xhw-credit-score-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
    }
    .xhw-credit-score-badge i {
        font-size: 12px;
    }

    /* 黑暗模式 - 信用分 */
    [data-theme="dark"] .xhw-credit-score-card,
    html.dark .xhw-credit-score-card,
    .dark-theme .xhw-credit-score-card,
    body.dark-theme .xhw-credit-score-card {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    }
    [data-theme="dark"] .xhw-credit-details-title,
    html.dark .xhw-credit-details-title,
    .dark-theme .xhw-credit-details-title,
    body.dark-theme .xhw-credit-details-title {
        color: #f3f4f6;
    }
    [data-theme="dark"] .xhw-credit-detail-item,
    html.dark .xhw-credit-detail-item,
    .dark-theme .xhw-credit-detail-item,
    body.dark-theme .xhw-credit-detail-item {
        background: #1f2937;
    }
    [data-theme="dark"] .xhw-credit-detail-name,
    html.dark .xhw-credit-detail-name,
    .dark-theme .xhw-credit-detail-name,
    body.dark-theme .xhw-credit-detail-name {
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-credit-detail-value,
    html.dark .xhw-credit-detail-value,
    .dark-theme .xhw-credit-detail-value,
    body.dark-theme .xhw-credit-detail-value {
        color: #9ca3af;
        background: #374151;
    }
    [data-theme="dark"] .xhw-credit-progress-bar,
    html.dark .xhw-credit-progress-bar,
    .dark-theme .xhw-credit-progress-bar,
    body.dark-theme .xhw-credit-progress-bar {
        background: #374151;
    }
    [data-theme="dark"] .xhw-credit-score-text,
    html.dark .xhw-credit-score-text,
    .dark-theme .xhw-credit-score-text,
    body.dark-theme .xhw-credit-score-text {
        color: #e5e7eb;
    }
    [data-theme="dark"] .xhw-credit-weight,
    html.dark .xhw-credit-weight,
    .dark-theme .xhw-credit-weight,
    body.dark-theme .xhw-credit-weight {
        color: #6b7280;
    }

    /* ===== 状态徽章 ===== */
    .xhw-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 8px;
        border-radius: 16px;
        font-size: 11px;
        font-weight: 500;
        margin: 2px;
        line-height: 1;
        white-space: nowrap;
        vertical-align: middle;
    }
    .xhw-badge i {
        font-size: 10px;
    }
    .xhw-badge-ban {
        background: #fef2f2;
        color: var(--danger);
        border: 1px solid #fecaca;
    }
    .xhw-badge-blackroom {
        background: #fffbeb;
        color: var(--warning);
        border: 1px solid #fcd34d;
    }
    .xhw-badge-forever {
        background: #f3e8ff;
        color: #7c3aed;
        border: 1px solid #d8b4fe;
    }
    .xhw-badge-temp {
        background: #ecfdf5;
        color: var(--success);
        border: 1px solid #a7f3d0;
    }
    .xhw-badge-appeal-yes {
        background: #eff6ff;
        color: var(--info);
        border: 1px solid #bfdbfe;
        margin-left: 4px;
    }
    .xhw-badge-appeal-no {
        background: #fef2f2;
        color: var(--danger);
        border: 1px solid #fecaca;
        margin-left: 4px;
    }


    /* ===== 分页样式 ===== */
    .xhw-pagination-wrapper {
        padding: 16px;
        background: var(--gray-50);
        text-align: center;
        border-radius: 0 0 8px 8px;
    }
    .xhw-pagination {
        display: inline-block;
        list-style: none !important;
        margin: 0;
        padding: 0;
    }
    .xhw-pagination li {
        list-style: none !important;
        display: inline-block;
        margin: 0 2px;
        vertical-align: top;
    }
    .xhw-pagination li::before,
    .xhw-pagination li::after {
        display: none !important;
        content: none !important;
    }
    .xhw-pagination li a,
    .xhw-pagination li span {
        display: block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.15s ease;
        text-align: center;
        padding: 0;
    }
    .xhw-pagination li a i,
    .xhw-pagination li span i {
        font-size: 12px;
        line-height: 32px;
        vertical-align: top;
    }
    .xhw-pagination li a {
        background: #fff;
        color: var(--gray-700);
        border: 1px solid var(--gray-300);
    }
    .xhw-pagination li a:hover {
        background: var(--gray-100);
        border-color: var(--gray-400);
    }
    .xhw-pagination li.active span {
        background: var(--primary);
        color: #fff;
        border: 1px solid var(--primary);
    }
    .xhw-pagination li.disabled span {
        color: var(--gray-400);
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        cursor: not-allowed;
    }

    /* ===== 底部提示 ===== */
    .xhw-footer {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 4px;
        padding: 12px 16px;
        text-align: center;
        color: #334155;
        border: 1px solid #e2e8f0;
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .xhw-footer-content {
        text-align: center;
    }
    .xhw-footer p {
        margin: 0;
        font-size: 13px;
        color: #334155;
        line-height: 1.4;
        font-weight: 500;
        text-align: center;
    }

    /* ===== 空状态 ===== */
    .xhw-empty-state {
        text-align: center;
        padding: 40px 20px;
        background: #fff;
    }
    .xhw-empty-state i {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        font-size: 24px;
        margin: 0 auto 12px;
        border: 2px dashed #d1d5db;
    }
    .xhw-empty-state h4 {
        font-size: 16px;
        color: var(--gray-700);
        margin-bottom: 6px;
    }
    .xhw-empty-state p {
        font-size: 13px;
        color: var(--gray-500);
        margin: 0;
    }

    /* ===== 提示语 ===== */
    .xhw-tips-bar {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #f59e0b;
        border-radius: 4px;
        padding: 4px 8px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        color: #92400e;
        font-size: 12px;
        line-height: 1.4;
    }
    .xhw-tips-bar-content {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .xhw-tips-bar i {
        color: #f59e0b;
        font-size: 12px;
    }
    .xhw-tips-bar-close {
        width: 16px;
        height: 16px;
        background: transparent;
        border: none;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #92400e;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    .xhw-tips-bar-close:hover {
        background: transparent;
        color: #b45309;
    }
    .xhw-tips-bar.hidden {
        display: none;
    }

    /* ===== 图表区域 ===== */
    .xhw-charts-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }
    .xhw-chart-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }
    .xhw-chart-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        color: #334155;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e2e8f0;
    }
    .xhw-chart-header h4 {
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
    }
    .xhw-chart-header h4 i {
        margin-right: 8px;
        color: #3b82f6;
    }
    .xhw-chart-header .chart-period {
        display: flex;
        gap: 4px;
    }
    .xhw-chart-header .chart-period button {
        background: rgba(59, 130, 246, 0.1);
        border: none;
        color: #3b82f6;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .xhw-chart-header .chart-period button:hover,
    .xhw-chart-header .chart-period button.active {
        background: #3b82f6;
        color: #fff;
    }
    .xhw-chart-body {
        padding: 16px;
        height: 220px;
        position: relative;
    }
    .xhw-chart-body canvas {
        max-height: 100%;
    }
    .xhw-word-cloud {
        padding: 16px;
        height: 188px;
        overflow: hidden;
        position: relative;
    }
    .xhw-word-cloud-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        animation: xhw-word-scroll 20s linear infinite;
    }
    .xhw-word-cloud:hover .xhw-word-cloud-inner {
        animation-play-state: paused;
    }
    @keyframes xhw-word-scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
    }
    .xhw-word-tag {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        cursor: default;
        transition: transform 0.2s, box-shadow 0.2s;
        white-space: nowrap;
    }
    .xhw-word-tag:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
.xhw-word-tag.size-1 { background: #e0f2fe; color: #0369a1; font-size: 11px; }
.xhw-word-tag.size-2 { background: #dbeafe; color: #1d4ed8; font-size: 12px; }
.xhw-word-tag.size-3 { background: #ede9fe; color: #6d28d9; font-size: 13px; }
.xhw-word-tag.size-4 { background: #fce7f3; color: #be185d; font-size: 14px; }
.xhw-word-tag.size-5 { background: #fef3c7; color: #b45309; font-size: 15px; font-weight: 600; }

    /* ===== 加载动画 ===== */
    .xhw-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-radius: 8px;
    }

    [data-theme="dark"] .xhw-loading-overlay,
    html.dark .xhw-loading-overlay,
    .dark-theme .xhw-loading-overlay,
    body.dark-theme .xhw-loading-overlay {
        background: rgba(31, 41, 55, 0.8);
    }

    .xhw-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--gray-200);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: xhw-spin 0.8s linear infinite;
    }

    /* ===== 响应式 ===== */
    @media screen and (max-width: 768px) {
    .xhw-container {padding: 16px;}
    .xhw-page-header {padding: 32px 20px;}
    .xhw-page-header h1 {font-size: 28px;}
    .xhw-stats-row {grid-template-columns: repeat(2, 1fr); gap: 12px;}
    .xhw-stat-card {padding: 16px;}
    .xhw-stat-icon {width: 44px; height: 44px;}
    .xhw-stat-icon i {font-size: 20px;}
    .xhw-stat-content h3 {font-size: 22px;}
    .xhw-charts-row {grid-template-columns: 1fr; gap: 16px;}
    .xhw-chart-body {height: 200px;}
        .xhw-table-filter {
            padding: 8px 12px;
            gap: 6px;
        }
        .xhw-table-filter-group {
            padding: 4px 8px;
            flex-shrink: 0;
        }
        .xhw-table-filter-group input,
        .xhw-table-filter-group select {
            min-width: 80px;
            width: 80px;
            font-size: 12px;
        }
        .xhw-table-filter-search {
            padding: 0 12px;
            font-size: 12px;
            flex-shrink: 0;
        }
        .xhw-table-filter-reset {
            flex-shrink: 0;
        }
        .xhw-table thead th,
    .xhw-table tbody td {padding: 12px 10px; font-size: 13px; vertical-align: middle;}
    }

    /* ===== 用户信誉查询新元素样式补充 ===== */
    .xhw-credit-user-addr {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        color: var(--gray-600);
        padding: 2px 8px;
        background: var(--gray-100);
        border-radius: 12px;
        white-space: nowrap;
    }
    .xhw-credit-user-addr i {
        color: var(--info);
        font-size: 11px;
        margin-right: 3px;
    }
    .xhw-credit-user-cap {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
    }
    .xhw-role-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 8px;
        border-radius: 14px;
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }
    .xhw-role-badge.role-admin {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #fcd34d;
    }
    .xhw-role-badge.role-editor {
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
        color: #0369a1;
        border: 1px solid #7dd3fc;
    }
    .xhw-role-badge.role-author {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1d4ed8;
        border: 1px solid #93c5fd;
    }
    .xhw-role-badge.role-contributor {
        background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
        color: #6d28d9;
        border: 1px solid #c4b5fd;
    }
    .xhw-role-badge.role-subscriber {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #059669;
        border: 1px solid #a7f3d0;
    }

    /* 暗黑模式 - 用户信誉查询新元素 */
    [data-theme="dark"] .xhw-credit-user-id,
    html.dark .xhw-credit-user-id,
    .dark-theme .xhw-credit-user-id,
    body.dark-theme .xhw-credit-user-id {
        background: #374151;
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-credit-user-addr,
    html.dark .xhw-credit-user-addr,
    .dark-theme .xhw-credit-user-addr,
    body.dark-theme .xhw-credit-user-addr {
        background: #374151;
        color: #9ca3af;
    }
    [data-theme="dark"] .xhw-role-badge.role-admin,
    html.dark .xhw-role-badge.role-admin,
    .dark-theme .xhw-role-badge.role-admin,
    body.dark-theme .xhw-role-badge.role-admin {
        background: rgba(245, 158, 11, 0.2);
        color: #fbbf24;
        border-color: rgba(245, 158, 11, 0.3);
    }
    [data-theme="dark"] .xhw-role-badge.role-editor,
    html.dark .xhw-role-badge.role-editor,
    .dark-theme .xhw-role-badge.role-editor,
    body.dark-theme .xhw-role-badge.role-editor {
        background: rgba(59, 130, 246, 0.2);
        color: #60a5fa;
        border-color: rgba(59, 130, 246, 0.3);
    }
    [data-theme="dark"] .xhw-role-badge.role-author,
    html.dark .xhw-role-badge.role-author,
    .dark-theme .xhw-role-badge.role-author,
    body.dark-theme .xhw-role-badge.role-author {
        background: rgba(99, 102, 241, 0.2);
        color: #a5b4fc;
        border-color: rgba(99, 102, 241, 0.3);
    }
    [data-theme="dark"] .xhw-role-badge.role-contributor,
    html.dark .xhw-role-badge.role-contributor,
    .dark-theme .xhw-role-badge.role-contributor,
    body.dark-theme .xhw-role-badge.role-contributor {
        background: rgba(124, 58, 237, 0.2);
        color: #c4b5fd;
        border-color: rgba(124, 58, 237, 0.3);
    }
    [data-theme="dark"] .xhw-role-badge.role-subscriber,
    html.dark .xhw-role-badge.role-subscriber,
    .dark-theme .xhw-role-badge.role-subscriber,
    body.dark-theme .xhw-role-badge.role-subscriber {
        background: rgba(16, 185, 129, 0.2);
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, 0.3);
    }