/*! CSS Portal — Blend Colors (builds on code-tool.css and generator-tool.css) */
.bl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bl [hidden] { display: none !important; }
.bl span, .bl small, .bl output, .bl code { line-height: inherit; }
.bl .gt-card__head h2 { margin: 0; }
.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bl-small { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ct-muted); }

/* ---------- inputs ---------- */
.bl-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 16px 8px; }
.bl-color { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.bl-swatch {
	position: relative; display: block; width: 96px; height: 96px; margin: 0; border-radius: 14px; cursor: pointer;
	background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
}
.bl-swatch::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230f172a' d='M224 67.3a35.8 35.8 0 0 0-11.3-25.7c-14-13.2-36.7-12.7-50.6 1.1l-28.4 28.6-8.5-8.6a16 16 0 0 0-22.6 22.6l4.7 4.7-56 56A39.8 39.8 0 0 0 40 177.6l-11.3 26.6a12 12 0 0 0 2.5 13.2 13.3 13.3 0 0 0 9.4 4.6 14 14 0 0 0 4.8-.9l25.6-11a39.8 39.8 0 0 0 25.6-11.5l56-56 4.7 4.7a16 16 0 0 0 22.6-22.6l-8.6-8.5 28.7-28.7a35.6 35.6 0 0 0 10-24.7Z'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.bl-swatch:focus-within { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12), 0 0 0 3px var(--ct-accent-soft), 0 0 0 5px var(--ct-accent); }
.bl-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.bl-fields { display: grid; gap: 8px; min-width: 0; }
.bl-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ct-text); }
.bl-fields input[type="text"], .bl-rgb input, .bl select {
	box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; margin: 0;
	font: 500 14px/1 var(--ct-mono); color: var(--ct-text); background: var(--ct-bg);
	border: 1px solid var(--ct-border-strong); border-radius: 8px; outline: none;
}
.bl select { width: auto; height: 34px; font-family: inherit; font-size: 13px; cursor: pointer; }
.bl-fields input:focus, .bl select:focus-visible { border-color: var(--ct-accent); box-shadow: 0 0 0 3px var(--ct-accent-soft); }
.bl-fields input[aria-invalid="true"] { border-color: var(--ct-err); }
.bl-msg { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ct-err); }
.bl-msg:empty { display: none; }
.bl-rgb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bl-rgb label { position: relative; margin: 0; }
.bl-rgb span { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--ct-muted); pointer-events: none; }
.bl-rgb input { padding-left: 24px; padding-right: 4px; -moz-appearance: textfield; appearance: textfield; }
.bl-rgb input::-webkit-inner-spin-button, .bl-rgb input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bl-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 12px; }

/* ---------- blend ---------- */
.bl-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding: 16px; }
.bl-controls { display: grid; gap: 14px; align-content: start; }
.bl-control { display: grid; gap: 8px; margin: 0; }
.bl-control__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ct-text); }
.bl-control__row small { font-weight: 400; color: var(--ct-muted); margin-left: 4px; }
.bl-control__row output { font: 600 13px/1 var(--ct-mono); color: var(--ct-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl input[type="range"] { width: 100%; margin: 0; accent-color: var(--ct-accent); cursor: pointer; }
.bl-presets { display: flex; gap: 4px; margin-top: -6px; }
.bl-presets .ct-tool { font-variant-numeric: tabular-nums; }
.bl-seg { width: max-content; max-width: 100%; }

.bl-result { display: grid; gap: 12px; align-content: start; }
.bl-result__swatch {
	display: grid; place-items: center; min-height: 168px; border-radius: 14px;
	background: var(--c); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12);
	transition: background-color .15s;
}
.bl-result__swatch span { font: 700 clamp(22px, 3vw, 30px)/1 var(--ct-mono); letter-spacing: .02em; text-transform: uppercase; }
.bl-strip { position: relative; height: 26px; border-radius: 8px; background: var(--g); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); }
.bl-strip::after {
	content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--at); width: 6px; margin-left: -3px;
	background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .55), 0 1px 4px rgba(15, 23, 42, .3);
}

.bl-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 8px; }
.bl-format, .bl-css {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px;
	padding: 9px 8px 9px 12px; background: var(--ct-surface); border: 1px solid var(--ct-border); border-radius: 10px;
}
.bl-format__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ct-muted); }
.bl-format__value, .bl-css code { grid-column: 1; padding: 0; background: none; font: 500 13.5px/1.4 var(--ct-mono); color: var(--ct-text); overflow-wrap: anywhere; }
.bl-format .ct-tool, .bl-css .ct-tool { grid-column: 2; grid-row: 1 / span 2; }
.bl-css { margin: 0 16px 16px; }
.bl .ct-tool.is-done { color: var(--ct-ok); }

/* ---------- steps ---------- */
.bl .gt-card__head { flex-wrap: wrap; gap: 8px 12px; }
.bl-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bl-steps { display: flex; align-items: center; gap: 8px; margin: 0 6px 0 0; font-size: 13px; font-weight: 600; color: var(--ct-text); }
.bl-steps input { width: 120px; }
.bl-steps output { min-width: 20px; font: 600 13px/1 var(--ct-mono); color: var(--ct-accent); }
.bl-hint { padding: 12px 16px 0; }
.bl-steps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 0; padding: 10px 16px 16px; list-style: none; }
.bl-steps-list li { margin: 0; min-width: 0; }
.bl-step {
	display: grid; align-content: space-between; gap: 18px; width: 100%; min-height: 96px; padding: 10px; margin: 0;
	border: 0; border-radius: 10px; background: var(--c); cursor: pointer; text-align: left;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1); transition: transform .12s;
}
.bl-step:hover { transform: translateY(-2px); }
.bl-step:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-bg), 0 0 0 5px var(--ct-accent); }
.bl-step.is-current { box-shadow: 0 0 0 2px var(--ct-bg), 0 0 0 4px var(--ct-text); }
.bl-step.is-done { box-shadow: 0 0 0 2px var(--ct-bg), 0 0 0 4px var(--ct-ok); }
.bl-step__pct { font-size: 11.5px; font-weight: 600; opacity: .8; }
.bl-step__hex { font: 600 12.5px/1.2 var(--ct-mono); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
	.bl-main { grid-template-columns: minmax(0, 1fr); }
	.bl-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.bl-inputs { grid-template-columns: minmax(0, 1fr); }
	.bl-formats { grid-template-columns: minmax(0, 1fr); }
	.bl-color { grid-template-columns: 76px minmax(0, 1fr); }
	.bl-swatch { width: 76px; height: 76px; }
	.bl-head-tools { margin-left: 0; width: 100%; }
	.bl-steps input { flex: 1; width: auto; }
	.bl-steps { flex: 1 1 100%; margin: 0; }
	.bl-steps-list { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}