.acr-box {
	position:relative;
	min-width:0;
	min-height:104px;
	display:flex;
	align-items:center;
	gap:13px;
	padding:14px 15px;
	overflow:hidden;
	border:1px solid var(--diver);
	border-radius:16px;
	background:var(--surface-color);
	color:var(--primary-text);
	text-decoration:none;
	touch-action:manipulation;
	transition:
		transform var(--transition),
		border-color var(--transition),
		box-shadow var(--transition),
		background-color var(--transition);
}

.acr-box::before {
	content:"";
	position:absolute;
	width:86px;
	height:86px;
	inset-inline-end:-38px;
	top:-42px;
	border-radius:50%;
	background:color-mix(in srgb,var(--uicolor) 7%,transparent);
	pointer-events:none;
}

.acr-logo {
	position:relative;
	z-index:2;
	width:68px;
	height:78px;
	flex:0 0 78px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:13px;
	background:color-mix(in srgb,var(--uicolor) 5%,var(--surface-color));
}

.acr-logo .yct-img,
.acr-logo img {
	display:block;
	width:auto;
	height:auto;
	max-width:48px;
	max-height:48px;
	object-fit:contain;
}

.acr-logo i {
	color:var(--uicolor);
	font-size:26px;
}

.acr-inf {
	position:relative;
	z-index:2;
	min-width:0;
	display:flex;
	flex:1;
	flex-direction:column;
	gap:4px;
}

.acr-inf strong,
.acr-inf small {
	min-width:0;
	max-width:100%;
	overflow-wrap:anywhere;
}

.acr-inf strong {
	color:var(--primary-text);
	font-size:14px;
	font-weight:800;
	line-height:1.5;
}

.acr-inf small {
	color:var(--uicolor);
	font-size:12px;
	font-weight:800;
	line-height:1.3;
}

.acr-arr {
	position:relative;
	z-index:2;
	width:30px;
	height:30px;
	flex:0 0 30px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:color-mix(in srgb,var(--uicolor2) 9%,var(--surface-color));
	color:var(--uicolor2);
	font-size:13px;
	transition:
		transform var(--transition),
		background-color var(--transition),
		color var(--transition);
}

[dir="ltr"] .acr-arr .fa-arrow-left {
	transform:scaleX(-1);
}

.acr-box:focus-visible {
	outline:3px solid color-mix(in srgb,var(--uicolor) 25%,transparent);
	outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
	.acr-box:hover {
		transform:translateY(-4px);
		border-color:color-mix(in srgb,var(--uicolor) 26%,var(--diver));
		background:color-mix(in srgb,var(--uicolor) 2.5%,var(--surface-color));
		box-shadow:0 16px 34px color-mix(in srgb,var(--uicolor) 10%,transparent);
	}

	.acr-box:hover .acr-arr {
		transform:translateX(-3px);
		background:var(--uicolor-gradient);
		color:var(--on-color);
	}

	[dir="ltr"] .acr-box:hover .acr-arr {
		transform:translateX(3px);
	}
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
	.acr-box {
		min-height:100px;
		gap:11px;
		padding:12px 13px;
		border-radius:14px;
	}

	.acr-box::before {
		width:76px;
		height:76px;
		inset-inline-end:-34px;
		top:-38px;
	}

	.acr-logo {
		width:56px;
		height:56px;
		flex-basis:56px;
		border-radius:12px;
	}

	.acr-logo .yct-img,
	.acr-logo img {
		max-width:44px;
		max-height:44px;
	}

	.acr-logo i {
		font-size:24px;
	}

	.acr-inf {
		gap:3px;
	}

	.acr-inf strong {
		font-size:14px;
		line-height:1.45;
	}

	.acr-inf small {
		font-size:12px;
		line-height:1.35;
	}

	.acr-arr {
		width:30px;
		height:30px;
		flex-basis:30px;
		font-size:12px;
	}
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:575px) {
	.acr-box {
		min-height:96px;
		gap:10px;
		padding:11px 12px;
		border-radius:13px;
	}

	.acr-logo {
		width:52px;
		height:52px;
		flex-basis:52px;
		border-radius:11px;
	}

	.acr-logo .yct-img,
	.acr-logo img {
		max-width:41px;
		max-height:41px;
	}

	.acr-logo i {
		font-size:22px;
	}

	.acr-inf strong {
		font-size:13.5px;
	}

	.acr-inf small {
		font-size:11.5px;
	}

	.acr-arr {
		width:28px;
		height:28px;
		flex-basis:28px;
	}
}

@media only screen and (max-width:390px) {
	.acr-box {
		min-height:92px;
		gap:9px;
		padding:10px;
		border-radius:12px;
	}

	.acr-box::before {
		width:68px;
		height:68px;
		inset-inline-end:-31px;
		top:-35px;
	}

	.acr-logo {
		width:48px;
		height:48px;
		flex-basis:48px;
		border-radius:10px;
	}

	.acr-logo .yct-img,
	.acr-logo img {
		max-width:38px;
		max-height:38px;
	}

	.acr-logo i {
		font-size:21px;
	}

	.acr-inf strong {
		font-size:13px;
		line-height:1.4;
	}

	.acr-inf small {
		font-size:11px;
		line-height:1.3;
	}

	.acr-arr {
		width:26px;
		height:26px;
		flex-basis:26px;
		font-size:11px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.acr-box:active {
		border-color:color-mix(in srgb,var(--uicolor) 24%,var(--diver));
		background:color-mix(in srgb,var(--uicolor) 3%,var(--surface-color));
		transform:scale(.985);
	}
}

@media (prefers-reduced-motion:reduce) {
	.acr-box,
	.acr-arr {
		transition:none;
	}
}