/* 通用维度分类 LOGO 样式 */

/* 基础维度 LOGO 样式 */
.dimension-logo.basic-logo {
    display: inline-flex; /* 修改：使用 inline-flex 布局 */
    align-items: center; /* 新增：垂直居中内部元素 (span) */
    justify-content: center; /* 新增：水平居中内部元素 (span) */
    padding: 0 86px; /* 修改：进一步增加水平内边距 (约增加20%) */
    height: 50px; /* 修改：略微增加高度 */
    /* line-height: 50px; */ /* 移除：Flexbox 会处理垂直居中 */
    line-height: normal; /* 新增：确保明确的line-height，与其他LOGO类型一致 */
    background-color: #778899; /* 修改：淡墨兰 (LightSlateGray) */
    color: #ffffff; /* 白色文字 */
    font-family: Arial, sans-serif; /* 修改：字体统一为悬浮条字体 */
    font-size: 28px; /* 修改：增大字体大小 (14px * 2) */
    border-radius: 25px; /* 修改：减小圆角值，使其更接近圆角矩形 */
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 防止文字换行 */
    /* 可以添加阴影、边框等效果 */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    /* border: 1px solid #004d00; */
}

/* 进阶维度 LOGO 样式 */
.dimension-logo.advanced-logo {
    display: inline-flex; /* 使用 inline-flex 布局 */
    align-items: center; /* 垂直居中内部元素 (span) */
    justify-content: center; /* 水平居中内部元素 (span) */
    padding: 0 86px; /* 修改：使其与 basic-logo 的 padding 一致 */
    /* width: 300px; */ /* 新增：设置固定宽度以尝试匹配下方文字 -> 移除固定宽度 */
    height: 50px; /* 高度与 basic-logo 一致 */
    line-height: normal; /* 新增：确保明确的line-height，与basic-logo一致 */
    background-color: #525860; /* 修改：进一步加深灰色 */
    color: #ffffff; /* 白色文字 */
    font-family: Arial, sans-serif; /* 与 basic-logo 一致 */
    font-size: 28px; /* 与 basic-logo 一致 */
    border-radius: 25px; /* 与 basic-logo 一致 */
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 深度维度 LOGO 样式 */
.dimension-logo.deep-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 86px;
    height: 50px;
    line-height: normal;
    background-image: linear-gradient(145deg, #343a40, #161a1d); /* 修改：从炭黑到深灰的渐变 */
    font-family: Arial, sans-serif;
    font-size: 28px;
    border-radius: 25px;
    text-align: center;
    white-space: nowrap;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); */ /* 移除阴影，保持风格统一 */
}

/* 新增：确保金色文字应用在内部的span上，并覆盖原有 color 规则 */
.dimension-logo.deep-logo span {
    color: #FFD700; /* 确认：使用明亮的金色 (Gold) */
}

/* GVIP 专享维度 LOGO 样式 */
.dimension-logo.gvip-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 86px;
    height: 50px;
    line-height: normal;
    background-color: #000000; /* 黑底 */
    font-family: Arial, sans-serif;
    font-size: 28px;
    border-radius: 25px;
    text-align: center;
    white-space: nowrap;
}

.dimension-logo.gvip-logo span {
    color: #1e90ff; /* 悬浮条高亮蓝色 (DodgerBlue) */
    font-weight: bold;
    font-size: 26px; /* 调整字号 */
}

/* 浮桶镜像维度 LOGO 样式 - 高级蓝金渐变设计（与第三屏底部样式一致） */
.dimension-logo.mirror-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 86px;
    height: 50px;
    line-height: normal;
    /* 高级蓝金渐变背景 */
    background: linear-gradient(
        135deg, 
        #2c3e50 0%,     /* 深灰蓝 */
        #34495e 25%,    /* 中灰蓝 */
        #5d6d7e 50%,    /* 灰蓝色 */
        #85929e 75%,    /* 浅灰蓝 */
        #aab7b8 100%    /* 银灰色 */
    );
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.8px;
    border-radius: 25px;
    text-align: center;
    white-space: nowrap;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* 高级立体效果 */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(93, 109, 126, 0.4);
    
    animation: mirror-logo-breathing 3s ease-in-out infinite;
}

.dimension-logo.mirror-logo span {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 呼吸动画 */
@keyframes mirror-logo-breathing {
    0% {
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            inset 0 -2px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(93, 109, 126, 0.4);
    }
    50% {
        box-shadow: 
            0 0 0 2px rgba(255, 255, 255, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.6),
            inset 0 -2px 0 rgba(0, 0, 0, 0.1),
            0 8px 25px rgba(0, 0, 0, 0.5),
            0 0 25px rgba(93, 109, 126, 0.6),
            0 0 35px 4px rgba(171, 183, 184, 0.4);
    }
    100% {
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            inset 0 -2px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(93, 109, 126, 0.4);
    }
}

/* 悬停效果 */
.dimension-logo.mirror-logo:hover {
    background: linear-gradient(
        135deg, 
        #34495e 0%,
        #5d6d7e 25%,
        #85929e 50%,
        #aab7b8 75%,
        #d5dbdb 100%
    );
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
    box-shadow: 
        0 0 0 2px rgba(255, 255, 255, 0.4),
        inset 0 3px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        0 8px 25px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(93, 109, 126, 0.8),
        0 0 45px 6px rgba(171, 183, 184, 0.5);
}

/* 其他分类 LOGO 样式可以后续添加 */
/* .dimension-logo.exclusive-logo { ... } */