/* ==========================================================
   MAFI 增强包：年龄确认 / 手机搜索 / 点缀色 / 字数 / 进度条
   ========================================================== */
:root {
	--mafi-ag-surface: #ffffff;
	--mafi-ag-overlay: rgba(57, 43, 33, 0.28);
	--mafi-ag-track: #efe8e1;
	--mafi-ag-core: #f5f0eb;
	--mafi-ag-shadow: 0 30px 80px -20px rgba(57, 43, 33, 0.35), 0 6px 20px -10px rgba(57, 43, 33, 0.25);
	--mafi-ag-core-shadow: inset 0 1px 0 #fff, inset 0 -10px 24px rgba(156, 125, 97, 0.12);
	--mafi-ag-accent-text: #9c5a3c;
	--mafi-ag-fail: #b0634a;
	--mafi-hl: #b0563f;
	--mafi-hl-bg: rgba(212, 129, 111, 0.14);
	--mafi-wc-fg: #9c5a3c;
	--mafi-wc-bg: rgba(232, 168, 124, 0.16);
	--mafi-tone-0: #d4a574;
	--mafi-tone-1: #d4816f;
	--mafi-tone-2: #e8a87c;
	--mafi-tone-3: #9c7d61;
	--mafi-tone-mix-fg: #392b21;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) {
		--mafi-ag-surface: #211b17;
		--mafi-ag-overlay: rgba(10, 8, 6, 0.5);
		--mafi-ag-track: #3a302a;
		--mafi-ag-core: #26201c;
		--mafi-ag-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 6px 20px -10px rgba(0, 0, 0, 0.6);
		--mafi-ag-core-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -10px 24px rgba(0, 0, 0, 0.25);
		--mafi-ag-accent-text: #e8a87c;
		--mafi-ag-fail: #e8a87c;
		--mafi-hl: #eaa58e;
		--mafi-hl-bg: rgba(212, 129, 111, 0.18);
		--mafi-wc-fg: #eab48a;
		--mafi-wc-bg: rgba(232, 168, 124, 0.14);
		--mafi-tone-mix-fg: #f5ede4;
	}
}

[data-color-scheme="dark"] {
	--mafi-ag-surface: #211b17;
	--mafi-ag-overlay: rgba(10, 8, 6, 0.5);
	--mafi-ag-track: #3a302a;
	--mafi-ag-core: #26201c;
	--mafi-ag-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 6px 20px -10px rgba(0, 0, 0, 0.6);
	--mafi-ag-core-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -10px 24px rgba(0, 0, 0, 0.25);
	--mafi-ag-accent-text: #e8a87c;
	--mafi-ag-fail: #e8a87c;
	--mafi-hl: #eaa58e;
	--mafi-hl-bg: rgba(212, 129, 111, 0.18);
	--mafi-wc-fg: #eab48a;
	--mafi-wc-bg: rgba(232, 168, 124, 0.14);
	--mafi-tone-mix-fg: #f5ede4;
}

/* ---------- 年龄确认 ----------
   独立原则：弹窗只用自己的全屏遮罩盖住页面，
   不对 body 里的任何元素加滤镜 / 缩放 / 禁用点击，也不改动它们的结构。
   页面上唯一被影响的是「滚动锁定」，弹窗关闭（或脚本失败）后立即解除。 */
html.mafi-age-pending,
html.mafi-age-pending body {
	overflow: hidden !important;
}

/* 弹窗脚本还没来得及生成弹窗时的占位遮罩：画在 <html> 自己的伪元素上，
   弹窗生成后（html 会加上 mafi-age-ready）自动让位。 */
html.mafi-age-pending:not(.mafi-age-ready)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483639;
	background: var(--mafi-ag-overlay, rgba(57, 43, 33, 0.28));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	pointer-events: auto;
}

#mafi-age-gate {
	position: fixed;
	inset: 0;
	z-index: 2147483640;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	isolation: isolate;
	background: var(--mafi-ag-overlay, rgba(57, 43, 33, 0.28));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: opacity 0.6s ease;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}

#mafi-age-gate.is-leaving { opacity: 0; pointer-events: none; }

.mafi-ag-card {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 28px 28px 22px;
	border-radius: 28px;
	background: var(--mafi-ag-surface);
	border: 1px solid var(--color-border, rgba(156, 125, 97, 0.2));
	box-shadow: var(--mafi-ag-shadow);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s linear;
	animation: mafiAgIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#mafi-age-gate.is-leaving .mafi-ag-card { transform: translateY(-8px) scale(1.03); }

.mafi-ag-head { align-self: stretch; display: flex; align-items: center; justify-content: space-between; }
.mafi-ag-brand { font-size: 16px; font-weight: 700; color: var(--color-contrast, #392b21); }
.mafi-ag-chip { font-size: 12px; color: var(--color-secondary, #846553); background: var(--color-background-100, #f5f0eb); padding: 4px 10px; border-radius: 20px; }
.mafi-ag-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--color-contrast, #392b21); line-height: 1.35; }
.mafi-ag-desc { margin: 8px 0 0; font-size: 14px; color: var(--color-foreground, #62564b); line-height: 1.6; text-wrap: pretty; }

.mafi-ag-ring {
	position: relative;
	width: 184px;
	height: 184px;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	outline: none;
	transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mafi-ag-ring.is-holding { transform: scale(0.94); }
.mafi-ag-ring.is-done { transform: scale(1.06); }
.mafi-ag-ring:focus-visible .mafi-ag-core { box-shadow: var(--mafi-ag-core-shadow), 0 0 0 3px rgba(232, 168, 124, 0.5); }

.mafi-ag-breath, .mafi-ag-pulse, .mafi-ag-burst, .mafi-ag-core { position: absolute; inset: 18px; border-radius: 50%; }
.mafi-ag-breath { animation: mafiAgBreath 2.6s ease-in-out infinite; }
.mafi-ag-ring:not(.is-idle) .mafi-ag-breath { display: none; }
.mafi-ag-pulse { border: 1.5px solid rgba(232, 168, 124, 0.7); opacity: 0; }
.mafi-ag-ring.is-holding .mafi-ag-pulse { animation: mafiAgPulse 1.1s ease-out infinite; }
.mafi-ag-burst { background: radial-gradient(circle, rgba(232, 168, 124, 0.55), rgba(232, 168, 124, 0) 70%); opacity: 0; }
.mafi-ag-ring.is-done .mafi-ag-burst { animation: mafiAgBurst 0.7s ease-out forwards; }
.mafi-ag-core { overflow: hidden; background: var(--mafi-ag-core); box-shadow: var(--mafi-ag-core-shadow); }
.mafi-ag-wave { position: absolute; left: -50%; width: 200%; height: 200%; top: 140%; }
.mafi-ag-wave-1 { border-radius: 42%; background: linear-gradient(180deg, #eab48a 0%, #e29a73 30%, #d4816f 60%); animation: mafiAgWave 5s linear infinite; }
.mafi-ag-wave-2 { border-radius: 45%; background: rgba(248, 228, 207, 0.35); animation: mafiAgWave 7s linear infinite reverse; }
.mafi-ag-svg { position: absolute; inset: 0; overflow: visible; }
.mafi-ag-tip {
	position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
	background: #fff3e6; box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.55), 0 0 16px 4px rgba(232, 168, 124, 0.7);
	opacity: 0; transition: opacity 0.2s ease;
}
.mafi-ag-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.mafi-ag-big { font-size: 42px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--color-contrast, #392b21); font-variant-numeric: tabular-nums; transition: color 0.25s ease; }
.mafi-ag-small { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-secondary, #846553); transition: color 0.25s ease; }
.mafi-ag-ring.is-filled .mafi-ag-big { color: #fffaf4; }
.mafi-ag-ring.is-half .mafi-ag-small { color: rgba(255, 250, 244, 0.85); }

.mafi-ag-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mafi-ag-hint { min-height: 20px; font-size: 13px; font-weight: 500; color: var(--color-secondary, #846553); transition: color 0.2s ease; }
.mafi-ag-hint.is-fail { color: var(--mafi-ag-fail); }
.mafi-ag-hint.is-ok { color: var(--mafi-ag-accent-text); }
.mafi-ag-link { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; color: var(--color-secondary, #846553); cursor: pointer; white-space: nowrap; }
.mafi-ag-link:hover { text-decoration: underline; }

.mafi-ag-exit { display: none; flex-direction: column; align-items: center; gap: 18px; align-self: stretch; }
#mafi-age-gate.is-exit .mafi-ag-main { display: none; }
#mafi-age-gate.is-exit .mafi-ag-exit { display: flex; }
.mafi-ag-moon { position: relative; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(180deg, #62564b, #9c7d61); }
[data-color-scheme="dark"] .mafi-ag-moon { background: linear-gradient(180deg, #1a1512, #3a322e); }
.mafi-ag-moon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #f5f0eb; box-shadow: 0 0 30px 6px rgba(221, 200, 166, 0.35); }
.mafi-ag-btns { display: flex; gap: 10px; align-self: stretch; }
.mafi-ag-btn { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.mafi-ag-btn-solid { background: var(--color-contrast, #392b21); color: var(--color-background, #ffffff) !important; border: 0; }
.mafi-ag-btn-ghost { background: transparent; color: var(--color-contrast, #392b21); border: 1px solid var(--color-border, rgba(156, 125, 97, 0.25)); }

@keyframes mafiAgIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes mafiAgBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 168, 124, 0); } 50% { box-shadow: 0 0 0 10px rgba(232, 168, 124, 0.16); } }
@keyframes mafiAgWave { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes mafiAgBurst { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes mafiAgPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.35); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.mafi-ag-breath, .mafi-ag-wave { animation: none !important; }
}

/* ---------- 水印：透明度微调（亮 5% / 暗 7%） ---------- */
.mafi-watermark, .mafi-watermark-full { opacity: 0.05 !important; }
[data-color-scheme="dark"] .mafi-watermark,
[data-color-scheme="dark"] .mafi-watermark-full { opacity: 0.07 !important; }
[data-color-scheme="dark"] .mafi-dot-texture { opacity: 0.04 !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-color-scheme="light"]) .mafi-watermark,
	:root:not([data-color-scheme="light"]) .mafi-watermark-full { opacity: 0.07 !important; }
	:root:not([data-color-scheme="light"]) .mafi-dot-texture { opacity: 0.04 !important; }
}

/* ---------- 手机端搜索 ---------- */
.mafi-ms { display: none; }
@media (max-width: 768px) {
	.mafi-ms { display: block; position: fixed; inset: 0; z-index: 10050; pointer-events: none; }
	.mafi-ms.is-open { pointer-events: auto; }
	.mafi-ms-bar {
		position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center;
		padding: 0 16px; box-sizing: border-box; background: var(--color-background);
		border-bottom: 1px solid var(--color-border); opacity: 0; transition: opacity 0.2s ease;
	}
	.mafi-ms.is-open .mafi-ms-bar { opacity: 1; }
	.mafi-ms-box {
		position: absolute; right: 16px; height: 40px; width: 40px; box-sizing: border-box;
		display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 20px; overflow: hidden;
		background: rgba(212, 165, 116, 0.12); border: 1px solid rgba(212, 165, 116, 0.25); color: var(--color-contrast);
		transition: width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), right 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, border-color 0.25s ease;
	}
	.mafi-ms.is-open .mafi-ms-box { right: 64px; width: calc(100% - 80px); background: var(--color-background-100); border-color: rgba(232, 168, 124, 0.55); }
	.mafi-ms-box svg { width: 18px; height: 18px; flex-shrink: 0; }
	.mafi-ms-input {
		flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0;
		font: inherit; font-size: 16px; color: var(--color-contrast); opacity: 0; transition: opacity 0.2s ease 0.12s;
		-webkit-user-select: text; user-select: text;
	}
	.mafi-ms-input::placeholder { color: var(--color-secondary); }
	.mafi-ms.is-open .mafi-ms-input { opacity: 1; }
	.mafi-ms-input::-webkit-search-cancel-button { display: none; }
	.mafi-ms-clear { display: none; width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0; flex-shrink: 0; align-items: center; justify-content: center; background: var(--color-background-300); color: var(--color-foreground); cursor: pointer; }
	.mafi-ms-clear svg { width: 12px; height: 12px; }
	.mafi-ms.has-q .mafi-ms-clear { display: flex; }
	.mafi-ms-cancel { position: absolute; right: 16px; background: none; border: 0; padding: 8px 0; font: inherit; font-size: 15px; font-weight: 500; color: var(--color-contrast); cursor: pointer; opacity: 0; transform: translateX(12px); transition: opacity 0.2s ease, transform 0.3s ease; }
	.mafi-ms.is-open .mafi-ms-cancel { opacity: 1; transform: none; }
	.mafi-ms-panel {
		position: absolute; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 20px 16px 40px; box-sizing: border-box; background: var(--color-background);
		opacity: 0; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	.mafi-ms.is-open .mafi-ms-panel { opacity: 1; transform: none; }
	.mafi-ms-sec { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
	.mafi-ms-sec-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--color-secondary); }
	.mafi-ms-sec-head button { background: none; border: 0; padding: 0; font: inherit; font-weight: 400; color: var(--color-secondary); cursor: pointer; }
	.mafi-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; }
	.mafi-ms-chip { font: inherit; font-size: 14px; color: var(--color-contrast); background: var(--color-background-100); border: 1px solid var(--color-border); padding: 7px 14px; border-radius: 18px; cursor: pointer; }
	.mafi-ms-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
	.mafi-ms-cat { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; text-decoration: none; font-size: 14px; font-weight: 600; }
	.mafi-ms-cat i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
	.mafi-ms-count { font-size: 13px; color: var(--color-secondary); padding-bottom: 6px; }
	.mafi-ms-res { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; }
	.mafi-ms-res-title { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--color-contrast); }
	.mafi-ms-res-title mark { color: var(--mafi-hl); background: var(--mafi-hl-bg); border-radius: 3px; padding: 0 1px; }
	.mafi-ms-res-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-secondary); }
	.mafi-ms-empty { padding: 40px 0; text-align: center; font-size: 14px; color: var(--color-secondary); }
	html.mafi-ms-lock, html.mafi-ms-lock body { overflow: hidden !important; }
}

/* ---------- 点缀色：分类标签 ---------- */
[data-mafi-tone] {
	--tone: var(--mafi-tone-0);
	display: inline-block;
	color: color-mix(in oklch, var(--tone) 50%, var(--mafi-tone-mix-fg)) !important;
	background: color-mix(in oklch, var(--tone) 18%, transparent);
	padding: 2px 9px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.6;
}
[data-mafi-tone="1"] { --tone: var(--mafi-tone-1); }
[data-mafi-tone="2"] { --tone: var(--mafi-tone-2); }
[data-mafi-tone="3"] { --tone: var(--mafi-tone-3); }
[data-color-scheme="dark"] [data-mafi-tone] { color: color-mix(in oklch, var(--tone) 80%, #f5ede4) !important; background: color-mix(in oklch, var(--tone) 20%, transparent); }
.card-post-overlay [data-mafi-tone], .card-post-overlay-simple [data-mafi-tone] { color: #fff3e6 !important; background: color-mix(in oklch, var(--tone) 45%, transparent); }

/* ---------- 字数徽章 ---------- */
.mafi-wc {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 9px;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--mafi-wc-fg);
	background: var(--mafi-wc-bg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	vertical-align: 0.2em;
}
.mafi-wc::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #e8a87c; }
.mafi-wc[hidden], .mafi-wc-meta:empty { display: none !important; }
.card-post-overlay .mafi-wc, .card-post-overlay-simple .mafi-wc {
	color: #fff3e6; background: rgba(232, 168, 124, 0.32); border: 1px solid rgba(248, 228, 207, 0.35);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.card-post-overlay .mafi-wc::before, .card-post-overlay-simple .mafi-wc::before { background: #f8c9a3; }

/* ---------- 阅读进度条 ---------- */
.mafi-progress {
	position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 10040; pointer-events: none;
	border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #ddc8a6, #e8a87c 55%, #d4816f);
	box-shadow: 0 0 8px rgba(232, 168, 124, 0.5);
}

/* ---------- 滚动条 ---------- */
html { scrollbar-color: #e8a87c transparent; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #e8a87c, #d4816f); border-radius: 10px; border: 3px solid var(--color-background, #faf7f4); }