/*
 * Post Views - Frontend Display Styles
 *
 * All display variants share the same capsule silhouette (red-box reference):
 *   - border-radius: 50px   (full pill)
 *   - padding:      10px 18px  (=> height 38px with 18px icon)
 *   - gap:          8px      (icon <-> text)
 *   - font-size:    14px / icon 18px
 *
 * Per-style differentiation is by COLOR / TEXTURE only, never by shape or
 * sizing, so every style stays visually consistent in the page.
 */

/* Positioned Wrapper - 定位容器 */
.pv-positioned-wrapper {
	position: relative;
	width: 100%;
	min-height: 60px;
	margin: 2em 0 0 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

/* Detect common content containers and make them position: relative */
.entry-content,
.post-content,
.article-content,
.content-area,
.single-content,
.page-content,
.post-entry,
.entry,
article .content,
.wp-block-post-content {
	position: relative;
}

/* ---------------------------------------------------------------
 * Modern Card - 现代卡片样式 (capsule)
 * --------------------------------------------------------------- */
.pv-modern-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	transition: transform 0.2s, box-shadow 0.2s;
}

.pv-modern-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(102, 126, 234, 0.4);
}

.pv-modern-card .pv-icon-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: transparent;
	border-radius: 0;
	font-size: 18px;
	line-height: 1;
	backdrop-filter: none;
}

.pv-modern-card .pv-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.pv-modern-card .pv-label {
	font-size: 14px;
	opacity: 0.95;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.pv-modern-card .pv-number {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* ---------------------------------------------------------------
 * Gradient Badge - 渐变胶囊样式 (基准 - 红框样式)
 * --------------------------------------------------------------- */
.pv-gradient-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	transition: transform 0.2s;
}

.pv-gradient-badge:hover {
	transform: scale(1.05);
}

.pv-gradient-badge .pv-badge-icon {
	font-size: 18px;
	line-height: 1;
	animation: pulse 2s ease-in-out infinite;
}

.pv-gradient-badge .pv-badge-count {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* ---------------------------------------------------------------
 * Minimal Line - 极简线条胶囊样式
 * --------------------------------------------------------------- */
.pv-minimal-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	font-size: 14px;
	color: #555;
	background: transparent;
	border: 2px solid #e0e0e0;
	border-radius: 50px;
	transition: all 0.3s;
}

.pv-minimal-line:hover {
	border-color: #667eea;
}

.pv-minimal-line .pv-icon {
	font-size: 18px;
	line-height: 1;
	color: #667eea;
}

.pv-minimal-line .pv-divider {
	display: none; /* no divider inside a capsule */
}

.pv-minimal-line .pv-text {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	line-height: 1;
}

/* ---------------------------------------------------------------
 * Stat Box - 统计盒子胶囊样式
 * --------------------------------------------------------------- */
.pv-stat-box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: #fff;
	border: 2px solid #667eea;
	border-radius: 50px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
	font-size: 14px;
	color: #333;
}

.pv-stat-box:hover {
	border-color: #764ba2;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.pv-stat-box .pv-stat-icon {
	font-size: 18px;
	line-height: 1;
	color: #667eea;
}

.pv-stat-box .pv-stat-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}

.pv-stat-box .pv-stat-value {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	line-height: 1;
}

.pv-stat-box .pv-stat-label {
	font-size: 14px;
	color: #666;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	line-height: 1;
}

/* ---------------------------------------------------------------
 * Glass Card - 毛玻璃胶囊样式
 * --------------------------------------------------------------- */
.pv-glass-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50px;
	backdrop-filter: blur(20px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	color: #333;
	font-size: 14px;
	font-weight: 500;
}

.pv-glass-card .pv-glass-icon {
	font-size: 18px;
	line-height: 1;
	opacity: 0.85;
}

.pv-glass-card .pv-glass-count {
	font-weight: 700;
	color: #667eea;
	font-size: 14px;
	line-height: 1;
}

/* ---------------------------------------------------------------
 * Outline Chip - 描边胶囊样式
 * --------------------------------------------------------------- */
.pv-outline-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: transparent;
	border: 2px solid #667eea;
	border-radius: 50px;
	color: #667eea;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s;
}

.pv-outline-chip:hover {
	background: #667eea;
	color: #fff;
}

.pv-outline-chip .pv-chip-icon {
	font-size: 18px;
	line-height: 1;
}

.pv-outline-chip .pv-chip-label {
	opacity: 0.95;
	font-size: 14px;
	line-height: 1;
}

.pv-outline-chip .pv-chip-count {
	padding: 0;
	background: transparent;
	border-radius: 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}

.pv-outline-chip:hover .pv-chip-count {
	background: transparent;
	color: #fff;
}

/* ---------------------------------------------------------------
 * Neon Pill - 霓虹胶囊样式 (深色底 + 青色发光)
 * --------------------------------------------------------------- */
.pv-neon-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: #0f172a;
	border: 1px solid #22d3ee;
	border-radius: 50px;
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
	color: #e0f7ff;
	font-size: 14px;
	font-weight: 500;
	transition: box-shadow 0.2s;
}

.pv-neon-pill:hover {
	box-shadow: 0 0 18px rgba(34, 211, 238, 0.7);
}

.pv-neon-pill .pv-neon-icon {
	font-size: 18px;
	line-height: 1;
}

.pv-neon-pill .pv-neon-text {
	font-size: 14px;
	line-height: 1;
}

.pv-neon-pill .pv-neon-text strong {
	color: #22d3ee;
	font-weight: 700;
}

/* ---------------------------------------------------------------
 * Sunset Pill - 日落胶囊样式 (橙黄渐变)
 * --------------------------------------------------------------- */
.pv-sunset-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: linear-gradient(135deg, #ff9a44 0%, #ff5e62 100%);
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(255, 94, 98, 0.3);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	transition: transform 0.2s;
}

.pv-sunset-pill:hover {
	transform: scale(1.05);
}

.pv-sunset-pill .pv-sunset-icon {
	font-size: 18px;
	line-height: 1;
}

.pv-sunset-pill .pv-sunset-text {
	font-size: 14px;
	line-height: 1;
}

.pv-sunset-pill .pv-sunset-text strong {
	font-weight: 700;
}

/* ---------------------------------------------------------------
 * Solid Dark Pill - 暗色实心胶囊 (深灰底 + 绿点)
 * --------------------------------------------------------------- */
.pv-solid-dark-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 18px;
	background: #1f2937;
	border: 1px solid #374151;
	border-radius: 50px;
	color: #f3f4f6;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s, border-color 0.2s;
}

.pv-solid-dark-pill:hover {
	background: #111827;
	border-color: #4b5563;
}

.pv-solid-dark-pill .pv-solid-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
	flex: 0 0 auto;
}

.pv-solid-dark-pill .pv-solid-text {
	font-size: 14px;
	line-height: 1;
}

.pv-solid-dark-pill .pv-solid-text strong {
	color: #34d399;
	font-weight: 700;
}

/* ===============================================================
 * Dark mode - prefers-color-scheme
 * Capsule shapes are unchanged; only colors/textures are tuned.
 * =============================================================== */
@media (prefers-color-scheme: dark) {
	.pv-minimal-line {
		color: #d1d1d6;
		border-color: #4a4a4e;
	}

	.pv-minimal-line .pv-text {
		color: #f0f0f0;
	}

	.pv-stat-box {
		background: #2a2a2e;
		border-color: #6b8aff;
	}

	.pv-stat-box .pv-stat-icon {
		color: #6b8aff;
	}

	.pv-stat-box .pv-stat-value {
		color: #f0f0f0;
	}

	.pv-stat-box .pv-stat-label {
		color: #9ca3af;
	}

	.pv-glass-card {
		background: rgba(42, 42, 46, 0.6);
		border-color: rgba(255, 255, 255, 0.1);
		color: #d1d1d6;
	}

	.pv-glass-card .pv-glass-count {
		color: #6b8aff;
	}

	.pv-outline-chip {
		border-color: #6b8aff;
		color: #6b8aff;
	}

	.pv-outline-chip:hover {
		background: #6b8aff;
		color: #fff;
	}

	.pv-neon-pill {
		background: #020617;
		border-color: #22d3ee;
	}

	.pv-solid-dark-pill {
		background: #111827;
		border-color: #4b5563;
	}

	.pv-sunset-pill {
		box-shadow: 0 4px 15px rgba(255, 94, 98, 0.45);
	}
}

/* Dark mode: common theme class selectors */
body.dark-mode,
body.dark,
body.night-mode,
html.dark,
html.dark-mode {
	--pv-dark: 1;
}

[data-theme="dark"] .pv-minimal-line,
[data-color-scheme="dark"] .pv-minimal-line {
	color: #d1d1d6;
	border-color: #4a4a4e;
}

[data-theme="dark"] .pv-minimal-line .pv-text,
[data-color-scheme="dark"] .pv-minimal-line .pv-text {
	color: #f0f0f0;
}

[data-theme="dark"] .pv-stat-box,
[data-color-scheme="dark"] .pv-stat-box {
	background: #2a2a2e;
	border-color: #6b8aff;
}

[data-theme="dark"] .pv-stat-box .pv-stat-icon,
[data-color-scheme="dark"] .pv-stat-box .pv-stat-icon {
	color: #6b8aff;
}

[data-theme="dark"] .pv-stat-box .pv-stat-value,
[data-color-scheme="dark"] .pv-stat-box .pv-stat-value {
	color: #f0f0f0;
}

[data-theme="dark"] .pv-stat-box .pv-stat-label,
[data-color-scheme="dark"] .pv-stat-box .pv-stat-label {
	color: #9ca3af;
}

[data-theme="dark"] .pv-glass-card,
[data-color-scheme="dark"] .pv-glass-card {
	background: rgba(42, 42, 46, 0.6);
	border-color: rgba(255, 255, 255, 0.1);
	color: #d1d1d6;
}

[data-theme="dark"] .pv-glass-card .pv-glass-count,
[data-color-scheme="dark"] .pv-glass-card .pv-glass-count {
	color: #6b8aff;
}

[data-theme="dark"] .pv-outline-chip,
[data-color-scheme="dark"] .pv-outline-chip {
	border-color: #6b8aff;
	color: #6b8aff;
}

[data-theme="dark"] .pv-outline-chip:hover,
[data-color-scheme="dark"] .pv-outline-chip:hover {
	background: #6b8aff;
	color: #fff;
}

[data-theme="dark"] .pv-neon-pill,
[data-color-scheme="dark"] .pv-neon-pill {
	background: #020617;
	border-color: #22d3ee;
}

[data-theme="dark"] .pv-solid-dark-pill,
[data-color-scheme="dark"] .pv-solid-dark-pill {
	background: #111827;
	border-color: #4b5563;
}

[data-theme="dark"] .pv-sunset-pill,
[data-color-scheme="dark"] .pv-sunset-pill {
	box-shadow: 0 4px 15px rgba(255, 94, 98, 0.45);
}

/* ================================================================
 * JustNews kuaixun detail page count
 * A lightweight meta-style label appended to the excerpt. Inherits
 * the theme's item-meta-li look; no positioning, no wrapper.
 * ================================================================ */

/* Position anchor added by JS so the absolute wrapper can use the article
 * block as its origin instead of the viewport. */
.kx-views-anchor {
	position: relative;
}

.kx-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #444;
	vertical-align: middle;
}

.kx-views .kx-views-icon {
	display: inline-block;
	vertical-align: -2px;
	color: #667eea;
}

@media (prefers-color-scheme: dark) {
	.kx-views {
		color: #d1d1d6;
	}
	.kx-views .kx-views-icon {
		color: #8b9eff;
	}
}

/* ================================================================
 * JustNews kuaixun bottom-right placement
 * The wrap is positioned absolutely inside .entry-content's parent,
 * sticking to the bottom-right corner without growing the layout.
 * It must be a positioned sibling of .entry-content so its origin is
 * the content box, not the viewport.
 * ================================================================ */
.kx-views-wrap {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 5;
	max-width: 70%;
	pointer-events: none;
}

.kx-views-wrap .kx-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #444;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	pointer-events: auto;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kx-views-wrap .kx-views .kx-views-icon {
	display: inline-block;
	width: 14px;
	height: 14px;
	color: #667eea;
}

.kx-views-wrap .kx-views:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
	.kx-views-wrap .kx-views {
		background: rgba(42, 42, 46, 0.92);
		color: #e5e7eb;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	}
	.kx-views-wrap .kx-views .kx-views-icon {
		color: #8b9eff;
	}
}