:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --ink:#172033;
    --muted:#657086;
    --line:#dbe3ef;
    --accent:#2857c5;
    --accent-soft:#eef3ff;
    --success:#16794b;
    --warning:#a55d00;
  }
  *{box-sizing:border-box}
  .chemistry-tools-acids-and-bases{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.45;
  }
  .chemistry-tools-acids-and-bases .page{
    max-width:1080px;
    margin:0 auto;
    padding:28px 18px 50px;
  }
  .chemistry-tools-acids-and-bases h1{
    margin:0 0 6px;
    font-size:clamp(26px,4vw,40px);
  }
  .chemistry-tools-acids-and-bases .subtitle{
    color:var(--muted);
    margin:0 0 24px;
  }
  .chemistry-tools-acids-and-bases .grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .chemistry-tools-acids-and-bases .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 18px rgba(30,55,90,.05);
  }
  .chemistry-tools-acids-and-bases .card h2{
    margin:0 0 16px;
    font-size:21px;
  }
  .chemistry-tools-acids-and-bases label{
    display:block;
    font-weight:700;
    margin:12px 0 6px;
  }
  .chemistry-tools-acids-and-bases input,
  .chemistry-tools-acids-and-bases select{
    width:100%;
    padding:11px 12px;
    border:1px solid #bcc8da;
    border-radius:9px;
    font-size:16px;
    background:#fff;
  }
  .chemistry-tools-acids-and-bases input:focus,
  .chemistry-tools-acids-and-bases select:focus{
    outline:3px solid rgba(40,87,197,.15);
    border-color:var(--accent);
  }
  .chemistry-tools-acids-and-bases .input-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .chemistry-tools-acids-and-bases .unit{
    color:var(--muted);
    font-size:13px;
    margin-top:4px;
  }
  .chemistry-tools-acids-and-bases button{
    margin-top:18px;
    padding:12px 18px;
    border:0;
    border-radius:9px;
    background:var(--accent);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
  }
  .chemistry-tools-acids-and-bases button:hover{filter:brightness(.95)}
  .chemistry-tools-acids-and-bases .result-card{
    margin-top:18px;
  }
  .chemistry-tools-acids-and-bases .summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
  }
  .chemistry-tools-acids-and-bases .metric{
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px;
    background:#fafcff;
  }
  .chemistry-tools-acids-and-bases .metric .k{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:4px;
  }
  .chemistry-tools-acids-and-bases .metric .v{
    font-size:18px;
    font-weight:700;
  }
  .chemistry-tools-acids-and-bases .badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    font-weight:700;
    font-size:13px;
  }
  .chemistry-tools-acids-and-bases table{
    width:100%;
    border-collapse:collapse;
    margin:12px 0 18px;
    background:#fff;
  }
  .chemistry-tools-acids-and-bases th,td{
    border:1px solid var(--line);
    padding:9px 10px;
    text-align:center;
  }
  .chemistry-tools-acids-and-bases th{
    background:#f1f5fb;
    font-weight:700;
  }
  .chemistry-tools-acids-and-bases .left{text-align:left}
  .chemistry-tools-acids-and-bases .equation{
    padding:13px 14px;
    background:#f8faff;
    border-left:4px solid var(--accent);
    border-radius:7px;
    margin:12px 0;
    font-family:"Cambria Math","Times New Roman",serif;
    font-size:18px;
    overflow:auto;
  }
  .chemistry-tools-acids-and-bases .step{
    margin:16px 0;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }
  .chemistry-tools-acids-and-bases .step:last-child{border-bottom:0}
  .chemistry-tools-acids-and-bases .step h3{
    margin:0 0 8px;
    font-size:17px;
  }
  .chemistry-tools-acids-and-bases .final{
    font-size:22px;
    font-weight:800;
    color:var(--success);
    background:#eefaf4;
    border:1px solid #ccebdc;
    border-radius:10px;
    padding:14px;
    margin-top:14px;
  }
  .chemistry-tools-acids-and-bases .note{
    color:var(--muted);
    font-size:14px;
  }
  .chemistry-tools-acids-and-bases .error{
    background:#fff3f3;
    border:1px solid #efc7c7;
    color:#8d2323;
    padding:12px;
    border-radius:9px;
  }
  @media (max-width:760px){
    .chemistry-tools-acids-and-bases .grid, .chemistry-tools-acids-and-bases .input-row, .chemistry-tools-acids-and-bases .summary{grid-template-columns:1fr}
  }
  @media print{
    .chemistry-tools-acids-and-bases{background:#fff}
    .chemistry-tools-acids-and-bases .page{max-width:none;padding:0}
    .chemistry-tools-acids-and-bases .card{box-shadow:none}
    button{display:none}
  }