/* ===== 电导率与 TDS · 水质表盘 ===== */
.ctd {
    background: #f7fcfd;
    border: 1px solid #d5e8ef;
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(20, 90, 120, .07);
}

/* ---- 对数刻度尺 ---- */
.ctd-meter { margin-bottom: 18px; }
.ctd-meter-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; color: #7b98a5; letter-spacing: .05em; margin-bottom: 6px;
}
.ctd-meter-head b { color: #0369a1; font-family: ui-monospace, monospace; font-size: 11px; }
.ctd-ruler {
    position: relative; height: 34px; border-radius: 7px; overflow: hidden;
    border: 1px solid #d5e8ef; display: flex;
    box-shadow: inset 0 1px 3px rgba(20, 80, 110, .1);
}
.ctd-seg { height: 100%; }
.ctd-seg.s1 { flex: 5.4; background: linear-gradient(180deg, #e0f7fa, #b2ebf2); }
.ctd-seg.s2 { flex: 35.7; background: linear-gradient(180deg, #ccfbf1, #99f6e4); }
.ctd-seg.s3 { flex: 35.7; background: linear-gradient(180deg, #dcfce7, #bbf7d0); }
.ctd-seg.s4 { flex: 5.4; background: linear-gradient(180deg, #fef3c7, #fde68a); }
.ctd-seg.s5 { flex: 17.9; background: linear-gradient(180deg, #fee2e2, #fecaca); }
.ctd-pin {
    position: absolute; top: -3px; bottom: -3px; width: 8px;
    background: #0f172a; border-radius: 3px;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 23, 42, .35);
    transform: translateX(-50%); transition: left .4s;
}
.ctd-pin::before {
    content: ''; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid #0f172a;
}
.ctd-ticks {
    position: relative; height: 16px; margin-top: 2px;
    font: 700 8.5px/1 ui-monospace, monospace; color: #9ab2bd;
}
.ctd-ticks span {
    position: absolute; transform: translateX(-50%);
    border-left: 1px solid #cfe2ea; padding-left: 3px;
}

/* ---- 主读数 ---- */
.ctd-stage { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; }
.ctd-read {
    background: #fff; border: 1px solid #d5e8ef; border-radius: 10px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
}
.ctd-read-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ctd-ec25 small { font-size: 10px; color: #7b98a5; letter-spacing: .05em; display: block; }
.ctd-ec25 b {
    font: 700 38px/1 ui-monospace, Consolas, monospace; color: #0369a1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.ctd-ec25 b em { font-style: normal; font-size: 11px; color: #7b98a5; font-weight: 400; }
.ctd-grade {
    font-size: 10.5px; font-weight: 700; padding: 5px 9px; border-radius: 4px;
    background: #eff8fc; color: #075985; border: 1px solid #cfe6f0;
    white-space: nowrap;
}
.ctd-grade.bad { background: #fff5f5; color: #b91c1c; border-color: #f7dada; }

.ctd-compare {
    display: flex; align-items: center; gap: 8px;
    background: #f5fbfd; border-radius: 6px; padding: 7px 10px;
    font: 11px/1.4 ui-monospace, monospace; color: #6b8b99;
}
.ctd-compare b { color: #0369a1; }
.ctd-compare i { font-style: normal; color: #b8cdd6; }

.ctd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctd-card {
    background: #f8fcfd; border: 1px solid #e0eff5; border-radius: 7px;
    padding: 8px 10px;
}
.ctd-card span { display: block; font-size: 9.5px; color: #8aa5b2; }
.ctd-card b {
    font: 700 14px/1.35 ui-monospace, monospace; color: #0c4a6e;
    font-variant-numeric: tabular-nums;
}
.ctd-card b em { font-style: normal; font-size: 9px; color: #8aa5b2; font-weight: 400; }

/* ---- TDS 限值条 ---- */
.ctd-limit {
    background: #fff; border: 1px solid #d5e8ef; border-radius: 10px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.ctd-limit-head { display: flex; justify-content: space-between; align-items: baseline; }
.ctd-limit-head span { font-size: 10.5px; color: #7b98a5; }
.ctd-limit-head b {
    font: 700 26px/1 ui-monospace, monospace; color: #0c4a6e;
}
.ctd-limit-head b em { font-style: normal; font-size: 10px; color: #7b98a5; }
.ctd-bar {
    position: relative; height: 22px; border-radius: 5px;
    background: #eef6f9; border: 1px solid #dbeaf1; overflow: hidden;
}
.ctd-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #22d3ee, #0891b2);
    border-radius: 4px; transition: width .4s;
}
.ctd-bar-fill.bad { background: linear-gradient(90deg, #fb923c, #dc2626); }
.ctd-bar-mark {
    position: absolute; top: -2px; bottom: -2px; width: 2px; background: #dc2626;
    left: 50%; opacity: .8;
}
.ctd-bar-note {
    display: flex; justify-content: space-between; font-size: 9px; color: #9ab2bd;
}
.ctd-grades { display: flex; flex-wrap: wrap; gap: 5px; }
.ctd-grades span {
    font-size: 9.5px; padding: 3px 8px; border-radius: 10px;
    background: #f2f8fa; color: #9ab2bd; border: 1px solid #e4eff4;
}
.ctd-grades span.on {
    background: #0369a1; color: #fff; border-color: #0369a1;
    box-shadow: 0 2px 8px rgba(3, 105, 161, .25);
}

/* ---- 参数 ---- */
.ctd-params { margin-top: 18px; border-top: 1px solid #d5e8ef; padding-top: 15px; }
.ctd-params h2 { font-size: 12px; letter-spacing: .07em; color: #3f6172; margin: 0 0 11px; }
.ctd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.ctd-grid label { display: flex; flex-direction: column; gap: 4px; }
.ctd-grid span { font-size: 10.5px; color: #7b98a5; }
.ctd-grid input, .ctd-grid select {
    font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid #d5e8ef;
    border-radius: 5px; background: #fff; color: #0c4a6e; font-variant-numeric: tabular-nums;
    min-width: 0;
}
.ctd-grid input:focus, .ctd-grid select:focus { outline: 2px solid rgba(3, 105, 161, .16); border-color: #0369a1; }
.ctd-grid input.is-bad { border-color: #dc2626; background: #fff1f2; }

.ctd-verdict {
    margin: 15px 0 0; padding: 10px 13px; border-radius: 8px;
    font-size: 11.5px; line-height: 1.7; color: #075985; background: #f0f9ff;
    border-left: 3px solid #38bdf8;
}
.ctd-verdict.bad { color: #9f1239; background: #fff5f7; border-left-color: #e11d48; }
.ctd-note { margin: 10px 0 0; font-size: 11px; line-height: 1.8; color: #9ab2bd; }

@media (max-width: 880px) {
    .ctd-stage { grid-template-columns: 1fr; }
    .ctd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .ctd { padding: 16px 13px; }
    .ctd-ec25 b { font-size: 30px; }
    .ctd-cards { grid-template-columns: 1fr 1fr; }
    .ctd-grid { grid-template-columns: 1fr; }
}

/* ---- 深色 ---- */
[data-theme="dark"] .ctd { background: #0b1418; border-color: #1f2f36; box-shadow: none; }
[data-theme="dark"] .ctd-ruler { border-color: #1f2f36; }
[data-theme="dark"] .ctd-read, [data-theme="dark"] .ctd-limit { background: #111c21; border-color: #1f2f36; }
[data-theme="dark"] .ctd-ec25 b { color: #7dd3fc; }
[data-theme="dark"] .ctd-ec25 small, [data-theme="dark"] .ctd-limit-head span, [data-theme="dark"] .ctd-meter-head { color: #7b98a5; }
[data-theme="dark"] .ctd-compare { background: #16242a; color: #8aa5b2; }
[data-theme="dark"] .ctd-compare b { color: #7dd3fc; }
[data-theme="dark"] .ctd-card { background: #16242a; border-color: #1f2f36; }
[data-theme="dark"] .ctd-card b { color: #bae6fd; }
[data-theme="dark"] .ctd-limit-head b { color: #bae6fd; }
[data-theme="dark"] .ctd-bar { background: #16242a; border-color: #1f2f36; }
[data-theme="dark"] .ctd-grades span { background: #16242a; border-color: #1f2f36; color: #6b8b99; }
[data-theme="dark"] .ctd-grades span.on { background: #0e7490; border-color: #0e7490; color: #fff; }
[data-theme="dark"] .ctd-params { border-color: #1f2f36; }
[data-theme="dark"] .ctd-params h2 { color: #a8c4d0; }
[data-theme="dark"] .ctd-grid input, [data-theme="dark"] .ctd-grid select { background: #111c21; border-color: #1f2f36; color: #cfe8f5; }
[data-theme="dark"] .ctd-verdict { background: rgba(56, 189, 248, .1); color: #bae6fd; }
[data-theme="dark"] .ctd-verdict.bad { background: rgba(190, 18, 60, .12); color: #fda4af; }
[data-theme="dark"] .ctd-pin { background: #e2f5ff; box-shadow: 0 0 0 2px #0b1418; }
[data-theme="dark"] .ctd-pin::before { border-top-color: #e2f5ff; }