/* Devmant Compound Information widget. All rules are scoped to the widget root. */
.vr-ci {
	--vr-ci-ink: #0d0f12;
	--vr-ci-muted: #71767d;
	--vr-ci-line: #e6e8ea;
	--vr-ci-silver-soft: linear-gradient(135deg, #eceef0 0%, #f7f8f9 50%, #e4e7ea 100%);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--vr-ci-ink);
	background: linear-gradient(180deg, #fff 0%, #f7f8f9 100%);
}

.vr-ci *,
.vr-ci *::before,
.vr-ci *::after {
	box-sizing: border-box;
}

.vr-ci::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	opacity: .7;
	background-image:
		linear-gradient(var(--vr-ci-pattern-color, rgba(13, 15, 18, .035)) 1px, transparent 1px),
		linear-gradient(90deg, var(--vr-ci-pattern-color, rgba(13, 15, 18, .035)) 1px, transparent 1px);
	background-size: var(--vr-ci-pattern-size, 34px) var(--vr-ci-pattern-size, 34px);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 82%);
	mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.vr-ci--no-pattern::before { display: none; }

.vr-ci__inner {
	position: relative;
	max-width: none;
	margin: 0;
}

.vr-ci__eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 13px;
	border: 1px solid #c3c7cc;
	border-radius: 999px;
	color: #5c6169;
	background: var(--vr-ci-silver-soft);
	font-family: "JetBrains Mono", monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.vr-ci__title {
	max-width: 10ch;
	margin: 0 0 44px;
	color: inherit;
	font-family: Marcellus, serif;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 400;
	line-height: 1.1;
}

.vr-ci__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
	gap: 0;
	overflow: hidden;
	border: 1px solid #d9dde1;
	border-radius: 22px;
	box-shadow: 0 24px 58px rgba(13, 15, 18, .09);
}

.vr-ci__card {
	min-width: 0;
	padding: 36px 38px;
	border: 0;
	border-radius: 0;
	background: #fff;
}

.vr-ci__card--storage {
	border-left: 1px solid #d9dde1;
	color: var(--vr-ci-ink);
	background: linear-gradient(145deg, #f1f3f5 0%, #dce0e4 100%);
}

.vr-ci__card-kicker {
	margin: 0 0 11px;
	color: #8b929a;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.vr-ci__card--storage .vr-ci__card-kicker { color: #626a73; }

.vr-ci__card-title {
	margin: 0 0 8px;
	color: var(--vr-ci-ink);
	font-family: Marcellus, serif;
	font-size: 27px;
	font-weight: 400;
	line-height: 1.2;
}

.vr-ci__card-sub {
	margin: 0 0 6px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--vr-ci-line);
	color: var(--vr-ci-muted);
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	line-height: 1.5;
}

.vr-ci__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--vr-ci-line);
	font-family: Jost, sans-serif;
}

.vr-ci__row:last-child { border-bottom: 0; }

.vr-ci__row-label {
	flex-shrink: 0;
	color: var(--vr-ci-muted);
	font-size: 13.5px;
}

.vr-ci__row-value {
	color: var(--vr-ci-ink);
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	font-weight: 500;
	text-align: right;
	overflow-wrap: anywhere;
}

.vr-ci__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	border-bottom: 1px solid currentColor;
	color: var(--vr-ci-ink);
	font-family: Jost, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vr-ci__link--icon-before .vr-ci__link-icon { order: -1; }
.vr-ci__link-icon { display: inline-flex; color: currentColor; }
.vr-ci__link-icon i { font-size: 11px; }
.vr-ci__link-icon svg { width: 11px; height: 11px; fill: currentColor; }
.vr-ci__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.vr-ci__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(13, 15, 18, .13);
}

.vr-ci__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid rgba(13, 15, 18, .16);
	border-radius: 999px;
	color: #303740;
	background: rgba(255, 255, 255, .5);
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vr-ci__chip-icon { display: inline-flex; flex: 0 0 auto; color: currentColor; }
.vr-ci__chip-icon i { font-size: 10.5px; }
.vr-ci__chip-icon svg { width: 10.5px; height: 10.5px; fill: currentColor; }

.vr-ci__state {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	padding: 15px 16px;
	border: 1px solid rgba(13, 15, 18, .16);
	border-radius: 10px;
	background: rgba(255, 255, 255, .55);
	transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vr-ci__state:last-child { margin-bottom: 0; }

.vr-ci__state-name {
	color: #15191e;
	font-family: Jost, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
}

.vr-ci__state-meta {
	display: flex;
	gap: 18px;
	text-align: right;
}

.vr-ci__state-metric {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vr-ci__state-meta strong {
	color: #15191e;
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	line-height: 1.3;
}

.vr-ci__state-meta small {
	color: #66707a;
	font-family: "JetBrains Mono", monospace;
	font-size: 9px;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Optional refined dark + gold color scheme. Elementor style controls can override these defaults. */
.vr-ci--preset-dark-gold {
	--vr-ci-ink: var(--devmant-preset-text, #f8f6f3);
	--vr-ci-muted: var(--devmant-preset-muted, #a8a196);
	--vr-ci-line: var(--devmant-preset-border, rgba(208, 168, 92, .18));
	--vr-ci-silver-soft: rgba(208, 168, 92, .06);
	color: var(--devmant-preset-text, #f8f6f3);
	background: var(--devmant-preset-bg, #14130f);
}

.vr-ci--preset-dark-gold::before {
	opacity: .62;
	background-image:
		linear-gradient(color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 8%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 8%, transparent) 1px, transparent 1px);
}

.vr-ci--preset-dark-gold .vr-ci__eyebrow {
	border-color: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 25%, transparent);
	color: var(--devmant-preset-gold, #d0a85c);
	background: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 6%, transparent);
}

.vr-ci--preset-dark-gold .vr-ci__title,
.vr-ci--preset-dark-gold .vr-ci__card-title {
	color: var(--devmant-preset-heading, #f6f2e8);
}

.vr-ci--preset-dark-gold .vr-ci__grid {
	border-color: var(--devmant-preset-border, rgba(208, 168, 92, .18));
	border-radius: 18px;
	box-shadow: none;
}

.vr-ci--preset-dark-gold .vr-ci__card--molecular {
	background: var(--devmant-preset-surface, #111);
}

.vr-ci--preset-dark-gold .vr-ci__card--storage {
	border-color: var(--devmant-preset-border, rgba(208, 168, 92, .18));
	background: var(--devmant-preset-surface-alt, #1b1913);
}

.vr-ci--preset-dark-gold .vr-ci__card-kicker,
.vr-ci--preset-dark-gold .vr-ci__card--storage .vr-ci__card-kicker {
	color: var(--devmant-preset-gold, #d0a85c);
}

.vr-ci--preset-dark-gold .vr-ci__card-sub,
.vr-ci--preset-dark-gold .vr-ci__row-label,
.vr-ci--preset-dark-gold .vr-ci__state-meta small {
	color: var(--devmant-preset-muted, #a8a196);
}

.vr-ci--preset-dark-gold .vr-ci__card-sub,
.vr-ci--preset-dark-gold .vr-ci__row,
.vr-ci--preset-dark-gold .vr-ci__chips {
	border-color: var(--devmant-preset-border, rgba(208, 168, 92, .18));
}

.vr-ci--preset-dark-gold .vr-ci__row-value,
.vr-ci--preset-dark-gold .vr-ci__state-name,
.vr-ci--preset-dark-gold .vr-ci__state-meta strong {
	color: var(--devmant-preset-text, #f8f6f3);
}

.vr-ci--preset-dark-gold .vr-ci__link {
	color: var(--devmant-preset-gold, #d0a85c);
}

.vr-ci--preset-dark-gold .vr-ci__link:hover {
	color: var(--devmant-preset-cyan, #aadddd);
}

.vr-ci--preset-dark-gold .vr-ci__link:active {
	color: var(--devmant-preset-gold-secondary, #c6a76d);
}

.vr-ci--preset-dark-gold .vr-ci__link:focus-visible {
	color: var(--devmant-preset-cyan, #aadddd);
	outline-color: currentColor;
}

.vr-ci--preset-dark-gold .vr-ci__chip {
	border-color: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 25%, transparent);
	color: var(--devmant-preset-gold, #d0a85c);
	background: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 6%, transparent);
}

.vr-ci--preset-dark-gold .vr-ci__chip:hover {
	border-color: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 42%, transparent);
	background: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 15%, transparent);
}

.vr-ci--preset-dark-gold .vr-ci__state {
	border-color: var(--devmant-preset-border, rgba(208, 168, 92, .18));
	background: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 4%, transparent);
}

.vr-ci--preset-dark-gold .vr-ci__state:hover {
	border-color: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 35%, transparent);
	background: color-mix(in srgb, var(--devmant-preset-gold, #d0a85c) 8%, transparent);
}

.vr-ci--preset-dark-gold .vr-ci__chip:focus-visible,
.vr-ci--preset-dark-gold .vr-ci__state:focus-visible {
	outline: 2px solid var(--devmant-preset-cyan, #aadddd);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.vr-ci__grid { grid-template-columns: 1fr; }
	.vr-ci__card--storage { border-top: 1px solid #d9dde1; border-left: 0; }
	.vr-ci--preset-dark-gold .vr-ci__card--storage { border-top-color: var(--devmant-preset-border, rgba(208, 168, 92, .18)); }
}

@media (max-width: 620px) {
	.vr-ci__title { font-size: 34px; }
	.vr-ci__card { padding: 28px 22px; }
	.vr-ci__state { align-items: flex-start; flex-direction: column; }
	.vr-ci__state-meta { width: 100%; justify-content: space-between; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.vr-ci *, .vr-ci *::before, .vr-ci *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}