/* 引入自定义字体 */
@font-face {
    font-family: 'FZFWZZTJF'; /* 定义字体名称 */
    src: url('/static/FZFWZZTJF.TTF') format('truetype'); /* 指向字体文件路径 */
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'FZFWZZTJF', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 优先使用自定义字体 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: #4a4a4a; /* 深灰色文本，对比度好 */
    flex-direction: column;
    position: relative; /* 确保粒子效果能定位在后面 */
    overflow: hidden; /* 防止粒子效果溢出导致滚动条 */
}

/* 粒子容器，作为背景 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* 放置在所有内容的底层 */
    background-color: transparent; /* 背景透明，透出 body 的渐变背景 */
}

/* 通用动画效果 */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

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

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* 消息提示样式 */
.message-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 5px solid #28a745;
}

.message-error {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 5px solid #dc3545;
}

.message-info {
    background-color: #e2e3e5;
    color: #383d41;
    border-left: 5px solid #6c757d;
}