/* ============================================================
   Joey Blog 完整风格重构 (theme: Cobalt / 钴蓝石墨 · 科技杂志)
   方式：mu-plugin 注入覆盖层，不改父主题文件、不丢功能
   一键回退：删除 mu-plugins/joey-modernize* 即可
   ============================================================ */

/* ---------- 0. 字体 ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

/* ---------- 1. 设计令牌 ---------- */
:root {
	/* 全站强调色：靛蓝（覆盖 Argon 的棕色及其全部衍生分量） */
	--themecolor: #4f46e5;
	--themecolor-R: 79;  --themecolor-G: 70;  --themecolor-B: 229;
	--themecolor-H: 243; --themecolor-S: 75;  --themecolor-L: 59;

	/* 自有令牌 */
	--c-accent: #4f46e5;
	--c-accent-2: #06b6d4;
	--c-accent-grad: linear-gradient(120deg, #6366f1 0%, #4f46e5 45%, #0ea5e9 100%);
	--c-accent-soft: rgba(79, 70, 229, .10);
	--c-accent-line: rgba(79, 70, 229, .26);

	--c-bg: #eef1f8;
	--c-surface: rgba(255, 255, 255, 0.62);
	--c-surface-solid: #ffffff;
	--c-surface-2: rgba(241, 243, 249, 0.7);
	--c-glass-blur: saturate(160%) blur(18px);
	--c-ink: #141824;
	--c-ink-soft: #525a6b;
	--c-ink-faint: #828b9c;
	--c-line: rgba(20, 24, 36, 0.10);
	--c-line-strong: rgba(20, 24, 36, 0.16);

	--radius-lg: 16px;
	--radius: 12px;
	--radius-sm: 9px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(18, 22, 33, .04), 0 6px 18px rgba(18, 22, 33, .06);
	--shadow-2: 0 10px 30px rgba(18, 22, 33, .10), 0 2px 8px rgba(18, 22, 33, .06);
	--shadow-accent: 0 8px 24px rgba(79, 70, 229, .30);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

html.darkmode {
	--c-bg: #0a0d14;
	--c-surface: rgba(22, 26, 34, 0.55);
	--c-surface-solid: #161a22;
	--c-surface-2: rgba(29, 34, 45, 0.6);
	--c-ink: #e9ecf3;
	--c-ink-soft: #aab2c2;
	--c-ink-faint: #79808f;
	--c-line: rgba(255, 255, 255, 0.09);
	--c-line-strong: rgba(255, 255, 255, 0.16);
	--c-accent: #818cf8;
	--c-accent-2: #22d3ee;
	--c-accent-soft: rgba(129, 140, 248, .16);
	--c-accent-line: rgba(129, 140, 248, .34);
	--shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.35);
	--shadow-2: 0 14px 38px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.3);
}

/* ---------- 2. 基底 ---------- */
body {
	background: var(--c-bg) !important;
	color: var(--c-ink);
	font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/* 覆盖站点自定义字体（让新字体生效） */
body, .nav-link-inner--text { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif !important; }

::selection { background: rgba(79, 70, 229, .22); }

/* ---------- 3. Hero / 封面：杂志式左对齐大标题 ---------- */
section.banner.section-shaped { overflow: hidden; }

/* 背景压暗，让文字成为主信号 */
.banner-as-cover section.banner:after,
section.banner:after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8,10,16,.42) 0%, rgba(8,10,16,.18) 38%, rgba(8,10,16,.66) 100%),
		radial-gradient(120% 80% at 12% 80%, rgba(79,70,229,.35) 0%, rgba(79,70,229,0) 60%);
	z-index: 1;
	pointer-events: none;
}
#banner_container { position: relative; z-index: 2; }

/* 容器左对齐、限宽，杂志排版 */
.banner-as-cover #banner_container.banner-container {
	text-align: left !important;
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
/* Eyebrow 标识 */
.banner-as-cover #banner_container.banner-container::before {
	content: "TECH · VPS · CLOUD NOTES";
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: 3px;
	color: #fff;
	background: var(--c-accent-grad);
	padding: .5em 1em;
	border-radius: var(--radius-pill);
	margin-bottom: 1.1rem;
	box-shadow: var(--shadow-accent);
}
.banner-as-cover .banner-title {
	text-align: left !important;
	max-width: 24ch;
	position: static !important;
	transform: none !important;
	top: auto !important;
	margin: 0 !important;
}
.banner-as-cover .banner-title .banner-title-inner {
	font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(2.1rem, 5vw, 3.6rem) !important;
	line-height: 1.18 !important;
	color: #fff !important;
	text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.banner-as-cover .banner-subtitle {
	text-align: left !important;
	margin-top: 1rem;
	font-size: 1.05rem;
	font-weight: 400;
	color: rgba(255,255,255,.86) !important;
	text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
/* 向下滚动指示器更精致 */
.cover-scroll-down { z-index: 3; opacity: .85; }

@media (max-width: 768px) {
	.banner-as-cover #banner_container.banner-container { align-items: flex-start; padding: 0 20px; }
	.banner-as-cover .banner-title .banner-title-inner { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
}

/* ---------- 4. 顶栏导航 ---------- */
#navbar-main { transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease); }
#navbar-main.headroom--pinned:not(.headroom--top) {
	background: rgba(255,255,255,.78) !important;
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	box-shadow: 0 1px 0 var(--c-line), var(--shadow-1);
}
html.darkmode #navbar-main.headroom--pinned:not(.headroom--top) {
	background: rgba(13,16,23,.82) !important;
	box-shadow: 0 1px 0 var(--c-line), var(--shadow-1);
}
.navbar-brand.navbar-title { font-weight: 800 !important; letter-spacing: -.2px; font-family: 'Inter','Noto Sans SC',sans-serif !important; }
.navbar-nav .nav-link {
	position: relative;
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: .45rem .9rem !important;
	transition: color .2s var(--ease), background-color .2s var(--ease);
}
.navbar-nav .nav-link:hover { background: var(--c-accent-soft); color: var(--c-accent) !important; }
.navbar-nav .nav-link .nav-link-inner--text::after {
	content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px;
	border-radius: 2px; background: var(--c-accent-grad);
	transform: scaleX(0); transform-origin: left; opacity: 0;
	transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.navbar-nav .nav-item:hover .nav-link .nav-link-inner--text::after { transform: scaleX(1); opacity: 1; }

/* ---------- 5. 卡片（半透明毛玻璃 · 通透） ---------- */
.card,
.card.bg-white,
html.darkmode .card,
html.darkmode .bg-white {
	background: var(--c-surface) !important;
	-webkit-backdrop-filter: var(--c-glass-blur) !important;
	backdrop-filter: var(--c-glass-blur) !important;
	border: 1px solid var(--c-line) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-1) !important;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
/* 悬停时略微提升不透明度，增强可读性 */
.article-list .post-preview.card:hover { background: var(--c-surface-2) !important; }

/* 文章列表卡片：左侧强调脊 + 悬停抬升 */
.article-list .post-preview.card {
	position: relative;
	overflow: hidden;
}
.article-list .post-preview.card::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--c-accent-grad);
	transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease);
}
.article-list .post-preview.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2) !important;
	border-color: var(--c-accent-line) !important;
}
.article-list .post-preview.card:hover::before { transform: scaleY(1); }
.post-preview-layout-2 .post-content-container { padding: 1.6rem 1.8rem; }

/* 置顶徽标 */
.post-meta-detail-stickey {
	background: var(--c-accent-soft); color: var(--c-accent) !important;
	border-radius: var(--radius-pill); padding: .15rem .7rem; font-weight: 600;
}

/* ---------- 6. 标题与摘要 ---------- */
.post-title { font-family: 'Inter','Noto Sans SC',sans-serif !important; font-weight: 800 !important; letter-spacing: -.2px; color: var(--c-ink) !important; transition: color .2s var(--ease); }
.article-list .post-title { font-size: 1.4rem !important; line-height: 1.4 !important; }
.article-list .post-preview:hover .post-title { color: var(--c-accent) !important; }
.post-content { color: var(--c-ink-soft); line-height: 1.8; }

/* ---------- 7. 元信息 ---------- */
.post-meta { gap: .1rem; align-items: center; }
.post-meta-detail { color: var(--c-ink-faint); font-size: .82rem; }
.post-meta-detail i.fa { opacity: .8; color: var(--c-accent); }
.post-meta-devide { opacity: .3; }
.post-meta-detail-catagory-link { color: var(--c-accent) !important; font-weight: 600; }

/* ---------- 8. 标签 / 徽章 ---------- */
.badge {
	border-radius: var(--radius-pill) !important;
	font-weight: 600; letter-spacing: .2px; padding: .42em .85em;
	transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.tag.badge-secondary, .badge-secondary {
	background: var(--c-surface-2) !important; color: var(--c-ink-soft) !important;
	border: 1px solid var(--c-line) !important;
}
.tag.badge:hover, .badge-secondary:hover {
	transform: translateY(-1px); background: var(--c-accent) !important; color: #fff !important; border-color: transparent !important;
}
.tag .tag-num { opacity: .6; font-weight: 500; }

/* ---------- 9. 按钮 ---------- */
.btn { border-radius: var(--radius-pill) !important; font-weight: 700; letter-spacing: .2px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn.bg-gradient-primary {
	background: var(--c-accent-grad) !important; border: none !important; box-shadow: var(--shadow-accent);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-primary { border: 1.5px solid var(--c-accent) !important; color: var(--c-accent) !important; }
.btn-outline-primary:hover { background: var(--c-accent) !important; color: #fff !important; }

/* 浮动操作按钮 */
.fabtn { box-shadow: var(--shadow-1) !important; transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important; }
.fabtn:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-2) !important; }

/* ---------- 10. 左侧栏 ---------- */
/* 公告 / banner 卡片用强调渐变铺底 */
#leftbar_announcement.card,
#leftbar_part1.card,
.leftbar-banner {
	background: var(--c-accent-grad) !important;
	border: none !important;
	color: #fff !important;
}
#leftbar_announcement .leftbar-announcement-title,
#leftbar_announcement .leftbar-announcement-content,
.leftbar-banner-title { color: #fff !important; }
.leftbar-banner { border-radius: var(--radius-lg); overflow: hidden; }
#leftbar_overview_author_image { transition: transform .3s var(--ease), filter .3s var(--ease); }
.leftbar-menu-item > a, #leftbar_catalog .index-link {
	border-radius: var(--radius-sm) !important;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
#leftbar_catalog .index-link:hover { background: var(--c-accent-soft); color: var(--c-accent); }
#leftbar_catalog .index-link.current { background: var(--c-accent-soft); color: var(--c-accent) !important; font-weight: 700; }

/* 站点概览数字 */
.site-state-item-count { font-weight: 800; letter-spacing: -.3px; color: var(--c-ink); }
.site-state-item-name { color: var(--c-ink-faint); }
.site-state-item { border-left: 1px solid var(--c-line) !important; }

/* tab 切换下划线用强调色 */
.tab-title.active, .leftbar-tab .active { color: var(--c-accent) !important; }

/* ---------- 11. 正文细节 ---------- */
article h1, article h2, article h3, article h4 { font-family: 'Inter','Noto Sans SC',sans-serif !important; letter-spacing: -.2px; scroll-margin-top: 92px; }
article h2 { border-bottom: 1px solid var(--c-line); padding-bottom: .35em; }
article .post-content a:not(.btn):not(.no-underline) {
	color: var(--c-accent); text-decoration: none;
	background-image: linear-gradient(var(--c-accent), var(--c-accent));
	background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size .25s var(--ease);
}
article .post-content a:not(.btn):not(.no-underline):hover { background-size: 100% 1.5px; }
article blockquote {
	border-left: 3px solid var(--c-accent); background: var(--c-accent-soft);
	border-radius: 0 var(--radius) var(--radius) 0; padding: .85rem 1.1rem; color: var(--c-ink-soft);
}
article :not(pre) > code {
	background: var(--c-accent-soft); color: var(--c-accent);
	border-radius: 6px; padding: .15em .45em; font-size: .88em;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
article .post-content img { border-radius: var(--radius); }
article table { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); border: 1px solid var(--c-line); }
article table > thead > tr > th { background: var(--c-surface-2); font-weight: 700; }
.admonition, .collapse-block { border-radius: var(--radius) !important; }

/* ---------- 12. 页脚 ---------- */
#footer { border-radius: var(--radius-lg) !important; font-size: .85rem; color: var(--c-ink-soft); background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; }
#footer a { color: var(--c-accent); }

/* ---------- 13. 表单 ---------- */
.form-control {
	border-radius: var(--radius) !important; border: 1px solid var(--c-line) !important;
	background: var(--c-surface) !important; color: var(--c-ink) !important;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:focus { border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px var(--c-accent-soft) !important; }
.input-group-text { background: var(--c-surface-2) !important; border-color: var(--c-line) !important; color: var(--c-ink-faint) !important; }

/* ---------- 14. 时间线（归档） ---------- */
.argon-timeline .argon-timeline-node:before,
.argon-timeline-node-dot { background: var(--c-accent) !important; }
.argon-timeline:before, .argon-timeline-line { background: var(--c-line-strong) !important; }

/* ---------- 15. 入场动效 ---------- */
@media (prefers-reduced-motion: no-preference) {
	.article-list .post-preview.card { animation: rise .55s var(--ease) both; }
	.article-list .post-preview.card:nth-child(2){animation-delay:.05s}
	.article-list .post-preview.card:nth-child(3){animation-delay:.1s}
	.article-list .post-preview.card:nth-child(4){animation-delay:.15s}
	.article-list .post-preview.card:nth-child(5){animation-delay:.2s}
}
@keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ---------- 16. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 999px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* ---------- 17. 移动端 ---------- */
@media (max-width: 768px) {
	.article-list .post-title { font-size: 1.18rem !important; }
	.post-preview-layout-2 .post-content-container { padding: 1.2rem 1.25rem; }
}

/* ============================================================
   18. 透明卡片配套修正（v1.2 配色升级）
   ============================================================ */

/* 正文卡片透明后，正文主色加深以保证可读性 */
.single .post-content,
.page .post-content { color: var(--c-ink); }

/* 代码块保持实心深色背景，避免透出花背景导致难读 */
article pre,
.hljs,
article pre code {
	background: #0f1320 !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* 表单控件用接近实心的表面，避免毛玻璃叠加 */
.form-control {
	background: var(--c-surface-solid) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
html.darkmode .form-control { background: var(--c-surface-solid) !important; }

/* 嵌套在卡片内的小部件不要二次模糊（避免发灰、性能负担） */
.card .widget,
.card .card,
.tab-content,
#leftbar_catalog {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* 顶栏在非置顶时也轻微通透，与卡片语言统一 */
#navbar-main.navbar-transparent { background: transparent !important; }

/* 页脚改为毛玻璃，与卡片一致 */
#footer {
	background: var(--c-surface) !important;
	-webkit-backdrop-filter: var(--c-glass-blur) !important;
	backdrop-filter: var(--c-glass-blur) !important;
}

/* 强调色渐变文字点缀：站点统计数字用青蓝渐变 */
.site-state-item-count {
	background: var(--c-accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 选区配合新强调色 */
::selection { background: rgba(14, 165, 233, .22); }