/* ================================================================
   语言对比 / 数据库对比页共享（lang-compare.html / db-compare.html）
   源：pages.css（原第 2421-2899 行区间内容，按需拆分）
   ================================================================ */

/* 对比表 */
.lc-table-wrap, .dc-table-wrap, .lc-matrix-wrap, .dc-matrix-wrap {
    overflow-x: auto;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
}
.lc-table, .dc-table, .lc-matrix-table, .dc-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
}
.lc-table th, .dc-table th, .lc-matrix-table th, .dc-matrix-table th {
    padding: var(--space-12) var(--space-16);
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}
.lc-table td, .dc-table td, .lc-matrix-table td, .dc-matrix-table td {
    padding: var(--space-10) var(--space-16);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: var(--lh-base);
    vertical-align: middle;
}
.lc-table tbody tr, .dc-table tbody tr {
    transition: background-color var(--transition-fast);
}
.lc-table tbody tr:hover, .dc-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}
.lc-table tbody tr:last-child td, .dc-table tbody tr:last-child td,
.lc-matrix-table tr:last-child td, .dc-matrix-table tr:last-child td {
    border-bottom: none;
}
/* 语言 / 数据库名单元格 */
.lc-table-lang, .dc-table-db {
    display: inline-flex;
    align-items: center; gap: var(--space-8);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.lc-table-lang-icon, .dc-table-db-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-8);
    font-size: var(--fs-11);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
}
/* 品牌色（表头图标） */
.lc-table-lang-icon--js     { background: #eab308; color: #1a2e05; }
.lc-table-lang-icon--ts     { background: #3178c6; }
.lc-table-lang-icon--java   { background: #ea580c; }
.lc-table-lang-icon--python { background: #3776ab; }
.lc-table-lang-icon--rust   { background: #b7410e; }
.lc-table-lang-icon--go     { background: #00add8; }
.lc-table-lang-icon--csharp { background: #7c3aed; }
.lc-table-lang-icon--kotlin { background: #7f52ff; }
.lc-table-lang-icon--swift  { background: #f05138; }
.lc-table-lang-icon--php    { background: #777bb4; }
.dc-table-db-icon.dc-brand--mysql         { background: #4479a1; }
.dc-table-db-icon.dc-brand--postgresql    { background: #336791; }
.dc-table-db-icon.dc-brand--mariadb       { background: #00838a; }
.dc-table-db-icon.dc-brand--sqlite        { background: #003b57; }
.dc-table-db-icon.dc-brand--redis         { background: #dc382d; }
.dc-table-db-icon.dc-brand--mongodb       { background: #13aa52; }
.dc-table-db-icon.dc-brand--elasticsearch { background: #00a9e5; }
.dc-table-db-icon.dc-brand--clickhouse    { background: #f5c518; color: #3d3200; }
/* 表格小标签 */
.lc-table-tag {
    display: inline-block;
    padding: 1px var(--space-8);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 600;
    white-space: nowrap;
}
.lc-table-tag--spaced { margin-left: var(--space-4);
    background: rgba(59, 130, 246, 0.10);
    color: #2f66d0;
}
.lc-table-tags {
    display: inline-flex;
    flex-wrap: wrap; gap: var(--space-4);
}
/* 评分点 */
.lc-rating, .dc-rating {
    display: inline-flex;
    gap: var(--space-4);
    vertical-align: middle;
}
.lc-dot--filled, .dc-dot--filled {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 4px rgba(93, 151, 67, 0.42);
}
.lc-dot--empty, .dc-dot--empty {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2ecdb;
}
.dc-dot--half {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--primary-color) 50%, #e2ecdb 50%);
}
/* 详情卡片网格 */
.lc-cards-grid, .dc-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.lc-card, .dc-card {
    position: relative; padding: var(--space-20) var(--space-20) var(--space-20) var(--space-24) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.lc-card-bar, .dc-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), rgba(93, 151, 67, 0.45));
}
.lc-card:hover, .dc-card:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.32);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.14);
}
.lc-card-header, .dc-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-12); margin-bottom: var(--space-12);
}
.lc-card-avatar, .dc-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-12);
    font-size: var(--fs-15);
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}
/* 卡片头像品牌色 */
.lc-card-avatar--js     { background: #eab308; color: #1a2e05; }
.lc-card-avatar--ts     { background: #3178c6; }
.lc-card-avatar--java   { background: #ea580c; }
.lc-card-avatar--python { background: #3776ab; }
.lc-card-avatar--rust   { background: #b7410e; }
.lc-card-avatar--go     { background: #00add8; }
.lc-card-avatar--csharp { background: #7c3aed; }
.lc-card-avatar--kotlin { background: #7f52ff; }
.lc-card-avatar--swift  { background: #f05138; }
.lc-card-avatar--php    { background: #777bb4; }
.dc-card-avatar.dc-brand-text--mysql         { background: #4479a1; }
.dc-card-avatar.dc-brand-text--postgresql    { background: #336791; }
.dc-card-avatar.dc-brand-text--mariadb       { background: #00838a; }
.dc-card-avatar.dc-brand-text--sqlite        { background: #003b57; }
.dc-card-avatar.dc-brand-text--redis         { background: #dc382d; }
.dc-card-avatar.dc-brand-text--mongodb       { background: #13aa52; }
.dc-card-avatar.dc-brand-text--elasticsearch { background: #00a9e5; }
.dc-card-avatar.dc-brand-text--clickhouse    { background: #f5c518; color: #3d3200; }
.lc-card-name, .dc-card-name {
    font-size: var(--fs-17);
    font-weight: 700;
    color: var(--text-primary);
}
.lc-card-version, .dc-card-version {
    margin-left: var(--space-6);
    padding: 1px var(--space-8);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 700;
    vertical-align: 2px;
    white-space: nowrap;
}
.lc-card-info-item, .dc-card-info-item {
    display: flex;
    gap: var(--space-12);
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
    font-size: var(--fs-12);
    line-height: 1.7;
}
.lc-card-info-label, .dc-card-info-label {
    flex: none;
    width: 74px;
    color: var(--text-muted);
}
.lc-card-info-value, .dc-card-info-value {
    color: var(--text-secondary);
}
.lc-card-desc, .dc-card-desc {
    margin: 12px 0;
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.lc-card-desc--flush-top {
    margin-top: var(--space-4);
}
.lc-card-footer {
    display: flex;
    flex-wrap: wrap; gap: var(--space-6);
}
.lc-card-tag {
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 600;
}
.dc-card-features h4 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--primary-dark);
}
.dc-card-features ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-16);
}
.dc-card-features li {
    position: relative;
    padding-left: var(--space-16);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.dc-card-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}
/* enrich：选型卡片 / 代码对比 / 建议 */
.lc-enrich, .dc-enrich {
    padding-top: var(--space-32);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}
.lc-enrich-title, .dc-enrich-title {
    margin: 26px 0 14px;
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-primary);
}
.lc-choice-grid, .dc-workload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.lc-choice-card, .dc-workload-grid article {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.lc-choice-card:hover, .dc-workload-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.lc-choice-card h3, .dc-workload-grid h3 {
    margin-bottom: var(--space-12);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.lc-choice-columns {
    display: grid;
    grid-template-columns: 1fr 1fr; gap: var(--space-12);
}
.lc-choice-columns h5 { margin-bottom: var(--space-6);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.lc-choice-columns > div:first-child h5 { color: var(--primary-dark); }
.lc-choice-columns > div:last-child h5 { color: #c2570c; }
.lc-choice-columns li {
    position: relative; padding-left: var(--space-16);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.lc-choice-columns > div:first-child li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}
.lc-choice-columns > div:last-child li::before {
    content: '!';
    position: absolute;
    left: var(--space-2);
    color: #ea580c;
    font-weight: 700;
}
.lc-code-compare .lc-code-grid, .dc-ops-grid, .dc-arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.lc-code-grid pre {
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: #41533a;
    overflow-x: auto;
}
.lc-team-advice ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-24);
}
.lc-team-advice li {
    position: relative; padding: var(--space-12) var(--space-16) var(--space-12) 38px ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.lc-team-advice li::before {
    content: '◆';
    position: absolute;
    left: var(--space-16);
    top: var(--space-12);
    color: var(--primary-color);
    font-size: var(--fs-11);
}
.dc-ops-card, .dc-arch-card {
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.dc-ops-card:hover, .dc-arch-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.dc-ops-card strong, .dc-arch-card b {
    display: block;
    margin-bottom: var(--space-6);
    font-size: var(--fs-14);
    color: var(--text-primary);
}
.dc-arch-card.dc-danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.05);
}
.dc-arch-card.dc-danger b {
    color: #b91c1c;
}
@media (max-width: 991px) {
    .lc-cards-grid, .dc-cards-grid, .lc-choice-grid, .dc-workload-grid,
    .lc-code-compare .lc-code-grid, .dc-ops-grid, .dc-arch-grid {
        grid-template-columns: 1fr;
    }

    .lc-team-advice ul {
        grid-template-columns: 1fr;
    }

    .dc-card-features ul {
        grid-template-columns: 1fr;
    }
}