/* =========================================================
   MandarinMiles · Library / All Books（核心展示页）
   作用域 .mm-lib —— 与其它页面的样式完全隔离。
   依赖 style.css 的 :root 令牌（--primary / --card / --border / --muted …）
   ========================================================= */

/* ---------- 统计条 ---------- */
.mm-lib .lib-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 26px 0 22px;
}
.mm-lib .lib-stat {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mm-lib .lib-stat-num {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--primary);
}
.mm-lib .lib-stat-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
}

/* ---------- 受众标签栏（吸顶） ---------- */
.mm-lib .lib-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 6px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(17, 102, 240, .12);
	background: var(--bg);
}
.mm-lib .lib-tab-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-lib .lib-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	color: var(--text, #1a2233);
	text-decoration: none;
	background: var(--card, #fff);
	border: 1px solid rgba(17, 102, 240, .18);
	transition: all .15s ease;
}
.mm-lib .lib-tab:hover { border-color: var(--primary, #1166F0); text-decoration: none; }
.mm-lib .lib-tab.on {
	background: var(--primary, #1166F0);
	color: #fff;
	border-color: var(--primary, #1166F0);
}
.mm-lib .lib-tab-n {
	font-size: 11px;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--brand-tint, #eaf2fe);
	color: var(--primary, #1166F0);
}
.mm-lib .lib-tab.on .lib-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }

.mm-lib .lib-exam { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted, #6b7280); }
.mm-lib .lib-exam-label { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.mm-lib .lib-exam-link {
	padding: 6px 12px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	color: var(--text, #1a2233);
	background: var(--brand-tint, #eaf2fe);
	border: 1px solid transparent;
	transition: all .15s ease;
}
.mm-lib .lib-exam-link.on,
.mm-lib .lib-exam-link:hover { background: var(--primary, #1166F0); color: #fff; text-decoration: none; }

/* ---------- 结果栏（计数 + 排序） ---------- */
/* Library 页：结果栏已有「N readers」，筛选面板底部不再重复显示计数 */
.mm-lib .mm-reader .mm-filter-count { display: none; }

/* 结果栏 + 排序表单为 [mm_readers] 短代码页 / taxonomy 归档页 / library 页三方共用
   （readers-listing.php:601 与 taxonomy-archives.php:236 都渲染 .mm-results-bar），
   容器分别是 .mm-lib 与 .mm-reader —— 不能锁 .mm-lib 作用域，否则列表页 Sort 裸奔变形
   （2026-11-06 用户反馈）。类名 mm 专属，全局化无冲突。 */
.mm-results-bar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	margin: 22px 0 16px;
	padding: 0 2px;
}
.mm-results-count { font-size: 14px; color: var(--muted); }
.mm-results-count b { font-size: 17px; font-weight: 800; color: var(--primary-dark); }

.mm-sort-form { display: flex; align-items: center; gap: 8px; }
/* label 默认 inline，会让「Sort」标签与下拉框上下错行 —— 改为 flex 让二者同行 */
/* label 默认 inline，会让「Sort」标签与下拉框上下错行 —— 改为 flex 让二者同行；
   margin-bottom 是主题 label 默认样式，会把表单盒撑高 8px 导致整组中线偏上 —— 必须归零。 */
.mm-sort-form label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.mm-sort-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}
.mm-sort-form select {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	background: var(--card);
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: 7px 30px 7px 12px;
	height: 36px;
	cursor: pointer;
	transition: border-color .15s ease;
}
.mm-sort-form select:hover { border-color: var(--primary); }
.mm-sort-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--brand-tint); }

/* ---------- 网格：Library 用 4 列（比通用 3 列更适合「展示全部」） ---------- */
.mm-lib .mm-reader .rgrid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mm-lib .mm-reader .rcard .rcover { border-radius: 14px 14px 0 0; }
.mm-lib .mm-reader .rcard .rbody { padding: 15px 17px 17px; gap: 6px; }
/* 标题 / 摘要的「固定行数 + 截断」规则已上移到 readers.css 的公共作用域
   （.mm-reader .rcard .rbody h3 / p），所有用到这张卡片的页面
   （/readers/、/adults/、/kids/、/library/、首页书库区…）行为一致。
   ⚠️ 之前这两条只写在 .mm-lib 作用域里，导致 /adults/ /kids/ 分类页不截断，
      被长摘要（WP 自动抓正文首段）把整排卡片撑变形。
   这里只保留 Library 自己的字号差异。 */
.mm-lib .mm-reader .rcard .rbody h3 { font-size: 16.5px; }
.mm-lib .mm-reader .rcard .rbody p { font-size: 12.5px; }
.mm-lib .mm-reader .rcard .rmeta { font-size: 11.5px; gap: 8px; }

/* ---------- 加载更多 ---------- */
.mm-lib .mm-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 34px 0 10px;
}
.mm-lib .mm-loadmore-btn {
	font-size: 14px;
	font-weight: 700;
	padding: 12px 30px;
	border-radius: 999px;
	border: 1.5px solid var(--primary);
	background: var(--card);
	color: var(--primary);
	cursor: pointer;
	transition: all .18s ease;
}
.mm-lib .mm-loadmore-btn:hover:not(:disabled) {
	background: var(--primary);
	color: #fff;
	transform: translateY(-1px);
}
.mm-lib .mm-loadmore-btn:disabled { opacity: .55; cursor: progress; }
.mm-lib .mm-loadmore-status { font-size: 12.5px; color: var(--muted); min-height: 18px; }
.mm-lib .mm-loadmore-sentinel { width: 100%; height: 1px; }

/* 无 JS 时的真分页链接（JS 接管后由 mm-loadmore 按钮代替） */
.mm-lib .rpagination { margin: 30px 0 8px; }
/* JS 生效时隐藏真分页（readers-scroll.js 会打上标记），只留「加载更多」 */
.mm-lib .rpagination[data-mm-pagination="1"] { display: none; }

/* ---------- 空状态 ---------- */
.mm-lib .rgrid-empty {
	grid-column: 1 / -1;
	padding: 56px 24px;
	text-align: center;
	background: var(--card);
	border: 1px dashed var(--border);
	border-radius: 16px;
}
.mm-lib .rgrid-empty p { margin: 0; font-size: 15px; }

/* ---------- 底部 CTA ---------- */
.mm-lib .lib-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin: 56px 0 72px;
	padding: 34px 38px;
	border-radius: 20px;
	background: linear-gradient(135deg, #1166F0 0%, #5B97F9 55%, #7C5CF0 100%);
	color: #fff;
	box-shadow: 0 18px 44px rgba(17, 102, 240, .22);
}
.mm-lib .lib-cta-text { min-width: 0; }
.mm-lib .lib-cta h2 {
	margin: 0 0 8px;
	font-size: clamp(20px, 2.4vw, 27px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
}
.mm-lib .lib-cta p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	max-width: 56ch;
}
.mm-lib .lib-cta-btn {
	flex: none;
	background: var(--card);
	color: var(--primary, #1166F0);
	font-weight: 800;
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.mm-lib .lib-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(11, 20, 50, .2);
	text-decoration: none;
	color: var(--primary-dark, #0B4FCC);
}

/* ---------- 暗色模式 ---------- */
:root[data-theme="dark"] .mm-lib .lib-tab-n { background: rgba(17, 102, 240, .22); color: #7FB0FF; }
:root[data-theme="dark"] .mm-lib .lib-tab.on .lib-tab-n { background: rgba(255, 255, 255, .2); color: #fff; }
:root[data-theme="dark"] .mm-lib .lib-cta {
	background: linear-gradient(135deg, #0B4FCC 0%, #2F6FE0 55%, #6A4BD8 100%);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
	.mm-lib .mm-reader .rgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.mm-lib .lib-stats { grid-template-columns: repeat(2, 1fr); }
	.mm-lib .mm-reader .rgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.mm-lib .lib-cta { padding: 28px 24px; }
}
@media (max-width: 620px) {
	.mm-lib .lib-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.mm-lib .lib-stat { padding: 14px 15px; }
	.mm-lib .lib-stat-num { font-size: 24px; }
	.mm-lib .mm-reader .rgrid { grid-template-columns: 1fr; }
	.mm-lib .lib-tabs { gap: 10px 14px; }
	.mm-results-bar { margin: 18px 0 12px; }
	.mm-sort-form { width: 100%; }
	.mm-sort-form select { flex: 1; }
	.mm-lib .lib-cta { margin: 40px 0 56px; }
}

/* =========================================================
   Library 2b · 紧凑筛选（后台 Modules → Readers filter 统一开关）
   说明：类名带 mm-f 前缀，作用域独立于旧 .mm-filter；其它列表页
   （/adults/ /kids/ /free/ archive / taxonomy）复用同一套样式。
   ========================================================= */

/* 横幅高度由 page-banner.css 的站点统一令牌 --pb-h:132px 提供，
   这里不再做页面级 !important 覆盖（2b 与全站共用同一规格）。 */
.mm-lib-slim {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	background: var(--card); border: 1px solid var(--border); border-radius: 14px;
	box-shadow: var(--shadow); padding: 9px 16px; margin: 14px 0 12px;
	font-size: 12.5px; color: var(--muted);
}
.mm-lib-slim b { color: #1166F0; font-weight: 800; }
.mm-lib-slim .mm-lib-slim-cta { margin-left: auto; font-weight: 700; color: #1166F0; text-decoration: none; }
.mm-lib-slim .mm-lib-slim-cta:hover { text-decoration: underline; }

/* toolbar 容器 */
.mm-ftoolbar {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	position: relative; background: var(--card); border: 1px solid var(--border);
	border-radius: 14px; box-shadow: var(--shadow); padding: 9px 11px; margin: 0 0 6px;
}
.mm-ftoolbar .mm-fq {
	flex: 1; min-width: 170px; height: 36px; box-sizing: border-box;
	border: 1.5px solid var(--border); border-radius: 10px; padding: 0 11px;
	font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--card);
}
.mm-ftoolbar .mm-fq:focus { outline: none; border-color: #1166F0; box-shadow: 0 0 0 3px rgba(17, 102, 240, .14); }
.mm-fbtn {
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
	flex: 0 0 auto; /* 锁定自然宽度：按钮在任意页面都等宽，工具栏视觉与 library 页完全同款 */
	border: 1.5px solid var(--border); background: var(--card); color: var(--text);
	border-radius: 999px; padding: 7px 12px; font-size: 12.5px; font-weight: 700;
	text-decoration: none; font-family: inherit;
}
.mm-fbtn:hover, .mm-fbtn.on { border-color: #1166F0; color: #1166F0; background: rgba(17, 102, 240, .07); }
.mm-fbtn i { font-size: 9px; font-style: normal; opacity: .6; }
.mm-fk { font-size: 10.5px; font-weight: 800; background: #1166F0; color: #fff; border-radius: 999px; padding: 0 6px; line-height: 16px; }
.mm-fk[hidden] { display: none; }

/* Sort 在工具栏行最右；Hide read 开关复用 .mm-fbtn 胶囊样式 */
.mm-ftoolbar .mm-fsort { margin-left: auto; display: flex; align-items: center; }
.mm-ftoolbar .mm-fsort .mm-sort-form { display: flex; align-items: center; gap: 8px; }
/* 隐藏已读（游客端）：卡片直接不占位 */
.rgrid .rcard[hidden], .rgrid-empty .rcard[hidden] { display: none !important; }

/* popover */
.mm-fpop {
	position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
	background: var(--card); border: 1px solid var(--border); border-radius: 14px;
	box-shadow: 0 16px 40px rgba(15, 28, 51, .18); padding: 14px 16px;
}
.mm-fpop[hidden], .mm-flvpane[hidden] { display: none !important; }
.mm-fpop h5 { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mm-fopts, .mm-flvpane { display: flex; flex-wrap: wrap; gap: 7px; }
.mm-fopt {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1.5px solid var(--border); background: var(--card); color: var(--text);
	border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 600;
	text-decoration: none; transition: border-color .12s, color .12s;
}
.mm-fopt:hover { border-color: #1166F0; color: #1166F0; text-decoration: none; }
.mm-fopt.on { background: rgba(17, 102, 240, .1); border-color: #1166F0; color: #1166F0; }
.mm-fopt[data-mm-zero="1"] { opacity: .42; cursor: not-allowed; pointer-events: none; }
.mm-feq { font-size: 10px; font-weight: 700; color: var(--muted); }
.mm-fcnt { font-size: 10.5px; font-weight: 800; color: var(--muted); background: rgba(107, 114, 128, .12); border-radius: 999px; padding: 1px 6px; }
.mm-fopt.on .mm-fcnt { background: rgba(17, 102, 240, .16); color: #1166F0; }
.mm-fhint { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted); }

/* Level 弹层：CEFR / HSK 双视图 + 六档对照条 */
.mm-flvswitch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mm-flvswitch button {
	border: 1.5px solid var(--border); background: var(--card); color: var(--muted);
	border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; font-family: inherit;
}
.mm-flvswitch button.on { background: #1166F0; border-color: #1166F0; color: #fff; }
.mm-flvswitch .mm-fhint { margin: 0 0 0 auto; }
.mm-fmap { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.mm-fmap > b { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mm-fmap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mm-fmap-grid div { background: rgba(107, 114, 128, .08); border: 1px solid var(--border); border-radius: 8px; padding: 7px 5px; text-align: center; line-height: 1.35; }
.mm-fmap-grid span { display: block; font-size: 12px; font-weight: 800; color: #1166F0; }
.mm-fmap-grid i { display: block; font-size: 9px; color: var(--muted); font-style: normal; margin: 1px 0; }
.mm-fmap-grid em { display: block; font-size: 10px; font-weight: 700; color: var(--text); font-style: normal; white-space: nowrap; }

/* Active filters */
.mm-fchips-slot:empty { display: none; }
.mm-fchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 9px; }
.mm-fchips-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mm-fchip {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1.5px solid #1166F0; background: rgba(17, 102, 240, .09); color: #1166F0;
	border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12px; font-weight: 700;
}
.mm-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(17, 102, 240, .14); color: #1166F0; text-decoration: none; font-size: 12px; line-height: 1; }
.mm-fchip-x:hover { background: #1166F0; color: #fff; text-decoration: none; }
.mm-fclear { font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: underline; margin-left: auto; }
.mm-fclear:hover { color: #1166F0; }
.mm-fempty { background: var(--card); border: 1.5px dashed var(--border); border-radius: 14px; padding: 32px 20px; text-align: center; }
.mm-fempty h4 { margin: 0 0 6px; font-size: 16px; }
.mm-fempty p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.mm-floading .rgrid, .mm-floading .rgrid-empty { opacity: .55; transition: opacity .15s; }

/* 暗色模式 */
:root[data-theme="dark"] .mm-lib-slim b,
:root[data-theme="dark"] .mm-lib-slim .mm-lib-slim-cta,
:root[data-theme="dark"] .mm-fbtn:hover,
:root[data-theme="dark"] .mm-fbtn.on,
:root[data-theme="dark"] .mm-fopt:hover,
:root[data-theme="dark"] .mm-fopt.on,
:root[data-theme="dark"] .mm-fchip,
:root[data-theme="dark"] .mm-fchip-x,
:root[data-theme="dark"] .mm-fmap-grid span { color: #7FB0FF; }
:root[data-theme="dark"] .mm-fbtn:hover,
:root[data-theme="dark"] .mm-fbtn.on,
:root[data-theme="dark"] .mm-fopt:hover,
:root[data-theme="dark"] .mm-fopt.on { border-color: #7FB0FF; }
:root[data-theme="dark"] .mm-fchip { border-color: #7FB0FF; }

@media (max-width: 900px) {
	.mm-ftoolbar .mm-fq { min-width: 100%; }
	.mm-fmap-grid { grid-template-columns: repeat(3, 1fr); }
	.mm-flvswitch .mm-fhint { margin: 0; width: 100%; }
}