/* 主应用 */
        .app-container {
            display: none;
            position: fixed;  /* 固定定位，覆盖全屏 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            visibility: hidden;
            opacity: 0;
            z-index: 2;
            overflow-y: auto;  /* 允许垂直滚动 */
            overflow-x: hidden;  /* 禁止水平滚动 */
            -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
        }

        .app-container.active {
            display: block;  /* 恢复 block 布局 */
            visibility: visible;
            opacity: 1;
            transition: opacity 0.15s ease;
        }

        /* 导航栏 - 升级版玻璃态 */
        .navbar {
            background: var(--glass-bg);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-bottom: 1px solid var(--border-light);
            padding: 16px 24px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-sm);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .navbar::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--primary-light) 20%,
                var(--primary) 50%,
                #8b5cf6 80%,
                transparent 100%
            );
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        .navbar:hover::before {
            opacity: 1;
        }

        .navbar.scrolled {
            box-shadow: var(--shadow-lg);
            background: rgba(255, 255, 255, 0.95);
        }

        .navbar.scrolled::before {
            opacity: 0.9;
        }

        .navbar-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .navbar-brand {
            font-size: 20px;
            font-weight: 600;
            color: #ff9999;
            transition: all 0.3s ease;
        }

        .navbar-brand:hover {
            transform: scale(1.05);
        }

        .navbar-nav {
            display: flex;
            gap: 12px;
        }

        /* 导航栏日期时间 */
        .nav-datetime {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-right: 16px;
            padding-right: 0;
            border-right: none;
            background: transparent;
            padding: 6px 0;
        }

        .navbar-date {
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .navbar-time {
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
            font-family: monospace;
            letter-spacing: 1px;
        }

        /* 简约透明导航按钮 - 升级版 */
        .nav-btn {
            padding: 8px 16px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            -webkit-tap-highlight-color: transparent;
            display: flex;
            align-items: center;
            gap: 6px;
            height: 32px;
            overflow: hidden;
        }

        .nav-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, currentColor 0%, transparent 70%);
            opacity: 0.1;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.4s ease;
        }

        .nav-btn:hover::before {
            width: 120%;
            height: 120%;
        }

        .nav-btn:hover {
            color: var(--primary);
            transform: translateY(-1px);
        }

        /* 激活状态 - 轻微背景色 */
        .nav-btn.active {
            background: rgba(102, 126, 234, 0.1);
            color: var(--primary);
            font-weight: 600;
        }

        .nav-btn.active::before {
            opacity: 0;
        }

        /* 各页面激活颜色 */
        .nav-btn[data-page="todos"].active {
            background: rgba(236, 72, 153, 0.1);
            color: #ec4899;
        }

        .nav-btn[data-page="leads"].active {
            background: rgba(249, 115, 22, 0.1);
            color: #f97316;
        }

        .nav-btn[data-page="customers"].active {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .nav-btn[data-page="finance"].active {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        /* 员工 - 紫色背景 */
        .nav-btn[data-page="employees"].active {
            background: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
            font-weight: 600;
        }

        /* 工资 - 青色背景 */
        .nav-btn[data-page="salary"].active {
            background: rgba(6, 182, 212, 0.1);
            color: #06b6d4;
            font-weight: 600;
        }

        /* 库存 - 橙色背景 */
        .nav-btn[data-page="inventory"].active {
            background: rgba(249, 115, 22, 0.1);
            color: #f97316;
            font-weight: 600;
        }

        /* 聊天 - 红色背景 */
        .nav-btn[data-page="chat"].active {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            font-weight: 600;
        }

        /* 订货 - 深红色背景 */
        .nav-btn[data-page="orders"].active {
            background: rgba(153, 27, 27, 0.1);
            color: #991b1b;
            font-weight: 600;
        }

        /* 导航下拉菜单 */
        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .nav-dropdown-arrow {
            transition: transform 0.3s ease;
        }

        .nav-dropdown.open .nav-dropdown-arrow {
            transform: rotate(180deg);
        }

        .nav-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            padding: 8px;
            min-width: 260px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 200;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
        }

        .nav-dropdown.open .nav-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .nav-dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 14px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s ease;
            text-align: left;
        }

        .nav-dropdown-item:hover {
            background: var(--bg);
            color: var(--text);
        }

        .nav-dropdown-item.active {
            background: var(--bg);
            color: var(--text);
            font-weight: 600;
        }

        .nav-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            font-size: 14px;
            margin-right: 8px;
        }

        /* 下拉按钮根据当前页面变色 */
        .nav-dropdown-toggle[data-page="todos"] { color: #ec4899; font-weight: 600; }
        .nav-dropdown-toggle[data-page="todos"]::after { background: #ec4899; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="leads"] { color: #f97316; font-weight: 600; }
        .nav-dropdown-toggle[data-page="leads"]::after { background: #f97316; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="customers"] { color: #3b82f6; font-weight: 600; }
        .nav-dropdown-toggle[data-page="customers"]::after { background: #3b82f6; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="finance"] { color: #10b981; font-weight: 600; }
        .nav-dropdown-toggle[data-page="finance"]::after { background: #10b981; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="employees"] { color: #8b5cf6; font-weight: 600; }
        .nav-dropdown-toggle[data-page="employees"]::after { background: #8b5cf6; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="salary"] { color: #06b6d4; font-weight: 600; }
        .nav-dropdown-toggle[data-page="salary"]::after { background: #06b6d4; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="inventory"] { color: #f97316; font-weight: 600; }
        .nav-dropdown-toggle[data-page="inventory"]::after { background: #f97316; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="chat"] { color: #ef4444; font-weight: 600; }
        .nav-dropdown-toggle[data-page="chat"]::after { background: #ef4444; transform: translateX(-50%) scaleX(1); }
        .nav-dropdown-toggle[data-page="orders"] { color: #991b1b; font-weight: 600; }
        .nav-dropdown-toggle[data-page="orders"]::after { background: #991b1b; transform: translateX(-50%) scaleX(1); }

        .logout-btn {
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

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

        /* 主内容区 */
        .main-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px;
        }

        /* 页面切换 */
        .page {
            display: none;
            position: relative;
            min-height: calc(100vh - 200px);
        }

        .page.active {
            display: block;
        }

        /* 沟通页面特殊处理 - 填满整个区域 */
        .main-content:has(#chatPage.active) {
            padding: 0;
            max-width: 100%;
        }

        #chatPage {
            min-height: auto;
            height: calc(100vh - 60px);
            height: calc(100dvh - 60px);
            padding: 0;
            margin: 0;
            width: 100%;
            position: relative;
        }

        #chatPage.active {
            display: flex;
            flex-direction: column;
        }

        #chatPage::before {
            display: block;
            z-index: 0;
        }

        /* 沟通页面固定布局，避免键盘影响 */
        #chatPage .chat-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: auto;
        }

        /* 沟通页面禁用外层滚动，使用内部滚动 */
        .app-container:has(#chatPage.active) {
            overflow: hidden;
        }

        /* 页面背景水印 - 显示在卡片上方的装饰效果 */
        .page::before {
            content: '';
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background-image: url('/logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.04;
            pointer-events: none;
            z-index: 100;
            mix-blend-mode: multiply;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            will-change: opacity, transform;
        }

        /* 统计卡片 - 现代简约高级感（升级版） */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 20px;
            margin-bottom: 28px;
        }

        .stat-card {
            background: var(--card-gradient);
            padding: 24px;
            border-radius: var(--radius-xl);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(30px);
        }

        /* 左侧彩色装饰线 */
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg,
                var(--primary) 0%,
                var(--primary-light) 50%,
                transparent 100%
            );
            opacity: 0.8;
            transition: all 0.3s ease;
            border-radius: 4px 0 0 4px;
        }

        /* 悬浮时的光晕效果 */
        .stat-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .stat-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: var(--shadow-xl), var(--shadow-glow);
            border-color: rgba(14, 165, 233, 0.2);
        }

        .stat-card:hover::before {
            opacity: 1;
            width: 5px;
            background: linear-gradient(180deg,
                var(--primary) 0%,
                #8b5cf6 50%,
                #06b6d4 100%
            );
        }

        .stat-card:hover::after {
            opacity: 1;
        }

        /* 卡片依次出现的动画 */
        @keyframes cardSlideIn {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            60% {
                transform: translateY(-5px) scale(1.02);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stat-card.animate-in {
            animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* 每个卡片的延迟时间 */
        .stat-card:nth-child(1) { animation-delay: 0ms; }
        .stat-card:nth-child(2) { animation-delay: 80ms; }
        .stat-card:nth-child(3) { animation-delay: 160ms; }
        .stat-card:nth-child(4) { animation-delay: 240ms; }
        .stat-card:nth-child(5) { animation-delay: 320ms; }
        .stat-card:nth-child(6) { animation-delay: 400ms; }

        .stat-card h3 {
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 12px;
            font-weight: 500;
            letter-spacing: 0.3px;
            position: relative;
            z-index: 1;
        }

        .stat-card .value {
            font-size: 32px;
            font-weight: 600;
            color: #111827;
            line-height: 1;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            position: relative;
            z-index: 1;
            letter-spacing: -0.5px;
        }

        /* 可点击卡片 */
        .stat-card.clickable {
            cursor: pointer;
        }

        .stat-card.clickable:hover {
            transform: translateY(-2px);
            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.05),
                0 16px 32px rgba(0, 0, 0, 0.08);
            border-color: rgba(0, 0, 0, 0.08);
        }

        .stat-card.clickable:active {
            transform: translateY(0);
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.04),
                0 8px 16px rgba(0, 0, 0, 0.04);
        }

        /* 蓝色主题 */
        .stat-card.clickable .value {
            color: #1e40af;
        }

        /* 绿色主题 */
        .stat-card.clickable.success::before {
            background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
        }

        .stat-card.clickable.success .value {
            color: #15803d;
        }

        /* 橙色主题 */
        .stat-card.clickable.warning::before {
            background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
        }

        .stat-card.clickable.warning .value {
            color: #b45309;
        }

        /* 红色主题 */
        .stat-card.clickable.danger::before {
            background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
        }

        .stat-card.clickable.danger .value {
            color: #b91c1c;
        }

        /* 紫色主题 */
        .stat-card.clickable.purple::before {
            background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
        }

        .stat-card.clickable.purple .value {
            color: #7c3aed;
        }

        /* 蓝色主题 */
        .stat-card.clickable.info::before {
            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
        }

        .stat-card.clickable.info .value {
            color: #1d4ed8;
        }

        /* 青色主题 */
        .stat-card.clickable.cyan::before {
            background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%);
        }

        .stat-card.clickable.cyan .value {
            color: #0891b2;
        }

        /* 信息蓝主题 */
        .stat-card.clickable.info::before {
            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
        }

        .stat-card.clickable.info .value {
            color: #2563eb;
        }

        /* 生日提醒横幅 */
        .birthday-banner {
            background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 50%, #f9a8d4 100%);
            border-radius: 16px;
            padding: 16px 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(244, 114, 182, 0.3);
            box-shadow: 0 4px 15px rgba(244, 114, 182, 0.15);
        }

        .birthday-banner:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(244, 114, 182, 0.25);
        }

        .birthday-banner:active {
            transform: translateY(0);
        }

        .birthday-banner-content {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .birthday-banner-icon {
            font-size: 28px;
            animation: bounce 2s ease infinite;
        }

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

        .birthday-banner-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .birthday-banner-title {
            font-size: 15px;
            font-weight: 600;
            color: #be185d;
        }

        .birthday-banner-subtitle {
            font-size: 13px;
            color: #db2777;
        }

        .birthday-banner-count {
            background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
            color: white;
            font-size: 20px;
            font-weight: 700;
            min-width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
        }

        .birthday-banner-arrow {
            font-size: 20px;
            color: #db2777;
            margin-left: 8px;
        }

        /* 客户列表生日标识 */
        .birthday-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
            color: #be185d;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: 500;
            border: 1px solid rgba(244, 114, 182, 0.3);
            white-space: nowrap;
        }

        .birthday-badge .cake-icon {
            font-size: 14px;
        }

        .birthday-row {
            background: linear-gradient(90deg, rgba(252, 231, 243, 0.3) 0%, transparent 100%) !important;
        }

        /* 移动端卡片生日标识 */
        .mobile-card-birthday {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
            color: #be185d;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 12px;
            margin-top: 6px;
            font-weight: 500;
        }

        /* 会员等级标签样式 */
        .member-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 6px;
            white-space: nowrap;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        /* 普通客户 */
        .member-badge.none {
            background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
            color: #888;
            border: 1px solid #d9d9d9;
        }

        /* 源净铂金会员 */
        .member-badge.platinum {
            background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f0 100%);
            color: #2c5f6f;
            border: 1px solid #a0d0e0;
        }

        /* 醇净钻石会员 */
        .member-badge.diamond {
            background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
            color: #096dd9;
            border: 1px solid #69c0ff;
        }

        /* 超净至臻会员 */
        .member-badge.premium {
            background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 50%, #ffd591 100%);
            color: #874d00;
            border: 1px solid #ffc53d;
            box-shadow: 0 1px 4px rgba(250, 173, 20, 0.2);
        }

        .member-badge .badge-icon {
            font-size: 12px;
        }

        /* 移动端会员标签 */
        .mobile-card-member {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;
            margin-left: 4px;
        }

        .mobile-card-member.none {
            background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
            color: #888;
        }

        .mobile-card-member.platinum {
            background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f0 100%);
            color: #2c5f6f;
        }

        .mobile-card-member.diamond {
            background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
            color: #096dd9;
        }

        .mobile-card-member.premium {
            background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
            color: #874d00;
        }

        /* 操作栏 */
        .action-bar {
            background: var(--card);
            padding: 16px 20px;
            border-radius: 12px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center;
        }

        .search-box {
            flex: 1;
            min-width: 200px;
            position: relative;
            display: flex;
            align-items: center;
        }

        .search-box input {
            width: 100%;
            padding: 12px 48px 12px 16px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 12px;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            transition: all 0.25s ease;
            color: #1e293b;
        }

        .search-box input:hover {
            border-color: rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.95);
        }

        .search-box input:focus {
            outline: none;
            border-color: rgba(102, 126, 234, 0.3);
            background: #ffffff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        .search-box input::placeholder {
            color: #94a3b8;
            white-space: nowrap;
            font-size: 13px;
        }

        .search-box .search-clear {
            position: absolute;
            right: 48px;
            width: 18px;
            height: 18px;
            background: transparent;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            transition: all 0.2s ease;
            padding: 0;
            font-size: 14px;
        }

        .search-box .search-clear:hover {
            color: #64748b;
        }

        .search-box input:not(:placeholder-shown) ~ .search-clear {
            display: flex;
        }

        .btn-search {
            position: absolute;
            right: 4px;
            width: 36px;
            height: 36px;
            padding: 0;
            background: transparent;
            color: #94a3b8;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-search:hover {
            color: #0ea5e9;
            background: rgba(14, 165, 233, 0.08);
        }

        .btn-search:active {
            background: rgba(14, 165, 233, 0.12);
        }

        .btn-search svg {
            width: 18px;
            height: 18px;
        }

        /* 编辑页面分组卡片样式 */
        .edit-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 12px;
            border: 1px solid rgba(226, 232, 240, 0.6);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .edit-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 50%, #06b6d4 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .edit-section:hover::before {
            opacity: 1;
        }

        .edit-section:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
            transform: translateY(-1px);
        }

        .edit-section:last-child {
            margin-bottom: 0;
        }

        .edit-section-title {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .edit-section-title::before {
            content: '';
            width: 3px;
            height: 14px;
            background: linear-gradient(180deg, #0ea5e9 0%, #06b6d4 100%);
            border-radius: 2px;
        }

        /* 表格（升级版） */
        .table-container {
            background: var(--card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            overflow-x: auto;
            border: 1px solid var(--border-light);
            position: relative;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th, td {
            padding: 16px 20px;
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
        }

        th {
            background: linear-gradient(135deg,
                rgba(14, 165, 233, 0.06) 0%,
                rgba(139, 92, 246, 0.04) 50%,
                rgba(6, 182, 212, 0.05) 100%
            );
            font-weight: 700;
            color: var(--text-secondary);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            white-space: nowrap;
            border-bottom: 2px solid var(--primary-light);
            position: relative;
        }

        /* 表头底部渐变线 */
        th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                var(--primary) 30%,
                #8b5cf6 70%,
                transparent 100%
            );
            opacity: 0.4;
        }

        tbody tr {
            opacity: 0;
            transform: translateX(-15px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        /* 表格行依次出现的动画 */
        @keyframes tableRowSlideIn {
            0% {
                opacity: 0;
                transform: translateX(-15px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        tbody tr.animate-in {
            animation: tableRowSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        /* 左侧悬浮指示条 */
        tbody tr::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            background: linear-gradient(180deg,
                var(--primary) 0%,
                #8b5cf6 100%
            );
            opacity: 0;
            transition: all 0.3s ease;
            border-radius: 0 3px 3px 0;
        }

        tr:hover {
            background: linear-gradient(90deg,
                rgba(14, 165, 233, 0.04) 0%,
                rgba(139, 92, 246, 0.03) 50%,
                transparent 100%
            );
            transform: scale(1.01) translateX(2px);
            box-shadow:
                0 2px 12px rgba(0, 0, 0, 0.05),
                inset 0 0 0 1px rgba(14, 165, 233, 0.08);
            position: relative;
            z-index: 1;
        }

        tr:hover::before {
            opacity: 1;
        }

        .actions {
            display: flex;
            gap: 8px;
            white-space: nowrap;
        }

        .btn-icon {
            padding: 6px 12px;
            border: none;
            border-radius: var(--radius-md);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: #f3f4f6;
            color: #374151;
        }

        .btn-icon:hover {
            background: #e5e7eb;
        }

        .btn-edit {
            background: #dbeafe;
            color: #1e40af;
        }

        .btn-edit:hover {
            background: #bfdbfe;
        }

        .btn-delete {
            background: #fee2e2;
            color: #991b1b;
        }

        .btn-delete:hover {
            background: #fecaca;
        }

        /* 模态框 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .modal-overlay.active {
            display: flex;
        }

        /* 懒加载首页样式前，公告弹窗也必须保持默认隐藏 */
        .announcement-modal-overlay {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 10000;
        }

        .announcement-modal-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .modal {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: var(--radius-xl);
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow: hidden;
            animation: modalSlide 0.3s ease;
            box-shadow: var(--shadow-xl);
            display: flex;
            flex-direction: column;
            border: 1px solid var(--glass-border);
            position: relative;
        }

        /* 所有详情弹窗 - 添加logo水印 */
        #customerViewModal .modal::before,
        #employeeViewModal .modal::before,
        #salaryViewModal .modal::before,
        #orderViewModal .modal::before,
        #leadViewModal .modal::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 280px;
            height: 280px;
            background-image: url('/logo.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.04;
            pointer-events: none;
            z-index: 10;
            mix-blend-mode: multiply;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        @keyframes modalSlide {
            from {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-header {
            padding: 28px 32px;
            border-bottom: 1px solid rgba(243, 244, 246, 0.8);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
            position: relative;
        }

        .modal-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 32px;
            right: 32px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
        }

        .modal-header h2 {
            font-size: 22px;
            font-weight: 700;
            color: #1e293b;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-header h2::before {
            content: '';
            width: 6px;
            height: 28px;
            background: var(--primary-gradient);
            border-radius: 3px;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
            border-radius: var(--radius-full);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            background: rgba(0, 0, 0, 0.05);
            color: var(--text);
            transform: rotate(90deg);
        }

        /* 客户查看模态框样式 - 分组卡片式 */
        .customer-view-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin: -8px;
        }

        .view-section {
            background: #f8fafc;
            border-radius: 10px;
            padding: 14px 16px;
            border: 1px solid #e2e8f0;
        }

        .view-section-title {
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 10px;
            padding-bottom: 6px;
            border-bottom: 2px solid #e2e8f0;
        }

        .view-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .view-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .view-item.full-width {
            grid-column: 1 / -1;
        }

        .view-label {
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
        }

        .view-value {
            font-size: 14px;
            color: #1e293b;
            font-weight: 600;
        }

        .view-value.record-text {
            font-weight: 400;
            color: #475569;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        /* 电话号码和拨号按钮容器 */
        .phone-with-call {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 拨号按钮样式 - 简洁蓝色 */
        .call-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            color: #3b82f6;
            font-size: 12px;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .call-btn:hover {
            background: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .call-btn:active {
            transform: scale(0.98);
        }

        /* 状态颜色 */
        .status-normal { color: #10b981; }
        .status-paused { color: #f59e0b; }

        /* 图片区域样式 */
        .images-section {
            background: #f8fafc;
            border-radius: 12px;
            padding: 16px 20px;
            border: 1px solid #e2e8f0;
        }

        .images-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .images-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .image-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            background: #e2e8f0;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .image-item:hover {
            transform: scale(1.02);
        }

        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-item .delete-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(239, 68, 68, 0.9);
            color: white;
            border: none;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
            transition: opacity 0.2s ease;
            z-index: 100;
            pointer-events: auto;
        }

        .image-item:hover .delete-btn {
            opacity: 1;
        }

        @media (max-width: 768px) {
            .image-item .delete-btn {
                opacity: 1;
            }
        }

        .pending-badge {
            position: absolute;
            bottom: 4px;
            left: 4px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }

        .image-upload-btn {
            position: relative;
            aspect-ratio: 1;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #94a3b8;
            background: #f8fafc;
            overflow: hidden;
        }

        .image-upload-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
            background: #eff6ff;
        }

        .image-upload-btn .icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

        .image-upload-btn .text {
            font-size: 11px;
        }

        .image-upload-btn input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            font-size: 0;
            width: 100%;
            height: 100%;
        }

        .image-preview-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
        }

        .image-preview-modal img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
        }

        .image-preview-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-progress {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }

        .images-empty {
            text-align: center;
            color: #94a3b8;
            padding: 20px;
            font-size: 13px;
        }

        .card-images-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px 0;
            width: 100%;
        }

        .card-images-section {
            padding: 0 16px 12px;
        }

        .card-images-label {
            display: block;
            font-size: 11px;
            color: #94a3b8;
            font-weight: 500;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .card-image-item {
            width: 60px;
            height: 60px;
            flex-shrink: 0;
            border-radius: 6px;
            overflow: hidden;
            cursor: pointer;
            background: #f1f5f9;
        }

        .card-image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.2s ease;
        }

        .card-image-item:hover img {
            transform: scale(1.05);
        }

        .table-image-wrapper {
            position: relative;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .table-image-thumb {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
        }

        .table-image-more {
            position: absolute;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 3px;
        }
        .status-stopped { color: #ef4444; }

        @media (max-width: 640px) {
            .view-grid {
                grid-template-columns: 1fr;
            }
        }

        .modal-body {
            padding: 20px;
            overflow-y: auto;
            max-height: none;
            flex: 1;
            min-height: 0;
            background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
        }

        /* 状态标签样式 */
        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            font-size: 12px;
            font-weight: 600;
            background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
            color: #15803d;
            box-shadow: 0 2px 4px rgba(21, 128, 61, 0.2);
            transition: all 0.2s ease;
        }

        .status-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(21, 128, 61, 0.3);
        }

        .status-badge.status-paused {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            color: #92400e;
            box-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
        }

        .status-badge.status-paused:hover {
            box-shadow: 0 4px 8px rgba(146, 64, 14, 0.3);
        }

        .status-badge.status-stopped {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            color: #4b5563;
            box-shadow: 0 2px 4px rgba(75, 85, 99, 0.2);
        }

        .status-badge.status-stopped:hover {
            box-shadow: 0 4px 8px rgba(75, 85, 99, 0.3);
        }

        .status-badge.info {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            color: #1d4ed8;
            box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2);
        }

        .status-badge.info:hover {
            box-shadow: 0 4px 8px rgba(29, 78, 216, 0.3);
        }

        .status-badge.warning {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            color: #b45309;
            box-shadow: 0 2px 4px rgba(180, 83, 9, 0.2);
        }

        .status-badge.warning:hover {
            box-shadow: 0 4px 8px rgba(180, 83, 9, 0.3);
        }

        .status-badge.purple {
            background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
            color: #7c3aed;
            box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
        }

        .status-badge.purple:hover {
            box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
        }

        .modal-footer {
            padding: 20px 28px;
            border-top: 1px solid #f3f4f6;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            background: #fafafa;
            flex-shrink: 0;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-bottom: 8px;
        }

        .form-row.three-col {
            grid-template-columns: repeat(3, 1fr);
        }

        .form-row .form-group {
            margin-bottom: 0;
        }

        /* 加载更多按钮样式 */
        .load-more-container {
            padding: 24px 20px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .load-more-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 24px;
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .load-more-btn:hover {
            background: #e2e8f0;
            color: #475569;
            border-color: #cbd5e1;
        }

        .load-more-btn:active {
            background: #cbd5e1;
        }

        .load-more-btn::after {
            content: '↓';
            font-size: 11px;
            transition: transform 0.2s;
        }

        .load-more-btn:hover::after {
            transform: translateY(2px);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        /* 标签页 */
        .tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
            background: var(--card);
            padding: 4px;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

        .tab-btn {
            flex: 1;
            padding: 12px 24px;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
        }

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

        .tab-btn.income.active {
            background: var(--success);
        }

        .tab-btn.expense.active {
            background: var(--danger);
        }

        .tab-btn.investment.active {
            background: #8b5cf6;
        }

        .tab-btn.dividend.active {
            background: #f59e0b;
        }

        /* 财务页面特定样式 */
        .finance-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-bottom: 24px;
        }

        .finance-card {
            background: var(--card);
            padding: 20px;
            border-radius: 12px;
            box-shadow: var(--shadow);
        }

        .finance-card.income {
            border-left: 4px solid var(--success);
        }

        .finance-card.expense {
            border-left: 4px solid var(--danger);
        }

        .finance-card.balance {
            border-left: 4px solid var(--primary);
        }

        .finance-card.investment {
            border-left: 4px solid #8b5cf6;
        }

        .finance-card.dividend {
            border-left: 4px solid #f59e0b;
        }

        .finance-card.total {
            border-left: 4px solid #10b981;
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        }

        .finance-card h3 {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .finance-card .value {
            font-size: 20px;
            font-weight: 600;
        }

        .finance-card.income .value {
            color: var(--success);
        }

        .finance-card.expense .value {
            color: var(--danger);
        }

        .finance-card.balance .value {
            color: var(--primary);
        }

        .finance-card.investment .value {
            color: #8b5cf6;
        }

        .finance-card.dividend .value {
            color: #f59e0b;
        }

        .finance-card.total .value {
            color: #059669;
            font-size: 26px;
        }

        /* 按人统计列表 */
        .person-list {
            margin: 12px 0;
            max-height: 120px;
            overflow-y: auto;
        }

        .person-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px dashed var(--border);
            font-size: 13px;
        }

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

        .person-name {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .person-amount {
            font-weight: 600;
            color: var(--text);
        }

        .total-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            margin-top: 8px;
            border-top: 2px solid var(--border);
            font-size: 14px;
            font-weight: 600;
        }

        .total-amount {
            font-size: 14px;
        }

        .finance-card.investment .total-amount {
            color: #8b5cf6;
        }

        .finance-card.dividend .total-amount {
            color: #f59e0b;
        }

        .month-filter-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .month-filter-container {
            display: flex;
            align-items: center;
            gap: 0;
            background: white;
            border-radius: 10px;
            padding: 3px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(226, 232, 240, 0.8);
            height: 36px;
            box-sizing: border-box;
        }

        .month-nav-section {
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .month-nav-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
            padding: 0;
            margin: 0;
            -webkit-tap-highlight-color: transparent;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .month-nav-btn:hover {
            background: #f1f5f9;
            color: #334155;
        }

        .month-nav-btn:active {
            background: #e2e8f0;
            transform: scale(0.95);
        }

        .month-selector {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease;
            border: 1px solid rgba(226, 232, 240, 0.6);
            margin: 0 2px;
            height: 28px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .month-selector:hover {
            background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
        }

        .month-year {
            font-size: 10px;
            font-weight: 500;
            color: #64748b;
            white-space: nowrap;
        }

        .month-divider {
            width: 1px;
            height: 10px;
            background: linear-gradient(180deg, transparent 0%, #cbd5e1 50%, transparent 100%);
            flex-shrink: 0;
        }

        .month-month {
            font-size: 13px;
            font-weight: 600;
            color: #1e293b;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .dropdown-arrow {
            font-size: 10px;
            color: #94a3b8;
            margin-left: 1px;
            transform: rotate(90deg);
            display: inline-block;
            flex-shrink: 0;
        }

        .month-selector:hover .dropdown-arrow {
            color: #64748b;
        }

        .month-selector input[type="month"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            font-size: 16px;
            background: transparent;
            border: none;
            outline: none;
        }
        
        .month-selector input[type="month"]:hover,
        .month-selector input[type="month"]:focus {
            background: transparent;
            outline: none;
        }

        .month-divider-v {
            width: 1px;
            height: 16px;
            background: linear-gradient(180deg, transparent 0%, #e2e8f0 50%, transparent 100%);
            margin: 0 2px;
            flex-shrink: 0;
        }

        .month-reset-btn {
            padding: 3px 8px;
            border: none;
            background: transparent;
            border-radius: 6px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            color: #64748b;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
            height: 28px;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .month-reset-btn:hover {
            background: #f1f5f9;
            color: #334155;
        }

        .month-reset-btn.active {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
        }

        .month-total-card {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(226, 232, 240, 0.8);
            min-width: auto;
            overflow: hidden;
            height: 36px;
            box-sizing: border-box;
        }

        .total-glow {
            display: none;
        }

        .total-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .total-amount {
            font-size: 15px;
            font-weight: 600;
            color: #3b82f6;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            white-space: nowrap;
        }

        .month-total-card.income .total-amount {
            color: #10b981;
        }

        .month-total-card.expense .total-amount {
            color: #ef4444;
        }

        .month-total-card.investment .total-amount {
            color: #8b5cf6;
        }

        .month-total-card.dividend .total-amount {
            color: #f59e0b;
        }

        .total-decoration {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
            border-radius: 0 0 10px 10px;
        }

        .month-total-card.income .total-decoration {
            background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        }

        .month-total-card.expense .total-decoration {
            background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
        }

        .month-total-card.investment .total-decoration {
            background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
        }

        .month-total-card.dividend .total-decoration {
            background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
        }

        @media (max-width: 640px) {
            .month-filter-wrapper {
                flex-direction: row;
                align-items: center;
            }

            .month-filter-container {
                justify-content: flex-start;
                flex: 1;
            }

            .month-total-card {
                justify-content: center;
                min-width: auto;
            }
        }

        /* 总营收卡片在手机端占满整行 */
        @media (max-width: 768px) {
            .finance-card.total {
                grid-column: 1 / -1;
            }
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
            opacity: 1 !important;
            transform: none !important;
        }

        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }

        /* 提示消息 - 精美简约风格 */
        .toast {
            position: fixed;
            top: 16px;
            right: 16px;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2000;
            transform: translateX(400px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast.success {
            border-left: 2px solid #10b981;
        }

        .toast.error {
            border-left: 2px solid #ef4444;
        }

        .toast-icon-wrapper {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .toast.success .toast-icon-wrapper {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        }

        .toast.error .toast-icon-wrapper {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        }

        .toast-icon-wrapper svg {
            width: 10px;
            height: 10px;
        }

        .toast.success .toast-icon-wrapper svg {
            color: #059669;
        }

        .toast.error .toast-icon-wrapper svg {
            color: #dc2626;
        }

        #toastMessage {
            font-size: 12px;
            font-weight: 500;
            color: #1e293b;
            line-height: 1.3;
        }

        /* Toast 移动端适配 */
        @media (max-width: 768px) {
            .toast {
                top: 12px;
                right: 12px;
                left: auto;
                padding: 8px 12px;
                transform: translateX(400px);
            }

            .toast.show {
                transform: translateX(0);
            }

            .toast-icon-wrapper {
                width: 20px;
                height: 20px;
            }

            .toast-icon-wrapper svg {
                width: 10px;
                height: 10px;
            }

            #toastMessage {
                font-size: 12px;
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-container {
                padding: 12px;
            }
            .login-box {
                padding: 24px 20px;
                border-radius: 16px;
            }
            .login-logo {
                width: 62px;
                height: 62px;
                margin: 0 auto 12px;
            }
            .login-box h1 {
                font-size: 18px;
                margin-bottom: 16px;
            }
            .login-input-wrapper {
                margin-bottom: 10px !important;
            }
            .login-input-icon {
                width: 36px;
                height: 36px;
            }
            .login-input-icon svg {
                width: 16px;
                height: 16px;
            }
            .login-input-wrapper input {
                padding: 10px 10px 10px 0;
                font-size: 16px;
            }
            .login-submit-btn {
                margin-top: 14px;
                padding: 11px;
                font-size: 15px;
            }

            .navbar {
                padding: 10px 12px;
            }

            .navbar-content {
                flex-wrap: wrap;
                gap: 6px;
            }

            .navbar-brand {
                font-size: 11px;
                white-space: normal;
                flex-shrink: 0;
                width: 100%;
                text-align: center;
                line-height: 1.4;
                margin-bottom: 8px;
            }

            .navbar-content {
                flex-wrap: wrap;
            }

            .nav-datetime {
                display: flex;
                align-items: center;
                gap: 8px;
                flex: 0 0 auto;
                justify-content: center;
                padding-right: 12px;
                border-right: 1px solid var(--border);
            }

            .navbar-date {
                font-size: 12px;
                color: #64748b;
                font-weight: 500;
                white-space: nowrap;
            }

            .navbar-time {
                font-size: 12px;
                color: #64748b;
                font-weight: 500;
                font-family: monospace;
                white-space: nowrap;
            }

            .navbar-nav {
                flex: 0 0 auto;
                width: 100%;
                justify-content: center;
                padding-left: 0;
            }

            .nav-btn {
                padding: 6px 12px;
                font-size: 13px;
                white-space: nowrap;
            }

            .nav-dropdown-menu {
                min-width: 220px;
                position: fixed;
                top: 70px;
                left: 12px;
                right: 12px;
                transform: none;
                max-width: none;
                width: auto;
            }

            .nav-dropdown.open .nav-dropdown-menu {
                transform: none;
            }

            .nav-dropdown-item {
                padding: 8px 10px;
                font-size: 13px;
            }

            .main-content {
                padding: 12px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                margin-bottom: 20px;
            }

            .stat-card {
                padding: 16px;
                border-radius: 16px;
                min-width: 0;
                overflow: hidden;
            }

            .stat-card h3 {
                font-size: 11px;
                margin-bottom: 8px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                letter-spacing: 0.2px;
            }

            .stat-card .value {
                font-size: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .finance-summary {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
                margin-bottom: 16px;
            }

            .finance-card {
                padding: 14px 10px;
                border-radius: 10px;
            }

            .finance-card h3 {
                font-size: 11px;
                margin-bottom: 6px;
                line-height: 1.4;
            }

            .finance-card .value {
                font-size: 18px;
            }

            .action-bar {
                flex-direction: column;
                align-items: stretch;
                padding: 12px;
                margin-bottom: 12px;
                gap: 10px;
            }

            .search-box {
                width: 100%;
                order: 1;
            }

            .search-box input {
                padding: 14px 52px 14px 16px;
                font-size: 15px;
            }

            .btn-search {
                width: 40px;
                height: 40px;
            }

        }

        /* ===== 额外视觉增强效果 ===== */
        
        /* 页面切换淡入动画 */
        .page {
            animation: pageFadeIn 0.4s ease;
        }

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

        /* 按钮点击波纹效果 */
        .btn, .btn-primary, .btn-add, .nav-btn {
            position: relative;
            overflow: hidden;
        }

        /* 卡片装饰性光晕 */
        .card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

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

        /* 统计卡片渐变边框动画 */
        .stat-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: var(--radius-xl);
            padding: 2px;
            background: var(--primary-gradient);
            -webkit-mask: linear-gradient(#fff 0 0) content-box;
            mask: linear-gradient(#fff 0 0) content-box;
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stat-card:hover::after {
            opacity: 0.5;
        }

        /* 输入框焦点光晕 */
        input:focus, select:focus, textarea:focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15), var(--shadow-md);
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #0ea5e9 0%, #06b6d4 100%);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #06b6d4 0%, #0ea5e9 100%);
        }

        /* 选中文字高亮 */
        ::selection {
            background: rgba(14, 165, 233, 0.3);
            color: var(--text);
        }

        /* 卡片内部元素悬浮效果 */
        .card-body > *:hover {
            transition: all 0.2s ease;
        }

        @media (max-width: 768px) {
            .btn-add {
                padding: 10px 16px;
                font-size: 14px;
                order: 2;
                width: 100%;
            }

            th, td {
                padding: 10px 12px;
                font-size: 13px;
            }

            .actions {
                flex-direction: column;
                gap: 4px;
            }

            .btn-icon {
                padding: 4px 8px;
                font-size: 12px;
            }

            .modal {
                max-height: 95vh;
                margin: 10px;
                display: flex;
                flex-direction: column;
            }

            .modal-body {
                max-height: none;
                flex: 1;
                overflow-y: auto;
                min-height: 0;
            }

            .modal-footer {
                flex-shrink: 0;
                padding: 16px 20px;
            }

            .tabs {
                margin-bottom: 12px;
            }

            .tab-btn {
                padding: 10px 8px;
                font-size: 13px;
                line-height: 1.4;
                min-width: 0;
            }
        }

        @media (max-width: 480px) {
            .navbar-brand {
                font-size: 10px;
                line-height: 1.3;
            }

            .navbar-nav {
                gap: 8px;
            }

            .nav-btn {
                padding: 8px 16px;
                font-size: 12px;
                border-radius: 50px;
            }

            .nav-dropdown-menu {
                min-width: 200px;
                position: fixed;
                top: 70px;
                left: 12px;
                right: 12px;
                transform: none;
                max-width: none;
                width: auto;
            }

            .nav-dropdown.open .nav-dropdown-menu {
                transform: none;
            }

            .nav-dropdown-item {
                padding: 8px 8px;
                font-size: 12px;
            }

            .stats-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                margin-bottom: 16px;
            }

            .stat-card {
                padding: 14px;
                border-radius: 14px;
                min-width: 0;
                overflow: hidden;
            }

            .stat-card h3 {
                font-size: 10px;
                margin-bottom: 6px;
                letter-spacing: 0.2px;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .stat-card .value {
                font-size: 16px;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .finance-summary {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            .finance-card {
                padding: 12px 6px;
            }

            .finance-card h3 {
                font-size: 10px;
                line-height: 1.4;
            }

            .finance-card .value {
                font-size: 16px;
            }

            .tabs {
                gap: 2px;
                padding: 3px;
            }

            .tab-btn {
                padding: 8px 4px;
                font-size: 12px;
                line-height: 1.4;
                border-radius: 6px;
            }

            .action-bar {
                gap: 8px;
            }

            .btn-add {
                padding: 6px 12px;
                font-size: 12px;
            }
        }