/* baby-gender —— 清宫表业务样式（依赖 calc-common.css） */

.bg-version-row {
    display: flex;
    gap: 18px;
    padding: 12px 16px;
    background: var(--c-surface-soft);
    border-radius: 12px;
    flex-wrap: wrap;
}
.bg-version {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--c-text);
}
.bg-version input[type="radio"] { accent-color: #e91e63; cursor: pointer; }

.bg-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 结果 */
.bg-result {
    padding: 24px;
    text-align: center;
    font-size: 15px;
    color: var(--c-text-sub);
    background: var(--c-surface-soft);
    border-radius: var(--radius-md);
    line-height: 2;
}
.bg-result.is-boy {
    color: var(--c-text);
    background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(33,150,243,0.05));
    border: 1px solid rgba(33,150,243,0.3);
}
.bg-result.is-girl {
    color: var(--c-text);
    background: linear-gradient(135deg, rgba(233,30,99,0.12), rgba(233,30,99,0.05));
    border: 1px solid rgba(233,30,99,0.3);
}
.bg-result .bg-emoji {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 10px;
    display: block;
}
.bg-result .bg-title {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: 0.08em;
}
.bg-result.is-boy .bg-title { color: #1976d2; }
.bg-result.is-girl .bg-title { color: #c2185b; }
.bg-result .bg-detail {
    font-size: 13px;
    color: var(--c-text-sub);
    line-height: 1.7;
}
.bg-result .bg-caveat {
    margin-top: 14px;
    font-size: 12px;
    color: #c0392b;
    padding: 10px 14px;
    background: rgba(231,76,60,0.08);
    border-radius: 8px;
    line-height: 1.6;
}

/* 图例 */
.bg-legend-boy { color: #1976d2; font-weight: 700; }
.bg-legend-girl { color: #c2185b; font-weight: 700; }
.bg-legend-both { color: #9b59b6; font-weight: 700; }

/* 清宫表 */
.bg-table-wrap { overflow-x: auto; }
.bg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 560px;
}
.bg-table th,
.bg-table td {
    padding: 7px 6px;
    text-align: center;
    border: 1px solid var(--c-border);
    font-size: 13px;
}
.bg-table thead th {
    background: var(--c-surface-soft);
    font-weight: 700;
    color: var(--c-text-sub);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
.bg-table tbody th {
    background: var(--c-surface-soft);
    font-weight: 700;
    color: var(--c-text-sub);
    white-space: nowrap;
    position: sticky;
    left: 0;
}
.bg-table td.boy { background: rgba(33,150,243,0.15); color: #1565c0; font-weight: 700; }
.bg-table td.girl { background: rgba(233,30,99,0.15); color: #ad1457; font-weight: 700; }
.bg-table td.highlight {
    position: relative;
    outline: 3px solid #f39c12;
    outline-offset: -2px;
    animation: bgPulse 1.2s ease-in-out infinite;
}
@keyframes bgPulse {
    0%, 100% { outline-color: #f39c12; }
    50%      { outline-color: rgba(243, 156, 18, 0.4); }
}

/* 科普 */
.bg-facts { display: flex; flex-direction: column; gap: 18px; }
.bg-fact {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--c-surface-soft);
    border-radius: 12px;
}
.bg-fact-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}
.bg-fact-body b {
    display: block;
    margin-bottom: 4px;
    color: var(--c-text);
}
.bg-fact-body p {
    margin: 0;
    font-size: 13px;
    color: var(--c-text-sub);
    line-height: 1.7;
}

@media (max-width: 640px) {
    .bg-result .bg-title { font-size: 22px; }
    .bg-result .bg-emoji { font-size: 40px; }
    .bg-table th, .bg-table td { padding: 5px 3px; font-size: 11px; }
}