/* ==========================================================================
   Nylcode — 设计系统
   内容形态：游戏 / 软件 / 文章，三块各有一条识别色，共用一套版式与排版。
   所有视觉素材由 CSS 渐变与内联 SVG 生成，无外部图片请求。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
	/* 表面 */
	--bg: #ffffff;
	--bg-1: #f7f8fa;
	--bg-2: #f1f3f6;
	--bg-invert: #0f1117;
	--border: #e8eaef;
	--border-2: #d5d9e0;

	/* 文字 */
	--tx-1: #0f1115;
	--tx-2: #4b5563;
	--tx-3: #9ca3af;
	--tx-invert: #e6edf3;

	/* 品牌与板块识别色 */
	--brand: #4f46e5;
	--brand-2: #6366f1;
	--brand-soft: rgba(79, 70, 229, .08);
	--c-game: #7c3aed;
	--c-game-soft: rgba(124, 58, 237, .10);
	--c-app: #0891b2;
	--c-app-soft: rgba(8, 145, 178, .10);
	--c-post: #4f46e5;
	--c-post-soft: rgba(79, 70, 229, .10);

	/* 语义色 */
	--ok: #059669;
	--warn: #d97706;
	--err: #dc2626;

	/* 代码高亮 */
	--tok-kw: #ff7b72;
	--tok-str: #a5d6ff;
	--tok-num: #79c0ff;
	--tok-com: #8b949e;

	/* 圆角 */
	--r-xs: 4px;
	--r-sm: 6px;
	--r: 10px;
	--r-lg: 14px;
	--r-full: 999px;

	/* 阴影 */
	--sh-1: 0 1px 2px rgba(16, 24, 40, .04);
	--sh-2: 0 4px 14px rgba(16, 24, 40, .07);
	--sh-3: 0 14px 36px rgba(16, 24, 40, .11);

	/* 字体 */
	--font: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;

	/* 宽度 */
	--w-wide: 1280px;
	--w-read: 720px;

	/* 动效 */
	--ease: .22s cubic-bezier(.4, 0, .2, 1);

	/* 让 WP 调色板指向这里 */
	--wp--preset--color--base: var(--bg);
	--wp--preset--color--contrast: var(--tx-1);
	--wp--preset--color--accent-1: var(--brand);
	--wp--preset--color--accent-2: var(--brand-2);
	--wp--preset--color--accent-4: var(--tx-3);
	--wp--preset--color--accent-5: var(--bg-1);
	--wp--preset--color--accent-6: var(--border);
	--wp--preset--font-family--system: var(--font);
	--wp--preset--font-family--mono: var(--mono);

	color-scheme: light;
}

/* 深色（可选，默认不启用，跟随系统或手动切换） */
html[data-theme="dark"] {
	--bg: #0d0f14;
	--bg-1: #14171e;
	--bg-2: #1a1e27;
	--bg-invert: #05070a;
	--border: #232833;
	--border-2: #2f3644;
	--tx-1: #eef1f6;
	--tx-2: #b6bdcb;
	--tx-3: #78808f;
	--brand: #818cf8;
	--brand-2: #a5b4fc;
	--brand-soft: rgba(129, 140, 248, .12);
	--c-game: #a78bfa;
	--c-app: #22d3ee;
	--c-post: #818cf8;
	--sh-1: 0 1px 2px rgba(0, 0, 0, .4);
	--sh-2: 0 4px 14px rgba(0, 0, 0, .45);
	--sh-3: 0 14px 36px rgba(0, 0, 0, .5);
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

body {
	background: var(--bg);
	color: var(--tx-2);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

img { height: auto; max-width: 100%; }

/* 程序化封面是浅色系，深色模式下压一点亮度更协调 */
html[data-theme="dark"] .yg-cover svg {
	filter: brightness(.78) saturate(.85);
}

/* 空段落不占高度（块模板渲染可能补出空 <p>） */
p:empty { display: none; }

::selection { background: var(--brand-soft); color: var(--tx-1); }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

/* 阅读进度条 */
#yg-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px; width: 0;
	background: var(--brand);
	z-index: 9999;
	transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   3. 页眉
   -------------------------------------------------------------------------- */
.yg-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ease), background var(--ease);
}

.yg-header.is-stuck {
	border-bottom-color: var(--border);
	background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.yg-header-inner {
	display: flex;
	align-items: center;
	height: 60px;
}

.yg-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.yg-brand .wp-block-site-logo { margin: 0; line-height: 0; }

.yg-brand .wp-block-site-logo img,
.yg-logo-fallback svg {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	object-fit: contain;
	display: block;
}

.yg-logo-fallback { display: block; line-height: 0; text-decoration: none; }

.yg-brand .wp-block-site-title {
	margin: 0;
	font-size: 18px;
	line-height: 1.1;
	white-space: nowrap;
}

.yg-nav { margin-left: 28px; min-width: 0; }

.yg-nav .wp-block-navigation__container { gap: 26px; align-items: center; }

.yg-nav .wp-block-navigation-item__content {
	padding: .2rem 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--tx-2);
	transition: color var(--ease);
}

.yg-nav .wp-block-navigation-item__content:hover { color: var(--brand); }

.yg-nav .wp-block-navigation__responsive-container-open,
.yg-nav .wp-block-navigation__responsive-container-close { color: var(--tx-1); }

.yg-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bg);
	padding: 1.5rem;
}

.yg-header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.yg-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--tx-3);
	cursor: pointer;
	transition: color var(--ease), background var(--ease);
}

.yg-icon-btn:hover { color: var(--tx-1); background: var(--bg-1); }
.yg-icon-btn svg { width: 18px; height: 18px; display: block; }

.yg-search-box { position: relative; display: inline-flex; align-items: center; }

.yg-search-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 950;
	display: none;
	gap: 8px;
	width: 320px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--bg);
	box-shadow: var(--sh-3);
}

.yg-search-box.is-open .yg-search-panel { display: flex; }

.yg-search-panel input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--bg-1);
	color: var(--tx-1);
	padding: 0 12px;
	font-size: 14px;
	font-family: inherit;
}

.yg-search-panel input[type="search"]:focus {
	outline: none;
	border-color: var(--brand);
	background: var(--bg);
}

.yg-search-panel button[type="submit"] {
	flex-shrink: 0;
	height: 38px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--brand);
	color: #fff;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.yg-theme-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--tx-3);
	cursor: pointer;
	transition: color var(--ease), background var(--ease);
}

.yg-theme-toggle:hover { color: var(--tx-1); background: var(--bg-1); }
.yg-theme-toggle svg { width: 18px; height: 18px; display: block; }

.yg-theme-toggle .yg-icon-sun { display: none; }
.yg-theme-toggle .yg-icon-moon { display: block; }
html[data-theme="dark"] .yg-theme-toggle .yg-icon-sun { display: block; }
html[data-theme="dark"] .yg-theme-toggle .yg-icon-moon { display: none; }

/* --------------------------------------------------------------------------
   4. 通用版式
   -------------------------------------------------------------------------- */
.yg-main { padding-top: 32px; padding-bottom: 16px; }

/* 区段标题 */
.yg-sec {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
}

.yg-sec-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sec-color, var(--brand));
	flex-shrink: 0;
}

.yg-sec-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--tx-1);
	letter-spacing: -.01em;
}

.yg-sec-count {
	color: var(--tx-3);
	font-size: 13px;
}

.yg-sec-more {
	margin-left: auto;
	color: var(--tx-3);
	font-size: 13px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color var(--ease), gap var(--ease);
}

.yg-sec-more:hover { color: var(--brand); gap: 8px; }
.yg-sec-more svg { width: 14px; height: 14px; }

/* 区块间距 */
.yg-block { margin-bottom: 48px; }

/* 标签 */
.yg-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: var(--r-full);
	background: var(--bg-1);
	color: var(--tx-3);
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--ease);
}

.yg-tag:hover { background: var(--bg-2); color: var(--tx-1); }

.yg-tag--game { background: var(--c-game-soft); color: var(--c-game); }
.yg-tag--app  { background: var(--c-app-soft);  color: var(--c-app); }
.yg-tag--post { background: var(--c-post-soft); color: var(--c-post); }

/* --------------------------------------------------------------------------
   5. 首页 Hero：编辑精选
   -------------------------------------------------------------------------- */
.yg-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 48px;
}

/* 主卡 */
.yg-lead {
	position: relative;
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--bg-invert);
	min-height: 340px;
	text-decoration: none;
	transition: transform var(--ease), box-shadow var(--ease);
}

.yg-lead:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

.yg-lead-media {
	position: absolute;
	inset: 0;
}

.yg-lead-media img,
.yg-lead-media svg {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.yg-lead::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 11, 16, 0) 35%, rgba(9, 11, 16, .82) 100%);
}

.yg-lead-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 340px;
	padding: 26px 28px;
}

.yg-lead-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 4px 10px;
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}

.yg-lead-title {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: #fff;
}

.yg-lead-excerpt {
	margin: 0;
	max-width: 46rem;
	color: rgba(255, 255, 255, .74);
	font-size: 14px;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 侧边两条 */
.yg-hero-side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
}

.yg-mini {
	display: flex;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg);
	text-decoration: none;
	transition: var(--ease);
}

.yg-mini:hover {
	border-color: var(--border-2);
	box-shadow: var(--sh-2);
	transform: translateY(-2px);
}

.yg-mini-media {
	flex: 0 0 96px;
	height: 96px;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--bg-2);
}

.yg-mini-media img,
.yg-mini-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.yg-mini-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.yg-mini-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tx-1);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yg-mini-meta {
	color: var(--tx-3);
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   6. 卡片：三种形态
   -------------------------------------------------------------------------- */
.yg-grid {
	display: grid;
	gap: 18px;
}

.yg-grid--game { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yg-grid--app  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yg-grid--post { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yg-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.yg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg);
	overflow: hidden;
	text-decoration: none;
	transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* 标题行数不同时也保持等高 */
.yg-grid > .yg-card {
	align-self: stretch;
}

.yg-game-body,
.yg-post-body,
.yg-app-body {
	flex: 1 1 auto;
}

.yg-card:hover {
	border-color: var(--border-2);
	box-shadow: var(--sh-2);
	transform: translateY(-3px);
}

/* 游戏卡：竖版封面 */
.yg-game-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bg-2);
}

.yg-game-media img,
.yg-game-media svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }

.yg-card:hover .yg-game-media img,
.yg-card:hover .yg-game-media svg { transform: scale(1.04); }

.yg-game-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 8px;
	border-radius: var(--r-full);
	background: rgba(9, 11, 16, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
}

.yg-game-body { padding: 12px 14px 14px; }

.yg-game-title {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tx-1);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yg-game-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--tx-3);
	font-size: 12px;
}

/* 软件卡：图标 + 信息 */
.yg-app-card {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px;
}

.yg-app-icon {
	flex: 0 0 52px;
	width: 52px; height: 52px;
	border-radius: 13px;
	overflow: hidden;
	background: var(--bg-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.yg-app-icon img,
.yg-app-icon svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.yg-app-body { min-width: 0; flex: 1 1 auto; }

.yg-app-name {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--tx-1);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yg-app-desc {
	margin: 0 0 8px;
	color: var(--tx-3);
	font-size: 12.5px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yg-app-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* 文章卡：标准 */
.yg-post-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bg-2);
}

.yg-post-media img,
.yg-post-media svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }

.yg-card:hover .yg-post-media img,
.yg-card:hover .yg-post-media svg { transform: scale(1.03); }

.yg-post-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 16px;
}

.yg-post-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--tx-1);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--ease);
}

.yg-card:hover .yg-post-title { color: var(--brand); }

.yg-post-excerpt {
	margin: 0;
	color: var(--tx-3);
	font-size: 13.5px;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yg-post-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	color: var(--tx-3);
	font-size: 12px;
}

.yg-post-foot > * { margin: 0 !important; }

.yg-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.yg-stat svg { width: 13px; height: 13px; }

/* 程序化封面 */
.yg-cover { display: block; width: 100%; height: 100%; }
.yg-cover svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   7. 归档 / 分类页
   -------------------------------------------------------------------------- */
.yg-arch-head {
	padding: 28px 0 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--border);
}

.yg-arch-title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--tx-1);
	display: flex;
	align-items: center;
	gap: 10px;
}

.yg-arch-title::before {
	content: "";
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--sec-color, var(--brand));
}

.yg-arch-desc {
	max-width: 42rem;
	margin: 0;
	color: var(--tx-3);
	font-size: 14px;
	line-height: 1.8;
}

.yg-arch-count {
	margin-top: 10px;
	color: var(--tx-3);
	font-size: 13px;
}

/* 板块筛选条 */
.yg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.yg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	background: var(--bg);
	color: var(--tx-2);
	font-size: 13.5px;
	text-decoration: none;
	transition: var(--ease);
}

.yg-chip:hover { border-color: var(--border-2); color: var(--tx-1); }

.yg-chip.is-active {
	background: var(--tx-1);
	border-color: var(--tx-1);
	color: var(--bg);
}

.yg-chip-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--chip-color, var(--brand));
}

/* --------------------------------------------------------------------------
   8. 文章页
   -------------------------------------------------------------------------- */
.yg-article-head {
	max-width: var(--w-read);
	margin: 0 auto 28px;
}

.yg-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--tx-3);
	font-size: 13px;
}

.yg-crumb a { color: var(--tx-3); text-decoration: none; transition: color var(--ease); }
.yg-crumb a:hover { color: var(--brand); }
.yg-crumb .sep { opacity: .5; }

.yg-article-title {
	margin: 0 0 16px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--tx-1);
}

.yg-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
	color: var(--tx-3);
	font-size: 13.5px;
}

.yg-article-meta > * { margin: 0 !important; }
.yg-article-meta a { color: var(--tx-3); text-decoration: none; }
.yg-article-meta a:hover { color: var(--brand); }

.yg-article-thumb {
	max-width: var(--w-read);
	margin: 0 auto 28px;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--bg-2);
}

.yg-article-thumb img { width: 100%; display: block; }

/* 正文排版 —— 这是观感的关键 */
.yg-article {
	max-width: var(--w-read);
	margin: 0 auto;
	color: #374151;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .012em;
}

html[data-theme="dark"] .yg-article { color: var(--tx-2); }

.yg-article .wp-block-post-content > * + * { margin-block-start: 0; }

.yg-article p {
	margin: 0 0 1.55em;
}

.yg-article h2 {
	margin: 2.4em 0 1em;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: var(--tx-1);
}

.yg-article h3 {
	margin: 2em 0 .8em;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--tx-1);
}

.yg-article h4 {
	margin: 1.8em 0 .7em;
	font-size: 16px;
	font-weight: 600;
	color: var(--tx-1);
}

.yg-article ul,
.yg-article ol {
	margin: 0 0 1.55em;
	padding-left: 1.5em;
}

.yg-article li { margin-bottom: .55em; line-height: 1.85; }
.yg-article li::marker { color: var(--tx-3); }

.yg-article a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
	transition: text-decoration-color var(--ease);
}

.yg-article a:hover { text-decoration-color: var(--brand); }

.yg-article strong { color: var(--tx-1); font-weight: 600; }

.yg-article img {
	border-radius: var(--r);
	display: block;
	margin: 1.8em auto;
	cursor: zoom-in;
}

.yg-article figcaption {
	margin-top: -1em;
	margin-bottom: 1.8em;
	text-align: center;
	color: var(--tx-3);
	font-size: 13px;
	line-height: 1.7;
}

.yg-article hr {
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.yg-article blockquote {
	margin: 1.8em 0;
	padding: 16px 20px;
	border-left: 3px solid var(--brand);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	background: var(--bg-1);
	color: var(--tx-2);
	font-size: 15.5px;
	line-height: 1.9;
	font-style: normal;
}

.yg-article blockquote p:last-child { margin-bottom: 0; }

.yg-article :not(pre) > code {
	padding: .15em .42em;
	border: 1px solid var(--border);
	border-radius: var(--r-xs);
	background: var(--bg-1);
	color: #be123c;
	font-family: var(--mono);
	font-size: .87em;
	word-break: break-word;
}

html[data-theme="dark"] .yg-article :not(pre) > code { color: #fda4af; }

.yg-article table {
	width: 100%;
	margin: 1.8em 0;
	border-collapse: collapse;
	font-size: 14px;
}

.yg-article th,
.yg-article td {
	padding: 10px 14px;
	border: 1px solid var(--border);
	text-align: left;
	line-height: 1.7;
}

.yg-article th {
	background: var(--bg-1);
	color: var(--tx-1);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   9. 代码块
   -------------------------------------------------------------------------- */
.yg-article pre {
	position: relative;
	margin: 1.8em 0;
	padding: 40px 20px 18px;
	background: var(--bg-invert);
	color: var(--tx-invert);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: var(--r);
	overflow-x: auto;
	line-height: 1.75;
	tab-size: 4;
}

.yg-article pre code {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: var(--mono);
	font-size: 13.5px;
	white-space: pre;
}

.yg-code-lang {
	position: absolute;
	top: 12px;
	left: 20px;
	color: #6e7781;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	pointer-events: none;
}

.yg-copy-btn {
	position: absolute;
	top: 9px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .06);
	color: #c9d1d9;
	font-family: var(--font);
	font-size: 11.5px;
	cursor: pointer;
	transition: var(--ease);
}

.yg-copy-btn:hover { background: rgba(255, 255, 255, .13); }
.yg-copy-btn.is-done { color: #3fb950; border-color: rgba(63, 185, 80, .5); }
.yg-copy-btn svg { width: 12px; height: 12px; }

.yg-tok-kw { color: var(--tok-kw); }
.yg-tok-str { color: var(--tok-str); }
.yg-tok-num { color: var(--tok-num); }
.yg-tok-com { color: var(--tok-com); font-style: italic; }

/* --------------------------------------------------------------------------
   10. 提示框
   -------------------------------------------------------------------------- */
.yg-note {
	display: flex;
	gap: 12px;
	margin: 1.8em 0;
	padding: 14px 18px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--note-color, var(--brand));
	border-radius: 0 var(--r) var(--r) 0;
	background: var(--bg-1);
	font-size: 14.5px;
	line-height: 1.85;
}

.yg-note-icon {
	flex-shrink: 0;
	width: 17px; height: 17px;
	margin-top: .28em;
	color: var(--note-color, var(--brand));
}

.yg-note-body > :first-child { margin-top: 0; }
.yg-note-body > :last-child { margin-bottom: 0; }
.yg-note-body p { margin: 0 0 .5em; }

.yg-note-info    { --note-color: var(--brand); }
.yg-note-success { --note-color: var(--ok); }
.yg-note-warn    { --note-color: var(--warn); }
.yg-note-danger  { --note-color: var(--err); }

/* --------------------------------------------------------------------------
   11. 文章页尾部
   -------------------------------------------------------------------------- */
.yg-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	max-width: var(--w-read);
	margin: 32px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--border);
}

.yg-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: var(--w-read);
	margin: 20px auto 0;
	color: var(--tx-3);
	font-size: 13px;
}

.yg-share-label { margin-right: 2px; }

.yg-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--tx-2);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: var(--ease);
}

.yg-share-btn:hover { border-color: var(--border-2); color: var(--tx-1); }
.yg-share-btn svg { width: 14px; height: 14px; }
.yg-share-tip { color: var(--ok); font-size: 12.5px; }

/* 作者卡 */
.yg-author {
	display: flex;
	gap: 16px;
	max-width: var(--w-read);
	margin: 32px auto 0;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-1);
}

.yg-author > img {
	width: 48px !important;
	height: 48px !important;
	flex: 0 0 48px;
	border-radius: 50%;
}
.yg-author-name { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--tx-1); }
.yg-author-note { margin: 0; color: var(--tx-3); font-size: 13px; line-height: 1.75; }

/* 上下篇 */
.yg-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	max-width: var(--w-read);
	margin: 32px auto 0;
}

.yg-pager:not(:has(a)) { display: none; }

.yg-pager a {
	display: block;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg);
	text-decoration: none;
	transition: var(--ease);
}

.yg-pager a:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.yg-pager .post-navigation-link__label { display: block; margin-bottom: 5px; color: var(--tx-3); font-size: 12.5px; }
.yg-pager .post-navigation-link__title { color: var(--tx-1); font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.yg-pager > div { min-width: 0; }
.yg-pager > div:last-child { text-align: right; }

/* 相关推荐 */
.yg-related {
	max-width: var(--w-read);
	margin: 36px auto 0;
}

.yg-related-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yg-related-item a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	height: 100%;
	padding: 13px 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--bg);
	text-decoration: none;
	transition: var(--ease);
}

.yg-related-item a:hover { border-color: var(--brand); }
.yg-related-title { color: var(--tx-1); font-size: 14px; font-weight: 500; line-height: 1.6; }
.yg-related-date { margin-left: auto; color: var(--tx-3); font-size: 12px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   12. 评论
   -------------------------------------------------------------------------- */
.yg-comments {
	max-width: var(--w-read);
	margin: 40px auto 0;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.yg-comments .wp-block-comments-title,
.yg-comments h2 { margin-top: 0; font-size: 18px; font-weight: 600; color: var(--tx-1); }

.yg-avatar, .yg-comments .avatar { border-radius: 50%; }
.yg-comments .wp-block-comment-template > li { margin-bottom: 20px; }
.yg-comment-author, .yg-comments .wp-block-comment-author-name { font-size: 14px; font-weight: 600; color: var(--tx-1); }
.yg-comments .wp-block-comment-date { font-size: 12.5px; color: var(--tx-3); }
.yg-comments .wp-block-comment-content { font-size: 14.5px; line-height: 1.85; }

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--bg);
	color: var(--tx-1);
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.7;
	transition: border-color var(--ease);
}

.wp-block-post-comments-form textarea:focus,
.wp-block-post-comments-form input:focus {
	outline: none;
	border-color: var(--brand);
}

.wp-block-post-comments-form .form-submit input[type="submit"],
.wp-block-post-comments-form .submit {
	padding: 11px 24px;
	border: 0;
	border-radius: var(--r);
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--ease);
}

.wp-block-post-comments-form .form-submit input[type="submit"]:hover,
.wp-block-post-comments-form .submit:hover { background: var(--brand-2); }

/* --------------------------------------------------------------------------
   13. 搜索 / 分页 / 404 / 页脚
   -------------------------------------------------------------------------- */
.yg-search-form {
	max-width: 34rem !important;
	margin-top: 18px;
}

.yg-search-form .wp-block-search__inside-wrapper {
	display: flex;
	gap: 10px;
	border: 0;
	background: transparent;
}

.yg-search-form .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--bg);
	color: var(--tx-1);
	font-size: 14.5px;
	font-family: inherit;
}

.yg-search-form .wp-block-search__input:focus { outline: none; border-color: var(--brand); }

.yg-search-form .wp-block-search__button {
	flex-shrink: 0;
	height: 44px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r);
	background: var(--brand);
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	transition: var(--ease);
}

.yg-search-form .wp-block-search__button:hover { background: var(--brand-2); }

.yg-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 40px;
}

.yg-pagination .page-numbers,
.yg-pagination .wp-block-query-pagination-previous,
.yg-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: var(--bg);
	color: var(--tx-2);
	font-size: 14px;
	text-decoration: none;
	transition: var(--ease);
}

.yg-pagination .page-numbers:hover,
.yg-pagination .wp-block-query-pagination-previous:hover,
.yg-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.yg-pagination .page-numbers.current {
	background: var(--tx-1);
	border-color: var(--tx-1);
	color: var(--bg);
}

/* 404 */
.yg-404 { padding: 80px 0 60px; text-align: center; }

.yg-404-code {
	margin: 0 0 12px;
	font-size: clamp(64px, 14vw, 104px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--border-2);
}

.yg-404-title { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: var(--tx-1); }
.yg-404-text { max-width: 30rem; margin: 0 auto 24px; color: var(--tx-3); line-height: 1.85; }
.yg-404 .yg-search-form { margin-left: auto; margin-right: auto; }
.yg-404-actions { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.yg-404-list { text-align: left; }

/* 页脚 */
.yg-footer {
	margin-top: 64px;
	padding: 32px 0;
	border-top: 1px solid var(--border);
	color: var(--tx-3);
	font-size: 13.5px;
}

.yg-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
}

.yg-footer a { color: var(--tx-3); text-decoration: none; transition: color var(--ease); }
.yg-footer a:hover { color: var(--brand); }
.yg-footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.yg-footer p { margin: 0; }

/* 关于页 */
.yg-about-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 28px 0 40px;
}

.yg-about-card {
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg);
	transition: var(--ease);
}

.yg-about-card:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.yg-about-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--tx-1); }
.yg-about-card p { margin: 0; color: var(--tx-3); font-size: 14px; line-height: 1.8; }

/* --------------------------------------------------------------------------
   14. 浮动控件与灯箱
   -------------------------------------------------------------------------- */
.yg-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.yg-float button {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: var(--r);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--tx-3);
	cursor: pointer;
	box-shadow: var(--sh-2);
	transition: var(--ease);
}

.yg-float button:hover { color: var(--tx-1); border-color: var(--border-2); }
.yg-float button svg { width: 18px; height: 18px; }

.yg-to-top { opacity: 0; visibility: hidden; transform: translateY(6px); }
.yg-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* 文章目录 */
.yg-toc {
	position: fixed;
	left: calc(50% + var(--w-read) / 2 + 32px);
	top: 92px;
	width: 210px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding-left: 18px;
	border-left: 1px solid var(--border);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ease), visibility var(--ease);
}

.yg-toc.is-open { opacity: 1; visibility: visible; }

.yg-toc-title {
	margin: 0 0 10px;
	color: var(--tx-3);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
}

.yg-toc ul { margin: 0; padding: 0; list-style: none; }

.yg-toc a {
	display: block;
	padding: 5px 0 5px 12px;
	border-left: 2px solid transparent;
	margin-left: -19px;
	color: var(--tx-3);
	font-size: 13px;
	line-height: 1.55;
	text-decoration: none;
	transition: var(--ease);
}

.yg-toc a:hover { color: var(--tx-1); }
.yg-toc a.is-active { color: var(--brand); border-left-color: var(--brand); }
.yg-toc .lvl-3 a { padding-left: 26px; font-size: 12.5px; }

.yg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(9, 11, 16, .9);
	cursor: zoom-out;
	opacity: 0;
	transition: opacity .2s var(--ease);
}

.yg-lightbox.is-open { display: flex; opacity: 1; }
.yg-lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }

.yg-lightbox-close {
	position: absolute;
	top: 20px; right: 20px;
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--r);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
}

.yg-lightbox-close svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   15. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.yg-toc { display: none; }
}

@media (max-width: 1024px) {
	.yg-grid--game { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.yg-grid--app, .yg-grid--post, .yg-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yg-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yg-hero { grid-template-columns: minmax(0, 1fr); }
	.yg-hero-side { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 781px) {
	.yg-nav { margin-left: auto; }
	.yg-brand .wp-block-site-logo img,
	.yg-logo-fallback svg { width: 28px; height: 28px; }
	.yg-brand .wp-block-site-title { font-size: 16px; }
	.yg-grid--game { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yg-grid--app, .yg-grid--post, .yg-grid--wide { grid-template-columns: minmax(0, 1fr); }
	.yg-about-grid { grid-template-columns: minmax(0, 1fr); }
	.yg-hero-side { grid-template-columns: minmax(0, 1fr); }
	.yg-lead, .yg-lead-body { min-height: 260px; }
	.yg-lead-title { font-size: 20px; }
	.yg-pager { grid-template-columns: minmax(0, 1fr); }
	.yg-related-list { grid-template-columns: minmax(0, 1fr); }
	.yg-article { font-size: 15.5px; }
	.yg-float { right: 16px; bottom: 16px; }
	.yg-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   16. 布局宽度接管
   WP 的 constrained 布局会把容器的每个直接子元素压回 contentSize，
   在宽栏容器里会挤出大片留白。先解禁、后限制，顺序不能颠倒。
   -------------------------------------------------------------------------- */
.yg-main > *,
.yg-arch-head > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.yg-main > .wp-block-group,
.yg-arch-head {
	width: 100%;
	max-width: var(--w-wide) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 短代码输出的区块要撑满宽栏，不被 constrained 压回 contentSize */
.yg-main > .wp-block-group > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 文章页正文与尾部统一阅读宽度 */
/* 需要更高 specificity 才能压过上面那条解禁规则 */
.yg-main > .wp-block-group > .yg-article-head,
.yg-main > .wp-block-group > .yg-article,
.yg-main > .wp-block-group > .yg-article-thumb,
.yg-main > .wp-block-group > .yg-article-tags,
.yg-main > .wp-block-group > .yg-author,
.yg-main > .wp-block-group > .yg-share,
.yg-main > .wp-block-group > .yg-pager,
.yg-main > .wp-block-group > .yg-related,
.yg-main > .wp-block-group > .yg-comments {
	max-width: var(--w-read) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 上下篇与相关推荐不要被拉成等高 */
.yg-pager,
.yg-related-list {
	align-items: start;
}

.yg-pager a {
	height: auto;
}

.yg-article .wp-block-post-content { max-width: none; }