.qcd-calc {
	--qcd-bg: #ffffff;
	--qcd-card: #f4f6fc;
	--qcd-line: #dde3f2;
	--qcd-text: #141a2e;
	--qcd-muted: #5f6880;
	--qcd-accent: #012698;
	--qcd-accent-2: #4d7dff;
	--qcd-warn-bg: #fff4e5;
	--qcd-warn: #8a4b00;
	--qcd-radius: 14px;

	color: var(--qcd-text);
	background: var(--qcd-bg);
	font-family: inherit;
	line-height: 1.45;
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 0;
	box-sizing: border-box;
}
.qcd-calc *, .qcd-calc *::before, .qcd-calc *::after { box-sizing: border-box; }

.qcd-head { margin-bottom: 24px; }
.qcd-title { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.qcd-sub { margin: 0; color: var(--qcd-muted); }

.qcd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.qcd-main { display: grid; gap: 20px; min-width: 0; }
.qcd-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.qcd-aside { display: grid; gap: 16px; }

.qcd-card {
	background: var(--qcd-card);
	border: 1px solid var(--qcd-line);
	border-radius: var(--qcd-radius);
	padding: 18px;
}
.qcd-card-h { display: block; font-weight: 700; font-size: 1rem; }
.qcd-card-sub { display: block; font-size: .85rem; color: var(--qcd-muted); margin-top: 2px; }

.qcd-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qcd-calc .qcd-pill {
	appearance: none;
	border: 1px solid var(--qcd-line);
	background: #fff;
	color: var(--qcd-text);
	border-radius: 999px;
	padding: 7px 13px;
	font: inherit;
	font-size: .88rem;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
}
.qcd-calc .qcd-pill:hover { border-color: var(--qcd-accent); }
.qcd-calc .qcd-pill:focus-visible { outline: 2px solid var(--qcd-accent); outline-offset: 2px; }
.qcd-calc .qcd-pill.is-active { background: var(--qcd-accent); border-color: var(--qcd-accent); color: #fff; }

.qcd-other-input {
	width: 100%;
	margin-top: 10px;
	padding: 9px 12px;
	border: 1px solid var(--qcd-line);
	border-radius: 10px;
	font: inherit;
	background: #fff;
}
.qcd-other-input[hidden] { display: none; }
.qcd-note { margin: 10px 0 0; font-size: .85rem; color: var(--qcd-muted); min-height: 1.2em; }

.qcd-result {
	background: var(--qcd-accent);
	color: #fff;
	border-radius: var(--qcd-radius);
	padding: 22px;
}
.qcd-result-h { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; margin-bottom: 14px; }
.qcd-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qcd-metric { background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 14px; min-width: 0; }
.qcd-metric.is-main { background: #fff; color: var(--qcd-accent); }
.qcd-metric .v { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; word-break: break-word; }
.qcd-metric .l { display: block; font-size: .8rem; margin-top: 6px; opacity: .85; }

.qcd-warn {
	margin: 14px 0 0;
	padding: 10px 12px;
	background: var(--qcd-warn-bg);
	color: var(--qcd-warn);
	border-radius: 8px;
	font-size: .9rem;
}
.qcd-warn[hidden] { display: none; }

.qcd-btn {
	display: inline-block;
	margin-top: 16px;
	background: #fff;
	color: var(--qcd-accent);
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}
.qcd-btn:hover { opacity: .9; }
.qcd-disclaimer { margin: 14px 0 0; font-size: .78rem; opacity: .75; }

.qcd-syringe-card { text-align: center; }
.qcd-syringe svg { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.qcd-syringe rect { transition: y .35s ease, height .35s ease; }
.qcd-s-liquid { opacity: .85; }
.qcd-s-stopper { fill: #1d2440; }
.qcd-s-target line { stroke: #e0452b; stroke-width: 2; transition: y1 .35s ease, y2 .35s ease; }
.qcd-s-target path { fill: #e0452b; }
.qcd-s-target text { fill: #e0452b; font-size: 12px; font-weight: 700; }
.qcd-s-metal { fill: #cdd4e6; }
.qcd-s-piston { fill: #9aa4c0; }
.qcd-s-needle { fill: #b6bed4; }
.qcd-s-barrel { fill: rgba(251, 252, 252, .55); stroke: #b6bed4; }
.qcd-s-ticks line { stroke: #3c4566; stroke-width: 1; opacity: .7; }
.qcd-s-ticks line.is-major { stroke-width: 1.5; opacity: .9; }
.qcd-s-ticks text { fill: var(--qcd-text); font-size: 10px; font-weight: 600; }
.qcd-syringe-units .near { display: block; font-size: .8rem; color: var(--qcd-muted); margin-top: 4px; min-height: 1.2em; }
.qcd-syringe-units { margin-top: 8px; }
.qcd-syringe-units .n { display: block; font-size: 2rem; font-weight: 700; color: var(--qcd-accent); line-height: 1; }
.qcd-syringe-units .u { font-size: .85rem; color: var(--qcd-muted); }

.qcd-formula ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; }
.qcd-formula b { display: block; }
.qcd-formula code { background: #fff; border: 1px solid var(--qcd-line); border-radius: 6px; padding: 2px 6px; font-size: .8rem; }

@media (max-width: 900px) {
	.qcd-layout { grid-template-columns: 1fr; }
	.qcd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qcd-aside { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.qcd-aside { grid-template-columns: 1fr; }
	.qcd-metric .v { font-size: 1.25rem; }
}