.qa-dashboard,
.qa-access-denied{
    min-height:100vh;
    box-sizing:border-box;
    background:#f3eee6;
    color:#3d332b;
    font-family:"Microsoft YaHei","PingFang SC",sans-serif;
}

.qa-dashboard{
    padding:36px max(24px, calc((100vw - 1180px) / 2)) 70px;
}

.qa-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    padding-bottom:28px;
    border-bottom:1px solid #d5c8b8;
}

.qa-header p{
    margin:0 0 10px;
    color:#99795c;
    font-size:11px;
    letter-spacing:3px;
}

.qa-header h1{
    margin:0;
    font-family:serif;
    font-size:36px;
    font-weight:400;
}

.qa-header span{
    display:block;
    margin-top:10px;
    color:#8a7a6c;
    font-size:13px;
}

.qa-header a{
    color:#735d49;
    font-size:13px;
    text-decoration:none;
}

.qa-controls{
    display:flex;
    align-items:flex-end;
    gap:14px;
    margin:24px 0;
    padding:18px;
    border:1px solid #d9cbbb;
    border-radius:16px;
    background:#fffaf3;
}

.qa-controls label{
    color:#766555;
    font-size:12px;
}

.qa-controls select{
    display:block;
    min-width:210px;
    margin-top:8px;
    padding:11px 12px;
    border:1px solid #cabaa7;
    border-radius:9px;
    background:white;
    color:#44382f;
}

.qa-controls button{
    width:auto;
    margin:0;
    padding:12px 22px;
    border:0;
    border-radius:9px;
    background:#3c3027;
    color:#fff8ee;
    cursor:pointer;
}

.qa-controls button:disabled{
    cursor:wait;
    opacity:.65;
}

.qa-metrics{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
}

.qa-run-confirm{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
    padding:12px 16px;
    border:1px solid #b8d1bf;
    border-radius:12px;
    background:#f2f8f3;
    color:#48745a;
    font-size:12px;
}

.qa-run-confirm strong{
    font-weight:500;
}

.qa-run-confirm span{
    color:#718578;
}

.qa-running{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:260px;
    border:1px solid #ded1c1;
    border-radius:16px;
    background:#fffaf3;
    color:#675747;
    text-align:center;
}

.qa-running i{
    width:30px;
    height:30px;
    margin-bottom:18px;
    border:3px solid #e5d8c8;
    border-top-color:#795f49;
    border-radius:50%;
    animation:qa-spin .8s linear infinite;
}

.qa-running strong{
    font-size:15px;
    font-weight:500;
}

.qa-running span{
    margin-top:8px;
    color:#998777;
    font-size:12px;
}

@keyframes qa-spin{
    to{ transform:rotate(360deg); }
}

.qa-metrics article,
.qa-panel,
.qa-alerts{
    border:1px solid #ded1c1;
    border-radius:16px;
    background:#fffaf3;
}

.qa-metrics article{
    padding:21px;
}

.qa-metrics span,
.qa-metrics small{
    display:block;
    color:#89796b;
    font-size:11px;
}

.qa-metrics strong{
    display:block;
    margin:10px 0 7px;
    color:#44382e;
    font-family:serif;
    font-size:29px;
    font-weight:400;
}

.qa-good{
    color:#48745a !important;
}

.qa-watch{
    color:#a26733 !important;
}

.qa-bad{
    color:#a34339 !important;
}

.qa-alerts{
    margin-top:14px;
    padding:22px 24px;
    border-color:#d6b58e;
    background:#fff5e8;
}

.qa-alerts.qa-all-clear{
    border-color:#b8d1bf;
    background:#f2f8f3;
}

.qa-alerts h2,
.qa-panel h2{
    margin:0 0 15px;
    font-size:17px;
    font-weight:500;
}

.qa-alerts ul{
    margin:0;
    padding-left:20px;
    color:#76573e;
    font-size:13px;
    line-height:1.9;
}

.qa-method-note{
    margin:14px 0 0;
    color:#8c7b6a;
    font-size:11px;
    line-height:1.7;
}

.qa-two-column{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:14px;
}

.qa-panel{
    min-width:0;
    padding:22px;
}

.qa-table-wrap{
    overflow-x:auto;
}

.qa-panel table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.qa-panel th,
.qa-panel td{
    padding:11px 8px;
    border-top:1px solid #eadfd2;
    text-align:left;
    white-space:nowrap;
}

.qa-panel th{
    color:#9a8876;
    font-weight:400;
}

.qa-warning-row{
    color:#9b593b;
    background:#fff4ea;
}

.qa-ranked-list{
    max-height:390px;
    overflow:auto;
}

.qa-list-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:12px 4px;
    border-top:1px solid #eadfd2;
    font-size:12px;
}

.qa-list-row strong{
    color:#8b6b4f;
    font-weight:400;
    white-space:nowrap;
}

.qa-empty,
.qa-loading{
    color:#958574;
    font-size:13px;
}

.qa-loading{
    padding:60px 0;
    text-align:center;
}

.qa-access-denied{
    padding:15vh 10vw;
}

@media(max-width:760px){
    .qa-dashboard{
        padding:24px 16px 50px;
    }

    .qa-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .qa-header h1{
        font-size:30px;
    }

    .qa-controls{
        align-items:stretch;
        flex-direction:column;
    }

    .qa-controls select{
        width:100%;
    }

    .qa-metrics,
    .qa-two-column{
        grid-template-columns:1fr;
    }
}