/* =========================================
   BMI Calculator - Specific Styles
   所有通用样式已移至 style.css
   ========================================= */

/* --- 单位切换按钮 --- */
.unit-toggle { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 25px; 
}

.unit-btn { 
    flex: 1; 
    padding: 10px; 
    border: 1px solid #ccc; 
    background: #f5f5f5; 
    cursor: pointer; 
    border-radius: 4px; 
    font-weight: 600; 
    color: #666; 
    font-size: 14px; 
    text-align: center;
    transition: all 0.2s;
}

.unit-btn.active { 
    background: #005a4e; 
    color: #fff; 
    border-color: #004d40; 
}

.unit-btn:hover:not(.active) {
    background: #e8e8e8;
}

/* --- BMI 特有表单布局 --- */
.bmi-form-inner { 
    width: 100%;
    max-width: 100%; 
    margin: 0; 
}

.height-inputs { 
    display: flex; 
    gap: 10px; 
}

.height-inputs .input-group { 
    flex: 1; 
    margin-bottom: 0; 
}

/* --- BMI 刻度条系统 --- */
.bmi-scale-wrap { 
    position: relative; 
    height: 30px; 
    background: linear-gradient(to right, 
        #bc2020 0%, #bc2020 8%,           /* 0-16: 严重偏瘦 */
        #d38888 8%, #d38888 11.5%,        /* 16-17: 偏瘦 */
        #ffe400 11.5%, #ffe400 16.75%,    /* 17-18.5: 偏瘦 */
        #008137 16.75%, #008137 39.5%,    /* 18.5-25: 正常 */
        #ffe400 39.5%, #ffe400 57%,       /* 25-30: 超重 */
        #d38888 57%, #d38888 74.5%,       /* 30-35: 肥胖 */
        #bc2020 74.5%, #bc2020 92%,       /* 35-40: 重度肥胖 */
        #8a0101 92%, #8a0101 100%         /* 40-45: 极重度肥胖 */
    ); 
    border-radius: 4px; 
    margin: 40px 0 8px; 
    width: 100%;
}

.bmi-marker { 
    position: absolute; 
    top: -35px; 
    transform: translateX(-50%); 
    text-align: center; 
    z-index: 10; 
}

.bmi-marker span { 
    display: block; 
    font-weight: 800; 
    font-size: 16px; 
    color: #333; 
    white-space: nowrap;
}

.bmi-marker::after { 
    content: "▼"; 
    display: block; 
    font-size: 14px; 
    color: #333; 
}

/* --- 刻度数字 --- */
.scale-numbers { 
    position: relative;
    height: 20px;
    font-size: 10px;
    font-weight: bold;
    color: #333;
    width: 100%;
}

.scale-numbers span {
    position: absolute;
    transform: translateX(-50%);
}

.scale-numbers .num-16 { left: 8%; }
.scale-numbers .num-17 { left: 11.5%; }
.scale-numbers .num-18 { left: 16.75%; }
.scale-numbers .num-25 { left: 39.5%; }
.scale-numbers .num-30 { left: 57%; }
.scale-numbers .num-35 { left: 74.5%; }
.scale-numbers .num-40 { left: 92%; }

/* --- 刻度标签 --- */
.scale-labels { 
    display: flex; 
    font-size: 11px; 
    color: #666; 
    margin-top: 10px; 
    position: relative;
    font-weight: 600;
    height: 20px;}

.scale-labels span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.scale-labels .label-underweight { left: 8%; }
.scale-labels .label-normal { left: 28.5%; }
.scale-labels .label-overweight { left: 48.5%; }
.scale-labels .label-obesity { left: 79%; }

/* --- BMI 说明文字 --- */
.bmi-note { 
    margin-top: 28px; 
    font-size: 13px; 
    color: #666; 
    line-height: 1.5; 
    padding: 15px; 
    background: #f9f9f9; 
    border-radius: 4px; 
    border: 1px solid #eee; 
}

.bmi-summary-section { 
    margin-top: 30px; 
}
.summary-item { 
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px solid #eee; 
    padding: 12px 0; 
    font-size: 14px; 
}

/* --- 响应式优化 --- */
@media screen and (max-width: 992px) {
    .bmi-scale-wrap { 
        margin: 40px 0 15px; 
    }
    
    .bmi-summary-section { 
        margin-top: 30px; 
    }
    
    .bmi-note { 
        margin-top: 30px; 
    }
    
    .height-inputs { 
        flex-direction: row; 
    }
    
    .height-inputs .input-group { 
        min-width: 0; 
    }
}

/* --- 打印时显示刻度条 --- */
@media print {
    .bmi-scale-wrap,
    .scale-numbers,
    .scale-labels,
    .bmi-marker {
        display: block !important;
    }
}