/* ===========================
   全局
=========================== */

body {

    background-color:#f6faf7;

    font-family:
    "Microsoft YaHei",
    Arial,
    sans-serif;

}


/* ===========================
   标题
=========================== */


h1 {

    color:#2E8B57;

    font-weight:700;

}


h3 {

    color:#2E8B57;

    font-weight:600;

}


/* ===========================
   卡片
=========================== */


.card {

    border-radius:15px;

    border:none;

    box-shadow:
    0 4px 12px rgba(0,0,0,0.08);

    padding:20px;

    background:white;

}


/* 卡片间距 */

.card + .card {

    margin-top:20px;

}



/* ===========================
   查询区域
=========================== */


input.form-control {

    border-radius:10px;

    height:45px;

    font-size:16px;

}



button {

    border-radius:10px!important;

    padding:
    10px 25px!important;

    font-size:16px!important;

}


/* ===========================
   表格
=========================== */


.table {

    background:white;

    border-radius:10px;

    overflow:hidden;

}


.table th {

    background:#2E8B57;

    color:white;

    text-align:center;

}



.table td {

    text-align:center;

}


/* ===========================
   手机端适配
=========================== */


@media(max-width:600px){

    h1{

        font-size:28px;

    }

    .card{

        padding:15px;

    }

}


/* ===========================
   免责声明
=========================== */


.disclaimer {

    background:#fff8e8;

    border-left:
    5px solid #f0ad4e;

    margin-bottom:25px;

}


.disclaimer h4 {

    color:#b26a00;

}


/* ===================================================
   问卷选项
=================================================== */


.shiny-options-group{


    width:100%;


}



/* 每个选项 */

.shiny-options-group .radio,
.shiny-options-group .checkbox{


    width:100%;


    margin:8px 0;


}



/* label */

.shiny-options-group .radio label,
.shiny-options-group .checkbox label{


    display:flex;


    align-items:center;


    width:100%;


    min-height:45px;


    padding:8px 12px;


    cursor:pointer;


    border-radius:8px;


}



/* checkbox radio */

.shiny-options-group input[type="radio"],
.shiny-options-group input[type="checkbox"]{


    margin-right:10px;


}



/* 文字 */

.shiny-options-group label span{


    display:inline-block;


}



/* hover */

.shiny-options-group label:hover{


    background:#f3fbf5;


}



/* 已选择 */

.shiny-options-group label.selected{


    background:#eaf8ef;


    border:1px solid #2E8B57;


}


/*
   题干
*/

.shiny-input-container>label{


    white-space:normal;


    line-height:1.6;


}





/* ===================================================
   checkbox group 点击区域优化
=================================================== */


/* 每一个checkbox选项 */

.shiny-input-container .form-check {


    padding:8px 12px;


    margin-bottom:6px;


    border-radius:8px;


    cursor:pointer;


}




/* 鼠标悬停效果 */

.shiny-input-container .form-check:hover {


    background:#f5f8ff;


}



/* 文字区域可点击 */

.shiny-input-container .form-check-label {


    cursor:pointer;


    width:100%;


    display:inline-block;


}



/* checkbox小方框 */

.shiny-input-container .form-check-input {


    cursor:pointer;


}





















/* ===================================================
   模块大卡片统一
=================================================== */


.tcm-main-card,
.sleep-main-card,
.mood-main-card,
.sexual-main-card{

    border-radius:16px;

    padding:20px;

    margin-top:20px;

    margin-bottom:20px;

    box-shadow:
    0 4px 14px rgba(0,0,0,0.08);

}




/* ===================================================
   模块标题统一
=================================================== */


.health-title {


    font-size:20px;

    font-weight:700;

    margin-bottom:18px;


}



/* ===================================================
   子卡片统一
=================================================== */


.health-item-card {


    background:white;


    border-radius:12px;


    padding:16px;


    margin-top:15px;

    margin-bottom:15px;


}



/* ===================================================
   子卡片标题统一
=================================================== */


.health-item-title {


    font-size:17px;


    font-weight:700;


    margin-bottom:12px;


}





/* ===================================================
   当前状态
=================================================== */


.health-status {


    font-weight:700;


}





/* ===================================================
   标签文字
=================================================== */


.health-label {


    font-weight:700;


}





/* ===================================================
   正文
=================================================== */


.health-content {


    line-height:1.8;


    color:#444;


    font-size:15px;


}





/* ===================================================
   中医体质大卡片
=================================================== */


.tcm-main-card{


    background:#f8fff9;


    border-left:

    6px solid #2E8B57;


}





/* ===================================================
   中医体质子卡片
=================================================== */


.tcm-item-card{


    border:

    1px solid #dcefe3;


}




/* 中医标题 */

.tcm-title{

    color:#2E8B57;

}



/* 中医标签 */

.tcm-label{

    color:#2E8B57;

}






/* ===================================================
   睡眠健康大卡片
=================================================== */


.sleep-main-card{


    background:#f5f9ff;


    border-left:

    6px solid #5B8FF9;


}




/* ===================================================
   睡眠子卡片
=================================================== */


.sleep-item-card{


    background:white;


    border-radius:12px;


    padding:15px;


    margin-top:12px;


    border:

    1px solid #d8e6ff;


}



/* 睡眠标题 */

.sleep-title{


    color:#5B8FF9;


}



/* 睡眠子标题 */

.sleep-item-card .health-item-title,
.sleep-item-card .health-label{


    color:#5B8FF9;


}



/* 睡眠标签 */

.sleep-label{


    color:#5B8FF9;


}




/* ===================================================
   心理健康大卡片
=================================================== */


.mood-main-card{


    background:#fffdf7;


    border-left:

    6px solid #E6A23C;


}



/* ===================================================
   心理模块大标题
=================================================== */


.mood-title{


    color:#E6A23C;


}





/* ===================================================
   心理子卡片
=================================================== */


.mood-item-card {


    background:white;


    border-radius:12px;


    padding:16px;


    margin-top:12px;


    margin-bottom:12px;


    border:

    1px solid #f3dfb0;


}





/* ===================================================
   心理子标题和标签颜色
=================================================== */


.mood-item-card .health-item-title,


.mood-item-card .health-label,


.mood-item-card .health-status{


    color:#E6A23C;


}




/* ===================================================
   性健康管理主卡片
=================================================== */


.sexual-main-card {


    background:#faf7ff;


    border-radius:15px;


    padding:20px;


    margin-top:15px;


    margin-bottom:15px;


    box-shadow:

    0 4px 12px rgba(0,0,0,0.08);


    border-left:

    6px solid #9B59B6;


}





/* ===================================================
   性健康大标题
=================================================== */


.sexual-title {


    color:#9B59B6;


    font-size:20px;


    font-weight:700;


    margin-bottom:18px;


}






/* ===================================================
   性健康子卡片
=================================================== */


.sexual-item-card {


    background:white;


    border-radius:12px;


    padding:15px;


    margin-top:12px;


    margin-bottom:12px;


    border:

    1px solid #dfc8eb;


}







/* ===================================================
   性健康子标题
=================================================== */


.sexual-item-card h5 {


    color:#8E44AD;


    font-size:17px;


    font-weight:700;


    margin-bottom:10px;


}






/* ===================================================
   当前状态、说明、建议标签
=================================================== */

.sexual-item-card .health-item-title,
.sexual-item-card .health-label {


    color:#8E44AD;


    font-weight:700;


}






/* 当前状态文字 */
.sexual-item-card .health-status {


    color:#8E44AD;


    font-weight:700;


}






/* ===================================================
   正文
=================================================== */


.sexual-item-card p {


    color:#444;


    font-size:15px;


    line-height:1.8;


    margin-bottom:10px;


}





/* 健康建议关键词加强 */

.sexual-item-card strong {


    color:#8E44AD;


}






/* ===================================================
   无性生活说明卡
=================================================== */


.sexual-empty-card {


    background:#faf7ff;


    border-radius:15px;


    padding:20px;


    margin-top:15px;


    margin-bottom:15px;


    box-shadow:

    0 4px 12px rgba(0,0,0,0.08);


    border-left:

    6px solid #9B59B6;


}





.sexual-empty-card p {


    color:#444;


    font-size:15px;


    line-height:1.8;


}





.sexual-empty-card .health-label {


    color:#8E44AD;


    font-weight:700;


}







/* ===================================================
   特殊提醒
=================================================== */


.psychological-warning-card {


    background:#fff5f5;


    border-radius:12px;


    padding:16px;


    margin-top:15px;


    border-left:

    6px solid #E74C3C;


}



.psychological-warning-title {


    color:#E74C3C;


    font-size:17px;


    font-weight:700;


}






/* ===================================================
   手机端统一适配
=================================================== */


@media(max-width:600px){



    /* 大卡片 */

    .health-main-card{


        padding:15px;


        border-radius:12px;


        margin-top:15px;

        margin-bottom:15px;


    }




    /* 模块标题 */


    .health-title{


        font-size:18px;


        margin-bottom:15px;


    }




    /* 小卡片 */


    .health-item-card{


        padding:14px;


        border-radius:10px;


    }





    /* 小标题 */


    .health-item-card h5{


        font-size:16px;


    }




    /* 正文 */


    .health-content{


        font-size:14px;


        line-height:1.7;


    }




    /* 特殊提醒 */


    .psychological-warning-card{


        padding:14px;


        border-radius:10px;


    }


    .psychological-warning-title{


        font-size:16px;


    }



}


.question-tip{
    background:#f5f9ff;
    border-left:4px solid #4a90e2;
    padding:12px 15px;
    margin:10px 0 20px 0;
    border-radius:8px;
    color:#555;
    font-size:14px;
    line-height:1.8;
}









