/* ==========================================================================
   浆液浓度换算器 —— /tools/slurry-concentration
   所有选择器都锚在 .tool-slurry 下，令牌也定义在 .tool-slurry 上而不是 :root，
   避免和站点主样式表 css/styles.css 互相污染。
   ========================================================================== */
.tool-slurry{
  --ts-bg:#ffffff; --ts-surface:#f7f8f8; --ts-surface-2:#eef0f0; --ts-border:#dfe2e2;
  --ts-text:#1a1c1c; --ts-minor:#5c6363; --ts-slim:#878f8f;
  --ts-accent:#0b6e5f; --ts-warn:#8a5a00; --ts-warn-bg:#fdf3e0;
  --ts-solid:#0b6e5f; --ts-liquid:#b9c6c6;
  --ts-ok:#1a7f5a; --ts-caution:#b0791a; --ts-bad:#b33a2b; --ts-high:#3a6ea5;
  color:var(--ts-text);
}
@media (prefers-color-scheme:dark){
  .tool-slurry{
    --ts-bg:#161818; --ts-surface:#1e2121; --ts-surface-2:#262a2a; --ts-border:#343939;
    --ts-text:#e9ecec; --ts-minor:#a8b0b0; --ts-slim:#7d8686;
    --ts-accent:#4cc0a8; --ts-warn:#e0b05c; --ts-warn-bg:#2e2412;
    --ts-solid:#4cc0a8; --ts-liquid:#495252;
    --ts-ok:#2f9c72; --ts-caution:#c9923a; --ts-bad:#cc5544; --ts-high:#5a8cc0;
  }
}

.tool-slurry .ts-wrap{max-width:880px;margin:0 auto;padding:0 16px}
.tool-slurry h2{font-size:16px;margin:34px 0 12px;letter-spacing:.02em}
.tool-slurry .ts-lede{color:var(--ts-minor);font-size:15px;margin:0 0 8px}

.tool-slurry .ts-card{background:var(--ts-surface);border:1px solid var(--ts-border);
  border-radius:10px;padding:16px 16px 14px}
.tool-slurry .ts-grid{display:grid;gap:12px 18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.tool-slurry .ts-grid.ts-one{grid-template-columns:minmax(200px,280px)}

.tool-slurry label{display:block;font-size:13px;color:var(--ts-minor);margin-bottom:5px}
.tool-slurry input[type=number],
.tool-slurry select{width:100%;padding:8px 10px;font:inherit;font-size:14px;
  background:var(--ts-bg);color:var(--ts-text);border:1px solid var(--ts-border);border-radius:6px}
.tool-slurry input:focus,
.tool-slurry select:focus{outline:2px solid var(--ts-accent);outline-offset:-1px}
.tool-slurry .ts-hint{font-size:12px;color:var(--ts-slim);margin-top:4px}
.tool-slurry .ts-err{color:var(--ts-bad);font-size:13px;margin-top:8px;min-height:1.2em}

.tool-slurry .ts-modes{display:flex;border:1px solid var(--ts-border);border-radius:8px;
  overflow:hidden;margin-bottom:14px}
.tool-slurry .ts-modes button{flex:1;padding:9px 6px;font:inherit;font-size:13.5px;border:0;cursor:pointer;
  background:var(--ts-surface);color:var(--ts-minor);border-right:1px solid var(--ts-border)}
.tool-slurry .ts-modes button:last-child{border-right:0}
.tool-slurry .ts-modes button[aria-pressed=true]{background:var(--ts-accent);color:#fff;font-weight:600}

.tool-slurry .ts-out{display:grid;gap:1px;background:var(--ts-border);
  border:1px solid var(--ts-border);border-radius:10px;overflow:hidden;
  grid-template-columns:repeat(3,1fr)}
.tool-slurry .ts-out.ts-four{grid-template-columns:repeat(4,1fr)}
.tool-slurry .ts-out > div{background:var(--ts-surface);padding:12px 14px}
.tool-slurry .ts-out .ts-k{font-size:12px;color:var(--ts-minor);margin-bottom:3px}
.tool-slurry .ts-out .ts-v{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tool-slurry .ts-out .ts-u{font-size:12px;color:var(--ts-slim);margin-left:3px}
.tool-slurry .ts-out .ts-pri .ts-v{color:var(--ts-accent);font-weight:600}

.tool-slurry .ts-bar{display:flex;height:30px;border-radius:6px;overflow:hidden;
  margin:14px 0 6px;border:1px solid var(--ts-border)}
.tool-slurry .ts-bar i{display:block;font-style:normal;font-size:11.5px;line-height:30px;
  text-align:center;white-space:nowrap}
.tool-slurry .ts-bar .ts-s{background:var(--ts-solid);color:#fff}
.tool-slurry .ts-bar .ts-l{background:var(--ts-liquid);color:var(--ts-text)}
.tool-slurry .ts-barcap{font-size:12px;color:var(--ts-slim);text-align:center}

.tool-slurry .ts-status{display:flex;align-items:center;gap:9px;padding:11px 14px;
  border-radius:8px;margin-top:14px;font-size:13.5px;
  border:1px solid var(--ts-border);background:var(--ts-surface-2)}
.tool-slurry .ts-status .ts-sig{flex:none;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--ts-slim)}
.tool-slurry .ts-status.is-ok      {border-color:var(--ts-ok)}
.tool-slurry .ts-status.is-ok      .ts-sig{background:var(--ts-ok)}
.tool-slurry .ts-status.is-caution {border-color:var(--ts-caution)}
.tool-slurry .ts-status.is-caution .ts-sig{background:var(--ts-caution)}
.tool-slurry .ts-status.is-bad     {border-color:var(--ts-bad)}
.tool-slurry .ts-status.is-bad     .ts-sig{background:var(--ts-bad)}
.tool-slurry .ts-status.is-high    {border-color:var(--ts-high)}
.tool-slurry .ts-status.is-high    .ts-sig{background:var(--ts-high)}

.tool-slurry .ts-note{background:var(--ts-warn-bg);border-left:3px solid var(--ts-warn);
  border-radius:0 8px 8px 0;padding:12px 14px;margin:12px 0;font-size:13.5px}
.tool-slurry .ts-note b{color:var(--ts-warn)}
.tool-slurry .ts-note p{margin:0 0 8px}
.tool-slurry .ts-note p:last-child{margin:0}

.tool-slurry .ts-eq{background:var(--ts-surface-2);border-radius:8px;padding:12px 14px;font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ts-minor);
  line-height:1.9;overflow-x:auto;white-space:pre-wrap}
.tool-slurry code{background:var(--ts-surface-2);padding:1px 5px;border-radius:4px;font-size:12.5px}

.tool-slurry .ts-tablewrap{border:1px solid var(--ts-border);border-radius:10px;overflow-x:auto}
.tool-slurry table{width:100%;border-collapse:collapse;font-size:13.5px}
.tool-slurry th,.tool-slurry td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--ts-border)}
.tool-slurry thead th{color:var(--ts-minor);font-weight:600;font-size:12.5px;background:var(--ts-surface)}
.tool-slurry tbody tr:last-child td{border-bottom:0}
.tool-slurry td.ts-n{font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:560px){
  .tool-slurry .ts-out,
  .tool-slurry .ts-out.ts-four{grid-template-columns:repeat(2,1fr)}
  .tool-slurry .ts-grid.ts-one{grid-template-columns:1fr}
}