/* =========================================
   PAGE: 引擎对比 (Compare)
   ========================================= */

/* 网格布局容器 */
.compare-container {
    max-width: 1200px;
    margin: 0 auto 100px auto;
    padding: 0 20px;
    display: flex;
    gap: 30px; /* 卡片之间的间距 */
}

/* 通用卡片样式 */
.engine-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden; /* 防止内容溢出圆角 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex: 1; /* 平均分配宽度 */
    flex-direction: column; /* 让内容垂直排列 */
}

.engine-card:hover {
    transform: translateY(-5px); /* 悬停轻微上浮 */
    background: rgba(255, 255, 255, 0.06);
}

/* 卡片头部 */
.card-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: white;
}

/* 卡片内容区 */
.card-body {
    padding: 25px;
    flex-grow: 1; /* 确保卡片高度拉伸一致 */
}

/* 技术参数块 */
.tech-spec {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    align-items: center;

}

.tech-spec p {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.tech-spec strong {
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
}

/* 描述文本 */
.desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    text-align: justify;
}

/* --- 各个引擎的主题色定制 --- */

/* 1. Vocaloid: 经典初音绿 */
.vocaloid { border-top: 3px solid #39C5BB; }

/* 2. UTAU: 重音泰特红 */
.utau { border-top: 3px solid #FF0045; }

/* 3. CeVIO: 可不的淡紫色/粉色 */
.cevio { border-top: 3px solid #e6e6df; }

/* 4. SynthV: 科技深蓝 */
.synthv { border-top: 3px solid #a2ff40; }