.detailedReport {
    width: 100%;
    height: 100%;

    .scrollViewContent {
        width: 100%;
        position: relative;

        .bg {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 440rpx;
        }

        .detailedReport-container {
            width: 100%;
            padding-top: 190rpx;
            box-sizing: border-box;

            .title {
                width: 100%;
                margin-bottom: 20rpx;

                .title_1 {
                    color: #1A3F68;
                    height: 32rpx;
                    font-size: 32rpx;
                    font-weight: bolder;
                    line-height: 32rpx;
                    margin-bottom: 20rpx;
                }

                .title_2 {
                    color: #446D99;
                    height: 26rpx;
                    font-size: 26rpx;
                    font-weight: bolder;
                    line-height: 26rpx;
                }
            }

            /* 顶部头部 */
            .header {
                width: 100%;
                height: 280rpx;
                border-radius: 32rpx;
                box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16);
                background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%);
                padding: 45rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;

                .header-top {
                    width: 100%;
                    height: 38rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    margin-bottom: 50rpx;

                    > view:nth-of-type(1) {
                        width: 38rpx;
                        height: 38rpx;
                        display: flex;
                        align-items: center;
                        margin-right: 16rpx;
                    }

                    > view:nth-of-type(2) {
                        color: #FFFFFF;
                        height: 26rpx;
                        font-size: 26rpx;
                        line-height: 26rpx;
                    }
                }

                .header-bottom {
                    width: 100%;
                    height: 120rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: end;

                    .header-weight {
                        height: 120rpx;
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: end;

                        .weight-num1 {
                            color: #FFFFFF;
                            height: 120rpx;
                            font-size: 120rpx;
                            line-height: 120rpx;
                        }

                        .weight-num2 {
                            color: #FFFFFF;
                            height: 68rpx;
                            font-size: 56rpx;
                            line-height: 68rpx;
                            margin-right: 10rpx;
                        }

                        .weight-unit {
                            color: #FFFFFF;
                            height: 40rpx;
                            font-size: 28rpx;
                            line-height: 40rpx;
                        }
                    }

                    .header-info {
                        width: 200rpx;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: right;

                        .header-bmi {
                            color: #FFFFFF;
                            height: 48rpx;
                            font-size: 22rpx;
                            line-height: 48rpx;
                            border-radius: 24rpx;
                            padding: 0 20rpx;
                            margin-bottom: 16rpx;
                            border: 2rpx solid rgba(255, 255, 255, 0.20);
                            background-color: rgba(255, 255, 255, 0.12);
                        }

                        .header-change {
                            color: #FFFFFF;
                            height: 48rpx;
                            font-size: 22rpx;
                            line-height: 48rpx;
                            border-radius: 24rpx;
                            padding: 0 20rpx;
                            border: 2rpx solid rgba(255, 255, 255, 0.20);
                            background-color: rgba(255, 255, 255, 0.12);
                        }
                    }
                }
            }

            /* 卡片 */
            .card {
                width: 100%;
                padding: 32rpx;
                border-radius: 24rpx;
                background-color: #FFFFFF;
                box-sizing: border-box;
                margin-bottom: 24rpx;

                .card-title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 24rpx;

                    .title-bar {
                        width: 6rpx;
                        height: 20rpx;
                        border-radius: 4rpx;
                        background-color: #1385FA;
                        margin-right: 16rpx;
                    }

                    .title-text {
                        color: #252535;
                        height: 32rpx;
                        font-size: 32rpx;
                        line-height: 32rpx;
                    }
                }

                /* 基础指标 3 列 2 行 */
                .basic-grid {
                    .basic-row {
                        display: flex;
                        border-bottom: 2rpx solid #EAECF1;

                        &:last-of-type {
                            border-bottom: none;
                        }

                        .basic-cell {
                            flex: 1;
                            box-sizing: border-box;
                            padding: 24rpx 0;
                            border-right: 2rpx solid #EAECF1;

                            &:last-of-type {
                                border-right: none;
                            }

                            .basic-label {
                                color: #808080;
                                height: 26rpx;
                                font-size: 26rpx;
                                line-height: 26rpx;
                                margin-bottom: 16rpx;
                            }

                            .basic-value-row {
                                display: flex;
                                align-items: flex-end;

                                .basic-value {
                                    color: #252535;
                                    height: 48rpx;
                                    font-size: 48rpx;
                                    line-height: 48rpx;
                                }

                                .basic-unit {
                                    color: #252535;
                                    height: 26rpx;
                                    font-size: 26rpx;
                                    line-height: 26rpx;
                                    margin: 0 0 6rpx 8rpx;
                                }

                                .basic-tag {
                                    height: 30rpx;
                                    padding: 0 10rpx;
                                    font-size: 18rpx;
                                    line-height: 30rpx;
                                    border-radius: 8rpx;
                                    color: #FFFFFF;
                                    background-color: #2AC79F;
                                    margin: 0 0 6rpx 12rpx;
                                }
                            }
                        }
                    }
                }

                /* BMI 刻度 */
                .bmi-scale {
                    margin-top: 24rpx;

                    .scale-track {
                        display: flex;
                        height: 20rpx;
                        border-radius: 6rpx;
                        overflow: hidden;

                        .scale-block {
                            flex: 1;
                        }

                        .scale-block--low {
                            background-color: #1385FA;
                        }

                        .scale-block--normal {
                            background-color: #2AC79F;
                        }

                        .scale-block--over {
                            background-color: #FFA151;
                        }

                        .scale-block--obese {
                            background-color: #F24439;
                        }
                    }

                    .scale-row {
                        display: flex;
                        margin-top: 16rpx;

                        > view {
                            flex: 1;
                            text-align: center;
                            color: #77849E;
                            height: 24rpx;
                            font-size: 24rpx;
                            line-height: 24rpx;
                        }
                    }

                    .scale-row--range {
                        margin-top: 12rpx;

                        > view {
                            color: #B6B6B6;
                            height: 20rpx;
                            font-size: 20rpx;
                            line-height: 20rpx;
                        }
                    }
                }

                /* 指标行 */
                .metric-row {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 20rpx 0;

                    .metric-label {
                        flex: 1;
                        color: #77849E;
                        height: 28rpx;
                        font-size: 28rpx;
                        line-height: 28rpx;
                    }

                    .metric-value {
                        color: #252535;
                        height: 28rpx;
                        font-size: 28rpx;
                        line-height: 28rpx;
                        margin-right: 24rpx;
                    }

                    .metric-status {
                        height: 24rpx;
                        font-size: 24rpx;
                        line-height: 24rpx;
                    }

                    .metric-status--normal {
                        color: #2AC79F;
                    }

                    .metric-status--low {
                        color: #1385FA;
                    }

                    .metric-status--high {
                        color: #F24439;
                    }
                }
            }
        }
    }
}