.yc-cs {
	--cs-line:color-mix(in srgb,var(--primary-text) 11%,transparent);
	--cs-soft:color-mix(in srgb,var(--uicolor) 4%,var(--surface-color));
	--cs-soft2:color-mix(in srgb,var(--uicolor2) 5%,var(--surface-color));
	--largeradius:12px;

	min-width:0;
	background:var(--surface-color);
	color:var(--primary-text);
}

.yc-cs .--BTN {
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	touch-action:manipulation;
}

.yc-cs-layout {
	min-width:0;
	display:flex;
	align-items:flex-start;
	gap:23px;
	padding-block:44px 14px;
}

.yc-cs-main {
	min-width:0;
	display:flex;
	flex:1;
	flex-direction:column;
	gap:28px;
}

.yc-cs-side {
	position:sticky;
	z-index:2;
	top: 95px;
	width:330px;
	flex:0 0 390px;
	margin-top:-320px;
}

.yc-cs-sec,
.yc-cs-wide {
	min-width:0;
	scroll-margin-top:94px;
}

.yc-cs-sec {
	padding:clamp(24px,3vw,20px);
	border:1px solid var(--cs-line);
	border-radius:var(--largeradius);
	background:var(--surface-color);
}

.yc-cs-hd {
	min-width:0;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	margin-bottom:24px;
}

.yc-cs-hd > * {
	min-width:0;
}

.yc-cs-hd > div {
	min-width:0;
}

.yc-cs-hd > div > span {
	display:block;
	max-width:100%;
	margin-bottom:11px;
	color:var(--uicolor2);
	font-size:13px;
	font-weight:700;
	line-height:1.5;
	overflow-wrap:anywhere;
}

.yc-cs-hd h2 {
	position:relative;
	min-width:0;
	max-width:100%;
	margin:0;
	padding-inline-start:11px;
	color:var(--section-title);
	font-size:20px;
	font-weight:700;
	line-height:1.45;
	text-wrap:balance;
	overflow-wrap:anywhere;
}

.yc-cs-hd h2::before {
	content:"";
	position:absolute;
	width:5px;
	height:23px;
	inset-inline-start:0;
	inset-block-start:50%;
	border-radius:3px;
	background:var(--uicolor-gradient);
	transform:translateY(-50%);
}

.yc-cs-empty {
	min-width:0;
	padding:30px;
	border-radius:var(--miniradius);
	background:var(--cs-soft);
	color:var(--secondarytext);
	text-align:center;
	overflow-wrap:anywhere;
}

.yc-cs-empty i {
	display:block;
	margin-bottom:12px;
	color:var(--uicolor);
	font-size:30px;
	margin-inline:  auto;
}

.yc-cs-empty strong {
	display:block;
	color:var(--primary-text);
	font-size:15px;
	line-height:1.5;
}

.yc-cs-empty p {
	margin:7px 0 0;
	line-height:1.7;
}

.yc-cs-bottom {
	min-width:0;
	padding:10px 0 80px;
}

.yc-cs-bottom .container {
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:34px;
}

.yc-cs-wide {
	padding:30px;
	border:1px solid var(--cs-line);
	border-radius:var(--largeradius);
	background:var(--surface-color);
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:1050px) {
	.yc-cs-layout {
		gap:24px;
	}

	.yc-cs-main {
		gap:24px;
	}

	.yc-cs-side {
		width:300px;
		flex-basis:300px;
	}
}

@media only screen and (max-width:900px) {
	.yc-cs-layout {
		flex-direction:column;
		gap:22px;
		padding-block:30px 44px;
	}

	.yc-cs-main,
	.yc-cs-side {
		width:100%;
		flex:0 0 auto;
	}

	.yc-cs-main {
		gap:22px;
	}

	.yc-cs-side {
		position:static;
		z-index:auto;
		top:auto;
		margin-top:0;
	}

	.yc-cs-wide {
		padding:26px;
	}

	.yc-cs-bottom {
		padding-bottom:64px;
	}

	.yc-cs-bottom .container {
		gap:28px;
	}
}

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

@media only screen and (max-width:767px) {
	.yc-cs {
		--cs-mobile-gap:18px;
	}

	.yc-cs .--BTN {
		min-height:48px;
		-webkit-tap-highlight-color:transparent;
	}

	.yc-cs-layout {
		gap:var(--cs-mobile-gap);
		padding-block:20px 34px;
	}

	.yc-cs-main {
		gap:var(--cs-mobile-gap);
	}

	.yc-cs-sec,
	.yc-cs-wide {
		width:100%;
		max-width:100%;
		scroll-margin-top:calc(var(--cs-nav-top,65px) + 70px);
		padding:18px 15px;
		border-radius:16px;
		box-shadow:0 8px 24px rgb(var(--primary-text-code) / 4%);
	}

	.yc-cs-hd {
		width:100%;
		align-items:flex-start;
		flex-direction:column;
		gap:9px;
		margin-bottom:18px;
	}

	.yc-cs-hd > * {
		width:100%;
	}

	.yc-cs-hd > div > span {
		margin-bottom:7px;
		font-size:12px;
		line-height:1.45;
	}

	.yc-cs-hd h2 {
		padding-inline-start:13px;
		font-size:clamp(19px,5.1vw,21px);
		line-height:1.42;
	}

	.yc-cs-hd h2::before {
		width:5px;
		height:1.15em;
		inset-block-start:.12em;
		transform:none;
	}

	.yc-cs-empty {
		padding:24px 18px;
		border-radius:14px;
	}

	.yc-cs-empty i {
		margin-bottom:10px;
		font-size:28px;
	}

	.yc-cs-empty strong {
		font-size:14px;
	}

	.yc-cs-empty p {
		margin-top:6px;
		font-size:13px;
		line-height:1.65;
	}

	.yc-cs-bottom {
		padding:6px 0 48px;
	}

	.yc-cs-bottom .container {
		gap:18px;
	}
}

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

@media only screen and (max-width:575px) {
	.yc-cs {
		--cs-mobile-gap:16px;
	}

	.yc-cs-layout {
		padding-block:18px 30px;
	}

	.yc-cs-sec,
	.yc-cs-wide {
		padding:16px 13px;
		border-radius:15px;
		box-shadow:0 7px 20px rgb(var(--primary-text-code) / 4%);
	}

	.yc-cs-hd {
		gap:8px;
		margin-bottom:16px;
	}

	.yc-cs-hd > div > span {
		margin-bottom:6px;
	}

	.yc-cs-hd h2 {
		padding-inline-start:12px;
		font-size:clamp(18.5px,5.4vw,20px);
	}

	.yc-cs-empty {
		padding:22px 15px;
	}

	.yc-cs-bottom {
		padding-bottom:42px;
	}

	.yc-cs-bottom .container {
		gap:16px;
	}
}

@media only screen and (max-width:390px) {
	.yc-cs {
		--cs-mobile-gap:14px;
	}

	.yc-cs-layout {
		padding-block:16px 28px;
	}

	.yc-cs-sec,
	.yc-cs-wide {
		padding:14px 11px;
		border-radius:14px;
	}

	.yc-cs-hd {
		margin-bottom:15px;
	}

	.yc-cs-hd > div > span {
		font-size:11.5px;
	}

	.yc-cs-hd h2 {
		padding-inline-start:11px;
		font-size: 16px;
		line-height:1.4;
		margin-bottom: 8px;
	}

	.yc-cs-hd h2::before {
		width:4px;
	}

	.yc-cs-empty {
		padding:20px 13px;
		border-radius:12px;
	}

	.yc-cs-empty i {
		font-size:26px;
	}

	.yc-cs-empty strong {
		font-size:13.5px;
	}

	.yc-cs-empty p {
		font-size:12.5px;
	}

	.yc-cs-bottom {
		padding-bottom:38px;
	}

	.yc-cs-bottom .container {
		gap:14px;
	}
}

@media only screen and (max-width:340px) {
	.yc-cs {
		--cs-mobile-gap:12px;
	}

	.yc-cs-layout {
		padding-block:14px 24px;
	}

	.yc-cs-sec,
	.yc-cs-wide {
		padding:13px 10px;
		border-radius:13px;
	}

	.yc-cs-hd {
		margin-bottom:14px;
	}

	.yc-cs-hd h2 {
		padding-inline-start:10px;
		font-size:18px;
	}

	.yc-cs-empty {
		padding:18px 12px;
	}
}

@media (hover:none) and (pointer:coarse) {
	.yc-cs .--BTN {
		-webkit-tap-highlight-color:transparent;
	}
}