.actv {
	--actv-navy: #081a31;
	--actv-blue: #168fc9;
	--actv-cyan: #45c4e7;
	--actv-ink: #10233d;
	--actv-muted: #5d6c7f;
	--actv-line: #d9e2ec;
	--actv-soft: #f4f8fb;
	--actv-green: #238c50;
	--actv-orange: #e87716;
	overflow: hidden;
	margin: 1.5rem 0;
	border: 1px solid #cfd9e4;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(8, 26, 49, .12);
	color: var(--actv-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.actv * { box-sizing: border-box; }
.actv__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.6rem 1.8rem;
	background: var(--actv-navy);
	color: #fff;
}
.actv__header h2 {
	margin: .2rem 0 0;
	color: #fff;
	font-size: clamp(1.45rem, 3vw, 2.25rem);
	line-height: 1.12;
}
.actv__eyebrow {
	margin: 0;
	color: var(--actv-cyan);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .14em;
}
.actv__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .55rem;
}
.actv__badge {
	display: inline-flex;
	align-items: center;
	min-height: 2.15rem;
	padding: .4rem .75rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	white-space: nowrap;
}
.actv__badge--data { background: #0c3f62; color: #8be6ff; }
.actv__badge--qc { background: #23364d; color: #fff; }
.actv__workflow {
	display: flex;
	align-items: center;
	gap: .55rem;
	overflow-x: auto;
	padding: .85rem 1.8rem;
	border-bottom: 1px solid var(--actv-line);
	background: #f9fbfd;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
}
.actv__workflow span {
	padding: .38rem .62rem;
	border: 1px solid #d7e7f0;
	border-radius: 999px;
	background: #eaf6fb;
}
.actv__workflow b { color: var(--actv-blue); }
.actv__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
	gap: 0;
}
.actv__visual {
	padding: 1.25rem;
	background: #eef3f7;
}
.actv__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid #cbd6e0;
	border-radius: 18px;
	background: #0a1726;
	box-shadow: 0 10px 25px rgba(8, 26, 49, .15);
	cursor: crosshair;
	outline: none;
	touch-action: none;
}
.actv__stage:focus-visible {
	box-shadow: 0 0 0 4px rgba(22, 143, 201, .28), 0 10px 25px rgba(8, 26, 49, .15);
}
.actv__image {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}
.actv__marker {
	position: absolute;
	z-index: 3;
	width: 34px;
	height: 34px;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--actv-cyan), 0 2px 8px rgba(0, 0, 0, .45);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.actv__marker::before,
.actv__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}
.actv__marker::before { width: 52px; height: 2px; }
.actv__marker::after { width: 2px; height: 52px; }
.actv__tooltip {
	position: absolute;
	z-index: 4;
	display: grid;
	gap: .12rem;
	max-width: 240px;
	padding: .55rem .7rem;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 10px;
	background: rgba(8, 26, 49, .93);
	color: #fff;
	font-size: .73rem;
	line-height: 1.25;
	box-shadow: 0 6px 18px rgba(0,0,0,.24);
	transform: translate(16px, 16px);
	pointer-events: none;
}
.actv__tooltip strong { color: var(--actv-cyan); }
.actv__help {
	margin: .8rem .2rem 0;
	color: var(--actv-muted);
	font-size: .82rem;
}
.actv__panel {
	display: grid;
	gap: .85rem;
	align-content: start;
	padding: 1.25rem;
	background: #fff;
}
.actv__status {
	padding: .65rem .8rem;
	border-radius: 10px;
	background: #eaf6fb;
	color: #075f8f;
	font-size: .83rem;
	font-weight: 750;
}
.actv__status.is-ready { background: #e8f7ed; color: #176b3c; }
.actv__status.is-error { background: #fff0f0; color: #a12d2d; }
.actv__section {
	padding: 1rem;
	border: 1px solid var(--actv-line);
	border-radius: 14px;
	background: var(--actv-soft);
}
.actv__section h3 {
	margin: 0 0 .75rem;
	color: var(--actv-ink);
	font-size: .96rem;
}
.actv__section--two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.actv__data {
	display: grid;
	gap: .35rem;
	margin: 0;
}
.actv__data > div {
	display: grid;
	grid-template-columns: minmax(130px, .9fr) minmax(0, 1.1fr);
	gap: .6rem;
	padding-bottom: .32rem;
	border-bottom: 1px solid rgba(217, 226, 236, .75);
}
.actv__data > div:last-child { border-bottom: 0; padding-bottom: 0; }
.actv__data dt {
	color: var(--actv-muted);
	font-size: .76rem;
	font-weight: 700;
}
.actv__data dd {
	overflow-wrap: anywhere;
	margin: 0;
	color: var(--actv-ink);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}
.actv__metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
}
.actv__metrics div {
	padding: .6rem;
	border-radius: 10px;
	background: #fff;
	text-align: center;
}
.actv__metrics span {
	display: block;
	color: var(--actv-muted);
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
}
.actv__metrics strong {
	display: block;
	margin-top: .18rem;
	color: var(--actv-green);
	font-size: 1.18rem;
	font-variant-numeric: tabular-nums;
}
.actv__shares {
	margin: .7rem 0 0;
	color: var(--actv-muted);
	font-size: .76rem;
}
.actv__provenance { background: #fff; }
.actv__provenance p { margin: .35rem 0; font-size: .8rem; }
.actv__hash {
	display: grid;
	grid-template-columns: 115px minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
}
.actv__hash span { color: var(--actv-muted); font-weight: 700; }
.actv__hash code {
	overflow-wrap: anywhere;
	padding: 0;
	background: transparent;
	color: var(--actv-ink);
	font-size: .7rem;
}
.actv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: .85rem;
}
.actv__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.35rem;
	padding: .45rem .75rem;
	border: 1px solid var(--actv-blue);
	border-radius: 9px;
	background: var(--actv-blue);
	color: #fff !important;
	font: inherit;
	font-size: .76rem;
	font-weight: 750;
	text-decoration: none !important;
	cursor: pointer;
}
.actv__button:hover,
.actv__button:focus-visible { filter: brightness(.94); }
.actv__button--secondary {
	background: #fff;
	color: var(--actv-blue) !important;
}
.actv__notice {
	margin: 0;
	padding: .8rem;
	border-left: 4px solid var(--actv-orange);
	background: #fff6ea;
	color: #6f4a22;
	font-size: .76rem;
	line-height: 1.45;
}
.actv-error {
	padding: 1rem;
	border-left: 4px solid #b42318;
	background: #fff1f0;
}
@media (max-width: 980px) {
	.actv__grid { grid-template-columns: 1fr; }
	.actv__section--two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.actv { border-radius: 14px; }
	.actv__header { align-items: flex-start; flex-direction: column; padding: 1.15rem; }
	.actv__badges { justify-content: flex-start; }
	.actv__workflow { padding: .7rem 1rem; }
	.actv__visual, .actv__panel { padding: .85rem; }
	.actv__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.actv__data > div { grid-template-columns: 1fr; gap: .08rem; }
	.actv__hash { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.actv *, .actv *::before, .actv *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}


/* ==========================================================
   ATLAS Clarus Trace — BEFORE / AFTER Compare v0.2.0
   ========================================================== */
.actv-compare {
  --actvc-navy:#081a31;
  --actvc-blue:#168fc9;
  --actvc-orange:#e87716;
  --actvc-line:#d9e2ec;
  --actvc-soft:#f4f8fb;
  margin:1.5rem 0;
  overflow:hidden;
  border:1px solid #cfd9e4;
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 50px rgba(8,26,49,.12);
  color:#10233d;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.actv-compare *{box-sizing:border-box}
.actv-compare__header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.4rem 1.6rem;background:var(--actvc-navy);color:#fff}
.actv-compare__header h2{margin:.2rem 0 0;color:#fff;font-size:clamp(1.4rem,2.7vw,2.1rem)}
.actv-compare__eyebrow{margin:0;color:#56d2f0;font-size:.78rem;font-weight:800;letter-spacing:.13em}
.actv-compare__badge{display:inline-block;padding:.45rem .75rem;border-radius:999px;background:#23364d;color:#fff;font-size:.73rem;font-weight:800}
.actv-compare__warning{margin:0;padding:.75rem 1.5rem;border-bottom:1px solid #f2d4ac;background:#fff6ea;color:#6f4a22;font-size:.78rem}
.actv-compare__status{margin:1rem 1.2rem 0;padding:.65rem .8rem;border-radius:10px;background:#eaf6fb;color:#075f8f;font-size:.82rem;font-weight:750}
.actv-compare__status.is-ready{background:#e8f7ed;color:#176b3c}
.actv-compare__status.is-error{background:#fff0f0;color:#a12d2d}
.actv-compare__toolbar{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;padding:1rem 1.2rem}
.actv-compare__button,.actv-compare__select{min-height:2.25rem;border:1px solid #168fc9;border-radius:9px;background:#fff;color:#0b5f8b;padding:.42rem .7rem;font:inherit;font-size:.78rem;font-weight:750}
.actv-compare__button{cursor:pointer}
.actv-compare__button[aria-pressed="true"]{background:#168fc9;color:#fff}
.actv-compare__triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:0 1.2rem 1.2rem}
.actv-compare__card{min-width:0;border:1px solid var(--actvc-line);border-radius:15px;background:var(--actvc-soft);overflow:hidden}
.actv-compare__card h3{margin:0;padding:.7rem .8rem;border-bottom:1px solid var(--actvc-line);font-size:.9rem}
.actv-compare__stage{position:relative;overflow:hidden;background:#0a1726;cursor:crosshair;touch-action:none}
.actv-compare__stage.is-roi-mode{cursor:crosshair}
.actv-compare__image{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.actv-compare__marker{position:absolute;z-index:3;width:22px;height:22px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #45c4e7;transform:translate(-50%,-50%);pointer-events:none}
.actv-compare__roi{position:absolute;z-index:4;border:2px solid #fff;box-shadow:0 0 0 2px #e87716;background:rgba(232,119,22,.08);pointer-events:none}
.actv-compare__section{margin:0 1.2rem 1.2rem;padding:1rem;border:1px solid var(--actvc-line);border-radius:14px;background:var(--actvc-soft)}
.actv-compare__section h3{margin:0 0 .75rem;font-size:.98rem}
.actv-compare__signature{width:100%;height:auto;min-height:260px;background:#fff;border:1px solid #dbe4ed;border-radius:10px}
.actv-compare__axis{stroke:#8190a2;stroke-width:1}
.actv-compare__tick{font-size:12px;fill:#617184}
.actv-compare__sig-before{fill:none;stroke:#195aa0;stroke-width:3}
.actv-compare__sig-after{fill:none;stroke:#dc5a28;stroke-width:2.5}
.actv-compare__legend{display:flex;gap:1rem;margin:.55rem 0 0;font-size:.76rem}
.actv-compare__legend span::before{content:"";display:inline-block;width:16px;height:3px;margin-right:.35rem;vertical-align:middle}
.actv-compare__legend .before::before{background:#195aa0}
.actv-compare__legend .after::before{background:#dc5a28}
.actv-compare__data-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}
.actv-compare__metric{padding:.65rem;border-radius:10px;background:#fff}
.actv-compare__metric span{display:block;color:#66768a;font-size:.68rem;font-weight:800;text-transform:uppercase}
.actv-compare__metric strong{display:block;margin-top:.18rem;font-size:1rem;font-variant-numeric:tabular-nums}
.actv-compare__inspector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.actv-compare__inspector dl{margin:0;display:grid;gap:.3rem}
.actv-compare__inspector div{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr);gap:.4rem;padding-bottom:.25rem;border-bottom:1px solid #dce5ed}
.actv-compare__inspector dt{color:#657588;font-size:.72rem;font-weight:750}
.actv-compare__inspector dd{margin:0;font-size:.76rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.actv-compare__roi-info[hidden]{display:none}
.actv-compare__footer{margin:0;padding:.8rem 1.2rem 1.2rem;color:#657588;font-size:.76rem}
@media(max-width:1050px){.actv-compare__triple{grid-template-columns:1fr}.actv-compare__inspector{grid-template-columns:1fr}.actv-compare__data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.actv-compare{border-radius:14px}.actv-compare__header{flex-direction:column}.actv-compare__data-grid{grid-template-columns:1fr}}

.actv-compare__change-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.65rem;
  margin:0 1.2rem 1rem;
  padding:.8rem;
  border:1px solid #cfe1ec;
  border-radius:12px;
  background:#eef7fb;
}
.actv-compare__change-summary div{
  padding:.55rem .65rem;
  border-radius:9px;
  background:#fff;
}
.actv-compare__change-summary span{
  display:block;
  color:#66768a;
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
}
.actv-compare__change-summary strong{
  display:block;
  margin-top:.2rem;
  color:#0b5f8b;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.actv-compare__max-marker{
  stroke:#8a2a23;
  stroke-width:1.5;
  stroke-dasharray:5 4;
}
.actv-compare__max-label{
  fill:#8a2a23;
  font-size:13px;
  font-weight:700;
}
@media(max-width:900px){
  .actv-compare__change-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .actv-compare__change-summary{grid-template-columns:1fr}
}