.huyingpingmus {
    border: 1px solid #eee;
    padding: 0.75rem;
}

.huyingpingmus h2 {
    font-size: 0.7rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.huyingpingmus p {
    font-size: 0.6rem;
    line-height: 1.2rem;
}

.night .huyingpingmus {
    border:1px solid #444;
}

.cpubutdiv{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
    margin-top: 0.5rem;
}

.night .cpubutdiv{
    border-top: 1px solid #444;
}

.cpubutdiv a{
    color: #fff !important;
    height: 1.8rem;
    line-height: 1.8rem;
    background-color: #4CAF50;
    display: block;
    transition: all 0.5s;
    text-align: center;
    font-size: 0.7rem;
    border-radius: 3px;
    width: calc(100% - 100px);
}

.cpubutdiv a:first-child{
    width: 100px;
    background-color: #607D8B;
}

/* ######################### */

.setupdivs{
    display: none;
}

.cpusetupalert{

}

.cpusetupalert .layui-layer-content{
    overflow: inherit;
    padding: 0.25rem;
}

.cpusetupalert .setupdivs{
    margin-top: 0;
}

/* ######################### */
.gpu-result{
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.night .gpu-result{
    border: 1px solid #444;
}

.gpu-result h3{
    font-size: 0.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f6f7fa;
    border-bottom: 1px solid #eee;
    padding-left: 0.75rem;
}

.night .gpu-result h3{
    background-color: #242424;
    border-bottom: 1px solid #444;
}

.gpu-sub {
    font-size: 13px;
    color: #909399;
    line-height: 1.85;
    margin: 0 0 14px
}

.gpu-hint {
    font-size: 12px;
    color: #a8adb5;
    line-height: 1.75;
    margin: 10px 0 0
}




.gpu-bar {
    border: 1px solid #ebeef5;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden
}


.gpu-fields {
    display: none;
    padding: 0 18px 18px;
    flex-wrap: wrap;
    gap: 14px 24px
}

.gpu-fields.show {
    display: flex
}

.gpu-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0c4cc;
    flex: none;
    box-shadow: 0 0 0 4px rgba(192, 196, 204, .18);
    transition: background .2s, box-shadow .2s
}

.gpu-dot.on {
    background: #86C038;
    box-shadow: 0 0 0 4px rgba(134, 192, 56, .18);
    animation: gpuPulse 1s infinite
}

.gpu-dot.err {
    background: #e35d5b;
    box-shadow: 0 0 0 4px rgba(227, 93, 91, .18)
}

@keyframes gpuPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .45
    }
}

.gpu-status-text {
    font-size: 13px;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}


.gpu-stage {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: none;
}

.night .gpu-stage {
    border: 1px solid #444;
}

.gpu-stage h3{
    font-size: 0.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f6f7fa;
    border-bottom: 1px solid #eee;
    padding-left: 0.75rem;
}

.night .gpu-stage h3 {
    background-color: #242424;
    border-bottom: 1px solid #444;
}

.gpu-canvas-box {
    background: #1c1f24;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    max-width: 780px;
    margin: 0 auto;
    margin-top: 0.75rem;
}

#glCanvas {
    width: 100%;
    height: auto;
    display: block
}

.gpu-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    margin-top: 0.75rem;
    border-top: 1px dashed #eee;
}

.night .gpu-metrics{
    border-top: 1px dashed #444;
}

.night .gpu-metric{
        background: #181a1b;
    border: 1px solid #444;
}

.gpu-metric {
    background: #f7f9fb;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0.75rem 0 0.75rem 0.7rem;
    min-width: 0;
}

.gpu-metric>span {
    display: block;
    font-size: 12px;
    color: #909399;
    margin-bottom: 3px
}

.gpu-metric b {
    font-size: 0.7rem;
    color: #303133;
    font-variant-numeric: tabular-nums;
    line-height: 1.8;
    font-weight: unset;
}

.night .gpu-metric b{
    color: #bbb;
}

.gpu-progress {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    display: none
}

.night .gpu-progress{
    border: 1px solid #444;
}

.gpu-progress.show {
    display: block
}

.gpu-prog-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.gpu-prog-phase {
   
}

.gpu-prog-item {
    color: #4f8cff;
}

.gpu-prog-track {
    height: 0.6rem;
    background: #eef1f5;
    border-radius: 6px;
    overflow: hidden
}

.night .gpu-prog-track{
    background: #444;
}

.gpu-prog-track>i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #3d7bf0, #7aa8ff);
    transition: width .25s
}

.gpu-prog-log {
   margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #eee;
}

.night .gpu-prog-log{
    border-top: 1px dashed #444;
}

.gpu-log-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
}

.gpu-log-row+.gpu-log-row {
    margin-top: 3px
}

.gpu-log-row:nth-child(odd) {
    background: #f7f9fb
}

.night .gpu-log-row:nth-child(odd){
        background: #181a1b;
}

.gpu-log-tag {
    flex: none;
    font-size: 0.5rem;
    line-height: 18px;
    padding: 0 6px;
    border-radius: 4px;
}

.gpu-log-tag.base {
    background: rgb(255 152 0 / 14%);
    color: #FF9800;
    border: 1px solid rgb(255 152 0 / 25%);
}

.gpu-log-tag.tri{
    color: #795548;
    background: rgb(121 85 72 / 14%);
        border: 1px solid rgb(121 85 72 / 25%);
}

.gpu-log-tag.sprite{
    color: #009688;
    background: rgb(0 150 136 / 14%);
    border: 1px solid rgb(0 150 136 / 25%);
}

.gpu-log-tag.fill{
    background: rgba(79, 140, 255, .14);
    color: #79a6ff;
    border: 1px solid rgba(79, 140, 255, .25);
}

.gpu-log-name {
    flex: 1;
    min-width: 0;
    color: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.night .gpu-log-name{
    color: #aaa;
}

.gpu-log-fps {
    flex: none;
    width: 72px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

.gpu-log-fps.base {
    color: #FF9800;
}

.gpu-log-fps.ok {
    color: #4CAF50;
}

.gpu-log-fps.mid {
    color: #b8791f;
}

.gpu-log-fps.low {
    color: #c76a69;
}

.scoreBig{
    color: #4884f3;
}

.gpu-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.gpu-card {
    border: 1px solid #ebeef5;
    border-radius: 10px;
    background: #fff;
    padding: 16px 18px
}

.gpu-score-hero {
   padding: 0.5rem;
}

.gpu-score-big {
    font-size: 1.6rem;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.gpu-grade {
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 3px;
}

.gpu-grade.lv1 {
    border:1px solid #b8791f !important;
    color: #b8791f
}

.gpu-grade.lv2 {
    color: #3a76d8;
    border:1px solid #3a76d8 !important;
}

.gpu-grade.lv3 {
    color: #4CAF50;
    border: 1px solid #4CAF50 !important;   
}

.gpu-grade.lv4 {
    color: #7c4ddb;
    border:1px solid #7c4ddb !important;
}

.gpu-grade-desc {
    margin: 0.6rem auto 0;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
    font-size: 0.5rem;
}

.night .gpu-grade-desc{
    border-top: 1px solid #444;
    color: #aaa;
}

.gpu-bars {
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0.75rem;
    display: none;
}

.night .gpu-bars {
    border: 1px solid #444;
}

.gpu-bar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 11px
}

.gpu-bar-item:last-child {
    margin-bottom: 0
}

.gpu-bar-name {
    flex: none;
    width: 35px;
    color: #303133;
}

.night .gpu-bar-name{
    color: #aaa;
}

.gpu-bar-track {
    flex: 1;
    height: 14px;
    background: #eef1f5;
    border-radius: 7px;
    overflow: hidden;
    min-width: 0
}

.night .gpu-bar-track{
     background: #444;
}

.gpu-bar-track>i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 7px;
    background: linear-gradient(90deg, #3d7bf0, #7aa8ff);
    transition: width .4s
}

.gpu-bar-val {
    flex: none;
    width: 58px;
    text-align: right;
    color: #606266;
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.night .gpu-bar-val{
    color: #bbb;
}

.gpu-bar-raw {
    flex: none;
    width: 130px;
    text-align: right;
    font-size: 0.55rem;
    color: #b4b9c1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.night .gpu-bar-raw{
    color: #bbb;
}

.gpu-chart {
    width: 100%;
    height: 200px;
    display: block
}

.fuzaichat{
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: none;
}

.night .fuzaichat{
    border: 1px solid #444;
}

.fuzaichat h3{
        font-size: 0.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f6f7fa;
    border-bottom: 1px solid #eee;
    padding-left: 0.75rem;
}

.night .fuzaichat h3{
    background-color: #242424;
    border-bottom: 1px solid #444;
}

.fuzaichatdiv{
    padding: 0.5rem;
}

.xiankacanshu{
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: none;
}

.night .xiankacanshu{
    border: 1px solid #444;
}

.xiankacanshu h3{
       font-size: 0.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f6f7fa;
    border-bottom: 1px solid #eee;
    padding-left: 0.75rem;
}

.night .xiankacanshu h3{
    background-color: #242424;
    border-bottom: 1px solid #444;
}

.xiankacanshudiv{
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
}

.xiankacanshudiv>div{
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.5rem;
    border-left: 2px solid #03A9F4;
}

.night .xiankacanshudiv>div{
    border: 1px solid #444;
    border-left: 2px solid #03A9F4;
}

.xiankacanshudiv>div p{
        font-size: 0.55rem;
    line-height: 1.8;
}

.gpu-num {
    font-variant-numeric: tabular-nums
}

.gpu-yes {
    color: #86C038;
    font-weight: 600
}

.gpu-no {
    color: #FF9800;
}

.gpu-report {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    display: none;
}

.night .gpu-report{
    border: 1px solid #444;
}

.gpu-report h3{
    font-size: 0.6rem;
    height: 1.6rem;
    line-height: 1.6rem;
    background-color: #f6f7fa;
    border-bottom: 1px solid #eee;
    padding-left: 0.75rem;
}

.night .gpu-report h3{
    background-color: #242424;
    border-bottom: 1px solid #444;
}

.gpu-report h3 span{
    float: right;
    margin-right: 0.75rem;
    cursor: pointer;
}

.night .gpu-report h3 span{
    color: #aaa;
}

.gpu-report.show {
    display: block
}

.show {
    display: block
}

#reportText {
    width: 100%;
    min-height: 15rem;
    background: #111827;
    color: #c3cddf;
    border: 1px solid #111827;
    padding: 0.75rem;
    line-height: 1.7;
    resize: vertical;
    outline: none;
    display: block;
}

.gpu-result {
    display: none
}

.gpu-result.show {
    display: block
}

.resbutdiv{
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.5rem;
}

.night .resbutdiv{
    border: 1px solid #444;
}

.resbutdiv span{
    display: inline-block;
    padding: 0.2rem 1rem;
    border-radius: 3px;
    border: 1px solid #eee;
    margin-right: 0.5rem;
    cursor: pointer;
}

.night .resbutdiv span{
    border: 1px solid #444;
}

#chartDesc{
    padding: 0.25rem 0.5rem;
    color: #a8adb5;
    background-color: #f8f9fb;
    border: 1px solid #eee;
    border-radius: 3px;
    margin-top: 0.25rem;
}

.night #chartDesc{
    color: #aaa;
    background-color: #242424;
    border: 1px solid #444;
}

#chartDesc p{
    line-height: 2;
    font-size: 0.5rem;
}

@media (max-width:760px) {
    .gpu-grid2 {
        grid-template-columns: 1fr
    }

    .gpu-patterns {
        grid-template-columns: 1fr
    }

    .gpu-score-big {
        font-size: 2rem;
    }

    .gpu-bar-name {
        width: 35px
    }

    .gpu-bar-raw {
        display: none
    }
}

@media (max-width:480px) {
    .gpu-metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .gpu-bar-val {
        width: 48px
    }
}

@media (max-width: 460px) {
    .xiankacanshudiv {
        grid-template-columns: repeat(1, 1fr);
    }
    .cpubutdiv a {
        width: 50%;
    }
    .cpubutdiv a:first-child {
        width: 50%;
    }
}