:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#121417;
  --muted:#5b6573;
  --border:#e6e9ee;
  --shadow:0 10px 30px rgba(0,0,0,.07);
  --accent:#0f766e;
  --accent-hover:#115e59;
  --ok:#16a34a;
  --warn:#dc2626;
  --info:#2563eb;
  --chip:#eef2f5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:24px 16px;
}

header{
  text-align:center;
  margin:8px 0 22px;
}
h1{
  margin:0 0 6px;
  font-size:clamp(1.6rem,3.6vw,2.3rem);
  letter-spacing:-0.01em;
}
.subtitle{
  margin:0;
  color:var(--muted);
  font-size:0.98rem;
}

.layout{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width: 900px){
  .layout{ grid-template-columns: 380px 1fr; align-items:start; }
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
}

.card h2{
  margin:0 0 12px;
  font-size:1.1rem;
}

.field{ margin:12px 0; }
.label{
  display:block;
  font-weight:700;
  margin:0 0 6px;
}
.row{
  display:flex;
  gap:10px;
  align-items:center;
}
input, select{
  width:100%;
  border:1.8px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font-size:1rem;
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(15,118,110,.7);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

.small{ width:120px; flex:0 0 120px; }
.unit-chip{
  white-space:nowrap;
  font-weight:650;
  font-size:.9rem;
  color:var(--muted);
  padding:8px 10px;
  background:var(--chip);
  border:1px solid var(--border);
  border-radius:999px;
}

.help{
  color:var(--muted);
  font-size:.86rem;
  margin-top:6px;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
button{
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font-weight:750;
  cursor:pointer;
  font-size:0.98rem;
}
.primary{
  background:var(--accent);
  color:#fff;
}
.primary:hover{ background:var(--accent-hover); }
.secondary{
  background:#eef2f5;
  color:var(--text);
  border:1px solid var(--border);
}
.secondary:hover{ filter:brightness(.98); }
.danger{
  background:rgba(220,38,38,.08);
  color:var(--warn);
  border:1px solid rgba(220,38,38,.2);
}
.danger:hover{ filter:brightness(.98); }

.notice{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fbfcfe;
  color:var(--muted);
  font-size:.9rem;
}
.notice strong{ color:var(--text); }

.error{
  display:none;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(220,38,38,.25);
  background:rgba(220,38,38,.06);
  color:#7f1d1d;
  font-size:.92rem;
}
.error.visible{ display:block; }

.results{
  display:none;
  gap:16px;
}
.results.visible{ display:grid; }

.result-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:#fafbfc;
}

.result-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.result-title{
  font-size:1.2rem;
  font-weight:850;
  margin:0;
}
.value{
  text-align:right;
}
.value .num{
  font-size:1.7rem;
  font-weight:900;
  line-height:1.05;
}
.value .unit{
  font-size:.86rem;
  color:var(--muted);
}

.badge{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:800;
}
.badge.ok{ background:rgba(22,163,74,.12); color:var(--ok); }
.badge.high{ background:rgba(220,38,38,.14); color:var(--warn); }
.badge.low{ background:rgba(220,38,38,.14); color:var(--warn); }
.badge.info{ background:rgba(2,132,199,.12); color:var(--accent2); }

.refline{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.86rem;
}

.chart-wrap{
  margin-top:12px;
  background:#fff;
  border:1px solid #eef1f4;
  border-radius:10px;
  height:290px;
  overflow:hidden;
}
canvas{ display:block; width:100%; height:100%; }

.tests{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.test-row{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.test-row .row{ margin-top:8px; }
.test-row .topline{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
}
.test-row .topline .left{
  display:flex;
  gap:10px;
  align-items:center;
  flex:1;
}
.test-row .remove-btn{
  padding:8px 10px;
  font-size:.9rem;
}

@media (max-width: 520px){
  .small{ width: 105px; flex-basis:105px; }
  .value .num{ font-size:1.45rem; }
}

.footer-note{
  margin: 14px auto 22px;
  padding: 14px 16px;
  max-width: 880px;
  text-align: center;
  border: 1px solid var(--border);
  background: #fbfcfe;
  border-radius: 12px;
  color: var(--muted);
  font-size: .9rem;
}
.footer-note p{ margin: 0; }
.footer-note p + p{ margin-top: 8px; }
.footer-note strong{ color: var(--text); }



button:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.2)}