*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:#0b1117;color:#e6edf3;margin:0}h1{font-size:24px;margin:0 0 16px}h2{font-size:18px;margin:0 0 12px}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.card{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:16px;box-shadow:0 1px 0 rgba(255,255,255,.04)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin:8px 0}
.sep{height:8px}
label{opacity:.85}
input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid #334155;background:#0f172a;color:#e6edf3;font-size:14px}
input:focus{outline:none;border-color:#0891b2;box-shadow:0 0 0 3px rgba(8,145,178,.25)}
.standards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.standards .head{font-weight:600;text-align:center;opacity:.8}
.standards .pct{display:flex;align-items:center;justify-content:center;background:#0f172a;border:1px solid #334155;border-radius:10px;padding:8px}
.standards .ri{}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:right}
.hint{opacity:.7;font-size:12px;margin-top:8px}
@media (max-width: 900px){.grid{grid-template-columns:1fr}}



.row{display:grid;grid-template-columns:220px 1fr;gap:12px;align-items:center;}
.row label{margin:0;}
.row input, .row .mono{width:100%;box-sizing:border-box;}
.row .mono{padding:10px 12px;border:1px solid var(--border);border-radius:10px;min-height:40px;display:flex;align-items:center;}
.subhead{margin:8px 0 12px 0;font-size:0.95rem;opacity:0.85;font-weight:600;}






/* --- Premix Calculator layout (label left, value/input right) --- */
.premix-card .row{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px 0;
}

.premix-card .row label{
  margin:0;
  font-weight:600;
  flex:1 1 auto;
  min-width:0;
}

.premix-card .row input,
.premix-card .row .mono{
  flex:0 0 auto;
  width:150px;
}

.premix-card .row input{
  text-align:right;
}

.premix-card .row .mono{
  padding:0;
  border:none;
  background:transparent;
  min-height:unset;
  display:block;
  text-align:right;
  font-variant-numeric: tabular-nums;
}