/* ==================== 视觉特效样式 ==================== */
/* 从 admin.css 拆分，包含：Canvas 粒子背景、按钮水波纹、数字滚动动画 */
/* 依赖：admin.css 中的设计令牌（CSS 变量） */

/* ==================== Canvas 粒子背景层 ==================== */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* 确保所有内容在 canvas 之上 */
.login-container,
.admin-layout {
    position: relative;
    z-index: 1;
}

.toast-container {
    z-index: 9999;
}

/* ==================== 按钮 Ripple 水波纹 ==================== */
.btn {
    position: relative;
    overflow: hidden;
}

.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleAnim 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==================== 统计数字滚动动画 ==================== */
.stat-value[data-animate] {
    transition: none;
}