/* ===== 超纯水等级 · 阶梯水塔 ===== */
.uwq {
    background: #f8fafd;
    border: 1px solid #dde5f2;
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(35, 60, 120, .07);
}

.uwq-stage {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    align-items: stretch;
}

/* ---- 阶梯塔 ---- */
.uwq-tower {
    background: #fff; border: 1px solid #dde5f2; border-radius: 10px;
    padding: 16px 16px 12px; display: flex; flex-direction: column;
}
.uwq-tower-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; color: #93a3bd; margin-bottom: 12px;
}
.uwq-tower-head b { color: #1d4ed8; }
.uwq-steps {
    flex: 1 1 auto; display: flex; align-items: flex-end; gap: 7px;
    min-height: 150px;
}
.uwq-step {
    flex: 1 1 0; border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #eef2fa, #dfe7f5);
    border: 1px solid #e0e7f4;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 6px 6px 8px; position: relative;
    transition: background .35s, box-shadow .35s, border-color .35s;
}
.uwq-step span {
    font: 700 9px/1.3 ui-monospace, monospace; color: #97a6be;
    display: block;
}
.uwq-step b {
    font: 700 11px/1.3 ui-monospace, monospace; color: #6b7d99;
    display: block;
}
.uwq-step em {
    position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
    font-style: normal; font-size: 8.5px; color: #a9b7cd; white-space: nowrap;
}
.uwq-step.on {
    background: linear-gradient(180deg, #dbeafe, #bfdbfe 60%, #93c5fd);
    border-color: #60a5fa;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .18);
}
.uwq-step.on span { color: #1e40af; }
.uwq-step.on b { color: #1d4ed8; }
.uwq-step.on em { color: #2563eb; font-weight: 700; }
.uwq-step.fail {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
    border-color: #f87171;
}
.uwq-step.fail span, .uwq-step.fail b { color: #b91c1c; }

/* ---- 读数 ---- */
.uwq-read {
    background: #fff; border: 1px solid #dde5f2; border-radius: 10px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.uwq-big small { font-size: 10px; color: #93a3bd; letter-spacing: .05em; display: block; }
.uwq-big b {
    font: 700 38px/1 ui-monospace, Consolas, monospace; color: #1d4ed8;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.uwq-big b em { font-style: normal; font-size: 11px; color: #93a3bd; font-weight: 400; }
.uwq-big i {
    font-style: normal; font-size: 11px; font-weight: 700; margin-left: 8px;
    padding: 4px 10px; border-radius: 4px; vertical-align: middle;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
}
.uwq-big i.bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.uwq-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.uwq-checks li {
    display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; color: #475569;
    background: #f8fafd; border: 1px solid #e6ecf7; border-radius: 6px;
    padding: 6px 10px;
}
.uwq-checks li b { margin-left: auto; font-family: ui-monospace, monospace; color: #1e293b; }
.uwq-checks li.ng { background: #fff7f7; border-color: #f6dcdc; color: #a13b3b; }
.uwq-checks li.ng b { color: #b91c1c; }
.uwq-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 7px; }
.uwq-checks li.ng .uwq-dot { background: #dc2626; }

/* ---- 参数 ---- */
.uwq-params { margin-top: 18px; border-top: 1px solid #dde5f2; padding-top: 15px; }
.uwq-params h2 { font-size: 12px; letter-spacing: .07em; color: #475569; margin: 0 0 11px; }
.uwq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.uwq-grid label { display: flex; flex-direction: column; gap: 4px; }
.uwq-grid span { font-size: 10.5px; color: #93a3bd; }
.uwq-grid input {
    font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid #dde5f2;
    border-radius: 5px; background: #fff; color: #1e293b; font-variant-numeric: tabular-nums;
    min-width: 0;
}
.uwq-grid input:focus { outline: 2px solid rgba(29, 78, 216, .16); border-color: #1d4ed8; }
.uwq-grid input.is-bad { border-color: #dc2626; background: #fff1f2; }

.uwq-verdict {
    margin: 15px 0 0; padding: 10px 13px; border-radius: 8px;
    font-size: 11.5px; line-height: 1.7; color: #1e40af; background: #eff6ff;
    border-left: 3px solid #3b82f6;
}
.uwq-verdict.bad { color: #9f1239; background: #fff5f7; border-left-color: #e11d48; }

@media (max-width: 880px) {
    .uwq-stage { grid-template-columns: 1fr; }
    .uwq-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .uwq { padding: 16px 13px; }
    .uwq-big b { font-size: 30px; }
    .uwq-grid { grid-template-columns: 1fr; }
    .uwq-steps { min-height: 120px; }
}

/* ---- 深色 ---- */
[data-theme="dark"] .uwq { background: #0d1117; border-color: #232c3d; box-shadow: none; }
[data-theme="dark"] .uwq-tower, [data-theme="dark"] .uwq-read { background: #121822; border-color: #232c3d; }
[data-theme="dark"] .uwq-step { background: linear-gradient(180deg, #18202e, #131a26); border-color: #232c3d; }
[data-theme="dark"] .uwq-step b { color: #8fa1bd; }
[data-theme="dark"] .uwq-step.on { background: linear-gradient(180deg, #1b2a44, #1e3a5f); border-color: #2563eb; }
[data-theme="dark"] .uwq-step.on b { color: #93c5fd; }
[data-theme="dark"] .uwq-big b { color: #93c5fd; }
[data-theme="dark"] .uwq-big small, [data-theme="dark"] .uwq-tower-head, [data-theme="dark"] .uwq-grid span { color: #8fa1bd; }
[data-theme="dark"] .uwq-checks li { background: #16202c; border-color: #232c3d; color: #b6c2d4; }
[data-theme="dark"] .uwq-checks li b { color: #e2e8f0; }
[data-theme="dark"] .uwq-params { border-color: #232c3d; }
[data-theme="dark"] .uwq-params h2 { color: #b6c2d4; }
[data-theme="dark"] .uwq-grid input { background: #121822; border-color: #232c3d; color: #dbe4f0; }
[data-theme="dark"] .uwq-verdict { background: rgba(59, 130, 246, .12); color: #bfdbfe; }
[data-theme="dark"] .uwq-verdict.bad { background: rgba(190, 18, 60, .12); color: #fda4af; }