/* ========== 全局微交互增强系统 ========== */

        /* Ripple 点击效果 */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
            opacity: 0;
            pointer-events: none;
        }

        .ripple:active::after {
            width: 200%;
            height: 200%;
            opacity: 1;
            transition: width 0s, height 0s, opacity 0s;
        }

        /* 按钮通用增强 */
        .btn, .btn-primary, .btn-danger, .btn-secondary, .btn-add,
        .login-submit-btn, .logout-btn, .filter-btn, .pagination-btn, .detail-btn {
            position: relative;
            overflow: hidden;
        }

        .btn::after, .btn-primary::after, .btn-danger::after,
        .btn-secondary::after, .btn-add::after, .login-submit-btn::after,
        .logout-btn::after, .filter-btn::after, .pagination-btn::after,
        .detail-btn::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%) scale(0);
            transition: transform 0.5s ease, opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }

        .btn:active::after, .btn-primary:active::after, .btn-danger:active::after,
        .btn-secondary:active::after, .btn-add:active::after,
        .login-submit-btn:active::after, .logout-btn:active::after,
        .filter-btn:active::after, .pagination-btn:active::after,
        .detail-btn:active::after {
            transform: translate(-50%, -50%) scale(2.5);
            opacity: 1;
            transition: transform 0s, opacity 0s;
        }

        /* 卡片悬浮光效 */
        .card:hover, .stat-card:hover, .mobile-card:hover,
        .edit-section:hover, .action-bar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 页面切换淡入动画 */
        .page.active {
            animation: pageFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        /* 输入框聚焦光环 */
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus,
        .search-box input:focus, .filter-input:focus, .filter-select:focus {
            animation: inputFocusGlow 0.3s ease;
        }

        @keyframes inputFocusGlow {
            0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
            100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1), 0 4px 12px rgba(14, 165, 233, 0.15); }
        }

        /* 加载状态脉冲 */
        @keyframes pulse-subtle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .loading .spinner {
            animation: spin 0.8s linear infinite, pulse-subtle 2s ease-in-out infinite;
        }

        /* 成功/错误提示动画 */
        .success-toast, .error-toast {
            animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

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

        /* 数字变化动画 */
        .value-animate {
            animation: valueChange 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes valueChange {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); color: var(--primary); }
            100% { transform: scale(1); }
        }

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

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
        }

        /* 全局选择高亮 */
        ::selection {
            background: rgba(14, 165, 233, 0.2);
            color: var(--text);
        }