/* ========== 性能优化 ========== */
        * {
            will-change: auto;
        }
        .stat-card, .stat-value, .float-nav, .multi-select {
            will-change: transform, opacity;
        }
        /* 减少动画复杂度 */
        @media (prefers-reduced-motion: no-preference) {
            .stat-card, .glass-card {
                animation-duration: 0.3s !important;
                animation-timing-function: ease-out !important;
            }
        }

        /* ========== 基础变量 ========== */
        :root {
            --primary: #8b5cf6;
            --pl: #a78bfa;
            --sec: #06b6d4;
            --acc: #10b981;
            --txt: rgba(255,255,255,.95);
            --txt2: rgba(255,255,255,.6);
            --txt3: rgba(255,255,255,.4);
            --bg: linear-gradient(135deg,#0f0f1a,#1a1a2e,#16213e);
            --gla: rgba(255,255,255,.08);
            --gbr: rgba(255,255,255,.12);
            --gsh: 0 8px 32px rgba(0,0,0,.3);
            --gbl: blur(20px);
            --dd: rgba(30,30,50,.98);
            --tb: rgba(26,26,46,.98);
            --ib: rgba(255,255,255,.05);
            --ri: rgba(255,255,255,.05);
            --rh: rgba(255,255,255,.1);
            --rsm: 8px;
            --rmd: 12px;
            --rlg: 16px;
        }

        /* ========== 进场动画系统 ========== */
        /* 页面加载遮罩 */
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99999;
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .page-loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        .loader-content {
            text-align: center;
            animation: loaderFadeIn 0.8s ease-out;
        }
        @keyframes loaderFadeIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .loader-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(139, 92, 246, 0.1);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: loaderSpin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
            margin: 0 auto 20px;
            position: relative;
        }
        .loader-spinner::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 4px solid rgba(6, 182, 212, 0.1);
            border-top-color: var(--sec);
            border-radius: 50%;
            animation: loaderSpin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
        }
        @keyframes loaderSpin {
            to { transform: rotate(360deg); }
        }
        .loader-text {
            color: var(--txt);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.5px;
            animation: loaderTextPulse 2s ease-in-out infinite;
        }
        @keyframes loaderTextPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        /* 统计卡片数字闪烁效果 */
        @keyframes valueFlash {
            0%, 100% {
                transform: scale(1);
                filter: brightness(1);
            }
            50% {
                transform: scale(1.08);
                filter: brightness(1.2);
            }
        }

        /* 通用进场动画类 */
        .page-enter {
            opacity: 0;
            transform: translateY(20px);
            animation: pageEnter 0.6s ease-out forwards;
        }
        @keyframes pageEnter {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 延迟进场 */
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
        .delay-5 { animation-delay: 0.5s; }
        .delay-6 { animation-delay: 0.6s; }

        /* 头部进场 */
        .header {
            animation: headerEnter 0.7s ease-out 0.1s both;
        }
        @keyframes headerEnter {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 统计卡片进场 - 修复版 */
        .stats-grid {
            opacity: 1;
            animation: statsGridEnter 0.8s ease-out 0.2s both;
        }
        @keyframes statsGridEnter {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .stat-card {
            opacity: 1;
            will-change: transform;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* 卡片悬停强化 */
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
        }

        /* 排行榜进场 */
        .ranking-section {
            opacity: 1;
        }

        /* 物品分布进场 */
        .items-section {
            opacity: 1;
        }

        /* 数据表格进场 */
        .table-section {
            opacity: 1;
        }

        /* 表格行进场动画 - 已禁用以提升性能 */
        .table-row-enter {
            opacity: 1 !important;
            animation: none !important;
            transform: none !important;
        }

        /* 筛选栏进场 */
        .filter-bar {
            opacity: 1;
        }


        /* 按钮点击涟漪增强 */
        .btn:active {
            transform: scale(0.95);
        }

        /* 页面元素闪烁提示 */
        @keyframes shimmerFlash {
            0%, 100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
            50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
        }
        .highlight-flash {
            animation: shimmerFlash 2s ease-in-out infinite;
        }

        /* 数字滚动动画 - 优化版 */
        .stat-value {
            display: inline-block;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .stat-value.animate {
            animation: numberRoll 0.3s ease-out;
        }
        @keyframes numberRoll {
            from {
                opacity: 0.5;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 数字变动时的闪烁效果 */
        .stat-value.pulse-change {
            animation: numberPulse 0.3s ease-out;
        }
        @keyframes numberPulse {
            from {
                color: var(--pl);
                text-shadow: 0 0 10px var(--primary);
            }
            to {
                color: inherit;
                text-shadow: none;
            }
        }

        /* 数字增加时的闪烁 */
        .stat-value.increase {
            animation: numberIncrease 0.3s ease-out;
        }
        @keyframes numberIncrease {
            from {
                color: #10b981;
                text-shadow: 0 0 8px #10b981;
            }
            to {
                color: inherit;
                text-shadow: none;
            }
        }

        /* 数字减少时的红色闪烁 */
        .stat-value.decrease {
            animation: numberDecrease 0.3s ease-out;
        }
        @keyframes numberDecrease {
            from {
                color: #ef4444;
                text-shadow: 0 0 8px #ef4444;
            }
            to {
                color: inherit;
                text-shadow: none;
            }
        }

        /* 侧边栏进场 */
        .sidebar {
            animation: sidebarSlide 0.5s ease-out 0.2s both;
        }
        @keyframes sidebarSlide {
            from {
                opacity: 0;
                transform: translateX(-100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* 导航项进场 */
        .nav-item {
            opacity: 0;
            transform: translateX(-20px);
            animation: navItemEnter 0.3s ease-out forwards;
        }
        .nav-item:nth-child(1) { animation-delay: 0.3s; }
        .nav-item:nth-child(2) { animation-delay: 0.35s; }
        .nav-item:nth-child(3) { animation-delay: 0.4s; }
        .nav-item:nth-child(4) { animation-delay: 0.45s; }
        @keyframes navItemEnter {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Toast通知进场 - 优化版 */
        .toast {
            pointer-events: auto;
        }
        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes toastSlideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }

        /* 下拉菜单展开动画 */
        .dropdown-menu.expand {
            animation: dropdownExpand 0.3s ease-out;
        }
        @keyframes dropdownExpand {
            from {
                opacity: 0;
                transform: translateY(-10px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 进度条动画 */
        .progress-bar-fill {
            animation: progressFill 1s ease-out forwards;
        }
        @keyframes progressFill {
            from { width: 0; }
        }

        /* 图标旋转动画 */
        .icon-spin {
            animation: iconSpin 1s linear infinite;
        }
        @keyframes iconSpin {
            to { transform: rotate(360deg); }
        }

        /* 弹跳动画 */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .bounce {
            animation: bounce 2s ease-in-out infinite;
        }

        /* 心跳动画 */
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            14% { transform: scale(1.1); }
            28% { transform: scale(1); }
            42% { transform: scale(1.1); }
            70% { transform: scale(1); }
        }
        .heartbeat {
            animation: heartbeat 1.5s ease-in-out infinite;
        }

        /* 背景粒子容器 */
        .particles-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--primary);
            border-radius: 50%;
            opacity: 0.3;
            animation: particleFloat 15s linear infinite;
        }
        @keyframes particleFloat {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% {
                transform: translateY(-100vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* 气泡容器 */
        .bubbles-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .bubble {
            position: absolute;
            bottom: -20px;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), rgba(139,92,246,0.1));
            border-radius: 50%;
            animation: bubbleRise 10s ease-in-out infinite;
        }
        @keyframes bubbleRise {
            0% {
                transform: translateY(0) scale(1);
                opacity: 0;
            }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% {
                transform: translateY(-100vh) scale(1.2);
                opacity: 0;
            }
        }

        /* 骨架屏加载效果 */
        .skeleton {
            background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
            background-size: 200% 100%;
            animation: skeletonShimmer 1.5s infinite;
        }
        @keyframes skeletonShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* 弹性缩放动画 */
        @keyframes elasticScale {
            0% { transform: scale(1); }
            30% { transform: scale(1.05); }
            50% { transform: scale(0.95); }
            70% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }
        .elastic-scale {
            animation: elasticScale 0.5s ease-out;
        }

        /* 发光脉冲动画 */
        @keyframes glowPulse {
            0%, 100% {
                box-shadow: 0 0 5px rgba(139, 92, 246, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
            }
        }
        .glow-pulse {
            animation: glowPulse 2s ease-in-out infinite;
        }

        /* 文字渐入动画 */
        .text-gradient-animate {
            background: linear-gradient(90deg, var(--txt), var(--pl), var(--txt));
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textGradient 3s linear infinite;
        }
        @keyframes textGradient {
            to { background-position: 200% center; }
        }

        /* ========== 滚动条统一 ========== */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--pl); }

        /* ========== 基础布局 ========== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            background: var(--bg);
            min-height: 100vh;
            color: var(--txt);
            overflow-x: hidden;
            position: relative;
        }

        /* 背景动画 */
        body::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 70% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
            animation: backgroundFloat 20s ease-in-out infinite;
            pointer-events: none;
            z-index: -1;
        }

        @keyframes backgroundFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, 20px) rotate(5deg); }
            50% { transform: translate(-20px, 10px) rotate(-5deg); }
            75% { transform: translate(10px, -20px) rotate(3deg); }
        }

        /* 滚动条平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }

        /* ========== 头部 ========== */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 24px;
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: var(--rlg);
            margin-bottom: 16px;
            position: relative;
            z-index: 10000;
            min-height: 80px;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }
        .header-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
        }
        .header h1 {
            font-size: clamp(42px, 4.5vw, 62px);
            font-weight: 700;
            background: linear-gradient(135deg, var(--pl), var(--sec), var(--pl));
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            white-space: nowrap;
            line-height: 1;
            letter-spacing: -1px;
            animation: gradientMove 3s ease infinite;
            position: relative;
            text-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
        }
        .header h1::before {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--sec), var(--pl), var(--sec));
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0.5;
            animation: gradientMove 3s ease infinite reverse;
            filter: blur(2px);
        }
        .header-info { flex: 1; margin-left: 20px; display: flex; align-items: center; gap: 16px; }
        .time-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 20px;
            font-size: 12px;
            color: var(--acc);
            transition: all .3s ease;
            position: relative;
            overflow: hidden;
        }
        .time-badge::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(16, 185, 129, 0.1), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }
        .time-badge:hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.25));
            border-color: rgba(16, 185, 129, 0.5);
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        .time-badge .time-dot {
            width: 8px;
            height: 8px;
            background: var(--acc);
            border-radius: 50%;
            animation: pulse-dot 2s ease-in-out infinite;
            box-shadow: 0 0 8px var(--acc);
            position: relative;
            z-index: 1;
        }
        @keyframes pulse-dot {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
                box-shadow: 0 0 8px var(--acc);
            }
            50% {
                opacity: 0.6;
                transform: scale(0.8);
                box-shadow: 0 0 4px var(--acc);
            }
        }
        @keyframes badgeShine {
            0% { transform: translateX(-100%) rotate(45deg); }
            100% { transform: translateX(100%) rotate(45deg); }
        }
        .time-badge.updating {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));
            border-color: var(--primary);
            color: var(--pl);
            animation: glowPulse 2s ease-in-out infinite;
        }
        .time-badge.updating .time-dot {
            background: var(--primary);
            animation: pulse-dot-fast 0.5s ease-in-out infinite;
            box-shadow: 0 0 12px var(--primary);
        }
        @keyframes pulse-dot-fast {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
                box-shadow: 0 0 8px var(--primary);
            }
            50% {
                opacity: 0.4;
                transform: scale(0.6);
                box-shadow: 0 0 2px var(--primary);
            }
        }
        .data-change {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            font-size: 11px;
            color: var(--txt2);
            opacity: 0;
            transform: translateX(-10px);
            transition: all .3s ease;
        }
        .data-change.show { opacity: 1; transform: translateX(0); }
        .data-change .added { color: var(--acc); }
        .data-change .removed { color: #ef4444; }
        .header-actions { display: flex; gap: 12px; align-items: center; position: relative; }

        /* ========== 刷新下拉框 ========== */
        .refresh-dropdown { position: relative; }
        .refresh-dropdown .dropdown-trigger {
            padding: 8px 12px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            min-width: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            transition: all .3s ease;
        }
        .refresh-dropdown .dropdown-trigger:hover {
            background: var(--rh);
            border-color: var(--primary);
            transform: translateY(-1px);
        }
        .refresh-dropdown .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 120px;
            background: var(--dd);
            backdrop-filter: blur(20px);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            margin-top: 4px;
            overflow: hidden;
            display: none;
            z-index: 10001;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            animation: fadeInDown 0.2s ease-out;
        }
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .refresh-dropdown.open .dropdown-menu { display: block; }
        .refresh-dropdown .dropdown-item {
            padding: 10px 14px;
            cursor: pointer;
            transition: all .2s ease;
            text-align: center;
            position: relative;
        }
        .refresh-dropdown .dropdown-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary);
            transform: scaleY(0);
            transition: transform .2s ease;
        }
        .refresh-dropdown .dropdown-item:hover::before {
            transform: scaleY(1);
        }
        .refresh-dropdown .dropdown-item:hover {
            background: rgba(139,92,246,.2);
            color: var(--txt);
            font-size: 13px;
        }
        .refresh-dropdown .dropdown-item.selected { background: rgba(139,92,246,.3); color: var(--pl); font-weight: 600; }

        /* ========== 按钮 ========== */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: var(--rsm);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        .btn:hover::before {
            width: 300px;
            height: 300px;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--pl));
            color: #fff;
            font-size: 14px;
            background-size: 200% 200%;
            animation: gradientMove 3s ease infinite;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
        }
        .btn-primary:active {
            transform: translateY(0);
        }
        .btn-secondary {
            background: rgba(255,255,255,.05);
            border: 1px solid var(--gbr);
            color: var(--txt2);
            font-size: 13px;
        }
        .btn-secondary:hover {
            background: rgba(255,255,255,.1);
            border-color: var(--primary);
            color: var(--primary);
        }
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        .btn-reset {
            position: relative;
            z-index: 1;
        }
        .btn-filter {
            position: relative;
            z-index: 1;
        }


        /* ========== 统计卡片 ========== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 16px;
        }
        .stat-card {
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: var(--rmd);
            padding: 24px;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            position: relative;
            overflow: hidden;
            min-height: 140px;
            will-change: transform;
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25);
            border-color: var(--primary);
        }
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--sec), var(--acc));
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .stat-card:hover::before {
            opacity: 1;
        }
        .stat-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--txt2);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: .8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .stat-label::before {
            content: '';
            width: 8px;
            height: 8px;
            background: linear-gradient(135deg, var(--primary), var(--sec));
            border-radius: 50%;
            animation: labelDotPulse 2s ease-in-out infinite;
        }
        @keyframes labelDotPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
        }
        .stat-value {
            font-size: 42px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--pl), var(--sec));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .stat-card:hover .stat-value {
            transform: scale(1.08);
            filter: brightness(1.15);
        }
        .stat-sub { font-size: 12px; color: var(--txt3); margin-top: 6px; font-weight: 500; }
        .stat-num-big {
            font-size: clamp(40px, 4vw, 72px);
            font-weight: 800;
            background: linear-gradient(135deg, var(--pl), var(--sec));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            letter-spacing: -1px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .stat-card:hover .stat-num-big {
            transform: scale(1.05);
            filter: brightness(1.1);
        }
        .stat-detail {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--gbr);
            max-height: 60px;
            overflow-y: auto;
        }
        .stat-detail-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            padding: 4px 0;
            color: var(--txt2);
        }
        .stat-detail-item span:last-child { color: var(--sec); font-weight: 600; }

        /* ========== 充值统计卡片 ========== */
        .recharge-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            font-size: 11px;
        }
        /* 优化充值总额卡片的行高 */
        .stat-card .stat-label {
            margin-bottom: 4px;
            line-height: 1.2;
        }
        .stat-card .stat-value {
            line-height: 1;
            margin-bottom: 4px;
        }
        .stat-card .stat-sub {
            line-height: 1.2;
            margin-top: 2px;
        }
        /* 充值总额卡片 60/40 左右布局 */
        .stat-card.recharge-amount-card,
        .stat-card.role-agents-card,
        .stat-card.item-top-card,
        .stat-card.daily-active-card {
            display: flex;
            gap: 16px;
            padding: 12px 16px;
            align-items: flex-start;
            position: relative;
            overflow: hidden;
        }
        .recharge-left,
        .role-agents-left,
        .item-top-left,
        .daily-active-left {
            width: 60%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .recharge-right,
        .role-agents-right,
        .item-top-right,
        .daily-active-right {
            width: 40%;
            min-width: 0;
        }

        /* 日活卡片统计趋势 */
        .stat-trend {
            margin-top: 4px;
            font-size: 11px;
            color: var(--txt2);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .trend-value.up {
            color: var(--acc);
        }
        .trend-value.down {
            color: #ef4444;
        }
        .recharge-table th {
            text-align: left;
            padding: 3px 4px;
            color: var(--txt3);
            font-weight: 400;
            border-bottom: 1px solid var(--gbr);
        }
        .recharge-table td {
            padding: 3px 4px;
            color: var(--txt2);
        }
        .recharge-table .agent-cell {
            width: 60%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .recharge-table .amount-cell {
            width: 40%;
            text-align: right;
            font-size: 12px;
            font-weight: 600;
            color: var(--sec);
        }

        /* 统一右侧表格样式 */
        .role-agents-right .recharge-table,
        .daily-active-right .recharge-table {
            width: 100%;
            table-layout: fixed;
        }
        .role-agents-right .recharge-table th,
        .role-agents-right .recharge-table td,
        .daily-active-right .recharge-table th,
        .daily-active-right .recharge-table td {
            padding: 3px 4px;
        }
        .role-agents-right .recharge-table .amount-cell,
        .daily-active-right .recharge-table .amount-cell {
            font-size: 12px;
            font-weight: 600;
            color: var(--sec);
            white-space: nowrap;
            text-align: right;
        }

        /* ========== 主内容区 ========== */
        .main-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 16px;
        }
        .glass-card {
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: var(--rlg);
            padding: 16px;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: visible;
        }
        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: left 0.5s ease;
            border-radius: inherit;
            overflow: hidden;
            pointer-events: none;
        }
        .glass-card:hover::before {
            left: 100%;
        }
        .glass-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.3);
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--txt);
            position: relative;
            display: inline-block;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--sec));
            border-radius: 1px;
            transition: width .3s ease;
        }
        .glass-card:hover .section-title::after {
            width: 100%;
        }

        /* ========== 排行榜 ========== */
        .ranking-compact {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .ranking-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            background: var(--ri);
            border-radius: var(--rsm);
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 14px;
            flex: 1 1 calc(20% - 10px);
            min-width: 200px;
            position: relative;
            overflow: hidden;
        }
        .ranking-item:hover {
            background: var(--rh);
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
        }
        .rank-badge {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: transform .3s ease;
            z-index: 1;
        }
        .ranking-item:hover .rank-badge {
            transform: scale(1.2) rotate(5deg);
        }
        .rank-badge {
            font-size: 12px;
            flex-shrink: 0;
        }
        .rank-1 { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #1a1a2e; }
        .rank-2 { background: linear-gradient(135deg,#94a3b8,#64748b); color: #1a1a2e; }
        .rank-3 { background: linear-gradient(135deg,#d97706,#b45309); color: #1a1a2e; }
        .rank-other { background: var(--gla); border: 1px solid var(--gbr); }
        .rank-info { flex: 1; min-width: 0; }
        .rank-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--txt);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .rank-detail { font-size: 11px; color: var(--txt2); margin-top: 2px; }
        .rank-days { font-size: 10px; color: var(--acc); margin-top: 2px; }
        .rank-amount { font-size: 17px; font-weight: 700; color: var(--sec); white-space: nowrap; }

        /* ========== 物品分布（表格形式）- 优化版 ========== */
        .item-table-container {
            max-height: 280px;
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            border-radius: var(--rmd);
        }
        /* 自定义滚动条样式 */
        .item-table-container::-webkit-scrollbar {
            width: 6px;
        }
        .item-table-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 3px;
        }
        .item-table-container::-webkit-scrollbar-thumb {
            background: rgba(139, 92, 246, 0.3);
            border-radius: 3px;
            transition: background 0.3s ease;
        }
        .item-table-container::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 92, 246, 0.5);
        }
        .item-table-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--sec));
            z-index: 10;
        }
        .item-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }
        .item-table th {
            position: sticky;
            top: 0;
            background: rgba(139, 92, 246, 0.25);
            backdrop-filter: blur(10px);
            padding: 11px 10px;
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            color: var(--pl);
            border-bottom: 1px solid var(--gbr);
            white-space: nowrap;
            white-space: nowrap;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 5;
        }
        .item-table th:first-child {
            text-align: center;
            padding-left: 14px;
        }
        .item-table th:nth-child(1) { min-width: 150px; }
        .item-table th:nth-child(2) { min-width: 80px; text-align: right; }
        .item-table th:nth-child(3) { min-width: 80px; text-align: right; }
        .item-table th:nth-child(4) { min-width: 80px; text-align: right; }
        .item-table th:nth-child(5) { min-width: 150px; }
        .item-table th:nth-child(6) { min-width: 60px; text-align: right; }
        .item-table th:hover {
            background: rgba(139, 92, 246, 0.35);
            transform: translateY(-1px) scale(1.01);
        }
        .item-table th .sort-icon {
            font-size: 10px;
            color: var(--txt3);
            margin-left: 4px;
            transition: all .3s ease;
            display: inline-block;
        }
        .item-table th.sorted-asc .sort-icon::before {
            content: '▲';
            color: var(--primary);
            animation: sortIconPulse 0.3s ease;
        }
        .item-table th.sorted-desc .sort-icon::before {
            content: '▼';
            color: var(--primary);
            animation: sortIconPulse 0.3s ease;
        }
        @keyframes sortIconPulse {
            0% { transform: scale(1.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .item-table td {
            padding: 10px 10px;
            font-size: 13px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: transparent;
            text-align: center;
        }
        .item-table td:first-child {
            padding-left: 14px;
            text-align: center;
        }
        .item-table td:last-child {
            padding-right: 14px;
        }
        .item-table tr {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .item-table tr::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 0;
        }
        .item-table tr:hover {
            background: rgba(139, 92, 246, 0.06);
            transform: scale(1.005) translateX(2px);
        }
        .item-table tr:hover::before {
            opacity: 1;
        }
        .item-table .num {
            text-align: right;
            font-weight: 600;
            color: var(--sec);
            overflow: hidden;
            text-overflow: ellipsis;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        .item-table .bar-cell { width: 100%; padding: 10px 14px; }
        .item-table tbody td:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 0;
            position: relative;
            z-index: 1;
        }

        /* 物品表格行进场动画 - 优化版 */
        .item-table-row-enter {
            opacity: 0;
            transform: translateX(-20px);
            animation: fadeInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes fadeInRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .item-table .progress-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        .item-table .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
            animation: progressShimmer 2.5s ease-in-out infinite;
        }
        .item-table .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--sec));
            border-radius: 3px;
            width: 0;
            transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
        }
        .item-table .progress-fill::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.1) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.1) 75%,
                transparent 75%,
                transparent
            );
            background-size: 20px 20px;
            animation: progressStripe 1s linear infinite;
        }
        @keyframes progressStripe {
            from { background-position: 0 0; }
            to { background-position: 20px 0; }
        }
        .item-table .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: translateX(-100%);
            animation: progressShine 1.5s ease-in-out infinite;
        }
        @keyframes progressShine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* ========== 筛选栏 (V5样式) ========== */
        .filter-bar {
            justify-content: flex-start;
            display: flex;
            flex-wrap: wrap;
            gap: 12px 16px;
            margin-bottom: 20px;
            padding: 16px 20px;
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: var(--rmd);
            position: relative;
            z-index: 100;
            align-items: flex-end;
            overflow: visible;
        }
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: auto;
            flex-shrink: 0;
        }
        .filter-group:not(.filter-group-reset) {
            flex-basis: auto;
        }
        .quick-filters {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 4px;
        }
        .quick-filter-btn {
            padding: 4px 10px;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 4px;
            color: var(--txt2);
            font-size: 11px;
            cursor: pointer;
            transition: all .2s ease;
            position: relative;
            overflow: hidden;
        }
        .quick-filter-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(16, 185, 129, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        .quick-filter-btn:hover::before {
            width: 100px;
            height: 100px;
        }
        .quick-filter-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
        }
        .quick-filter-btn:active {
            transform: scale(0.95);
        }
        .filter-label {
            font-size: 11px;
            color: var(--txt2);
            font-weight: 500;
            letter-spacing: .5px;
            white-space: nowrap;
        }
        .filter-input {
            padding: 6px 10px;
            height: 34px;
            box-sizing: border-box;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            font-size: 12px;
            outline: none;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            position: relative;
            min-width: 100px;
        }
        /* 账号和角色ID输入框特殊宽度 */
        #filterUsername,
        #filterRoleid {
            min-width: 120px;
            max-width: 200px;
        }
        /* 金额范围输入框容器 */
        .filter-group:nth-child(3) {
            min-width: 180px;
        }
        /* 多选下拉框宽度优化 - 自适应 */
        .filter-group:has(.multi-select) {
            min-width: 100px;
            flex: 1 1 auto;
            max-width: 200px;
        }
        .filter-input::placeholder {
            color: var(--txt3);
            transition: color 0.3s ease;
        }
        .filter-input:focus::placeholder {
            color: var(--txt2);
        }
        .filter-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2),
                        0 4px 12px rgba(139, 92, 246, 0.1);
            transform: translateY(-2px);
            animation: elasticScale 0.4s ease;
        }
        .filter-input:hover {
            border-color: rgba(139, 92, 246, 0.5);
        }
        .btn-reset {
            padding: 10px 20px;
            background: rgba(255,255,255,.1);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            align-self: flex-end;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            min-width: 80px;
        }
        .btn-reset::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(239, 68, 68, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .btn-reset:hover::before {
            width: 200px;
            height: 200px;
        }
        .btn-reset:hover {
            background: rgba(255,255,255,.15);
            border-color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
        }
        .filter-buttons {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            flex-shrink: 0;
        }

        /* ========== 悬浮导航 (V6样式) ========== */
        .float-nav {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 9999;
            animation: slideInRight 0.5s ease;
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateY(-50%) translateX(50px); }
            to { opacity: 1; transform: translateY(-50%) translateX(0); }
        }
        .float-nav-item {
            width: 50px;
            height: 50px;
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .float-nav-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
            opacity: 0;
            transition: opacity .3s ease;
        }
        .float-nav-item::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        .float-nav-item:hover::before { opacity: 1; }
        .float-nav-item:hover::after {
            width: 100px;
            height: 100px;
        }
        .float-nav-item:hover {
            transform: scale(1.15) rotate(5deg);
            border-color: var(--primary);
            box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4);
        }
        .float-nav-item.active {
            background: var(--primary);
            border-color: var(--primary);
            box-shadow: 0 0 25px rgba(139, 92, 246, 0.6),
                        inset 0 0 20px rgba(255, 255, 255, 0.1);
            animation: glowPulse 2s ease-in-out infinite;
        }
        .float-nav-item.active::before { opacity: 0.5; }
        .float-nav-icon {
            font-size: 20px;
            color: var(--txt);
            transition: color 0.3s, transform 0.3s;
            position: relative;
            z-index: 1;
        }
        .float-nav-item:hover .float-nav-icon {
            color: #fff;
            transform: scale(1.2);
        }
        .float-nav-item.active .float-nav-icon { color: #fff; }
        .float-nav-tooltip {
            position: absolute;
            right: 60px;
            background: var(--dd);
            padding: 6px 12px;
            border-radius: var(--rsm);
            font-size: 12px;
            color: var(--txt);
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all .3s ease;
            transform: translateX(10px);
        }
        .float-nav-item:hover .float-nav-tooltip {
            opacity: 1;
            transform: translateX(0);
        }

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

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

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

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        /* 加载骨架屏效果 */
        .skeleton {
            background: linear-gradient(90deg,
                var(--gla) 25%,
                var(--rh) 50%,
                var(--gla) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s ease-in-out infinite;
            border-radius: var(--rsm);
        }

        /* 数据加载完成后的动画 */
        .stat-card,
        .ranking-item,
        .data-table tr {
            animation: fadeInUp 0.5s ease-out backwards;
        }

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

        .data-table tr:nth-child(odd) { animation-delay: 0.05s; }
        .data-table tr:nth-child(even) { animation-delay: 0.1s; }
        .btn-filter {
            padding: 6px 16px;
            background: linear-gradient(135deg, var(--primary), var(--pl));
            border: none;
            border-radius: var(--rsm);
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            transition: all .2s ease;
        }
        .btn-filter:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 12px rgba(139,92,246,.3);
        }

        /* ========== 多选下拉框 ========== */
        .multi-select {
            position: relative;
            width: 100%;
            min-width: 0;
        }
        .multi-select-trigger {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0;
            cursor: pointer;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            transition: border-color .2s, box-shadow .2s;
            height: 34px;
            box-sizing: border-box;
        }
        .multi-select-trigger:hover {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(139,92,246,.15);
        }
        .multi-select.open .multi-select-trigger {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(139,92,246,.2);
        }
        .multi-select-search-input {
            flex: 1;
            min-width: 0;
            padding: 6px 8px;
            border: none;
            background: transparent;
            color: var(--fc);
            font-size: 12px;
            cursor: pointer;
            outline: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .multi-select-search-input::placeholder {
            color: var(--txt2);
        }
        .multi-select-search-input:focus {
            cursor: text;
        }
        .multi-select-arrow {
            transition: transform .3s;
            flex-shrink: 0;
            padding: 0 10px;
            color: var(--txt2);
            font-size: 10px;
        }
        .multi-select.open .multi-select-arrow { transform: rotate(180deg); }
        .multi-select-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            width: 100%;
            min-width: 160px;
            max-width: 280px;
            background: var(--dd);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            z-index: 10002;
            display: none;
            box-shadow: 0 8px 32px rgba(0,0,0,.4);
            backdrop-filter: var(--gbl);
            overflow: hidden;
        }
        .multi-select.open .multi-select-dropdown { display: block; }
        .multi-select-actions {
            display: flex;
            gap: 4px;
            padding: 6px 8px;
            border-bottom: 1px solid var(--gbr);
            background: rgba(139,92,246,.06);
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .multi-select-actions .action-btn {
            flex: 1;
            padding: 4px 6px;
            border: 1px solid var(--gbr);
            border-radius: var(--rxs);
            background: var(--ib);
            color: var(--fc);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: background .2s, border-color .2s, color .2s;
            white-space: nowrap;
            text-align: center;
        }
        .multi-select-actions .action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        .multi-select-options {
            max-height: 260px;
            overflow-y: auto;
            background: var(--dd);
        }
        .multi-select-option {
            padding: 8px 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background .2s;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .multi-select-option label {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .multi-select-option input[type="checkbox"] {
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            cursor: pointer;
            accent-color: var(--primary);
        }
        .multi-select-option span {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }
        .multi-select-option:hover { background: rgba(139,92,246,.2); }
        .multi-select-option input { accent-color: var(--primary); }
        .select-actions {
            display: flex;
            gap: 6px;
            padding: 8px 10px;
            border-bottom: 1px solid var(--gbr);
            background: rgba(139, 92, 246, 0.05);
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .select-action-btn {
            flex: 1;
            min-width: 50px;
            padding: 6px 8px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        .select-action-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(16, 185, 129, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        .select-action-btn:hover::before {
            width: 100px;
            height: 100px;
        }
        .select-action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }
        .select-action-btn:active {
            transform: translateY(0);
        }

        /* ms-action-btn 兼容类名 */

        .ms-action-btn {
            flex: 1;
            min-width: 0;
            padding: 4px 6px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            transition: all .2s ease;
            position: relative;
            overflow: hidden;
        }

        .ms-action-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(139, 92, 246, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
            pointer-events: none;
        }

        .ms-action-btn:hover::before {
            width: 100px;
            height: 100px;
        }

        .ms-action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        .ms-action-btn:active {
            transform: translateY(0);
        }

        /* 清空按钮特殊样式 */
        .ms-action-clear:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
            color: #fecaca;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
        }

        .ms-action-clear::before {
            background: rgba(239, 68, 68, 0.2);
        }

        /* 浅色主题适配 */
        [data-theme="light"] .ms-action-btn {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(0, 0, 0, 0.1);
            color: rgba(0, 0, 0, 0.85);
        }

        [data-theme="light"] .ms-action-btn:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

        [data-theme="light"] .ms-action-clear:hover {
            background: rgba(239, 68, 68, 0.9);
            border-color: #ef4444;
            color: #fff;
        }

        /* ========== 视图切换 ========== */
        .view-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
        .view-btn {
            padding: 8px 16px;
            background: rgba(255,255,255,.05);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt2);
            cursor: pointer;
            font-size: 13px;
            transition: all .2s ease;
        }
        .view-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }


        /* ========== 数据表格 ========== */
        .table-wrapper {
            background: var(--gla);
            backdrop-filter: var(--gbl);
            border: 1px solid var(--gbr);
            border-radius: var(--rlg);
            overflow: hidden;
            transition: all .3s ease;
        }
        .table-wrapper:hover {
            box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
        }
        .table-scroll-wrapper {
            overflow-x: auto;
            overflow-y: visible;
            max-width: 100%;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1200px;
            table-layout: auto;
        }
        .data-table th {
            position: sticky;
            top: 0;
            background: rgba(139, 92, 246, 0.2);
            backdrop-filter: blur(10px);
            padding: 14px 12px;
            font-size: 13px;
            font-weight: 600;
            color: var(--txt);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid var(--primary);
            cursor: pointer;
            transition: all .2s ease;
            user-select: none;
            position: relative;
        }
        .data-table th::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--sec), var(--acc));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        .data-table th:hover::before {
            transform: scaleX(1);
        }
        .data-table th:hover {
            background: rgba(139, 92, 246, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
        }
        .data-table th .sort-icon {
            font-size: 10px;
            color: var(--txt3);
            margin-left: 4px;
            transition: all .2s ease;
            display: inline-block;
        }
        .data-table th:hover .sort-icon {
            color: var(--pl);
            transform: scale(1.2);
        }
        .data-table th.sorted-asc .sort-icon::before {
            content: '▲';
            color: var(--primary);
            animation: elasticScale 0.3s ease;
        }
        .data-table th.sorted-desc .sort-icon::before {
            content: '▼';
            color: var(--primary);
            animation: elasticScale 0.3s ease;
        }
            content: '▼';
            color: var(--primary);
        }
        .data-table td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--gbr);
            color: var(--txt2);
            font-size: 14px;
            transition: all .2s ease;
        }
        .data-table tr {
            transition: all .3s ease;
            position: relative;
        }
        .data-table tr:hover {
            background: rgba(139, 92, 246, 0.08);
            transform: translateX(4px);
        }
        .data-table tr:hover td {
            color: var(--txt);
        }
        @keyframes highlight {
            0% { background-color: rgba(16, 185, 129, 0.3); }
            100% { background-color: transparent; }
        }
        .data-table tbody tr.new-row {
            animation: highlight 1s ease;
        }
        .data-table td.left { text-align: left; }
        .data-table td.right { text-align: right; }
        .data-table th.center,
        .data-table td.center { text-align: center; }
        .data-table tr { height: 32px; }
        .data-table .roleid {
            font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
            color: var(--sec);
            font-size: 13px;
            letter-spacing: 0.5px;
            white-space: nowrap;
            text-align: center;
            vertical-align: middle;
        }
        .data-table td:nth-child(2),
        .data-table td:nth-child(3) {
            text-align: center;
        }
        .item-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: flex-start;
            align-items: center;
            min-height: 28px;
            line-height: 1.4;
            overflow: hidden;
        }
        .item-tag {
            background: rgba(139,92,246,.15);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            margin: 2px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .item-tag::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 ease;
        }
        .item-tag:hover::before {
            left: 100%;
        }
        .item-tag:hover {
            background: rgba(139,92,246,.25);
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }
        .item-tag .count { color: var(--sec); font-weight: 600; font-size: 12px; margin-left: 2px; }
        .amount-tag {
            background: rgba(6,182,212,.12);
            border: 1px solid rgba(6,182,212,.25);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            color: var(--sec);
            white-space: nowrap;
        }
        .amount-tag.zero {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.1);
            color: var(--txt3);
            font-weight: 400;
        }
        .data-table td.amount-col { text-align: right; }

        /* ========== 分页 ========== */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: rgba(255,255,255,.03);
            border-top: 1px solid var(--gbr);
            flex-wrap: wrap;
            gap: 12px;
        }
        .page-info { font-size: 13px; color: var(--txt2); }
        .page-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .page-size-dropdown { position: relative; display: inline-block; }
        .page-size-dropdown .dropdown-trigger {
            padding: 8px 12px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            font-size: 12px;
            cursor: pointer;
            min-width: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .page-size-dropdown .dropdown-trigger::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(139, 92, 246, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
        }
        .page-size-dropdown .dropdown-trigger:hover::before {
            width: 150px;
            height: 150px;
        }
        .page-size-dropdown .dropdown-trigger:hover {
            background: var(--rh);
            border-color: var(--primary);
            transform: translateY(-1px);
        }
        .page-size-dropdown .dropdown-menu {
            position: absolute;
            bottom: 100%;
            left: 0;
            min-width: 100%;
            background: var(--dd);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            margin-bottom: 4px;
            overflow: hidden;
            display: none;
            z-index: 10001;
            box-shadow: 0 8px 20px rgba(0,0,0,.4);
        }
        .page-size-dropdown.open .dropdown-menu { display: block; }
        .page-size-dropdown .dropdown-item {
            padding: 10px 14px;
            cursor: pointer;
            transition: background .2s;
            text-align: center;
            color: var(--txt);
            font-size: 13px;
            position: relative;
        }
        .page-size-dropdown .dropdown-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary);
            transform: scaleY(0);
            transition: transform .2s ease;
        }
        .page-size-dropdown .dropdown-item:hover::before {
            transform: scaleY(1);
        }
        .page-size-dropdown .dropdown-item:hover {
            background: rgba(139,92,246,.2);
        }
        .page-size-dropdown .dropdown-item.selected {
            background: rgba(139,92,246,.3);
            color: var(--pl);
            font-weight: 600;
        }
        .page-size-dropdown .dropdown-item.selected::before {
            transform: scaleY(1);
        }
        .page-btn {
            padding: 8px 14px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt2);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all .2s ease;
            position: relative;
            overflow: hidden;
        }
        .page-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(139, 92, 246, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s ease, height 0.4s ease;
        }
        .page-btn:hover::before {
            width: 200px;
            height: 200px;
        }
        .page-btn:hover:not(:disabled) {
            background: rgba(139,92,246,.15);
            border-color: var(--primary);
            color: var(--pl);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
        }
        .page-btn:disabled { opacity: .4; cursor: not-allowed; }
        .page-jump { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt2); }
        .page-jump input {
            width: 50px;
            padding: 6px 8px;
            background: var(--ib);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            font-size: 13px;
            text-align: center;
            outline: none;
        }
        .page-jump input:focus { border-color: var(--primary); }

        /* ========== 导出按钮组 ========== */
        .export-buttons { display: flex; gap: 8px; }
        .export-btn {
            padding: 8px 16px;
            background: rgba(255,255,255,.05);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            cursor: pointer;
            font-size: 13px;
            transition: all .2s ease;
        }
        .export-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }



        /* ========== Toast ========== */
        .toast {
            position: fixed;
            top: auto; /* 位置由JavaScript动态计算 */
            right: 20px;
            min-width: 280px;
            max-width: 400px;
            padding: 14px 20px;
            background: var(--tb);
            border: 1px solid var(--gbr);
            border-radius: var(--rsm);
            color: var(--txt);
            font-size: 12px;
            z-index: 100000;
            transform: translateX(120%);
            transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), top .3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            backdrop-filter: var(--gbl);
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap; /* 防止换行导致宽度不一致 */
        }
        .toast.show {
            transform: translateX(0);
            animation: toastSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                       elasticScale 0.3s ease 0.6s;
        }
        .toast.success {
            border-left: 4px solid var(--acc);
            background: rgba(16, 185, 129, 0.15);
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
        }
        .toast.error {
            border-left: 4px solid #ef4444;
            background: rgba(239, 68, 68, 0.15);
            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
        }
        .toast.info {
            border-left: 4px solid var(--sec);
            background: rgba(6, 182, 212, 0.15);
            box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
        }
        .toast.warning {
            border-left: 4px solid #f59e0b;
            background: rgba(245, 158, 11, 0.15);
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
        }
        .toast-icon {
            font-size: 16px;
            animation: rotateIn 0.4s ease-out, toastIconBounce 0.3s ease 0.4s;
            flex-shrink: 0; /* 防止图标被压缩 */
        }
        .toast-message {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @keyframes toastSlideIn {
            from {
                opacity: 0;
                transform: translateX(120%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes toastIconBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        @keyframes progressShimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes floatUp {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 5px var(--primary); }
            50% { box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary); }
        }

        /* ========== 加载遮罩 ========== */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(5px);
            z-index: 100001;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 20px;
        }
        .loading-overlay.show {
            display: flex;
            animation: fadeInScale 0.3s ease-out;
        }
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--gbr);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-text {
            color: var(--txt);
            font-size: 14px;
            font-weight: 500;
            animation: loadingTextPulse 1.5s ease-in-out infinite;
        }
        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }
        .loading-progress {
            font-size: 12px;
            color: var(--txt2);
            min-height: 18px;
        }

        @keyframes loadingTextPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* ========== 新增高级动画效果 ========== */
        @keyframes rippleEffect {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(4);
                opacity: 0;
            }
        }

        @keyframes gradientBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0) translateX(0);
                opacity: 0.6;
            }
            25% {
                transform: translateY(-20px) translateX(10px);
                opacity: 1;
            }
            50% {
                transform: translateY(-10px) translateX(-10px);
                opacity: 0.8;
            }
            75% {
                transform: translateY(-25px) translateX(5px);
                opacity: 0.7;
            }
        }

        @keyframes cardGlow {
            0%, 100% {
                box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1),
                            0 0 0 0 rgba(139, 92, 246, 0);
            }
            50% {
                box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2),
                            0 0 20px rgba(139, 92, 246, 0.1);
            }
        }

        @keyframes textShimmer {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        @keyframes bubbleRise {
            0% {
                transform: translateY(100%) scale(0);
                opacity: 0;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100vh) scale(1);
                opacity: 0;
            }
        }

        @keyframes magnetPull {
            0%, 100% {
                transform: translateX(0) scale(1);
            }
            50% {
                transform: translateX(5px) scale(1.05);
            }
        }

        @keyframes elasticScale {
            0% {
                transform: scale(1);
            }
            30% {
                transform: scale(1.25);
            }
            50% {
                transform: scale(0.9);
            }
            70% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes waveMotion {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes rotateIn {
            from {
                transform: rotate(-180deg) scale(0);
                opacity: 0;
            }
            to {
                transform: rotate(0) scale(1);
                opacity: 1;
            }
        }

        @keyframes borderFlow {
            0% {
                border-color: var(--primary);
            }
            33% {
                border-color: var(--sec);
            }
            66% {
                border-color: var(--acc);
            }
            100% {
                border-color: var(--primary);
            }
        }

        /* 背景粒子效果 */
        .background-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: -2;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
            border-radius: 50%;
            animation: particleFloat 8s ease-in-out infinite;
        }

        .particle:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { top: 20%; left: 80%; animation-delay: 1s; }
        .particle:nth-child(3) { top: 60%; left: 20%; animation-delay: 2s; }
        .particle:nth-child(4) { top: 70%; left: 70%; animation-delay: 3s; }
        .particle:nth-child(5) { top: 40%; left: 50%; animation-delay: 4s; }
        .particle:nth-child(6) { top: 30%; left: 30%; animation-delay: 5s; }
        .particle:nth-child(7) { top: 80%; left: 40%; animation-delay: 6s; }
        .particle:nth-child(8) { top: 50%; left: 90%; animation-delay: 7s; }

        /* 气泡背景效果 */
        .bubble-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: -3;
        }

        .bubble {
            position: absolute;
            bottom: -50px;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: bubbleRise 10s linear infinite;
        }

        .bubble:nth-child(1) { left: 10%; animation-delay: 0s; width: 15px; height: 15px; }
        .bubble:nth-child(2) { left: 20%; animation-delay: 2s; width: 25px; height: 25px; }
        .bubble:nth-child(3) { left: 35%; animation-delay: 4s; width: 18px; height: 18px; }
        .bubble:nth-child(4) { left: 50%; animation-delay: 1s; width: 22px; height: 22px; }
        .bubble:nth-child(5) { left: 65%; animation-delay: 3s; width: 20px; height: 20px; }
        .bubble:nth-child(6) { left: 80%; animation-delay: 5s; width: 16px; height: 16px; }
        .bubble:nth-child(7) { left: 90%; animation-delay: 2.5s; width: 24px; height: 24px; }

        /* 卡片入场动画 - 仅保留单次动画 */
        .stat-card {
            animation: fadeInUp 0.5s ease-out backwards;
        }

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

        /* 统计数值渐变效果 - 仅hover时触发 */
        .stat-value {
            background: linear-gradient(90deg, var(--pl), var(--sec), var(--acc), var(--pl));
            background-size: 300% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background-position 0.3s ease;
        }
        .stat-card:hover .stat-value {
            animation: textShimmer 2s linear infinite;
            background-position: 100% center;
        }

        /* 按钮波纹效果 */
        .btn-ripple {
            position: relative;
            overflow: hidden;
        }

        .btn-ripple::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .btn-ripple:active::after {
            width: 300px;
            height: 300px;
        }

        /* 排行榜入场动画 - 仅单次 */
        .ranking-item {
            animation: fadeInUp 0.4s ease-out backwards;
        }

        .ranking-item:nth-child(1) { animation-delay: 0.1s; }
        .ranking-item:nth-child(2) { animation-delay: 0.15s; }
        .ranking-item:nth-child(3) { animation-delay: 0.2s; }
        .ranking-item:nth-child(4) { animation-delay: 0.25s; }
        .ranking-item:nth-child(5) { animation-delay: 0.3s; }

        /* 排行榜hover效果 */
        .ranking-item:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
        }

        .rank-badge {
            animation: rotateIn 0.5s ease-out backwards;
        }

        /* 表格行动画增强 */
        .data-table tr {
            animation: fadeInUp 0.3s ease-out backwards;
        }

        .data-table tr:nth-child(1) { animation-delay: 0.05s; }
        .data-table tr:nth-child(2) { animation-delay: 0.1s; }
        .data-table tr:nth-child(3) { animation-delay: 0.15s; }
        .data-table tr:nth-child(4) { animation-delay: 0.2s; }
        .data-table tr:nth-child(5) { animation-delay: 0.25s; }
        .data-table tr:nth-child(6) { animation-delay: 0.3s; }
        .data-table tr:nth-child(7) { animation-delay: 0.35s; }
        .data-table tr:nth-child(8) { animation-delay: 0.4s; }
        .data-table tr:nth-child(9) { animation-delay: 0.45s; }
        .data-table tr:nth-child(10) { animation-delay: 0.5s; }

        /* 输入框聚焦动画 */
        input[type="text"],
        input[type="number"],
        select {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        select:focus {
            animation: elasticScale 0.5s ease;
        }

        /* 下拉菜单动画增强 */
        .dropdown-menu {
            animation: fadeInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dropdown-item {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .dropdown-item:hover {
            animation: magnetPull 0.3s ease;
        }

        /* 进度条增强 */
        .progress-bar {
            animation: progressShimmer 2s linear infinite;
        }

        /* Toast增强 */
        .toast {
            animation: toastSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                       elasticScale 0.3s ease 0.6s;
        }

        .toast-icon {
            animation: rotateIn 0.3s ease-out;
        }

        /* 标签动画 */
        .item-tag {
            animation: fadeInScale 0.2s ease-out backwards;
        }

        .item-tag:nth-child(1) { animation-delay: 0.05s; }
        .item-tag:nth-child(2) { animation-delay: 0.1s; }
        .item-tag:nth-child(3) { animation-delay: 0.15s; }
        .item-tag:nth-child(4) { animation-delay: 0.2s; }
        .item-tag:nth-child(5) { animation-delay: 0.25s; }

        /* 时间徽章增强 */
        .time-badge {
            animation: glowPulse 3s ease-in-out infinite;
        }

        /* 加载遮罩增强 */
        .loading-overlay {
            backdrop-filter: blur(10px);
            animation: fadeInUp 0.3s ease-out;
        }

        /* 响应式动画 */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ========== 响应式 ========== */
        @media (max-width: 1200px) {
            .stats-grid { flex-wrap: wrap; }
            .stats-grid .stat-card { flex: 1 1 calc(50% - 6px); }
            .filter-group { min-width: 110px; }
        }

        @media (max-width: 768px) {
            .filter-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .filter-group {
                width: 100%;
                min-width: auto;
            }
            .filter-group:has(.multi-select) {
                max-width: none;
            }
            #filterUsername,
            #filterRoleid {
                max-width: none;
            }
            .filter-group:nth-child(3) {
                min-width: auto;
            }
        }
        @media (max-width: 768px) {
            .stats-grid { flex-direction: column; }
            .stats-grid .stat-card { flex: 1 1 100%; }
            /* 强制修复文字方向问题 */
            .stat-label,
            .stat-value,
            .stat-num-big,
            .stat-sub,
            .filter-label,
            .btn,
            button {
                writing-mode: horizontal-tb !important;
                text-orientation: mixed !important;
                transform: none !important;
            }
            /* 移动端下拉框底部弹出 */
            .multi-select {
                width: 100%;
            }
            .multi-select-options {
                position: fixed !important;
                top: auto !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                max-height: 60vh !important;
                border-radius: 16px 16px 0 0 !important;
                z-index: 9999 !important;
                animation: slideUp 0.3s ease-out !important;
            }
            @keyframes slideUp {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
            .multi-select-trigger {
                padding: 8px 12px !important;
                min-width: 80px !important;
                font-size: 13px !important;
            }
            .multi-select-option {
                padding: 10px 12px !important;
                font-size: 14px !important;
            }
            .multi-select-option input[type="checkbox"] {
                width: 20px !important;
                height: 20px !important;
            }
        }
        
        @media (max-width: 480px) {
            .multi-select-trigger {
                padding: 6px 10px !important;
                font-size: 12px !important;
            }
            .filter-bar .multi-select-options {
                max-height: 50vh !important;
            }
        }
            /* 统计卡片内部布局在移动端改为上下排列 */
            .recharge-left,
            .role-agents-left,
            .item-top-left,
            .daily-active-left,
            .recharge-right,
            .role-agents-right,
            .item-top-right,
            .daily-active-right {
                width: 100%;
            }
            .recharge-right,
            .role-agents-right,
            .item-top-right,
            .daily-active-right {
                margin-top: 12px;
            }
            .header { flex-direction: column; gap: 16px; align-items: flex-start; }
            .ranking-item { flex: 1 1 calc(50% - 10px); }
            .filter-bar { 
                justify-content: flex-start; 
                gap: 12px; 
                flex-direction: column; 
                align-items: stretch;
                position: relative;
                z-index: 100;
            }
            .filter-group { width: 100% !important; min-width: auto; }
            .data-table { font-size: 11px; }
            .data-table th,
            .data-table td { padding: 6px 4px; }
            /* 统计卡片内嵌表格移动端适配 */
            .recharge-table { font-size: 11px; }
            .recharge-table th,
            .recharge-table td { padding: 4px 2px; }
            .recharge-table .agent-cell,
            .recharge-table .amount-cell { font-size: 11px; white-space: nowrap; }
            /* 移动端筛选栏整体适配 */
            .filter-section {
                flex-wrap: wrap;
            }
            .filter-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }
    

/* ===== enhancements.css merged (2026-03-27) ===== */
/* ========== 增强功能样式 ========== */

/* ========================================
   Toast提示对齐优化 - 多Toast垂直堆叠
   ======================================== */
/* Toast基础样式已在all.css中定义，这里只做增强 */
.toast-message {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多个Toast垂直排列 - 右对齐 */
.toast-container {
    position: fixed;
    top: auto; /* 位置由JavaScript动态计算 */
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100000;
    pointer-events: none;
}

.toast-container .toast {
    position: relative;
    transform: none !important;
    animation: toastSlideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes toastSlideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   下载提示弹窗优化 - 精简设计
   ======================================== */
.download-prompt,
.modal-download,
.download-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--gla);
    backdrop-filter: var(--gbl);
    border: 1px solid var(--gbr);
    border-radius: var(--rsm);
    box-shadow: var(--gsh);
    z-index: 100001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    max-width: 360px;
}

.download-prompt.show,
.modal-download.show,
.download-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.download-prompt-content,
.modal-download-content,
.download-modal-content {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-prompt-content h4,
.modal-download-content h4,
.download-modal-content h4 {
    margin: 0;
    font-size: 14px;
    color: var(--txt);
    font-weight: 500;
}

.download-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.download-btn {
    flex: 1;
    min-width: 100px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: var(--rsm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.download-btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: white;
}

.download-btn-primary:hover {
    background: var(--pl);
    border-color: var(--pl);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.download-btn-secondary {
    background: transparent;
    border: 1px solid var(--gbr);
    color: var(--txt2);
}

.download-btn-secondary:hover {
    background: var(--rh);
    border-color: var(--primary);
    color: var(--txt);
}

.download-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--txt3);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.download-close:hover {
    background: var(--gla2);
    color: var(--txt);
}

/* 下载弹窗遮罩 */
.download-overlay,
.modal-overlay,
.download-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.download-overlay.show,
.modal-overlay.show,
.download-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 弹窗内容居中 */
.modal-content,
.download-modal-content,
.modal-download-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto;
}

/* ========================================
   深色主题Toast优化
   ======================================== */
[data-theme="dark"] .toast {
    min-width: 280px;
    max-width: 400px;
}

/* ========================================
   浅色主题Toast优化
   ======================================== */
[data-theme="light"] .toast {
    min-width: 260px;
    max-width: 360px;
}

/* PWA安装提示 */
.pwa-install-prompt {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--gla);
    backdrop-filter: var(--gbl);
    border: 1px solid var(--gbr);
    border-radius: var(--rsm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 9998;
    transition: transform 0.3s ease;
    will-change: transform;
}

.pwa-install-prompt.show {
    transform: translateX(-50%) translateY(0);
}

.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
}

.pwa-install-content span {
    color: var(--txt);
    font-size: 14px;
}

.btn-text {
    background: transparent;
    border: 1px solid transparent;
    color: var(--txt2);
    padding: 6px 12px;
    border-radius: var(--rsm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-text:hover {
    background: var(--gla2);
    color: var(--txt);
}

/* 键盘快捷键提示 */
.shortcuts-help {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.shortcuts-content {
    background: var(--gla);
    backdrop-filter: var(--gbl);
    border: 1px solid var(--gbr);
    border-radius: var(--rmd);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.shortcuts-content h3 {
    margin: 0 0 16px 0;
    color: var(--txt);
    font-size: 18px;
    text-align: center;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gla2);
    border-radius: var(--rsm);
}

.shortcut-item kbd {
    display: inline-block;
    padding: 4px 8px;
    background: var(--gbr);
    border: 1px solid var(--gbr);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--txt);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 0 2px;
}

.shortcut-item span {
    color: var(--txt2);
    font-size: 13px;
}

/* 性能优化：will-change提示 */
.stat-card,
.glass-card,
.float-nav-item,
.data-table tbody tr,
.filter-input,
.multi-select-trigger,
.btn {
    will-change: transform;
}

/* 高对比度模式 */
.high-contrast {
    --gla: #000000 !important;
    --gla2: #1a1a1a !important;
    --gbl: blur(10px) !important;
    --gbr: #ffffff !important;
    --txt: #ffffff !important;
    --txt2: #cccccc !important;
    --primary: #ffffff !important;
}

.high-contrast .stat-num-big {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.high-contrast .btn-primary {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.high-contrast .btn-primary:hover {
    background: #e0e0e0;
}

/* 键盘导航焦点样式 */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.float-nav-item:focus-visible,
.btn:focus-visible,
.filter-input:focus-visible,
.multi-select-trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

/* 屏幕阅读器专用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 跳过导航链接 */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 10001;
    transition: top 0.3s ease;
    text-decoration: none;
    border-radius: 0 0 var(--rsm) 0;
}

.skip-to-content:focus {
    top: 0;
}

/* 可访问性增强 */
[data-aria-live="polite"] {
    position: absolute;
    left: -9999px;
}

/* 加载状态可访问性 */
.loading-overlay[aria-hidden="true"] {
    display: none;
}

/* 表格行高亮可访问性 */
.data-table tbody tr:hover,
.data-table tbody tr:focus {
    background: var(--gla2) !important;
}

/* 减少动画（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 深色模式可访问性增强 */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

/* 浅色模式可访问性增强 */
@media (prefers-color-scheme: light) {
    html[data-theme="light"] {
        color-scheme: light;
    }
}

/* ========================================
   主题切换按钮样式
   ======================================== */
.theme-toggle {
    display: flex;
    align-items: center;
    background: var(--gla);
    border: 1px solid var(--gbr);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
    backdrop-filter: var(--gbl);
}

.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    opacity: 0.5;
}

.theme-btn:hover {
    opacity: 0.85;
    background: var(--gla2);
}

.theme-btn.active {
    background: var(--primary);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.theme-btn.active:hover {
    background: var(--primary-light);
}

.theme-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* 浅色主题下的主题切换按钮 */
[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .theme-btn {
    opacity: 0.5;
}

[data-theme="light"] .theme-btn:hover {
    opacity: 0.8;
    background: rgba(139, 92, 246, 0.08);
}

[data-theme="light"] .theme-btn.active {
    background: var(--primary);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* 响应式 */
@media (max-width: 768px) {
    .theme-toggle {
        padding: 2px;
    }

    .theme-btn {
        width: 28px;
        height: 24px;
        font-size: 12px;
    }

    /* Toast移动端适配 */
    .toast {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        white-space: normal;
    }
    .toast-container {
        right: 10px;
        left: 10px;
    }
}

/* ========================================
   应用按钮样式
   ======================================== */
.btn-apply {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--rsm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

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

/* ========================================
   快捷金额筛选区域
   ======================================== */
.quick-amount-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0;
    align-items: center;
}

.quick-amount-filters::before {
    content: '快捷:';
    color: var(--txt2);
    font-size: 13px;
    margin-right: 4px;
}

.quick-filter-btn {
    background: var(--gla);
    border: 1px solid var(--gbr);
    color: var(--txt2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.quick-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.quick-filter-btn:hover::before {
    opacity: 0.15;
}

.quick-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-filter-btn:active {
    transform: scale(0.95);
}

.quick-filter-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}