@charset "UTF-8";

/* ==========================================================
   抖词词 -> scys「普通人的副业案例库」引流样式
   原则：入口一律弱于主 CTA（立即检测），不与之竞争视觉权重
   ========================================================== */

/* ---- 首页：检测按钮下方的随机真实案例卡 ---- */
.scys-entry {
	margin: 0 auto;
	text-align: center;
}

.scys-case {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	/* 内容聚拢排列，标题与「去看看」之间不留空白 */
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 8px;
	/* 与上方检测框同宽，避免不同标题长度导致卡片忽宽忽窄 */
	width: 100%;
	max-width: 980px;
	box-sizing: border-box;
	margin: 12px auto 0;
	padding: 9px 16px;
	background: #fffaf7;
	border: 1px solid rgba(248, 64, 18, .14);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
}

/* hover 不做任何底色/边框变化，只在「去看看」上给反馈，避免整片色块闪动 */
.scys-case:hover {
	background: #fffaf7;
	border-color: rgba(248, 64, 18, .14);
}

/* 站名做成带边框的标签，后接案例标题 */
.scys-case__headline {
	white-space: nowrap;
}

.scys-case__brand {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 8px;
	border: 1px solid rgba(248, 64, 18, .45);
	border-radius: 4px;
	background: #fff;
	color: #f84012;
	font-size: 12px;
	font-weight: 500;
	vertical-align: middle;
}

.scys-case__title {
	color: #3a3a38;
	font-weight: 500;
}

.scys-case__go {
	flex-shrink: 0;
	color: #f84012;
	font-size: 13px;
	white-space: nowrap;
	-webkit-transition: color .18s ease;
	transition: color .18s ease;
}

/* 鼠标经过：只让「去看看」变深 + 浮出箭头 */
.scys-case__go::after {
	/* 箭头常驻占位，hover 只改透明度与位移，避免整行宽度跳动 */
	content: "→";
	display: inline-block;
	margin-left: 4px;
	opacity: 0;
	-webkit-transform: translateX(-4px);
	transform: translateX(-4px);
	-webkit-transition: opacity .18s ease, -webkit-transform .18s ease;
	transition: opacity .18s ease, transform .18s ease;
}

.scys-case:hover .scys-case__go {
	color: #d92d05;
}

.scys-case:hover .scys-case__go::after {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

@media only screen and (max-width: 1000px) {
	.scys-case {
		gap: 6px;
		padding: 8px 12px;
		font-size: 13px;
	}

	.scys-case__headline {
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		white-space: normal;
	}
}

/* ---- 结果页：检测完成后的上下文卡 ---- */
.scys-card {
	margin-top: 16px;
	background: #fff8f5;
	border: 1px solid rgba(248, 64, 18, .16);
	border-radius: 10px;
	overflow: hidden;
}

.scys-card__link {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	text-decoration: none;
}

.scys-card__title {
	font-size: 15px;
	font-weight: 500;
	color: #f84012;
}

/* 结果卡展示随机案例时：站名为边框标签，案例标题深色 */
.scys-card__text {
	color: #3a3a38;
	vertical-align: middle;
}

.scys-card__brand {
	display: inline-block;
	margin-right: 8px;
	padding: 0 7px;
	border: 1px solid rgba(248, 64, 18, .45);
	border-radius: 4px;
	background: #fff;
	color: #f84012;
	font-size: 12px;
	font-weight: 400;
	vertical-align: middle;
}

.scys-card__desc {
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.6;
	color: #5f5e5a;
}

.scys-card__cta {
	flex-shrink: 0;
	font-size: 13px;
	color: #fff;
	background: #f84012;
	border-radius: 16px;
	padding: 7px 16px;
	white-space: nowrap;
}

.scys-card__link:hover .scys-card__cta {
	background: #e0340d;
}

@media only screen and (max-width: 1000px) {
	.scys-card__link {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		gap: 10px;
	}

	.scys-card__cta {
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}
}

/* ---- 顶部导航入口（仅收窄间距，颜色沿用导航默认色，兼容深色/浅色 header） ---- */
.header-wrapper .header-nav .header-nav-item.scys-nav-item {
	padding: 0 .12rem;
}

/* ---- 新媒体导航页：推荐卡 ---- */
.list-navs .navs-link--scys {
	box-shadow: 0 0 0 1px rgba(248, 64, 18, .22);
	background: #fff8f5;
}

.list-navs .navs-link--scys:hover {
	background: #fff2ec;
}

.list-navs .navs-link--scys h3 {
	color: #f84012;
}

.scys-nav-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 4px;
	background: #f84012;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	vertical-align: middle;
}