.fullscreen-auth-container[data-v-275d482f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    /* 半透明背景 */
    z-index: 9999;
    /* 确保覆盖其他内容 */
    padding: 2rem;
    box-sizing: border-box;
}
.welcome-banner[data-v-275d482f] {
    text-align: center;
    width: 100%;
    max-width: 560px;
    margin-bottom: 2rem;
}
.auth-container[data-v-275d482f] {
    max-width: 560px;
    margin: 4rem auto;
    padding: 2.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}
.animated-title[data-v-275d482f] {
    font-size: 2.5rem;
    color: #2c3e50;
    margin: 2rem 0;
    animation: float-275d482f 3s ease-in-out infinite;
    position: relative;
    display: inline-block;
}
.highlight[data-v-275d482f] {
    color: #409eff;
    text-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
    position: relative;
}
.animated-title[data-v-275d482f]::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #409eff, transparent);
    transform: translateX(-50%);
    opacity: 0.6;
}
@keyframes float-275d482f {
0%,
    100% {
        transform: translateY(0);
}
50% {
        transform: translateY(-10px);
}
}
.mode-switch[data-v-275d482f] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 2rem;
}
.mode-button[data-v-275d482f] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border-radius: 12px;
    background: white;
    color: #606266;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    font-size: 1.1rem;
}
.mode-button[data-v-275d482f]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(64, 158, 255, 0.2);
}
.mode-button.active[data-v-275d482f] {
    background: #409eff;
    color: white;
    box-shadow: 0 6px 12px rgba(64, 158, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}
.button-icon[data-v-275d482f] {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    fill: currentColor;
}
.animated-wave[data-v-275d482f] {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg viewBox=%270 0 1440 320%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill=%27%23409eff%27 fill-opacity=%270.1%27 d=%27M0,128L48,117.3C96,107,192,85,288,106.7C384,128,480,192,576,192C672,192,768,128,864,128C960,128,1056,192,1152,202.7C1248,213,1344,171,1392,149.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z%27/%3E%3C/svg%3E");
    animation: wave-275d482f 12s linear infinite;
}
@keyframes wave-275d482f {
from {
        transform: translateX(-100%);
}
to {
        transform: translateX(0);
}
}
@media (max-width: 640px) {
.auth-container[data-v-275d482f] {
        margin: 1.5rem;
        padding: 1.5rem;
}
.animated-title[data-v-275d482f] {
        font-size: 2rem;
}
.mode-switch[data-v-275d482f] {
        grid-template-columns: 1fr;
}
}


.content-field[data-v-5cbdd26e]{
    margin-top: 160px;
}


.auth-wrapper[data-v-3eb0f716] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.login-container[data-v-3eb0f716] {
    background: white;
    padding: 2.5rem 3rem;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 440px;
    transform: translateY(-10%);
}
.login-title[data-v-3eb0f716] {
    text-align: center;
    margin-bottom: 2.5rem;
}
.welcome-text[data-v-3eb0f716] {
    display: block;
    font-size: 1.8rem;
    color: #2c3e50;
    animation: textFloat-3eb0f716 3s ease-in-out infinite;
}
.brand[data-v-3eb0f716] {
    display: block;
    font-size: 2.2rem;
    color: #409eff;
    font-weight: 700;
    text-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
}
@keyframes textFloat-3eb0f716 {
0%,
    100% {
        transform: translateY(0);
}
50% {
        transform: translateY(-6px);
}
}
.input-group[data-v-3eb0f716] {
    position: relative;
    margin-bottom: 1.5rem;
}
.input-icon[data-v-3eb0f716] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: #606266;
    z-index: 2;
    transition: fill 0.3s ease;
}
.form-input[data-v-3eb0f716] {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-input[data-v-3eb0f716]:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
    padding-left: 3.8rem;
}
.form-input:focus+.input-icon[data-v-3eb0f716] {
    fill: #409eff;
    transform: translateY(-50%) scale(1.1);
}
.submit-btn[data-v-3eb0f716] {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #409eff 0%, #2979ff 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.submit-btn[data-v-3eb0f716]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(64, 158, 255, 0.3);
}
.arrow-icon[data-v-3eb0f716] {
    width: 20px;
    height: 20px;
    fill: white;
    transition: transform 0.3s ease;
}
.submit-btn:hover .arrow-icon[data-v-3eb0f716] {
    transform: translateX(3px);
}
.error-message[data-v-3eb0f716] {
    color: #ff4444;
    background: #fff0f0;
    padding: 1rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ffcccc;
}
.slide-fade-enter-active[data-v-3eb0f716] {
    transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-3eb0f716] {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from[data-v-3eb0f716],
.slide-fade-leave-to[data-v-3eb0f716] {
    transform: translateY(-10px);
    opacity: 0;
}
@media (max-width: 480px) {
.login-container[data-v-3eb0f716] {
        padding: 1.5rem;
        margin: 1rem;
}
.welcome-text[data-v-3eb0f716] {
        font-size: 1.5rem;
}
.brand[data-v-3eb0f716] {
        font-size: 1.8rem;
}
}


/* 共用登录页样式 */
.auth-wrapper[data-v-0f741a60] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.register-container[data-v-0f741a60] {
    background: white;
    padding: 2.5rem 3rem;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 440px;
    transform: translateY(-10%);
}
.register-title[data-v-0f741a60] {
    text-align: center;
    margin-bottom: 2.5rem;
}
.welcome-text[data-v-0f741a60] {
    display: block;
    font-size: 1.8rem;
    color: #2c3e50;
    animation: textFloat-0f741a60 3s ease-in-out infinite;
}
.brand[data-v-0f741a60] {
    display: block;
    font-size: 2.2rem;
    color: #409eff;
    font-weight: 700;
    text-shadow: 0 4px 6px rgba(64, 158, 255, 0.2);
}

/* 共用输入框样式 */
.input-group[data-v-0f741a60] {
    position: relative;
    margin-bottom: 1.5rem;
}
.input-icon[data-v-0f741a60] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    fill: #606266;
    z-index: 2;
    transition: fill 0.3s ease;
}
.form-input[data-v-0f741a60] {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-input[data-v-0f741a60]:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
    padding-left: 3.8rem;
}
.form-input:focus+.input-icon[data-v-0f741a60] {
    fill: #409eff;
    transform: translateY(-50%) scale(1.1);
}

/* 共用按钮样式 */
.submit-btn[data-v-0f741a60] {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #409eff 0%, #2979ff 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.submit-btn[data-v-0f741a60]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(64, 158, 255, 0.3);
}
.arrow-icon[data-v-0f741a60] {
    width: 20px;
    height: 20px;
    fill: white;
    transition: transform 0.3s ease;
}
.submit-btn:hover .arrow-icon[data-v-0f741a60] {
    transform: translateX(3px);
}

/* 错误提示样式 */
.error-message[data-v-0f741a60] {
    color: #ff4444;
    background: #fff0f0;
    padding: 1rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #ffcccc;
}
.slide-fade-enter-active[data-v-0f741a60] {
    transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-0f741a60] {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from[data-v-0f741a60],
.slide-fade-leave-to[data-v-0f741a60] {
    transform: translateY(-10px);
    opacity: 0;
}
@media (max-width: 480px) {
.register-container[data-v-0f741a60] {
        padding: 1.5rem;
        margin: 1rem;
}
.welcome-text[data-v-0f741a60] {
        font-size: 1.5rem;
}
.brand[data-v-0f741a60] {
        font-size: 1.8rem;
}
}
@keyframes textFloat-0f741a60 {
0%,
    100% {
        transform: translateY(0);
}
50% {
        transform: translateY(-6px);
}
}


/* 容器整体优化 */
.ranklist-container[data-v-5836a5e3] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: #1a1a1a;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* 表格布局优化 */
.ranklist-table[data-v-5836a5e3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    table-layout: fixed;
}

/* 表头设计 */
.rank-header {
&[data-v-5836a5e3] {
    padding: 1.2rem 2rem;
    background: linear-gradient(145deg, #2d2d2d, #252525);
    color: #e0e0e0;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    }
&[data-v-5836a5e3]:first-child {
        border-radius: 12px 0 0 12px;
}
&[data-v-5836a5e3]:last-child {
        border-radius: 0 12px 12px 0;
}
}

/* 行项设计 */
.rank-item {
&[data-v-5836a5e3] {
    background: rgba(40, 40, 50, 0.8);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
&[data-v-5836a5e3]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 150, 255, 0.15);
}
}

/* 玩家列样式 */
.user-info {
&[data-v-5836a5e3] {
    width: 60%;
    padding: 1rem 2rem;
    }
.user-container {
&[data-v-5836a5e3] {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        }
.rank-indicator {
&[data-v-5836a5e3] {
            position: relative;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            }
.crown {
&[data-v-5836a5e3] {
                font-size: 2.4rem;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
                animation: float-5836a5e3 2s ease-in-out infinite;
                }
&.gold[data-v-5836a5e3] {
                    color: #ffd700;
                    text-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
}
&.silver[data-v-5836a5e3] {
                    color: #c0c0c0;
                    text-shadow: 0 0 12px rgba(192, 192, 192, 0.5);
}
&.bronze[data-v-5836a5e3] {
                    color: #cd7f32;
                    text-shadow: 0 0 12px rgba(205, 127, 50, 0.5);
}
}
.rank-number[data-v-5836a5e3] {
                font-size: 1.2rem;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.8);
}
}
.user-avatar[data-v-5836a5e3] {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid #404040;
            transition: all 0.3s ease;
}
.username-wrapper {
&[data-v-5836a5e3] {
            flex: 1;
            }
.username[data-v-5836a5e3] {
                font-size: 1.1rem;
                font-weight: 600;
                color: #fff;
                display: block;
                margin-bottom: 4px;
}
.user-id[data-v-5836a5e3] {
                font-size: 0.9rem;
                color: rgba(255, 255, 255, 0.6);
}
}
}
}

/* 积分列样式 */
.user-score {
&[data-v-5836a5e3] {
    width: 40%;
    padding: 1rem 2rem;
    }
.score-container {
&[data-v-5836a5e3] {
        position: relative;
        height: 40px;
        display: flex;
        align-items: center;
        }
.score-value[data-v-5836a5e3] {
            position: relative;
            z-index: 1;
            font-size: 1.2rem;
            font-weight: 600;
            color: #00ff88;
            text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}
.score-bar[data-v-5836a5e3] {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: linear-gradient(90deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.25));
            border-radius: 0 6px 6px 0;
            transition: width 0.6s ease;
}
}
}

/* 全新分页设计 */
.pagination-container[data-v-5836a5e3] {
    margin-top: 2rem;
    background: rgba(30, 30, 40, 0.8);
    border-radius: 16px;
    padding: 1rem;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.pagination {
&[data-v-5836a5e3] {
    display: flex;
    gap: 8px;
    justify-content: center;
    }
.page-item {
&[data-v-5836a5e3] {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(106, 17, 255, 0.1);
        transition: all 0.3s ease;
        cursor: pointer;
        }
&[data-v-5836a5e3]:hover:not(.active, .disabled) {
            background: rgba(106, 17, 255, 0.3);
            transform: translateY(-2px);
}
&.active {
&[data-v-5836a5e3] {
            background: linear-gradient(45deg, #6a11ff, #4b7dff);
            box-shadow: 0 4px 16px rgba(106, 17, 255, 0.3);
            }
.page-link[data-v-5836a5e3] {
                color: #fff;
}
}
&.disabled[data-v-5836a5e3] {
            opacity: 0.4;
            cursor: not-allowed;
}
.page-link[data-v-5836a5e3] {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            display: block;
            width: 100%;
            text-align: center;
}
.arrow[data-v-5836a5e3] {
            border-color: rgba(255, 255, 255, 0.8);
}
}
}

/* 动画效果 */
@keyframes float-5836a5e3 {
0%,
    100% {
        transform: translateY(0);
}
50% {
        transform: translateY(-4px);
}
}

/* 响应式设计 */
@media (max-width: 768px) {
.ranklist-container[data-v-5836a5e3] {
        margin: 1rem;
        padding: 1rem;
}
.user-info[data-v-5836a5e3],
    .user-score[data-v-5836a5e3] {
        padding: 1rem;
}
.user-avatar[data-v-5836a5e3] {
        width: 40px;
        height: 40px;
}
.crown[data-v-5836a5e3] {
        font-size: 2rem;
}
}


.friend-badge[data-v-56b93abe] {
    margin-left: 8px;
    color: #00ff87;
    font-size: 0.9em;
    filter: drop-shadow(0 0 5px rgba(0, 255, 135, 0.3));
}
/* 添加当前用户标识样式 */
.current-user-badge[data-v-56b93abe] {
    color: #00ff87;
    font-size: 0.8em;
    text-shadow: 0 0 8px rgba(0, 255, 135, 0.5);
}

/* 暗夜主题容器 */
.online-users-container[data-v-56b93abe] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: #0a0a0a;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.online-users-container[data-v-56b93abe]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, #7028e4 0%, #e5b2ca 50%, #7028e4 100%);
    opacity: 0.1;
    animation: bgRotate-56b93abe 20s linear infinite;
}
.section-title[data-v-56b93abe] {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    position: relative;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.section-title[data-v-56b93abe]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #7028e4 0%, #e5b2ca 50%, #7028e4 100%);
}
.scroll-container[data-v-56b93abe] {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}
/* 霓虹风格用户卡片 */
.users-grid[data-v-56b93abe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    grid-auto-rows: minmax(160px, auto);
    padding: 10px 0;
}
.user-card[data-v-56b93abe] {
    background: #141414;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.user-card[data-v-56b93abe]:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(112, 40, 228, 0.3);
}
.glow[data-v-56b93abe] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(112, 40, 228, 0) 0%,
        rgba(112, 40, 228, 0.3) 50%,
        rgba(112, 40, 228, 0) 100%
    );
    animation: cardGlow-56b93abe 3s infinite;
}

/* 动态头像效果 */
.avatar-wrapper[data-v-56b93abe] {
    position: relative;
    margin-right: 1.2rem;
}
.user-avatar[data-v-56b93abe] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 2px solid #7028e4;
    box-shadow: 0 0 15px rgba(112, 40, 228, 0.3);
    transition: transform 0.3s ease;
}
.user-card:hover .user-avatar[data-v-56b93abe] {
    transform: rotateY(360deg);
}
.online-pulse[data-v-56b93abe] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #4caf50;
    border-radius: 50%;
    box-shadow: 0 0 10px #4caf50;
    animation: pulse-56b93abe 1.5s infinite;
}

/* 用户信息样式 */
.user-info[data-v-56b93abe] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* 防止文本溢出 */
}
.user-name[data-v-56b93abe] {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}
.user-id[data-v-56b93abe] {
    font-size: 0.9rem;
    color: #a0a0a0;
}

/* 加载状态特效 */
.status-container[data-v-56b93abe] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
.loading-spinner[data-v-56b93abe] {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(112, 40, 228, 0.2);
    border-top-color: #7028e4;
    border-radius: 50%;
    animation: spin-56b93abe 1s linear infinite;
    margin-right: 1rem;
    filter: drop-shadow(0 0 5px rgba(112, 40, 228, 0.5));
}
.loading-text[data-v-56b93abe] {
    color: #a0a0a0;
    font-size: 1.1rem;
}

/* 错误提示升级 */
.error-alert[data-v-56b93abe] {
    background: rgba(255, 51, 51, 0.15);
    color: #ff6666;
    padding: 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 102, 102, 0.3);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    text-align: center;
    margin-top: 1.5rem;
}
.action-buttons[data-v-56b93abe] {
    margin-top: 1rem;
    display: flex;
    gap: 0.8rem;
}
.invite-btn[data-v-56b93abe],
.chat-btn[data-v-56b93abe] {
    flex: 1;
    padding: 0.6rem;
    border: none;
    border-radius: 8px;
    background: rgba(112, 40, 228, 0.2);
    color: #e5b2ca;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.invite-btn[data-v-56b93abe]:hover {
    background: #7028e4;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(112, 40, 228, 0.4);
}
.chat-btn[data-v-56b93abe]:hover {
    background: #7028e4;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
.el-icon[data-v-56b93abe] {
    font-size: 1.1rem;
}

/* 关键帧动画 */
@keyframes spin-56b93abe {
to {
        transform: rotate(360deg);
}
}
@keyframes pulse-56b93abe {
0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
}
70% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
}
100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
@keyframes cardGlow-56b93abe {
0% {
        transform: translateX(-50%);
}
100% {
        transform: translateX(50%);
}
}
@keyframes bgRotate-56b93abe {
from {
        transform: rotate(0deg);
}
to {
        transform: rotate(360deg);
}
}

@keyframes pulse-6de6e22d{0%{transform:scale(0.9)}50%{transform:scale(1.2)}100%{transform:scale(0.9)}}@keyframes float-6de6e22d{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow-6de6e22d{0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(0, 255, 135, 0.3))}50%{filter:brightness(1.2) drop-shadow(0 0 15px rgba(0, 255, 135, 0.6))}}@keyframes borderFlow-6de6e22d{0%{background-position:0% 0%}100%{background-position:200% 0%}}.message-popup[data-v-6de6e22d]{position:fixed;right:2rem;top:6rem;background:rgba(15,15,20,.95);border:1px solid #00ff87;border-radius:12px;padding:1.5rem;width:320px;max-height:60vh;overflow-y:auto;z-index:999;box-shadow:0 10px 25px rgba(0,0,0,.5),0 0 30px rgba(0,255,135,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn-6de6e22d .3s ease}@keyframes slideIn-6de6e22d{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.message-item[data-v-6de6e22d]{padding:1rem;margin-bottom:.8rem;background:hsla(0,0%,100%,.05);border-radius:10px;cursor:pointer;transition:all .3s;border-left:2px solid #00ff87;position:relative;overflow:hidden}.message-item[data-v-6de6e22d]::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.1), transparent);transition:.5s}.message-item[data-v-6de6e22d]:hover{background:rgba(0,255,135,.1);transform:translateX(5px)}.message-item[data-v-6de6e22d]:hover::before{left:100%}.message-header[data-v-6de6e22d]{display:flex;justify-content:space-between;margin-bottom:.5rem}.from-name[data-v-6de6e22d]{color:#00ff87;font-weight:600;text-shadow:0 0 5px rgba(0,255,135,.5)}.message-time[data-v-6de6e22d]{color:#888;font-size:.8rem}.message-content[data-v-6de6e22d]{color:#e0e0e0;font-size:.9rem}.message-badge[data-v-6de6e22d]{position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:#ff4757;border-radius:50%;box-shadow:0 0 10px rgba(255,71,87,.7);animation:pulse-6de6e22d 1.5s infinite}.dashboard-container[data-v-6de6e22d]{display:grid;grid-template-columns:280px 1fr;height:100vh;background:#0a0a0a;color:#fff;overflow:hidden;position:relative}.dashboard-container[data-v-6de6e22d]::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 10% 10%, rgba(40, 40, 50, 0.8) 0%, transparent 30%),radial-gradient(circle at 90% 90%, rgba(30, 30, 40, 0.8) 0%, transparent 30%);z-index:0}.control-panel[data-v-6de6e22d]{background:rgba(15,15,20,.7);padding:2rem;border-right:1px solid rgba(0,255,135,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:10;display:flex;flex-direction:column;height:100%;justify-content:space-between}.control-panel[data-v-6de6e22d]::before{content:"";position:absolute;top:-30%;left:-30%;width:160%;height:160%;background:radial-gradient(ellipse at center, rgba(0, 255, 135, 0.1) 0%, transparent 70%);z-index:-1}.control-panel[data-v-6de6e22d]::after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;background:linear-gradient(to bottom, transparent, #00ff87, transparent);opacity:.6}.logo[data-v-6de6e22d]{display:flex;align-items:center;gap:1rem;margin-bottom:3rem;position:relative}.logo[data-v-6de6e22d]::after{content:"";position:absolute;left:0;bottom:-20px;width:100%;height:1px;background:linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.5), transparent)}.logo h1[data-v-6de6e22d]{margin:0;font-weight:600;font-size:1.8rem;background:linear-gradient(45deg, #00ff87, #00b8ff);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);letter-spacing:1px;animation:glow-6de6e22d 3s infinite}.menu-buttons[data-v-6de6e22d]{display:flex;flex-direction:column;gap:1.2rem;margin-top:1rem;flex:1}.menu-btn[data-v-6de6e22d]{position:relative;display:flex;align-items:center;gap:1.2rem;width:100%;padding:1.2rem 1.5rem;border:none;border-radius:12px;background:rgba(25,25,35,.6);color:#e0e0e0;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}.menu-btn[data-v-6de6e22d]::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:#00ff87;transform:scaleY(0);transition:transform .3s ease;opacity:.6}.menu-btn .el-icon[data-v-6de6e22d]{transition:all .3s ease}.menu-btn[data-v-6de6e22d]:hover{background:rgba(0,255,135,.15);transform:translateX(8px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.menu-btn[data-v-6de6e22d]:hover::before{transform:scaleY(1)}.menu-btn:hover .el-icon[data-v-6de6e22d]{transform:scale(1.2)}.menu-btn.active[data-v-6de6e22d]{background:linear-gradient(90deg, rgba(0, 255, 135, 0.2), rgba(0, 184, 255, 0.2));color:#fff;font-weight:600;box-shadow:0 5px 20px rgba(0,0,0,.3);border-left:2px solid #00ff87}.menu-btn.active[data-v-6de6e22d]::before{transform:scaleY(1);opacity:1}.menu-btn.active .el-icon[data-v-6de6e22d]{color:#00ff87;filter:drop-shadow(0 0 6px rgba(0, 255, 135, 0.7))}.menu-btn .badge[data-v-6de6e22d]{position:absolute;top:10px;right:10px;width:8px;height:8px;background:#ff4757;border-radius:50%;box-shadow:0 0 10px rgba(255,71,87,.7);animation:pulse-6de6e22d 1.5s infinite}.user-profile-card[data-v-6de6e22d]{margin-top:2rem;margin-bottom:3rem;background:rgba(20,20,30,.8);border-radius:12px;padding:1rem;display:flex;align-items:center;gap:1rem;border:1px solid rgba(0,255,135,.15);box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.user-profile-card[data-v-6de6e22d]::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(90deg, transparent, rgba(0, 255, 135, 0.05), transparent);transform:rotate(30deg);transition:.5s;z-index:0}.user-profile-card[data-v-6de6e22d]:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.3),0 0 15px rgba(0,255,135,.2);background:rgba(0,255,135,.1)}.user-profile-card[data-v-6de6e22d]:hover::before{animation:shimmer-6de6e22d 2s infinite}@keyframes shimmer-6de6e22d{0%{transform:rotate(30deg) translateX(-100%)}100%{transform:rotate(30deg) translateX(100%)}}.user-avatar-container[data-v-6de6e22d]{position:relative;width:50px;height:50px}.user-avatar[data-v-6de6e22d]{width:50px;height:50px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:2px solid #00ff87;box-shadow:0 0 10px rgba(0,255,135,.4);transition:all .3s ease}.online-indicator[data-v-6de6e22d]{position:absolute;bottom:0;right:0;width:12px;height:12px;background:#00ff87;border-radius:50%;border:2px solid rgba(20,20,30,.8);box-shadow:0 0 8px rgba(0,255,135,.7)}.user-info[data-v-6de6e22d]{flex:1;display:flex;flex-direction:column;min-width:0;z-index:1}.username[data-v-6de6e22d]{color:#fff;font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-rating[data-v-6de6e22d]{display:flex;align-items:center;gap:4px;color:#00ff87;font-size:.9rem;margin-top:4px}.user-rating .el-icon[data-v-6de6e22d]{filter:drop-shadow(0 0 5px rgba(0, 255, 135, 0.7))}.content-wrapper[data-v-6de6e22d]{padding:2rem;display:grid;grid-template-columns:repeat(2, 1fr);gap:2rem;overflow:auto;position:relative;z-index:1}.content-wrapper[data-v-6de6e22d]::-webkit-scrollbar{width:8px}.content-wrapper[data-v-6de6e22d]::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}.content-wrapper[data-v-6de6e22d]::-webkit-scrollbar-thumb{background:rgba(0,255,135,.2);border-radius:4px}.content-wrapper[data-v-6de6e22d]::-webkit-scrollbar-thumb:hover{background:rgba(0,255,135,.3)}.glass-card[data-v-6de6e22d]{border-radius:16px;padding:1.5rem;min-height:400px;height:calc(100vh - 5rem);overflow-y:auto;box-shadow:0 15px 35px rgba(0,0,0,.3);background:rgba(20,20,25,.7);border:1px solid rgba(0,255,135,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;transition:all .3s ease}.glass-card[data-v-6de6e22d]::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, #00ff87, #00b8ff, #00ff87);background-size:200% 100%;animation:borderFlow-6de6e22d 4s linear infinite;opacity:.5}.glass-card[data-v-6de6e22d]::-webkit-scrollbar{width:6px}.glass-card[data-v-6de6e22d]::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0 16px 16px 0}.glass-card[data-v-6de6e22d]::-webkit-scrollbar-thumb{background:rgba(0,255,135,.2);border-radius:3px}.message-icon[data-v-6de6e22d]{color:#00ff87;cursor:pointer;transition:all .3s ease;margin-left:auto;position:relative}.message-icon[data-v-6de6e22d]:hover{transform:scale(1.2);filter:drop-shadow(0 0 10px #00ff87)}.board-title[data-v-6de6e22d]{font-size:1.6rem;display:flex;align-items:center;gap:.8rem;margin:0 0 1.5rem;color:#00ff87 !important;text-shadow:0 0 15px rgba(0,255,135,.4);padding-bottom:1rem;border-bottom:1px solid rgba(0,255,135,.2);position:relative}.board-title[data-v-6de6e22d]::after{content:"";position:absolute;bottom:-1px;left:0;width:100px;height:2px;background:#00ff87;box-shadow:0 0 10px #00ff87}.board-title .el-icon[data-v-6de6e22d]{filter:drop-shadow(0 0 8px #00ff87)}@media(max-width: 1400px){.content-wrapper[data-v-6de6e22d]{grid-template-columns:1fr;gap:2rem}.glass-card[data-v-6de6e22d]{min-height:auto;height:calc(100vh - 8rem)}}@media(max-width: 768px){.dashboard-container[data-v-6de6e22d]{grid-template-columns:1fr}.control-panel[data-v-6de6e22d]{display:none}.content-wrapper[data-v-6de6e22d]{padding:1rem}}.game-invitation-popup[data-v-6de6e22d]{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;animation:fadeIn-6de6e22d .3s ease;transition:opacity .3s ease}.game-invitation-content[data-v-6de6e22d]{width:90%;max-width:400px;background:linear-gradient(145deg, rgba(30, 30, 30, 0.95) 0%, rgba(15, 15, 15, 0.95) 100%);border-radius:15px;border:1px solid rgba(0,255,135,.5);box-shadow:0 0 30px rgba(0,255,135,.3);overflow:hidden;animation:pulse-6de6e22d 2s infinite}.game-invitation-header[data-v-6de6e22d]{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid rgba(0,255,135,.3)}.game-invitation-header h3[data-v-6de6e22d]{color:#00ff87;margin:0}.game-invitation-body[data-v-6de6e22d]{padding:1.5rem;text-align:center}.inviter-info[data-v-6de6e22d]{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem}.inviter-avatar[data-v-6de6e22d]{width:80px;height:80px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:3px solid #00ff87}.inviter-info p[data-v-6de6e22d]{color:#fff;font-size:1.2rem;margin:0}.invitation-actions[data-v-6de6e22d]{display:flex;justify-content:center;gap:1rem;margin-bottom:1.5rem}.invitation-timer[data-v-6de6e22d]{position:relative;height:20px;background:rgba(0,0,0,.3);border-radius:10px;overflow:hidden;margin-top:1rem}.timer-bar[data-v-6de6e22d]{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg, #00ff87, #00b8ff);transition:width 1s linear}.invitation-timer span[data-v-6de6e22d]{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;z-index:1}.accept-btn[data-v-6de6e22d],.reject-btn[data-v-6de6e22d]{padding:.75rem 2rem;border:none;border-radius:5px;font-size:1.1rem;cursor:pointer;transition:all .2s}.accept-btn[data-v-6de6e22d]{background:#28a745;color:#fff}.accept-btn[data-v-6de6e22d]:hover{background:#218838;transform:scale(1.05)}.reject-btn[data-v-6de6e22d]{background:#dc3545;color:#fff}.reject-btn[data-v-6de6e22d]:hover{background:#bd2130;transform:scale(1.05)}@keyframes fadeIn-6de6e22d{from{opacity:0}to{opacity:1}}@keyframes pulse-6de6e22d{0%{box-shadow:0 0 15px rgba(0,255,135,.4)}50%{box-shadow:0 0 30px rgba(0,255,135,.7)}100%{box-shadow:0 0 15px rgba(0,255,135,.4)}}
.not-found-container[data-v-eab73a98]{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);position:relative;overflow:hidden;padding:2rem}.background-elements[data-v-eab73a98]{position:absolute;width:100%;height:100%;top:0;left:0}.background-elements .circle[data-v-eab73a98],.background-elements .square[data-v-eab73a98],.background-elements .triangle[data-v-eab73a98]{position:absolute;opacity:.1;animation:float-eab73a98 15s infinite ease-in-out}.background-elements .circle[data-v-eab73a98]{width:200px;height:200px;background:#ff6b6b;border-radius:50%;top:20%;left:10%}.background-elements .square[data-v-eab73a98]{width:150px;height:150px;background:#4ecdc4;top:60%;right:15%;transform:rotate(15deg)}.background-elements .triangle[data-v-eab73a98]{width:0;height:0;border-left:100px solid rgba(0,0,0,0);border-right:100px solid rgba(0,0,0,0);border-bottom:173.2px solid #ffe66d;top:30%;right:25%}.content[data-v-eab73a98]{position:relative;z-index:1;text-align:center;color:#fff;max-width:800px}.content .error-code[data-v-eab73a98]{font-size:12rem;font-weight:900;margin-bottom:1rem;text-shadow:3px 3px 0 rgba(0,0,0,.1)}.content .title[data-v-eab73a98]{font-size:2rem;margin-bottom:1.5rem;font-weight:500}.content .description[data-v-eab73a98]{font-size:1.1rem;line-height:1.6;margin-bottom:2.5rem;opacity:.9}.content .home-button[data-v-eab73a98]{display:inline-flex;align-items:center;padding:1rem 2rem;background:hsla(0,0%,100%,.15);border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;text-decoration:none;color:#fff;border:1px solid hsla(0,0%,100%,.2)}.content .home-button[data-v-eab73a98]:hover{background:hsla(0,0%,100%,.25);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.content .home-button:hover .arrow[data-v-eab73a98]{transform:translateX(3px)}.content .home-button span[data-v-eab73a98]{margin-right:.8rem}.content .home-button .arrow[data-v-eab73a98]{width:20px;height:20px;fill:currentColor;transition:transform .3s ease}@keyframes float-eab73a98{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}.animate-float[data-v-eab73a98]{animation:float-eab73a98 3s ease-in-out infinite}@media(max-width: 768px){.error-code[data-v-eab73a98]{font-size:8rem !important}.title[data-v-eab73a98]{font-size:1.5rem !important}.description[data-v-eab73a98]{font-size:1rem !important}}

.simple-settings[data-v-ca3dcd8c] {
    position: relative;
    padding: 2rem;
    background: #0a0a0a;
    min-height: 100vh;
    color: #e0e0e0;
}

/* 霓虹标题效果 */
.green-title[data-v-ca3dcd8c] {
    color: #00ff88;
    font-size: 2.5rem;
    margin: 2rem 0 3rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    position: relative;
    padding-bottom: 1rem;
}
.green-title[data-v-ca3dcd8c]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
}
.back-button[data-v-ca3dcd8c] {
    position: absolute;
    left: 1.5rem;
    top: 1.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.back-button[data-v-ca3dcd8c]:hover {
    background: rgba(0, 255, 136, 0.1);
    transform: translateX(-4px) scale(1.1);
}
.back-button .icon[data-v-ca3dcd8c] {
    fill: #00ff88;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.3));
}
.menu[data-v-ca3dcd8c] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.menu-item[data-v-ca3dcd8c] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
}
.menu-item[data-v-ca3dcd8c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
    transition: 0.5s;
}
.menu-item[data-v-ca3dcd8c]:hover {
    border-color: #00ff88;
    transform: translateX(10px);
    box-shadow: 0 8px 24px rgba(0, 255, 136, 0.1);
}
.menu-item[data-v-ca3dcd8c]:hover::before {
    left: 100%;
}
.icon[data-v-ca3dcd8c] {
    width: 28px;
    height: 28px;
    margin-right: 1.5rem;
    fill: #00ff88;
    transition: all 0.3s ease;
}
.menu-item:hover .icon[data-v-ca3dcd8c] {
    filter: drop-shadow(0 0 8px #00ff88);
    transform: scale(1.1);
}
.logout[data-v-ca3dcd8c]:hover {
    border-color: #ff4757;
    color: #ff4757;
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.1);
}
.logout:hover .icon[data-v-ca3dcd8c] {
    fill: #ff4757;
    filter: drop-shadow(0 0 8px #ff4757);
}

/* 响应式调整 */
@media (min-width: 640px) {
.menu-item[data-v-ca3dcd8c] {
        font-size: 1.2rem;
        padding: 2rem;
}
.icon[data-v-ca3dcd8c] {
        width: 32px;
        height: 32px;
}
}

/* 背景粒子效果 */
.simple-settings[data-v-ca3dcd8c]::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(
        circle at 50% 50%,
        rgba(0, 255, 136, 0.05) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: -1;
}


/* 新增编辑按钮样式 */
.value-container[data-v-1f271d81] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-edit[data-v-1f271d81] {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.3s;
}
.btn-edit[data-v-1f271d81]:hover {
    color: var(--primary-color);
}
.btn-password[data-v-1f271d81] {
    margin-top: 1.5rem;
    width: 100%;
    color: var(--text-dark);
    border: 1px solid #e2e8f0;
    cursor: pointer;
    border-radius: 8px;
    padding: 0.5rem;
    background: #dfe5ea;
    transition: all 0.2s ease;
}
.btn-password[data-v-1f271d81]:hover {
    background: #e2e8f0;
}
.btn-active[data-v-1f271d81] {
    background: var(--primary-color);
    color: var(--text-dark);
}
.form-actions[data-v-1f271d81] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.btn-confirm[data-v-1f271d81] {
    background: #f1f5f9;
    color: var(--text-dark);
    flex: 1;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}
.btn-cancel[data-v-1f271d81] {
    background: #f1f5f9;
    color: var(--text-dark);
    flex: 1;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}
.action-section[data-v-1f271d81] {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    margin-top: 1.5rem;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.action-section h3[data-v-1f271d81] {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-size: 1.2em;
}
.form-input[data-v-1f271d81] {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1.2rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    font-size: 1rem;
}
.form-input[data-v-1f271d81]:focus {
    border-color: var(--primary-color);
    outline: none;
}
.error-message[data-v-1f271d81] {
    color: #ef4444;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.success-message[data-v-1f271d81] {
    color: #10b981;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.btn-primary[data-v-1f271d81] {
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-primary[data-v-1f271d81]:hover {
    background: var(--secondary-color);
}
/* 新增CSS变量方便管理 */
[data-v-1f271d81]:root {
    --primary-color: #6366f1; /* 主色调改为柔和的紫色 */
    --secondary-color: #3b82f6; /* 辅色为蓝色 */
    --text-dark: #1e293b;
    --text-light: #64748b;
}
.profile-container[data-v-1f271d81] {
    max-width: 720px; /* 适当加宽 */
    margin: 2rem auto;
    padding: 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* 渐变背景 */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 添加装饰性元素 */
.profile-container[data-v-1f271d81]::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 120px;
    height: 120px;
    background: var(--primary-color);
    opacity: 0.1;
    border-radius: 30px;
    transform: rotate(45deg);
}
.avatar-container[data-v-1f271d81] {
    position: relative;
    width: 160px; /* 稍大尺寸 */
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.avatar-container[data-v-1f271d81]:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.avatar-overlay[data-v-1f271d81] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    font-size: 14px;
}
.avatar-container:hover .avatar-overlay[data-v-1f271d81] {
    opacity: 1;
}
.avatar[data-v-1f271d81] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    -o-object-fit: cover;
       object-fit: cover;
}
.user-info[data-v-1f271d81] {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    transition: transform 0.3s ease;
}
.user-info[data-v-1f271d81]:hover {
    transform: translateY(-5px);
}
.info-item[data-v-1f271d81] {
    margin: 1.2rem 0;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}
.info-item[data-v-1f271d81]:hover {
    background: #f1f5f9;
    transform: translateX(10px);
}
.label[data-v-1f271d81] {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.3px;
}
.value[data-v-1f271d81] {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1.1em;
}
.rating[data-v-1f271d81] {
    color: #f59e0b;
    position: relative;
    padding-left: 24px;
}
.rating[data-v-1f271d81]::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #f59e0b;
}
.return-menu-link[data-v-1f271d81] {
    margin-top: 2rem;
    padding: 0.8rem 2rem;
    background: var(--primary-color);
    color: rgb(19, 17, 17) !important;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.return-menu-link[data-v-1f271d81]:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3);
}
@media (max-width: 640px) {
.profile-container[data-v-1f271d81] {
        margin: 1rem;
        padding: 1.5rem;
        border-radius: 12px;
}
.avatar-container[data-v-1f271d81] {
        width: 120px;
        height: 120px;
}
.user-info[data-v-1f271d81] {
        padding: 1.5rem;
}
.info-item[data-v-1f271d81] {
        padding: 0.6rem;
}
}

/* 新增加载动画 */
@keyframes fadeIn-1f271d81 {
from {
        opacity: 0;
        transform: translateY(20px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
.profile-container[data-v-1f271d81] {
    animation: fadeIn-1f271d81 0.6s ease-out;
}


.matchground[data-v-3be8af2a] {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    min-height: 80vh;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
    border-radius: 30px;
    margin: 2rem auto;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.background-animation[data-v-3be8af2a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.particle[data-v-3be8af2a] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(40, 167, 69, 0.5);
    border-radius: 50%;
    animation: float-3be8af2a 15s infinite linear;
}
.particle[data-v-3be8af2a]:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}
.particle[data-v-3be8af2a]:nth-child(2) {
    left: 30%;
    animation-delay: 2s;
}
.particle[data-v-3be8af2a]:nth-child(3) {
    left: 50%;
    animation-delay: 4s;
}
.particle[data-v-3be8af2a]:nth-child(4) {
    left: 70%;
    animation-delay: 6s;
}
.particle[data-v-3be8af2a]:nth-child(5) {
    left: 90%;
    animation-delay: 8s;
}
@keyframes float-3be8af2a {
0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 0;
}
50% {
        opacity: 1;
}
100% {
        transform: translateY(1000%) rotate(360deg);
        opacity: 0;
}
}
.players-container[data-v-3be8af2a] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
    margin: 2rem 0;
    min-height: 400px;
}
.player-card[data-v-3be8af2a] {
    background: rgba(30, 30, 30, 0.8);
    border-radius: 20px;
    padding: 1.5rem;
    width: 280px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.1);
    margin: 0;
}
.player-card[data-v-3be8af2a]:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
}
.current-player[data-v-3be8af2a] {
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.2), rgba(30, 30, 30, 0.8));
}
.player-status[data-v-3be8af2a] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-indicator[data-v-3be8af2a] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
}
.status-indicator.online[data-v-3be8af2a] {
    background: #28a745;
    box-shadow: 0 0 10px #28a745;
}
.status-text[data-v-3be8af2a] {
    font-size: 0.8rem;
    color: #aaa;
}
.player-avatar[data-v-3be8af2a] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
    position: relative;
}
.avatar-loading[data-v-3be8af2a] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(40, 167, 69, 0.1);
    border-radius: 50%;
}
.loading-spinner[data-v-3be8af2a] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(40, 167, 69, 0.3);
    border-top: 4px solid #28a745;
    border-radius: 50%;
    animation: spin-3be8af2a 1s linear infinite;
}
.avatar-image[data-v-3be8af2a] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
    border: 3px solid #28a745;
    transition: all 0.5s ease;
    opacity: 0;
    transform: scale(0.8);
}
.avatar-image.loaded[data-v-3be8af2a] {
    opacity: 1;
    transform: scale(1);
}
.avatar-glow[data-v-3be8af2a] {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(40, 167, 69, 0.3), transparent 70%);
    animation: pulse-3be8af2a 2s infinite;
}
.player-info[data-v-3be8af2a] {
    margin-top: 1rem;
}
.player-name[data-v-3be8af2a] {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.player-stats[data-v-3be8af2a] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.stat[data-v-3be8af2a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #aaa;
    font-size: 0.9rem;
}
.vs-container[data-v-3be8af2a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0 1rem;
}
.vs-text[data-v-3be8af2a] {
    font-size: 2rem;
    font-weight: bold;
    color: #28a745;
    text-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}
.vs-line[data-v-3be8af2a] {
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #28a745, transparent);
}
.match-controls[data-v-3be8af2a] {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
    padding: 2rem 0;
}
.match-button[data-v-3be8af2a],
.invite-button[data-v-3be8af2a] {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    color: white;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.match-button[data-v-3be8af2a] {
    background: linear-gradient(145deg, #28a745, #1e7e34);
}
.invite-button[data-v-3be8af2a] {
    background: linear-gradient(145deg, #007bff, #0056b3);
}
.match-button.matching[data-v-3be8af2a] {
    animation: pulse-3be8af2a 2s infinite;
}
.button-content[data-v-3be8af2a] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.button-glow[data-v-3be8af2a] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-3be8af2a 3s infinite;
}
.modal-overlay[data-v-3be8af2a] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.modal-content[data-v-3be8af2a] {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.95));
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(40, 167, 69, 0.3);
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.2);
}
.modal-header[data-v-3be8af2a] {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(40, 167, 69, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.modal-header h3[data-v-3be8af2a] {
    color: #28a745;
    margin: 0;
}
.close-button[data-v-3be8af2a] {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.close-button[data-v-3be8af2a]:hover {
    color: #fff;
}
.modal-body[data-v-3be8af2a] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(80vh - 80px);
}
.friends-grid[data-v-3be8af2a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;
    gap: 1rem;
    padding-right: 0.5rem;
    /* 新增滚动设置 */
    max-height: 420px; /* (100px行高 + 1rem间隙)*4 */
    overflow-y: auto;
}
.friend-card[data-v-3be8af2a] {
    background: rgba(40, 40, 40, 0.6);
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(40, 167, 69, 0.2);
    height: 100%;
    min-height: 100px;
}
.friend-card[data-v-3be8af2a]:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.4);
}
.friend-avatar[data-v-3be8af2a] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.friend-avatar img[data-v-3be8af2a] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.friend-info[data-v-3be8af2a] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.friend-info h4[data-v-3be8af2a] {
    color: #fff;
    margin: 0 0 0.3rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-status[data-v-3be8af2a] {
    font-size: 0.8rem;
    color: #28a745;
}
.invite-action[data-v-3be8af2a] {
    background: #28a745;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.invite-action[data-v-3be8af2a]:hover {
    background: #218838;
    transform: scale(1.05);
}
.game-invitation[data-v-3be8af2a] {
    text-align: center;
}
.inviter-profile[data-v-3be8af2a] {
    margin-bottom: 2rem;
}
.inviter-avatar[data-v-3be8af2a] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    position: relative;
}
.inviter-avatar img[data-v-3be8af2a] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
    border: 3px solid #28a745;
}
.invite-message[data-v-3be8af2a] {
    color: #aaa;
    margin: 0.5rem 0;
}
.invitation-actions[data-v-3be8af2a] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.accept-button[data-v-3be8af2a],
.reject-button[data-v-3be8af2a] {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.accept-button[data-v-3be8af2a] {
    background: #28a745;
    color: white;
}
.reject-button[data-v-3be8af2a] {
    background: #dc3545;
    color: white;
}
.invitation-timer[data-v-3be8af2a] {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
}
.timer-progress[data-v-3be8af2a] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #28a745, #1e7e34);
    transition: width 1s linear;
}
.timer-text[data-v-3be8af2a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}
.toast-container[data-v-3be8af2a] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
}
.toast[data-v-3be8af2a] {
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: slideUp-3be8af2a 0.3s ease,fadeOut-3be8af2a 0.3s ease 2.7s;
}
.toast.success[data-v-3be8af2a] {
    background: rgba(40, 167, 69, 0.9);
}
.toast.error[data-v-3be8af2a] {
    background: rgba(220, 53, 69, 0.9);
}
.toast.info[data-v-3be8af2a] {
    background: rgba(13, 110, 253, 0.9);
}
@keyframes spin-3be8af2a {
0% {
        transform: rotate(0deg);
}
100% {
        transform: rotate(360deg);
}
}
@keyframes pulse-3be8af2a {
0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
}
70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
}
100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
}
}
@keyframes shine-3be8af2a {
0% {
        transform: translateX(-100%) rotate(45deg);
}
100% {
        transform: translateX(100%) rotate(45deg);
}
}
@keyframes slideUp-3be8af2a {
from {
        transform: translate(-50%, 100%);
        opacity: 0;
}
to {
        transform: translate(-50%, 0);
        opacity: 1;
}
}
@keyframes fadeOut-3be8af2a {
from {
        opacity: 1;
}
to {
        opacity: 0;
}
}
@media (max-width: 768px) {
.matchground[data-v-3be8af2a] {
        width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        padding: 1rem;
}
.players-container[data-v-3be8af2a] {
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
        margin: 1rem 0;
}
.player-card[data-v-3be8af2a] {
        width: 100%;
        max-width: 300px;
}
.vs-container[data-v-3be8af2a] {
        display: none;
}
.match-controls[data-v-3be8af2a] {
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
}
.match-button[data-v-3be8af2a],
    .invite-button[data-v-3be8af2a] {
        width: 100%;
        max-width: 300px;
}
.friends-grid[data-v-3be8af2a] {
        grid-template-columns: 1fr; /* 单列显示 */
        grid-auto-rows: 80px; /* 减小行高 */
        max-height: 360px; /* (80px行高 + 1rem间隙)*4 */
}
.friend-card[data-v-3be8af2a] {
        height: 80px;
        min-height: auto;
}
.friend-avatar[data-v-3be8af2a] {
        width: 40px;
        height: 40px;
}
.invite-action[data-v-3be8af2a] {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
}
}


.game-map[data-v-e47ca740] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
canvas[data-v-e47ca740] {
    display: block;
}

/* 退出按钮样式 */
.exit-button-container[data-v-e47ca740] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}
.exit-button[data-v-e47ca740] {
    background: rgba(0, 0, 0, 0.5);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 0.5rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.exit-button[data-v-e47ca740]:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    background: rgba(0, 255, 136, 0.2);
}
.exit-button i[data-v-e47ca740] {
    font-size: 1rem;
}

/* 退出确认弹窗样式 */
.exit-confirm-overlay[data-v-e47ca740] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 110;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.exit-confirm-modal[data-v-e47ca740] {
    background: #1a1a1a;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 77, 77, 0.3);
    animation: fadeIn-e47ca740 0.3s ease;
}
.exit-confirm-modal h3[data-v-e47ca740] {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #ff4d4d;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}
.exit-confirm-modal p[data-v-e47ca740] {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    color: #ddd;
}
.confirm-buttons[data-v-e47ca740] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.confirm-button[data-v-e47ca740] {
    padding: 0.8rem 2rem;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 120px;
}
.confirm-button[data-v-e47ca740]:hover {
    transform: scale(1.05);
}
.confirm-button.confirm-yes[data-v-e47ca740] {
    background: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}
.confirm-button.confirm-yes[data-v-e47ca740]:hover {
    background: rgba(255, 77, 77, 0.2);
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.5);
}
.confirm-button.confirm-no[data-v-e47ca740] {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}
.confirm-button.confirm-no[data-v-e47ca740]:hover {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}
@keyframes fadeIn-e47ca740 {
from {
        opacity: 0;
        transform: translateY(-20px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}


.playground[data-v-d9a9b474] {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


div.result-board[data-v-db7e8a10] {
    position: absolute;
    top: 30vh;
    left: 35vw;
    width: 30vw;
    height: 30vh;
    background-color: rgba(0, 0, 0, 0.5);
}
div.result-board-text[data-v-db7e8a10] {
    text-align: center;
    color: white;
    font-size: 50px;
    font-weight: 600;
    font-style: italic;
    padding-top: 5vh;
}
div.result-board-btn[data-v-db7e8a10] {
    padding-top: 7vh;
    text-align: center;
}


.levels-container[data-v-bf8a6c9c] {
    min-height: 100vh;
    background: #0a0a0a;
    color: #e0e0e0;
    padding: 2rem;
    position: relative;
}
.level-header[data-v-bf8a6c9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.level-title[data-v-bf8a6c9c] {
    color: #00ff88;
    font-size: 2.5rem;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    margin: 0;
}
.back-button[data-v-bf8a6c9c] {
    background: rgba(255, 255, 255, 0.05);
    color: #00ff88;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.back-button[data-v-bf8a6c9c]:hover {
    background: rgba(0, 255, 136, 0.1);
    transform: scale(1.05);
}

/* 进度指示器样式 */
.progress-tracker[data-v-bf8a6c9c] {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 3rem auto;
    max-width: 800px;
    padding: 0 4rem;
}
.progress-line[data-v-bf8a6c9c] {
    position: absolute;
    top: 50%;
    left: 6rem;
    right: 6rem;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 1;
}
.progress-node[data-v-bf8a6c9c] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2a2a2a;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}
.progress-node.unlocked[data-v-bf8a6c9c] {
    background: #444;
    border-color: #00ff88;
    color: #00ff88;
}
.progress-node.active[data-v-bf8a6c9c] {
    background: #00ff88;
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}
.progress-node.current[data-v-bf8a6c9c] {
    animation: pulse-bf8a6c9c 2s infinite;
}

/* 关卡卡片样式 */
.level-cards[data-v-bf8a6c9c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    margin-left: 10rem;
    margin-right: 10rem;
}
.level-card[data-v-bf8a6c9c] {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 450px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.level-card[data-v-bf8a6c9c]:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.level-card.locked[data-v-bf8a6c9c] {
    filter: grayscale(0.8);
    opacity: 0.7;
}
.level-card.completed[data-v-bf8a6c9c] {
    border: 2px solid #00ff88;
}
.card-content[data-v-bf8a6c9c] {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.level-number[data-v-bf8a6c9c] {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 0.5rem;
}
.level-name[data-v-bf8a6c9c] {
    font-size: 1.5rem;
    color: #00ff88;
    margin: 0 0 0.8rem 0;
}
.level-description[data-v-bf8a6c9c] {
    font-size: 1rem;
    color: #ddd;
    margin-bottom: 1rem;
    flex: 1;
}
.level-stats[data-v-bf8a6c9c] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.stat[data-v-bf8a6c9c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #aaa;
}
.stat i[data-v-bf8a6c9c] {
    color: #00ff88;
}
.level-status[data-v-bf8a6c9c] {
    margin-bottom: 1rem;
}
.status-badge[data-v-bf8a6c9c] {
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.status-badge.completed[data-v-bf8a6c9c] {
    background: rgba(0, 255, 136, 0.1);
    color: #00ff88;
}
.status-badge.unlocked[data-v-bf8a6c9c] {
    background: rgba(255, 174, 0, 0.1);
    color: #ffae00;
}
.status-badge.locked[data-v-bf8a6c9c] {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
}
.enter-button[data-v-bf8a6c9c] {
    margin-top: auto;
    background: linear-gradient(90deg, #00ff88, #00ccff);
    color: #000;
    border: none;
    padding: 0.8rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.enter-button[data-v-bf8a6c9c]:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}
.enter-button[data-v-bf8a6c9c]:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
}
.level-image[data-v-bf8a6c9c] {
    height: 180px;
    position: relative;
    overflow: hidden;
}
.level-image img[data-v-bf8a6c9c] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.5s ease;
}
.level-card:hover .level-image img[data-v-bf8a6c9c] {
    transform: scale(1.1);
}
.overlay[data-v-bf8a6c9c] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* 关卡弹窗样式 */
.level-modal-overlay[data-v-bf8a6c9c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.level-modal[data-v-bf8a6c9c] {
    background: #1a1a1a;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}
.modal-header[data-v-bf8a6c9c] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header h2[data-v-bf8a6c9c] {
    color: #00ff88;
    margin: 0;
}
.close-button[data-v-bf8a6c9c] {
    background: none;
    border: none;
    color: #ccc;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}
.close-button[data-v-bf8a6c9c]:hover {
    color: #00ff88;
}
.modal-body[data-v-bf8a6c9c] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.level-image-large[data-v-bf8a6c9c] {
    height: 250px;
    border-radius: 8px;
    overflow: hidden;
}
.level-image-large img[data-v-bf8a6c9c] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.level-details[data-v-bf8a6c9c] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.level-description-full[data-v-bf8a6c9c] {
    line-height: 1.6;
    color: #ddd;
}
.level-requirements[data-v-bf8a6c9c], .level-rewards[data-v-bf8a6c9c] {
    background: rgba(255, 255, 255, 0.05);
    padding: A1.5rem;
    border-radius: 8px;
}
.level-requirements h4[data-v-bf8a6c9c], .level-rewards h4[data-v-bf8a6c9c] {
    color: #00ff88;
    margin-top: 0;
}
.level-requirements ul[data-v-bf8a6c9c], .level-rewards ul[data-v-bf8a6c9c] {
    padding-left: 1.5rem;
    color: #ddd;
}
.level-requirements li[data-v-bf8a6c9c], .level-rewards li[data-v-bf8a6c9c] {
    margin-bottom: 0.5rem;
}
.modal-footer[data-v-bf8a6c9c] {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
.start-button[data-v-bf8a6c9c] {
    background: linear-gradient(90deg, #00ff88, #00ccff);
    color: #000;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}
.start-button[data-v-bf8a6c9c]:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
.cancel-button[data-v-bf8a6c9c] {
    background: rgba(255, 255, 255, 0.1);
    color: #ddd;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.cancel-button[data-v-bf8a6c9c]:hover {
    background: rgba(255, 255, 255, 0.15);
}
@keyframes pulse-bf8a6c9c {
0% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}
70% {
        box-shadow: 0 0 0 15px rgba(0, 255, 136, 0);
}
100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
}
}
@media (min-width: 768px) {
.modal-body[data-v-bf8a6c9c] {
        flex-direction: row;
}
.level-image-large[data-v-bf8a6c9c] {
        flex: 1;
        height: auto;
}
.level-details[data-v-bf8a6c9c] {
        flex: 1;
}
}

/* 游戏视图样式 */
.game-view-container[data-v-bf8a6c9c] {
    min-height: 100vh;
    height: 100vh;
    background: #0a0a0a;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.game-header[data-v-bf8a6c9c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    z-index: 10;
}
.level-info[data-v-bf8a6c9c] {
    display: flex;
    flex-direction: column;
}
.level-info h2[data-v-bf8a6c9c] {
    color: #00ff88;
    margin: 0;
}
.level-stats-small[data-v-bf8a6c9c] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.exit-button[data-v-bf8a6c9c] {
    background: rgba(255, 255, 255, 0.05);
    color: #ff4d4d;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.exit-button[data-v-bf8a6c9c]:hover {
    background: rgba(255, 77, 77, 0.1);
    transform: scale(1.05);
}
.game-content[data-v-bf8a6c9c] {
    flex: 1;
    position: absolute;
    top: 60px; /* 根据header高度调整 */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
}
.placeholder-game[data-v-bf8a6c9c] {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #aaa;
    background: #121212;
}


/* 赛博朋克主题 */
.cyberpunk-container[data-v-521ddcb8] {
    background: #0a0a0a;
    padding: 1rem; /* 减少内边距 */
    position: fixed; /* 改为固定定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 连接状态指示 */
.connection-status[data-v-521ddcb8] {
    position: relative;
    color: #0ff;
    font-family: 'Courier New', monospace;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid #0ff;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.neon-pulse[data-v-521ddcb8] {
    width: 12px;
    height: 12px;
    background: #0ff;
    border-radius: 50%;
    animation: neonPulse-521ddcb8 1.5s infinite;
}
.cyber-chat[data-v-521ddcb8] {
    display: flex;
    grid-template-columns: 300px 1fr;
    gap: 0.5rem;
    height: 80vh;
    flex-grow: 1;
    padding: 1rem;
    background: #0a0a0a;
}
/* 用户列表 */
.neon-userlist[data-v-521ddcb8] {
    width: 280px;
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
    border: 1px solid #4caf50;
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.2), inset 0 0 15px rgba(76, 175, 80, 0.1);
    padding: 1.5rem;
    border-radius: 8px;
    overflow-y: auto;
    position: relative;
}
/* 分栏分隔线增强 */
.neon-userlist[data-v-521ddcb8]::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #4caf50 50%, transparent 100%);
    box-shadow: 0 0 15px #4caf50;
}
.list-title[data-v-521ddcb8] {
    color: #fff;
    text-shadow: 0 0 10px #7028e4;
    margin-bottom: 1.5rem;
}
/* 消息区域自动滚动 */
.matrix-messages[data-v-521ddcb8] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* 输入框区域固定高度 */
.cyber-input[data-v-521ddcb8] {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(112, 40, 228, 0.5);
    display: flex;
    gap: 1rem;
    justify-content: flex-end; /* 新增右对齐 */
}
.user-card {
&[data-v-521ddcb8] {
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    padding: 0.8rem;
    }
.user-info[data-v-521ddcb8] {
        flex: 1;
        min-width: 0;
}
.agent-id[data-v-521ddcb8] {
        font-size: 0.9rem;
        color: #888;
}
&.is-self[data-v-521ddcb8] {
        background: rgba(76, 175, 80, 0.05);
        border: 1px solid #af4ca3;
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}
.agent-name[data-v-521ddcb8] {
        color: #4caf50;
        text-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}
}
.user-card[data-v-521ddcb8]:hover {
    transform: translateX(5px);
}

/* 新增滚动条样式 */
[data-v-521ddcb8]::-webkit-scrollbar {
    width: 8px;
}
[data-v-521ddcb8]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
[data-v-521ddcb8]::-webkit-scrollbar-thumb {
    background: #4caf50;
    border-radius: 4px;
}
.self-icon[data-v-521ddcb8] {
    color: #4caf50;
    margin-left: 8px;
    filter: drop-shadow(0 0 3px #4caf50);
    position: relative;
}
.user-card.active {
.hologram-avatar[data-v-521ddcb8] {
        filter: grayscale(0) contrast(1.4);
}
.neon-border[data-v-521ddcb8] {
        background: conic-gradient(from 0deg, #00ffff 0%, #4caf50 50%, #7028e4 100%);
        animation-duration: 1.5s;
}
}
.avatar-frame[data-v-521ddcb8] {
    position: relative;
    margin-right: 1rem;
    width: 48px;
    height: 48px;
}
/* 聊天窗口头像尺寸调整 */
.target-avatar[data-v-521ddcb8] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #4caf50;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
    margin-right: 1.5rem;
}
.hologram-avatar[data-v-521ddcb8] {
    width: 40px;
    /* 实际显示尺寸 */
    height: 40px;
    border-radius: 50%;
    filter: grayscale(0.3) contrast(1.2);
    position: absolute;
    left: 4px;
    top: 4px;
    z-index: 2;
}

/* 优化后的头像样式 */
.avatar-frame[data-v-521ddcb8] {
    position: relative;
    margin-right: 1rem;
    width: 48px;
    height: 48px;
}

/* 全息头像尺寸优化 */
.hologram-avatar[data-v-521ddcb8] {
    width: 40px; /* 实际显示尺寸 */
    height: 40px;
    border-radius: 50%;
    filter: grayscale(0.3) contrast(1.2);
    position: absolute;
    left: 4px;
    top: 4px;
    z-index: 2;
}

/* 霓虹边框重制 */
.neon-border[data-v-521ddcb8] {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #4caf50 0%, #7028e4 50%, #4caf50 100%);
    animation: borderFlow-521ddcb8 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 2px;
}
/* 聊天窗口 */
.cyber-window {
&[data-v-521ddcb8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid #7028e4;
    box-shadow: 0 0 40px rgba(112, 40, 228, 0.2), inset 0 0 20px rgba(112, 40, 228, 0.1);
    border-radius: 8px;
    overflow: hidden;
    }
.target-name[data-v-521ddcb8] {
        font-size: 0.9rem;
        color: #888888;
}
}
.cyber-button[data-v-521ddcb8] {
    background: linear-gradient(45deg, #7028e4, #4caf50);
    border: 1px solid #00ff87;
    color: white;
    padding: 12px 20px;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}
.button-glitch[data-v-521ddcb8] {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 75%
    );
    animation: glitch-521ddcb8 2s infinite linear;
}
@keyframes glitch-521ddcb8 {
0% {
        transform: translateX(-100%);
}
100% {
        transform: translateX(100%);
}
}

/* 调整标题栏布局 */
.chat-header[data-v-521ddcb8] {
    display: flex;
    align-items: center;
    padding: 15px;
}
.header-glow[data-v-521ddcb8] {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 200%;
    height: 100px;
    background: linear-gradient(
        90deg,
        rgba(112, 40, 228, 0) 0%,
        rgba(112, 40, 228, 0.4) 50%,
        rgba(112, 40, 228, 0) 100%
    );
    animation: headerGlow-521ddcb8 6s infinite;
}

/* 消息气泡 */
.message-bubble[data-v-521ddcb8] {
    max-width: 65%;
    padding: 1rem;
    margin: 1rem;
    border-radius: 15px;
    position: relative;
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.message-bubble.sent[data-v-521ddcb8] {
    background: linear-gradient(45deg, #4caf50 0%, #2d7a32 100%);
    margin-left: auto;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
}
.message-bubble.received[data-v-521ddcb8] {
    background: linear-gradient(45deg, #7028e4 0%, #4a1e9e 100%);
    box-shadow: 0 5px 15px rgba(112, 40, 228, 0.4);
}
.message-content[data-v-521ddcb8] {
    color: #fff;
    font-size: 1.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 输入框 */
.neon-input[data-v-521ddcb8] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #4caf50;
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    flex: 1; /* 输入框占据剩余空间 */
    max-width: 85%; /* 限制最大宽度 */
}
.neon-input[data-v-521ddcb8]:focus {
    box-shadow: 0 0 15px #4caf50;
}
.glow-button[data-v-521ddcb8] {
    background: linear-gradient(45deg, #4caf50 0%, #7028e4 100%);
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-left: auto; /* 按钮始终靠右 */
    min-width: 100px; /* 固定最小宽度 */
}
.button-rays[data-v-521ddcb8] {
    position: absolute;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 75%
    );
    animation: rays-521ddcb8 2s infinite linear;
}

/* 关键帧动画 */
@keyframes neonPulse-521ddcb8 {
0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
}
50% {
        opacity: 1;
        transform: scale(1.2);
}
0% {
        opacity: 0.4;
}
50% {
        opacity: 1;
}
100% {
        opacity: 0.4;
}
}
@keyframes borderFlow-521ddcb8 {
0% {
        transform: rotate(0deg);
        opacity: 0.8;
}
50% {
        opacity: 1;
}
100% {
        transform: rotate(360deg);
        opacity: 0.8;
}
}
@keyframes headerGlow-521ddcb8 {
0% {
        transform: translateX(-50%) rotate(0deg);
}
100% {
        transform: translateX(-50%) rotate(360deg);
}
}
@keyframes rays-521ddcb8 {
0% {
        transform: translateX(-50%);
}
100% {
        transform: translateX(50%);
}
}


/* 分页容器优化 */
.pagination-wrapper[data-v-07ce9993] {
    margin-top: auto; /* 关键属性，使分页始终在底部 */
    padding: 16px 0;
    border-top: 1px solid rgba(106, 17, 255, 0.2);
    background: rgba(30, 30, 40, 0.8);
    position: sticky;
    bottom: 0;
}
.pagination[data-v-07ce9993] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.page-button[data-v-07ce9993] {
    background: rgba(106, 17, 255, 0.1);
    border: 1px solid #6a11ff;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.page-button[data-v-07ce9993]:hover:not(:disabled) {
    background: rgba(106, 17, 255, 0.3);
    box-shadow: 0 0 12px rgba(106, 17, 255, 0.2);
}
.page-button[data-v-07ce9993]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.page-indicator[data-v-07ce9993] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}
.total-count[data-v-07ce9993] {
    text-align: center;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}
/* 主容器 */
.friend-container[data-v-07ce9993] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
    height: 100vh;
    padding: 24px;
    background: #0a0a0a;
}

/* 主列容器 */
.friend-list[data-v-07ce9993] {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #1a1a2a 0%, #13131a 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 0 40px rgba(106, 17, 255, 0.1);
    border: 1px solid rgba(106, 17, 255, 0.15);
}

/* 请求列容器 */
.friend-requests[data-v-07ce9993] {
    background: linear-gradient(145deg, #1a1a2a 0%, #13131a 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 0 40px rgba(106, 17, 255, 0.1);
    border: 1px solid rgba(106, 17, 255, 0.15);
}

/* 头部样式 */
.header[data-v-07ce9993] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(106, 17, 255, 0.2);
    position: relative;
}
.back-btn[data-v-07ce9993] {
    position: absolute;
    left: -10px;
    top: 45%;
    transform: translateY(-50%);
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.back-btn[data-v-07ce9993]:hover {
    background: rgba(239, 224, 224, 0.094);
    transform: translateY(-50%) translateX(-3px);
}
.header h3[data-v-07ce9993] {
    margin-left: 80px; /* 为返回按钮腾出空间 */
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    position: relative;
    padding-left: 28px;
    text-shadow: 0 0 12px rgba(106, 17, 255, 0.3);
}
.header h3[data-v-07ce9993]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, #6a11ff 0%, #4b7dff 100%);
    border-radius: 2px;
}

/* 搜索框美化 */
[data-v-07ce9993] .el-input__wrapper {
    background: rgba(40, 40, 55, 0.8) !important;
    border: 1px solid #4b7dff !important;
    box-shadow: 0 0 16px rgba(75, 125, 255, 0.2) !important;
    border-radius: 12px;
    transition: all 0.3s ease;
}
[data-v-07ce9993] .el-input__inner {
    color: #fff !important;
}

/* 按钮组优化 */
.actions[data-v-07ce9993] {
    display: flex;
    gap: 12px;
    align-items: center;
}
[data-v-07ce9993] .el-button {
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-v-07ce9993] .el-button--primary {
    background: linear-gradient(45deg, #6a11ff 0%, #4b7dff 100%) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(106, 17, 255, 0.3) !important;
}

/* 好友列表项 */
.friend-item {
&[data-v-07ce9993] {
    flex: 1;
    overflow-y: auto; /* 添加滚动条 */
    display: flex;
    align-items: center;
    padding: 18px;
    margin: 12px 0;
    background: rgba(40, 40, 55, 0.6);
    border-radius: 14px;
    border: 1px solid rgba(106, 17, 255, 0.2);
    transition: all 0.3s ease;
    }
.friend-info[data-v-07ce9993] {
        flex: 1;
        margin-left: 16px;
        color: #fff;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        gap: 4px;
}
.delete-icon[data-v-07ce9993] {
        color: #ff6b6b;
        cursor: pointer;
        transition: color 0.3s ease;
        font-size: 1.2rem;
        margin-left: 16px;
}
}
.friend-item[data-v-07ce9993]:hover {
    transform: translateX(8px);
    box-shadow: 0 0 24px rgba(106, 17, 255, 0.2);
    background: rgba(60, 60, 75, 0.6);
}
.request-card {
&[data-v-07ce9993] {
    background: linear-gradient(145deg, #1a1a2a 0%, #13131a 100%) !important;
    border: 1px solid rgba(106, 17, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }
[data-v-07ce9993] .el-card__body {
        background: transparent;
        color: #fff;
}
}

/* 请求卡片 */
.request-item {
&[data-v-07ce9993] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: rgba(40, 40, 55, 0.6);
    border-radius: 12px;
    margin: 10px 0;
    transition: all 0.3s ease;
    }
.request-info {
&[data-v-07ce9993] {
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 1;
        }
span[data-v-07ce9993] {
            color: #e0e0ff;
            font-size: 14px;
}
}
.request-actions[data-v-07ce9993] {
        display: flex;
        gap: 8px;
        margin-left: auto;
}
}
.request-actions .el-button[data-v-07ce9993] {
    margin-left: 10px;
}
.request-item[data-v-07ce9993]:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(106, 17, 255, 0.2);
}

/* 响应式布局 */
@media (max-width: 768px) {
.friend-container[data-v-07ce9993] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
        padding: 16px;
}
.friend-list[data-v-07ce9993],
    .friend-requests[data-v-07ce9993] {
        min-height: 50vh;
}
.header[data-v-07ce9993] {
        flex-direction: column;
        gap: 16px;
}
.actions[data-v-07ce9993] {
        width: 100%;
        flex-wrap: wrap;
}
}

/* 动态滚动条 */
[data-v-07ce9993]::-webkit-scrollbar {
    width: 8px;
    background: rgba(18, 18, 28, 0.8);
}
[data-v-07ce9993]::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #6a11ff 0%, #4b7dff 100%);
    border-radius: 4px;
}

/* 霓虹光效 */
@keyframes neonGlow-07ce9993 {
0% {
        opacity: 0.8;
}
50% {
        opacity: 1;
}
100% {
        opacity: 0.8;
}
}
.el-button--primary[data-v-07ce9993] {
    animation: neonGlow-07ce9993 2s infinite;
}