/**
 * 首页左侧工具卡片：首行图标+标题、下方摘要；右侧水印式淡化封面（悬停动效、移动端适配）
 *
 * 每日分享 / 工具模块（含随机推荐）外框：统一浅色底、圆角、细边与内边距，与内层 .leafs-side-card 分层；
 * overflow 保持 visible，避免悬停阴影被裁切。
 */

.leafs-panel.leafs-panel--side-tools,
.leafs-panel.leafs-panel--side-daily-share {
	margin-bottom: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--leafs-surface2) 88%, var(--leafs-card)) 0%,
		color-mix(in srgb, var(--leafs-card) 92%, var(--leafs-surface2)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 14%, var(--leafs-border));
	border-radius: 16px;
	box-shadow: 0 1px 4px color-mix(in srgb, #0f172a 07%, transparent);
	overflow: visible;
	padding: 14px 14px 16px;
}

.leafs-panel--side-tools .leafs-panel__head,
.leafs-panel--side-daily-share .leafs-panel__head {
	padding: 0 0 10px;
	margin: 0 0 12px;
	background: transparent;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--leafs-border) 58%, transparent);
	border-left: none;
	box-shadow: none;
}

.leafs-panel--side-tools .leafs-panel__title,
.leafs-panel--side-daily-share .leafs-panel__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--leafs-text);
	display: flex;
	align-items: center;
	gap: 10px;
}

.leafs-panel--side-tools .leafs-panel__title::before,
.leafs-panel--side-daily-share .leafs-panel__title::before {
	content: "";
	flex-shrink: 0;
	width: 3px;
	height: 1.05em;
	border-radius: 3px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--leafs-brand) 92%, transparent) 0%,
		color-mix(in srgb, var(--leafs-brand) 55%, var(--leafs-muted)) 100%
	);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--leafs-brand) 18%, transparent);
}

.leafs-side-tool-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.leafs-side-tool-cards .leafs-panel--side-tools + .leafs-panel--side-tools {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

html[data-leafs-theme="dark"] .leafs-panel.leafs-panel--side-tools,
html[data-leafs-theme="dark"] .leafs-panel.leafs-panel--side-daily-share {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--leafs-surface2) 78%, var(--leafs-card)) 0%,
		color-mix(in srgb, var(--leafs-card) 90%, var(--leafs-surface2)) 100%
	);
	border-color: color-mix(in srgb, var(--leafs-brand) 22%, var(--leafs-border));
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.32);
}

html[data-leafs-theme="dark"] .leafs-panel--side-tools .leafs-panel__head,
html[data-leafs-theme="dark"] .leafs-panel--side-daily-share .leafs-panel__head {
	border-bottom-color: color-mix(in srgb, var(--leafs-border) 52%, transparent);
}

.leafs-side-tool-cards__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 0 4px;
}

/* -------------------------------------------------------------------------- */
/* Home left: daily share (compact list)                                       */
/* -------------------------------------------------------------------------- */

.leafs-side-daily-share {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.leafs-side-daily-share__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 12px 12px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 14%, var(--leafs-border));
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--leafs-card) 92%, transparent),
		color-mix(in srgb, var(--leafs-surface2) 70%, transparent)
	);
}

.leafs-side-daily-share__issue {
	font-size: 0.95rem;
	font-weight: 750;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--leafs-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.leafs-side-daily-share__issue:hover {
	color: var(--leafs-link);
}

.leafs-side-daily-share__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 双类名提高优先级，确保覆盖 leafs-daily-share.css 中同优先级的 .leafs-daily-share__item（归档横向卡片） */
.leafs-daily-share__item.leafs-daily-share__item--sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 18%, var(--leafs-border));
	background: var(--leafs-card);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar:hover {
	border-color: color-mix(in srgb, var(--leafs-brand) 35%, var(--leafs-border));
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar .leafs-daily-share__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.74rem;
	padding: 2px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--leafs-brand) 10%, var(--leafs-card));
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 16%, var(--leafs-border));
	color: var(--leafs-text);
	width: fit-content;
	margin: 0;
	flex: 0 0 auto;
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar .leafs-daily-share__title {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.01em;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar .leafs-daily-share__title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	color: var(--leafs-text);
	text-decoration: none;
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar:hover .leafs-daily-share__title a {
	color: var(--leafs-link);
}

.leafs-daily-share__item.leafs-daily-share__item--sidebar .leafs-daily-share__desc {
	margin: 8px 0 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--leafs-text);
	opacity: 0.9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.leafs-side-daily-share__visit {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--leafs-text);
	background: color-mix(in srgb, var(--leafs-surface2) 75%, transparent);
	border: 1px solid color-mix(in srgb, var(--leafs-border) 82%, transparent);
	flex: 0 0 auto;
}

.leafs-side-daily-share__visit:hover {
	color: var(--leafs-link);
	border-color: color-mix(in srgb, var(--leafs-brand) 30%, var(--leafs-border));
	background: color-mix(in srgb, var(--leafs-brand) 10%, var(--leafs-card));
}

.leafs-side-daily-share__more {
	margin: 14px 0 0;
	display: flex;
	justify-content: center;
	width: 100%;
}

.leafs-side-daily-share__more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 10px 22px;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 750;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--leafs-brand);
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 42%, var(--leafs-border));
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--leafs-brand) 12%, var(--leafs-card)) 0%,
		color-mix(in srgb, var(--leafs-brand) 6%, var(--leafs-card)) 100%
	);
	box-shadow:
		0 1px 0 color-mix(in srgb, #fff 55%, transparent),
		0 8px 20px color-mix(in srgb, var(--leafs-brand) 14%, transparent);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.15s ease,
		color 0.2s ease;
}

.leafs-side-daily-share__more-btn:hover {
	color: var(--leafs-brand-hover);
	border-color: color-mix(in srgb, var(--leafs-brand) 62%, var(--leafs-border));
	box-shadow:
		0 1px 0 color-mix(in srgb, #fff 40%, transparent),
		0 10px 26px color-mix(in srgb, var(--leafs-brand) 22%, transparent);
}

.leafs-side-daily-share__more-btn:active {
	transform: scale(0.98);
}

.leafs-side-daily-share__more-btn::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	margin-top: -2px;
	opacity: 0.85;
}

.leafs-side-daily-share__row1 {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.leafs-side-daily-share__desc {
	width: 100%;
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--leafs-text);
	opacity: 0.88;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* 卡片骨架：内边距块 + 右侧水印装饰图                                               */
/* -------------------------------------------------------------------------- */

.leafs-side-card {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 22%, var(--leafs-border));
	background: var(--leafs-card);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition:
		box-shadow 0.3s ease,
		border-color 0.25s ease,
		transform 0.3s ease;
}

.leafs-side-card__inner {
	position: relative;
	min-height: 96px;
	padding: 16px 18px;
	overflow: hidden;
}

.leafs-side-card__main {
	position: relative;
	z-index: 2;
	min-width: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.leafs-side-card__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.leafs-side-card__visual {
	position: absolute;
	z-index: 0;
	right: -8%;
	top: auto;
	bottom: -12%;
	transform: none;
	width: min(42%, 168px);
	aspect-ratio: 1;
	max-height: 95%;
	pointer-events: none;
	overflow: visible;
}

.leafs-side-card__cover {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 118%;
	height: 118%;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;
	object-fit: contain;
	object-position: center center;
	opacity: 0.14;
	z-index: 0;
	transition: transform 0.45s ease, opacity 0.35s ease;
}

@supports (filter: blur(2px)) {
	.leafs-side-card__cover {
		filter: blur(2px);
	}
}

.leafs-side-card__visual-fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--leafs-brand) 32%, var(--leafs-surface2)) 0%,
		color-mix(in srgb, var(--leafs-brand) 10%, var(--leafs-card)) 55%,
		var(--leafs-surface2) 100%
	);
	opacity: 1;
	transition: opacity 0.3s ease;
}

.leafs-side-card--has-cover .leafs-side-card__visual-fallback {
	opacity: 0.25;
}

.leafs-side-card--no-cover .leafs-side-card__visual-fallback {
	opacity: 1;
}

.leafs-side-card__visual-fallback::after {
	content: "";
	position: absolute;
	inset: 22%;
	margin: auto;
	width: 46%;
	height: 46%;
	max-width: 56px;
	max-height: 56px;
	opacity: 0.2;
	background: var(--leafs-text);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
}

.leafs-side-card--has-cover .leafs-side-card__visual-fallback::after {
	opacity: 0.1;
}

.leafs-side-card__visual-tint {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	pointer-events: none;
	transition: background 0.35s ease, opacity 0.35s ease;
	z-index: 2;
}

html[data-leafs-theme="dark"] .leafs-side-card__visual-tint {
	background: rgba(0, 0, 0, 0.2);
}

/* 向左与卡片底色融合，避免水印压住正文 */
.leafs-side-card__visual-fade {
	position: absolute;
	inset: -20% -40% -20% -60%;
	pointer-events: none;
	z-index: 3;
	background: radial-gradient(
		ellipse 80% 90% at 85% 50%,
		transparent 0%,
		color-mix(in srgb, var(--leafs-card) 35%, transparent) 42%,
		var(--leafs-card) 72%
	);
}

/* 悬停 */
.leafs-side-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--leafs-brand) 42%, var(--leafs-border));
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

html[data-leafs-theme="dark"] .leafs-side-card:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.leafs-side-card:hover .leafs-side-card__cover {
	transform: translate(-50%, -50%) scale(1.08);
	opacity: 0.2;
}

.leafs-side-card:hover .leafs-side-card__visual-tint {
	background: rgba(0, 0, 0, 0.04);
}

html[data-leafs-theme="dark"] .leafs-side-card:hover .leafs-side-card__visual-tint {
	background: rgba(0, 0, 0, 0.12);
}

.leafs-side-card:hover .leafs-side-card__visual-fallback {
	opacity: 0.16;
}

.leafs-side-card--no-cover:hover .leafs-side-card__visual-fallback {
	opacity: 1;
}

@supports not (filter: blur(1px)) {
	.leafs-side-card__cover {
		filter: none;
	}
}

.leafs-side-card--featured {
	border-color: color-mix(in srgb, var(--leafs-brand) 48%, var(--leafs-border));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--leafs-brand) 20%, transparent), 0 4px 16px rgba(45, 106, 79, 0.1);
}

.leafs-side-card--hot .leafs-side-card__title a {
	color: var(--leafs-text);
}

.leafs-side-card__media {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--leafs-surface2);
	border: 1px solid color-mix(in srgb, var(--leafs-brand) 18%, var(--leafs-border));
	display: flex;
	align-items: center;
	justify-content: center;
}

.leafs-side-card__media:hover {
	text-decoration: none;
}

.leafs-side-card__img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	display: block;
}

.leafs-side-card__placeholder {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--leafs-muted) 22%, transparent);
}

.leafs-side-card__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.leafs-side-card__title a {
	color: var(--leafs-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.leafs-side-card:hover .leafs-side-card__title a {
	color: var(--leafs-link);
}

.leafs-side-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--leafs-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0.88;
	width: 100%;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

.leafs-side-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	margin-top: 2px;
}

.leafs-side-card__pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	background: var(--leafs-surface2);
	color: var(--leafs-muted);
	border: 1px solid var(--leafs-border);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.leafs-side-card__pill--free {
	background: var(--leafs-tag-free-bg);
	color: var(--leafs-tag-free-text);
	border-color: transparent;
}

.leafs-side-card__pill--hot {
	background: var(--leafs-tag-hot-bg);
	color: var(--leafs-tag-hot-text);
	border-color: transparent;
}

a.leafs-side-card__pill--tag:hover {
	color: var(--leafs-link);
	border-color: color-mix(in srgb, var(--leafs-brand) 40%, var(--leafs-border));
	text-decoration: none;
}

.leafs-side-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--leafs-muted2, var(--leafs-muted));
}

.leafs-side-card__dot {
	opacity: 0.5;
}

/* -------------------------------------------------------------------------- */
/* 移动端：同结构，水印略小且清晰、主区内边距 12px、圆角 16px                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.leafs-side-card {
		border-radius: 16px;
	}

	.leafs-side-card__inner {
		padding: 12px;
		min-height: 0;
	}

	.leafs-side-card__main {
		padding-right: 0;
		gap: 6px;
	}

	.leafs-side-card__visual {
		right: -4%;
		width: min(40%, 140px);
		max-height: 100%;
	}

	.leafs-side-card__cover {
		filter: none;
		opacity: 0.18;
	}

	.leafs-side-card__visual-fade {
		inset: -10% -30% -10% -45%;
		background: radial-gradient(
			ellipse 75% 88% at 88% 48%,
			transparent 0%,
			color-mix(in srgb, var(--leafs-card) 40%, transparent) 48%,
			var(--leafs-card) 78%
		);
	}

	.leafs-side-card__visual-tint {
		background: rgba(0, 0, 0, 0.06);
	}

	html[data-leafs-theme="dark"] .leafs-side-card__visual-tint {
		background: rgba(0, 0, 0, 0.14);
	}

	.leafs-side-card__media,
	.leafs-side-card__img {
		width: 40px;
		height: 40px;
	}

	.leafs-side-card__title {
		font-size: 0.9375rem;
	}

	.leafs-side-card__excerpt {
		font-size: 0.8125rem;
		-webkit-line-clamp: 2;
	}
}

@media (max-width: 782px) and (min-width: 769px) {
	.leafs-layout__left .leafs-side-card__media,
	.leafs-side-card__img {
		width: 42px;
		height: 42px;
	}

	.leafs-side-card__media {
		width: 42px;
		height: 42px;
	}
}