/*!
 * site-comment.css
 * 由 yymh.html 的 <style id="mh-comment-compat-styles"> 外置而来（P1-2），内容逐字未改。
 * 必须保持在 <block name="head"> 之后加载，否则页面级样式的层叠优先级会改变。
 */

        #comment-wrap{
            margin:.12rem .12rem .16rem;
        }
        #comment-wrap .mh-comment-box{
            background:#fff;
            border-radius:.16rem;
            padding:.12rem .14rem .10rem;
            box-shadow:0 .04rem .16rem rgba(0,0,0,.04);
        }
        #comment-wrap .mh-comment-titlebar{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:.12rem;
            padding-bottom:.10rem;
            border-bottom:1px solid #f1f2f5;
        }
        #comment-wrap .mh-comment-titleleft{
            min-width:0;
            flex:1;
        }
        #comment-wrap .mh-comment-title-main{
            display:flex;
            align-items:center;
            gap:.06rem;
            font-size:.16rem;
            line-height:.22rem;
            font-weight:800;
            color:#111;
        }
        #comment-wrap .mh-comment-title-main svg{
            width:.15rem;
            height:.15rem;
            display:block;
            fill:#111;
            flex:0 0 .15rem;
        }
        #comment-wrap .mh-comment-title-sub{
            margin-top:.03rem;
            padding-left:.21rem;
            font-size:.12rem;
            line-height:.18rem;
            color:#8b8f97;
            word-break:break-word;
        }
        #comment-wrap #open-comment-dialog{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.04rem;
            width:1.02rem;
            height:.36rem;
            flex:0 0 1.02rem;
            padding:0 .10rem;
            border:none;
            border-radius:.18rem;
            background:var(--f7-theme-color, #e91e63);
            color:#fff;
            font-size:.13rem;
            line-height:.36rem;
            font-weight:700;
            text-align:center;
            text-decoration:none;
            box-sizing:border-box;
            box-shadow:none;
        }
        #comment-wrap #open-comment-dialog svg{
            width:.12rem;
            height:.12rem;
            display:block;
            fill:currentColor;
            flex:0 0 .12rem;
        }
        #comment-wrap #comment-list{
            padding-top:.02rem;
        }
        #comment-wrap .comment-item .top{
            align-items:center;
            gap:.08rem;
            flex-wrap:wrap;
        }
        #comment-wrap .comment-item .link,
        #comment-wrap .comment-item .comment-link{
            display:none !important;
        }
        #comment-wrap .comment-item .score,
        #comment-wrap .comment-item .mh-score-pill{
            display:inline-flex;
            align-items:center;
            gap:.03rem;
            padding:.04rem .08rem;
            border-radius:999px;
            background:#fff4d9;
            color:#b56a00;
            font-size:.12rem;
            font-weight:700;
            line-height:1;
            white-space:nowrap;
            box-shadow:inset 0 0 0 1px rgba(247,186,42,.28);
        }
        #comment-wrap .comment-item .score *,
        #comment-wrap .comment-item .mh-score-pill *{
            color:inherit;
        }
        #comment-wrap .comment-item .score .score-star,
        #comment-wrap .comment-item .mh-score-pill .score-star,
        #comment-wrap .comment-item .score i,
        #comment-wrap .comment-item .mh-score-pill i{
            color:#ffb400;
            font-style:normal;
            line-height:1;
        }
        #comment-wrap #comment-list #load-more-comment,
        #comment-wrap #comment-list .load-more-comment-link,
        #comment-wrap #comment-list .comment-inline-actions{
            display:none !important;
        }
        #comment-wrap .mh-comment-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.10rem;
            margin-top:.10rem;
        }
        #comment-wrap .mh-comment-action-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            flex:1 1 calc(50% - .05rem);
            min-height:.42rem;
            padding:0 .14rem;
            border-radius:.14rem;
            text-align:center;
            text-decoration:none;
            font-size:.13rem;
            line-height:1.35;
            font-weight:700;
            box-sizing:border-box;
        }
        #comment-wrap .mh-comment-action-btn--primary{
            background:var(--f7-theme-color, #e91e63);
            border:1px solid var(--f7-theme-color, #e91e63);
            color:#fff;
        }
        #comment-wrap .mh-comment-action-btn--ghost{
            background:rgba(var(--f7-theme-color-rgb, 233,30,99), .10);
            border:1px solid rgba(var(--f7-theme-color-rgb, 233,30,99), .26);
            color:var(--f7-theme-color, #e91e63);
        }

        .mh-comment-dialog{
            background:#fff;
            border-radius:.16rem;
            padding:.16rem;
            box-sizing:border-box;
        }
        .mh-comment-dialog-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:.10rem;
            margin-bottom:.12rem;
        }
        .mh-comment-dialog-title{
            display:block;
            font-size:.17rem;
            line-height:.24rem;
            color:#222;
            font-weight:700;
        }
        .mh-comment-dialog-desc{
            display:block;
            margin-top:.04rem;
            font-size:.12rem;
            line-height:.18rem;
            color:#8a919c;
        }
        .mh-comment-dialog-close{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:.28rem;
            height:.28rem;
            border:none;
            border-radius:50%;
            background:#f7e5ee;
            color:#d91c61;
            font-size:.16rem;
            line-height:1;
            flex:0 0 .28rem;
            padding:0;
        }
        .layui-layer.mh-comment-layer{
            border-radius:.16rem !important;
            overflow:hidden;
            max-width:calc(100vw - 24px) !important;
        }
        .layui-layer.mh-comment-layer .layui-layer-content{
            overflow:visible !important;
        }
        form.comment-form{
            display:flex;
            flex-direction:column;
            padding:0;
            background:transparent;
        }
        form.comment-form textarea{
            width:100%;
            min-height:1.18rem;
            padding:.14rem;
            border-radius:.14rem;
            border:1px solid #eceef4;
            background:#fafbff;
            box-sizing:border-box;
            font-size:.14rem;
            line-height:1.7;
            color:#333;
            resize:none;
            box-shadow:none;
            outline:none;
        }
        form.comment-form textarea:focus{
            border-color:#f4a9c4;
            background:#fff;
            box-shadow:0 0 0 3px rgba(233,30,99,.08);
        }
        .mh-comment-score-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.12rem;
            flex-wrap:wrap;
            margin-top:.14rem;
        }
        .mh-comment-score-label{
            font-size:.14rem;
            color:#555;
            font-weight:700;
        }
        .star-rating{
            display:flex;
            align-items:center;
            justify-content:flex-end;
        }
        .star-rating > fieldset{
            display:flex;
            flex-direction:row-reverse;
            gap:.04rem;
            border:none;
            margin:0;
            padding:0;
        }
        .star-rating > fieldset:not(:checked) > input{
            display:none;
        }
        .star-rating > fieldset:not(:checked) > label{
            float:none;
            width:auto;
            padding:0;
            overflow:visible;
            cursor:pointer;
            font-size:.26rem;
            color:#d8dce6;
            line-height:1;
        }
        .star-rating > fieldset:not(:checked) > label:before{
            content:'★';
        }
        .star-rating > fieldset:not(:checked) > label:hover,
        .star-rating > fieldset:not(:checked) > label:hover ~ label,
        .star-rating > fieldset > input:checked ~ label{
            color:#ffb400;
        }
        .mh-comment-submit-btn{
            width:100%;
            margin-top:.16rem;
            padding:.12rem .16rem;
            border:none;
            border-radius:.12rem;
            background:linear-gradient(135deg,#ef2b7f,#e91e63);
            color:#fff;
            font-size:.15rem;
            font-weight:700;
            box-shadow:none;
        }

        .mobile-comment-mask{
            display:none;
            position:fixed;
            left:0;top:0;right:0;bottom:0;
            z-index:2147483000;
            background:rgba(0,0,0,.58);
            padding:10px;
            box-sizing:border-box;
        }
        .mobile-comment-mask.show{
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .mobile-comment-dialog{
            width:calc(100vw - 12px);
            max-width:none;
            background:#fff;
            border-radius:16px;
            padding:16px;
            box-sizing:border-box;
            max-height:86vh;
            overflow:auto;
            box-shadow:0 10px 32px rgba(0,0,0,.18);
        }
        .mobile-comment-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:10px;
            margin-bottom:30px;
        }
        .mobile-comment-head-main{min-width:0;flex:1;}
        .mobile-comment-title{
            display:block;
            font-size:55px;
            line-height:50px;
            color:#222;
            font-weight:700;
        }
        .mobile-comment-desc{
            display:block;
            margin-top:45px;
            font-size:50px;
            line-height:20px;
            color:#8a919c;
        }
        .mobile-comment-close{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:85px;height:85px;
            border:none;
            border-radius:50%;
            background:#f7e5ee;
            color:#d91c61;
            font-size:80px;
            line-height:1;
            flex:0 0 85px;
            padding:0;
        }
        .mobile-comment-dialog .comment-form{padding:0;background:transparent;}
        .mobile-comment-dialog .comment-form textarea{
            width:100%;
            min-height:280px;
            padding:14px;
            border-radius:14px;
            border:1px solid #eceef4;
            background:#fafbff;
            box-sizing:border-box;
            font-size:50px;
            line-height:1.7;
            color:#333;
            resize:none;
            box-shadow:none;
            outline:none;
        }
        .mobile-comment-dialog .comment-form textarea:focus{
            border-color:#f4a9c4;
            background:#fff;
            box-shadow:0 0 0 3px rgba(233,30,99,.08);
        }
        .mobile-comment-dialog .mh-comment-score-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
            margin-top:14px;
        }
        .mobile-comment-dialog .mh-comment-score-label{
            font-size:50px;
            color:#555;
            font-weight:700;
        }
        .mobile-comment-dialog .star-rating{display:flex;align-items:center;justify-content:flex-end;}
        .mobile-comment-dialog .star-rating > fieldset{display:flex;flex-direction:row-reverse;gap:4px;border:none;margin:0;padding:0;}
        .mobile-comment-dialog .star-rating > fieldset:not(:checked) > input{display:none;}
        .mobile-comment-dialog .star-rating > fieldset:not(:checked) > label{float:none;width:auto;padding:0;overflow:visible;cursor:pointer;font-size:78px;color:#d8dce6;line-height:1;}
        .mobile-comment-dialog .star-rating > fieldset:not(:checked) > label:before{content:'★';}
        .mobile-comment-dialog .star-rating > fieldset:not(:checked) > label:hover,
        .mobile-comment-dialog .star-rating > fieldset:not(:checked) > label:hover ~ label,
        .mobile-comment-dialog .star-rating > fieldset > input:checked ~ label{color:#ffb400;}
        .mobile-comment-dialog .mh-comment-submit-btn{
            width:100%;
            margin-top:16px;
            padding:13px 16px;
            border:none;
            border-radius:12px;
            background:linear-gradient(135deg,#ef2b7f,#e91e63);
            color:#fff;
            font-size:60px;
            font-weight:700;
            box-shadow:none;
        }

        @media screen and (max-width: 768px){
            #comment-wrap{
                margin:.12rem .10rem .16rem;
            }
            #comment-wrap .mh-comment-box{
                border-radius:.18rem;
                padding:.14rem .14rem .12rem;
            }
            #comment-wrap .mh-comment-titlebar{
                padding-bottom:.12rem;
            }
            #comment-wrap .mh-comment-title-main{
                font-size:.17rem;
                line-height:.24rem;
            }
            #comment-wrap .mh-comment-title-main svg{
                width:.17rem;
                height:.17rem;
                flex-basis:.17rem;
            }
            #comment-wrap .mh-comment-title-sub{
                padding-left:.23rem;
                font-size:.13rem;
                line-height:.20rem;
            }
            #comment-wrap #open-comment-dialog{
                width:1.12rem;
                height:.42rem;
                flex-basis:1.12rem;
                border-radius:.21rem;
                font-size:.14rem;
                line-height:.42rem;
            }
            #comment-wrap #open-comment-dialog svg{
                width:.13rem;
                height:.13rem;
                flex-basis:.13rem;
            }
            #comment-wrap .mh-comment-actions{
                gap:.08rem;
                margin-top:.12rem;
            }
            #comment-wrap .mh-comment-action-btn{
                min-height:.40rem;
                font-size:.135rem;
                padding:0 .12rem;
            }
            #comment-wrap .comment-item .score,
            #comment-wrap .comment-item .mh-score-pill{
                font-size:.125rem;
            }
            .mh-comment-dialog{
                padding:.18rem;
                border-radius:.18rem;
            }
            .mh-comment-dialog-title{
                font-size:.18rem;
                line-height:.25rem;
            }
            .mh-comment-dialog-desc{
                font-size:.13rem;
                line-height:.20rem;
            }
            form.comment-form textarea{
                min-height:1.30rem;
                font-size:.15rem;
            }
            .mh-comment-score-label{
                font-size:.145rem;
            }
            .star-rating > fieldset:not(:checked) > label{
                font-size:.28rem;
            }
            .mh-comment-submit-btn{
                font-size:.15rem;
                padding:.13rem .16rem;
            }
            .mobile-comment-mask{padding:8px;}
            .mobile-comment-dialog{width:calc(100vw - 16px);padding:18px;border-radius:18px;max-height:88vh;}
            .mobile-comment-title{font-size:19px;line-height:25px;}
            .mobile-comment-desc{font-size:13px;line-height:20px;}
        }
@media screen and (max-width: 480px){
    #comment-wrap .mh-comment-actions{
        flex-direction:column;
    }
    #comment-wrap .mh-comment-action-btn{
        flex:1 1 100%;
        width:100%;
        min-height:.42rem;
        font-size:.14rem;
    }
}