/* ===== 蛋白定量与稀释 · 配液台 ===== */
.pqd {
    background: #f8fcfb;
    border: 1px solid #d5e8e3;
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(13, 90, 82, .07);
}

.pqd-lab {
    display: grid;
    grid-template-columns: 118px 1fr 1.05fr;
    gap: 18px;
    align-items: stretch;
}

/* ---- 离心管 ---- */
.pqd-tube-wrap {
    background: #fff; border: 1px solid #d5e8e3; border-radius: 10px;
    padding: 12px 8px 10px; display: flex; flex-direction: column;
    align-items: center; gap: 6px;
}
.pqd-tube {
    position: relative; width: 46px; height: 142px;
    border: 2px solid #b7ded6; border-radius: 5px 5px 20px 20px;
    background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(224,244,240,.5) 45%, rgba(255,255,255,.85));
    overflow: hidden;
}
.pqd-tube::before {
    content: ''; position: absolute; top: -2px; left: -5px; right: -5px; height: 7px;
    background: #e6f4f1; border: 2px solid #b7ded6; border-radius: 3px;
    z-index: 2;
}
.pqd-tube .l2 {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(94, 234, 212, .55), rgba(45, 212, 191, .35));
    transition: height .4s, bottom .4s;
}
.pqd-tube .l1 {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #2dd4bf, #0f766e);
    transition: height .4s;
}
.pqd-tube .l1::before {
    content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 3px;
    background: #5eead4; opacity: .9; border-radius: 50%;
}
.pqd-tube-label { font: 700 10px/1.3 ui-monospace, monospace; color: #0f766e; text-align: center; }
.pqd-tube-label em { display: block; font-style: normal; font-size: 9px; color: #8aa7a1; font-weight: 400; }

/* ---- 读数 ---- */
.pqd-read {
    background: #fff; border: 1px solid #d5e8e3; border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.pqd-read-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pqd-read small { font-size: 10px; color: #8aa7a1; letter-spacing: .05em; display: block; }
.pqd-read b {
    font: 700 27px/1.05 ui-monospace, Consolas, monospace; color: #0f766e;
    font-variant-numeric: tabular-nums;
}
.pqd-read b em { font-style: normal; font-size: 10px; color: #8aa7a1; font-weight: 400; }
.pqd-read .pqd-mini { text-align: right; }
.pqd-read .pqd-mini b { font-size: 17px; color: #115e59; }
.pqd-eq {
    font: 10px/1.5 ui-monospace, monospace; color: #7d9a94;
    background: #f4fbf9; border-radius: 5px; padding: 6px 8px;
    border: 1px solid #e6f4f1;
}

/* ---- 曲线 ---- */
.pqd-chart-box { background: #fff; border: 1px solid #d5e8e3; border-radius: 10px; padding: 10px 12px 6px; }
.pqd-chart-head {
    display: flex; justify-content: space-between; font-size: 10px; color: #8aa7a1;
    margin-bottom: 2px;
}
.pqd-chart-head b { color: #0f766e; }
.pqd-chart svg { display: block; width: 100%; height: auto; }

/* ---- 稀释比例条 ---- */
.pqd-mix { margin-top: 18px; }
.pqd-mix-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10.5px; color: #7d9a94; margin-bottom: 7px;
}
.pqd-mix-head b { color: #0f766e; font-family: ui-monospace, monospace; }
.pqd-mix-bar {
    display: flex; height: 30px; border-radius: 7px; overflow: hidden;
    border: 1px solid #cbe7e1; background: #f0fdfa;
}
.pqd-mix-a, .pqd-mix-b {
    display: flex; align-items: center; justify-content: center;
    font: 700 10px/1 ui-monospace, monospace; white-space: nowrap;
    transition: width .35s;
}
.pqd-mix-a { background: linear-gradient(90deg, #0f766e, #14b8a6); color: #fff; }
.pqd-mix-b { background: #e6fbf6; color: #0f766e; }

/* ---- 标准品 ---- */
.pqd-std { margin-top: 18px; border-top: 1px solid #d5e8e3; padding-top: 14px; }
.pqd-std-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px;
}
.pqd-std-head span { font-size: 11px; font-weight: 700; color: #3f645e; letter-spacing: .05em; }
.pqd-std-head i { font-style: normal; font-size: 10px; color: #a3b8b3; }
.pqd-std-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pqd-chip {
    background: #fff; border: 1px solid #e3f1ee; border-radius: 7px; padding: 6px 7px;
}
.pqd-chip > span {
    display: block; font: 700 8.5px/1 ui-monospace, monospace; color: #7fbfb4;
    margin-bottom: 3px;
}
.pqd-chip input {
    width: 100%; min-width: 0; border: none; outline: none; background: transparent;
    font: 700 11.5px/1.4 ui-monospace, monospace; color: #115e59;
    font-variant-numeric: tabular-nums; padding: 0;
}
.pqd-chip input.j-od { color: #334155; }
.pqd-chip label {
    display: flex; align-items: baseline; gap: 4px;
    font-size: 8px; color: #a3b8b3; letter-spacing: .04em;
}
.pqd-chip input:focus { background: #f0fdfa; border-radius: 3px; }
.pqd-chip input.is-bad { color: #b91c1c; background: #fff1f2; }

/* ---- 参数 ---- */
.pqd-params { margin-top: 18px; border-top: 1px solid #d5e8e3; padding-top: 14px; }
.pqd-params h2 { font-size: 12px; letter-spacing: .07em; color: #3f645e; margin: 0 0 11px; }
.pqd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.pqd-grid label { display: flex; flex-direction: column; gap: 4px; }
.pqd-grid span { font-size: 10.5px; color: #7d9a94; }
.pqd-grid input {
    font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid #d5e8e3;
    border-radius: 5px; background: #fff; color: #115e59; font-variant-numeric: tabular-nums;
    min-width: 0;
}
.pqd-grid input:focus { outline: 2px solid rgba(15, 118, 110, .18); border-color: #0f766e; }
.pqd-grid input.is-bad { border-color: #dc2626; background: #fff1f2; }

.pqd-verdict {
    margin: 16px 0 0; padding: 10px 13px; border-radius: 8px;
    font-size: 11.5px; line-height: 1.7; color: #115e59; background: #effcf9;
    border-left: 3px solid #14b8a6;
}
.pqd-verdict.bad { color: #9f1239; background: #fff5f7; border-left-color: #e11d48; }

@media (max-width: 900px) {
    .pqd-lab { grid-template-columns: 100px 1fr; }
    .pqd-chart-box { grid-column: 1 / -1; }
    .pqd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .pqd { padding: 16px 13px; }
    .pqd-lab { grid-template-columns: 1fr; }
    .pqd-tube-wrap { flex-direction: row; justify-content: center; }
    .pqd-std-row { grid-template-columns: 1fr 1fr; }
    .pqd-read b { font-size: 23px; }
}

/* ---- 深色 ---- */
[data-theme="dark"] .pqd { background: #0c1413; border-color: #21302e; box-shadow: none; }
[data-theme="dark"] .pqd-tube-wrap, [data-theme="dark"] .pqd-read, [data-theme="dark"] .pqd-chart-box { background: #121b1a; border-color: #21302e; }
[data-theme="dark"] .pqd-tube { border-color: #2b4340; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(94,234,212,.05)); }
[data-theme="dark"] .pqd-tube::before { background: #1a2624; border-color: #2b4340; }
[data-theme="dark"] .pqd-tube-label { color: #5eead4; }
[data-theme="dark"] .pqd-read b { color: #5eead4; }
[data-theme="dark"] .pqd-read .pqd-mini b { color: #99f6e4; }
[data-theme="dark"] .pqd-read small, [data-theme="dark"] .pqd-chart-head, [data-theme="dark"] .pqd-mix-head, [data-theme="dark"] .pqd-std-head i { color: #7d9a94; }
[data-theme="dark"] .pqd-eq { background: #16211f; border-color: #21302e; color: #8aa7a1; }
[data-theme="dark"] .pqd-mix-bar { background: #16211f; border-color: #21302e; }
[data-theme="dark"] .pqd-mix-b { background: #16302c; color: #99f6e4; }
[data-theme="dark"] .pqd-std { border-color: #21302e; }
[data-theme="dark"] .pqd-std-head span { color: #b8d8d2; }
[data-theme="dark"] .pqd-chip { background: #121b1a; border-color: #21302e; }
[data-theme="dark"] .pqd-chip input { color: #d5f4ef; }
[data-theme="dark"] .pqd-chip input.j-od { color: #cbd5e1; }
[data-theme="dark"] .pqd-params { border-color: #21302e; }
[data-theme="dark"] .pqd-params h2 { color: #b8d8d2; }
[data-theme="dark"] .pqd-grid input { background: #121b1a; border-color: #21302e; color: #d5f4ef; }
[data-theme="dark"] .pqd-verdict { background: rgba(20, 184, 166, .1); color: #99f6e4; }
[data-theme="dark"] .pqd-verdict.bad { background: rgba(190, 18, 60, .12); color: #fda4af; }