/**
 * Motion Catalog — 基础层
 *
 * 只依赖 tokens.css 中的 --ms-* 变量。所有颜色、字号、间距、圆角、时长
 * 必须走变量，这样设置面板改一项就能全局生效。
 */

/* ── 基础 ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ms-header-height) + var(--ms-space-4));
}

body {
	margin: 0;
	background: var(--ms-canvas);
	color: var(--ms-ink);
	font-family: var(--ms-font);
	font-size: var(--ms-text-body);
	line-height: var(--ms-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* flex/grid 子项默认 min-width:auto 会撑破容器，这是横向溢出的头号原因 */
:where(.wp-block-group, .wp-block-columns, .wp-block-column) > * { min-width: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ms-accent-ink); }

/* 焦点必须可见，绝不 outline:none */
:focus-visible {
	outline: 2px solid var(--ms-focus);
	outline-offset: 2px;
	border-radius: var(--ms-radius-sm);
}

::selection {
	background: var(--ms-accent);
	color: var(--ms-on-accent);
}

/* ── 布局容器 ──────────────────────────────────────────────────────────── */

.page-shell {
	width: 100%;
	max-width: var(--ms-container);
	margin-inline: auto;
	padding-inline: clamp(var(--ms-space-4), 4vw, var(--ms-space-10));
}

.page-shell--content { max-width: var(--ms-content); }

.section { padding-block: calc(var(--ms-space-12) * var(--ms-density)); }

.section--tight { padding-block: calc(var(--ms-space-8) * var(--ms-density)); }

/* ── 站点头部 ──────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;

	/* 回退：不支持 color-mix 时给不透明底色，避免毛玻璃失效导致内容穿透 */
	background: var(--ms-canvas);
	background: color-mix(in srgb, var(--ms-canvas) 82%, transparent);

	-webkit-backdrop-filter: blur(var(--ms-header-blur));
	backdrop-filter: blur(var(--ms-header-blur));
	border-bottom: 1px solid transparent;
	transition:
		background var(--ms-dur-base) linear,
		border-color var(--ms-dur-base) linear;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-grid-gap);
	min-height: var(--ms-header-height);
	transition: min-height var(--ms-dur-base) var(--ms-ease-out);
}

/*
 * 换行行为必须显式声明。
 *
 * WordPress 给 .is-layout-flex 的默认值是 flex-wrap: wrap，而区块输出里的
 * is-nowrap 这个 class 在样式里没有对应规则，结果页头在窄屏会被挤成三行。
 * 用更高特异性钉死，不依赖 WordPress 是否输出了 .is-nowrap。
 */
.site-header .site-header__inner,
.site-header .site-nav {
	flex-wrap: nowrap;
}

/* 窄屏：品牌一行，导航与操作一行；导航过长时横向滚动，不再堆成三行 */
@media (max-width: 60rem) {
	.site-header .site-header__inner {
		flex-wrap: wrap;
		row-gap: var(--ms-space-2);
		padding-block: var(--ms-space-2);
	}

	.site-header .site-nav {
		width: 100%;
		justify-content: space-between;
		gap: var(--ms-space-3);
	}

	.site-nav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.site-nav__list::-webkit-scrollbar { display: none; }
}

/* 滚动后收缩：与目标站行为一致 */
.site-header.is-stuck { border-bottom-color: var(--ms-line); }
.site-header.is-stuck .site-header__inner { min-height: var(--ms-header-height-stuck); }

/*
 * 滚动哨兵 —— 由 motion.js 插入到 body 最前面。
 *
 * 它必须脱离 sticky 头部：若放在 <header> 内部，会跟着粘性头部一起
 * 停在视口顶部，IntersectionObserver 永远判定为可见，收缩状态不会触发。
 */
.ms-scroll-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-2);
	font-size: var(--ms-text-panel);
	font-weight: 700;
	letter-spacing: -.02em;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: calc(var(--ms-space-5) * var(--ms-density));
	font-size: var(--ms-text-ui);
	font-weight: 500;
}

.site-nav a { color: var(--ms-muted); transition: color var(--ms-dur-micro) var(--ms-ease-out); }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ms-ink); }

/* ── 按钮 ──────────────────────────────────────────────────────────────── */

.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ms-space-2);
	padding: var(--ms-space-2) var(--ms-space-4);
	border: 1px solid transparent;
	border-radius: var(--ms-radius-md);
	font-size: var(--ms-text-ui);
	font-weight: 600;
	line-height: var(--ms-leading-ui);
	cursor: pointer;
	transition:
		background var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out),
		transform var(--ms-dur-micro) var(--ms-ease-out);
}

.ms-btn:active { transform: translateY(1px) scale(.99); }

.ms-btn--primary { background: var(--ms-accent); color: var(--ms-on-accent); }
.ms-btn--primary:hover { background: var(--ms-accent-hover); color: var(--ms-on-accent); }

.ms-btn--ghost {
	background: var(--ms-surface);
	color: var(--ms-ink);
	border-color: var(--ms-line);
}
.ms-btn--ghost:hover { background: var(--ms-surface-hover); border-color: var(--ms-line-strong); }

.ms-btn--quiet { background: transparent; color: var(--ms-muted); }
.ms-btn--quiet:hover { color: var(--ms-ink); background: var(--ms-surface-hover); }

/* ── 徽章 ──────────────────────────────────────────────────────────────── */

.ms-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-1);
	padding: 3px var(--ms-space-2);
	border-radius: var(--ms-radius-pill);
	border: 1px solid var(--ms-line);
	background: var(--ms-surface);
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	font-weight: 600;
	line-height: var(--ms-leading-ui);
	white-space: nowrap;
}

.ms-badge--free { background: var(--ms-accent-soft); border-color: transparent; color: var(--ms-accent-ink); }
.ms-badge--paid { background: var(--ms-surface-subtle); color: var(--ms-muted); }
.ms-badge--limited { background: var(--ms-accent); border-color: transparent; color: var(--ms-on-accent); }
.ms-badge--new { background: var(--ms-blue); border-color: transparent; color: var(--ms-surface); }

/* ── 卡片 ──────────────────────────────────────────────────────────────── */

.ms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ms-grid-min), 1fr));
	gap: var(--ms-grid-gap);
	/*
	 * post-template 输出的是 <ul>，这里显式清掉列表样式，
	 * 不依赖 WordPress 默认样式是否被其他插件覆盖。
	 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-grid > li { margin: 0; }

.ms-card {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: var(--ms-surface);
	overflow: hidden;
	transition:
		transform var(--ms-dur-base) var(--ms-ease-out),
		box-shadow var(--ms-dur-base) var(--ms-ease-out),
		border-color var(--ms-dur-base) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--ms-shadow-media);
		border-color: var(--ms-line-strong);
	}
}

.ms-card__media {
	aspect-ratio: var(--ms-card-ratio);
	background: var(--ms-surface-subtle);
	overflow: hidden;
}

.ms-card__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * 无特色图时不留空洞。没有这段，未配图的卡片会缺掉整个媒体区，
 * 网格高度参差不齐。
 */
.ms-card__media:not(:has(img)) {
	background-image:
		radial-gradient(120% 120% at 18% 0%, color-mix(in srgb, var(--ms-accent) 26%, transparent) 0%, transparent 58%),
		linear-gradient(135deg, var(--ms-surface-subtle), var(--ms-fill));
}

.ms-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	padding: var(--ms-space-4);
}

.ms-card__title {
	margin: 0;
	font-size: var(--ms-text-panel);
	font-weight: 700;
	line-height: var(--ms-leading-tight);
	letter-spacing: -.01em;
}

.ms-card__meta {
	display: flex;
	align-items: center;
	gap: var(--ms-space-1);
	font-size: var(--ms-text-meta);
	color: var(--ms-muted);
}

/* ── 详情页 ────────────────────────────────────────────────────────────── */

/* 详情页的 meta / 两栏布局 / 信息卡统一定义在文件后段，
 * 见「详情页：两栏主体 / 信息卡 / 正文与参数」三节。 */

/* ── 代码 / prompt 预览 ────────────────────────────────────────────────── */

/* 锁定的 prompt 预览：区块输出的是 <pre class="wp-block-code ms-prompt-preview is-locked"> */
.wp-block-code.ms-prompt-preview {
	position: relative;
	margin: 0;
	padding: var(--ms-space-4) var(--ms-space-5);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	background: var(--ms-surface-subtle);
	color: var(--ms-ink);
	font-family: var(--ms-font-mono);
	font-size: var(--ms-text-ui);
	line-height: var(--ms-leading-ui);
	white-space: pre-wrap;
	overflow: hidden;
}

.ms-prompt-preview.is-locked::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--ms-space-16);
	background: linear-gradient(to bottom, transparent, var(--ms-surface-subtle));
	pointer-events: none;
}

.ms-lock-note {
	margin-block-start: var(--ms-space-3);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
}

/* ── 首屏 ──────────────────────────────────────────────────────────────── */

.ms-hero {
	padding-block: calc(var(--ms-space-16) * var(--ms-density)) calc(var(--ms-space-12) * var(--ms-density));
	border-bottom: 1px solid var(--ms-line);
}

.ms-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ms-space-4);
	text-align: center;
}

.ms-hero__eyebrow {
	margin: 0;
	color: var(--ms-muted);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ms-hero__title {
	margin: 0;
	max-width: 20ch;
	font-size: var(--ms-text-hero);
	line-height: var(--ms-leading-tight);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.ms-hero__lede {
	margin: 0;
	max-width: var(--ms-measure);
	color: var(--ms-muted);
	text-wrap: pretty;
}

.ms-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-3);
	justify-content: center;
	margin-block-start: var(--ms-space-2);
}

/* ── 筛选栏 ────────────────────────────────────────────────────────────── */

.ms-explore { padding-block: calc(var(--ms-space-8) * var(--ms-density)); }

.ms-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-grid-gap);
	flex-wrap: wrap;
	margin-block-end: calc(var(--ms-space-8) * var(--ms-density));
}

.ms-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-tabs li { margin: 0; }

.ms-tabs a {
	display: inline-block;
	padding: var(--ms-space-1) var(--ms-space-3);
	border-radius: var(--ms-radius-pill);
	border: 1px solid transparent;
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	transition:
		background var(--ms-dur-micro) var(--ms-ease-out),
		color var(--ms-dur-micro) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-tabs a:hover { background: var(--ms-surface-hover); color: var(--ms-ink); }
}

.ms-tabs .is-active a,
.ms-tabs a[aria-current="page"] {
	background: var(--ms-ink);
	color: var(--ms-canvas);
	border-color: var(--ms-ink);
}

.ms-search .wp-block-search__input {
	padding: var(--ms-space-2) var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	background: var(--ms-surface);
	color: var(--ms-ink);
	font-size: var(--ms-text-ui);
}

.ms-search .wp-block-search__input:focus-visible {
	border-color: var(--ms-focus);
	outline: 2px solid var(--ms-focus);
	outline-offset: 1px;
}

/* ── 分页 / 空态 ──────────────────────────────────────────────────────── */

.ms-pagination { margin-block-start: calc(var(--ms-space-10) * var(--ms-density)); }

.ms-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ms-space-8);
	height: var(--ms-space-8);
	padding-inline: var(--ms-space-2);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	background: var(--ms-surface);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
}

.ms-pagination .page-numbers.current {
	background: var(--ms-ink);
	border-color: var(--ms-ink);
	color: var(--ms-canvas);
}

.ms-empty {
	padding-block: calc(var(--ms-space-12) * var(--ms-density));
	color: var(--ms-muted);
	text-align: center;
}

/* ── 页脚 ──────────────────────────────────────────────────────────────── */

.site-footer {
	margin-block-start: calc(var(--ms-space-16) * var(--ms-density));
	padding-block: calc(var(--ms-space-12) * var(--ms-density)) calc(var(--ms-space-8) * var(--ms-density));
	border-top: 1px solid var(--ms-line);
	background: var(--ms-surface);
	font-size: var(--ms-text-ui);
}

.site-footer__cols { gap: calc(var(--ms-space-8) * var(--ms-density)); }

.site-footer__blurb {
	margin-block-start: var(--ms-space-3);
	max-width: 32ch;
	color: var(--ms-muted);
}

.site-footer__heading {
	margin: 0 0 var(--ms-space-3);
	color: var(--ms-ink);
	font-size: var(--ms-text-meta);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.site-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
}

.site-footer__links a { color: var(--ms-muted); }
@media (hover: hover) {
	.site-footer__links a:hover { color: var(--ms-ink); }
}

.site-footer__legal {
	margin-block-start: calc(var(--ms-space-10) * var(--ms-density));
	padding-block-start: calc(var(--ms-space-5) * var(--ms-density));
	border-top: 1px solid var(--ms-line);
	gap: var(--ms-space-3);
}

.site-footer__legal p { margin: 0; }
.site-footer__legal-links { gap: var(--ms-space-4); }

/* ── 滚动揭示（渐进增强：默认即为完成态） ──────────────────────────────── */

[data-reveal] { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-reveal] {
			animation: ms-reveal-in linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 34%;
		}
	}
}

@keyframes ms-reveal-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/*
 * 只有 JS 确认浏览器不支持 animation-timeline 时，才给 <html> 加 .js-reveal
 * 并启用初始隐藏态。脚本失败时元素保持默认可见，不会被永久隐藏。
 */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--ms-dur-enter) var(--ms-ease-out) var(--ms-delay, 0ms),
		transform var(--ms-dur-enter) var(--ms-ease-out) var(--ms-delay, 0ms);
}

.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ── 无障碍：减少动效 ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.ms-card:hover { transform: none !important; }
	.site-header__inner { transition: none; }
}

/* ── 屏幕阅读器专用 ───────────────────────────────────────────────────── */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--ms-space-2);
	left: var(--ms-space-2);
	z-index: 100;
	padding: var(--ms-space-2) var(--ms-space-4);
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	box-shadow: var(--ms-shadow-media);
}

/* ── 按钮区块样式 ─────────────────────────────────────────────────────── */
/*
 * is-style-ms-primary / is-style-ms-ghost 由 functions.php 的
 * register_block_style() 注册。没注册时 WordPress 会丢掉这些 class，
 * 按钮就只剩浏览器默认外观。
 */

.wp-block-button__link {
	transition:
		background-color var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out),
		color var(--ms-dur-micro) var(--ms-ease-out);
}

.wp-block-button.is-style-ms-primary .wp-block-button__link {
	background-color: var(--ms-accent);
	color: var(--ms-on-accent);
	border: 1px solid transparent;
}

.wp-block-button.is-style-ms-primary .wp-block-button__link:hover {
	background-color: var(--ms-accent-hover);
	color: var(--ms-on-accent);
}

.wp-block-button.is-style-ms-ghost .wp-block-button__link {
	background-color: var(--ms-surface);
	color: var(--ms-ink);
	border: 1px solid var(--ms-line);
}

.wp-block-button.is-style-ms-ghost .wp-block-button__link:hover {
	background-color: var(--ms-surface-hover);
	border-color: var(--ms-line-strong);
	color: var(--ms-ink);
}

/* ── 站内导航链接列表（header 手写导航） ───────────────────────────────── */

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--ms-space-5) * var(--ms-density));
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li { margin: 0; }

.site-nav__list a { color: var(--ms-muted); }

@media (hover: hover) {
	.site-nav__list a:hover { color: var(--ms-ink); }
}

/* ── 详情页补充 ───────────────────────────────────────────────────────── */

.site-main { display: block; }

/* ── 详情页：两栏主体 ──────────────────────────────────────────────────── */

.ms-detail-back { padding-block: var(--ms-space-4) 0; }

.ms-back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-1);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
}

@media (hover: hover) {
	.ms-back-link:hover { color: var(--ms-ink); }
}

/*
 * 目标站的详情页是「左大图 + 右信息卡」两栏：左栏占主体，
 * 右栏是可操作的窄信息卡，滚动时跟随。
 */
.ms-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--ms-space-8);
	align-items: start;
	padding-block: calc(var(--ms-space-6) * var(--ms-density)) calc(var(--ms-space-12) * var(--ms-density));
}

@media (max-width: 60rem) {
	.ms-detail {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ms-space-6);
	}
}

.ms-detail__media {
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
	background: var(--ms-surface-subtle);
}

.ms-detail__media img { width: 100%; height: auto; display: block; }

/* 无图时不留空洞，用与卡片一致的渐变占位 */
.ms-detail__media:not(:has(img)) {
	aspect-ratio: 4 / 5;
	background-image:
		radial-gradient(120% 120% at 18% 0%, color-mix(in srgb, var(--ms-accent) 26%, transparent) 0%, transparent 58%),
		linear-gradient(135deg, var(--ms-surface-subtle), var(--ms-fill));
}

.ms-detail__panel {
	position: sticky;
	top: calc(var(--ms-header-height) + var(--ms-space-4));
}

@media (max-width: 60rem) {
	.ms-detail__panel { position: static; }
}

/* ── 详情页：信息卡 ───────────────────────────────────────────────────── */

.ms-panel-card {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
	padding: var(--ms-space-5);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: var(--ms-surface);
}

.ms-panel-card__badges,
.ms-panel-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-2);
}

.ms-panel-card__chips { gap: var(--ms-space-1); }

.ms-panel-card__eyebrow {
	margin: var(--ms-space-2) 0 0;
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ms-panel-card__title {
	margin: 0;
	font-size: var(--ms-text-page);
	line-height: var(--ms-leading-tight);
	letter-spacing: -.02em;
}

.ms-chip {
	display: inline-flex;
	padding: 3px var(--ms-space-2);
	border-radius: var(--ms-radius-sm);
	background: var(--ms-surface-subtle);
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
}

.ms-panel-card__intro {
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	line-height: var(--ms-leading-body);
}

.ms-panel-card__intro p { margin: 0 0 var(--ms-space-3); }
.ms-panel-card__intro p:last-child { margin-block-end: 0; }

.ms-panel-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	margin-block-start: var(--ms-space-2);
}

/* 全宽堆叠的操作按钮：主操作用品牌色，其余描边 */
.ms-action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ms-space-2);
	width: 100%;
	padding: var(--ms-space-3) var(--ms-space-4);
	border: 1px solid transparent;
	border-radius: var(--ms-radius-md);
	font-size: var(--ms-text-ui);
	font-weight: 600;
	line-height: var(--ms-leading-ui);
	cursor: pointer;
	transition:
		background var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out),
		color var(--ms-dur-micro) var(--ms-ease-out);
}

.ms-action--primary {
	background: var(--ms-accent);
	color: var(--ms-on-accent);
}

.ms-action--primary:hover {
	background: var(--ms-accent-hover);
	color: var(--ms-on-accent);
}

.ms-action--ghost {
	background: var(--ms-surface);
	color: var(--ms-ink);
	border-color: var(--ms-line);
}

.ms-action--ghost:hover {
	background: var(--ms-surface-hover);
	border-color: var(--ms-line-strong);
	color: var(--ms-ink);
}

.ms-icon { flex: none; }

.ms-panel-card__tier {
	margin: var(--ms-space-2) 0 0;
	font-size: var(--ms-text-ui);
	font-weight: 700;
}

.ms-panel-card__note {
	display: flex;
	align-items: flex-start;
	gap: var(--ms-space-2);
	margin: 0;
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	line-height: var(--ms-leading-ui);
}

.ms-panel-card__note .ms-icon { margin-block-start: 2px; }

/* ── 详情页：正文与参数 ───────────────────────────────────────────────── */

.ms-detail-body,
.ms-related {
	padding-block: calc(var(--ms-space-10) * var(--ms-density));
	border-top: 1px solid var(--ms-line);
}

/* 正文列收窄到可读行长，但仍居中 */
.ms-detail-body { max-width: var(--ms-content); }

.ms-detail-section-title {
	margin: 0 0 var(--ms-space-5);
	font-size: var(--ms-text-title);
}

.ms-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-6);
	padding-block: var(--ms-space-5);
	margin-block-start: var(--ms-space-6);
	border-top: 1px solid var(--ms-line);
}

.ms-detail-meta__item {
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	min-width: 8rem;
}

.ms-detail-meta__label {
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.ms-detail-meta__value {
	font-size: var(--ms-text-ui);
	font-weight: 600;
}

/* 页面结构 / 视觉基调用小块示意，比纯文字列表直观 */
.ms-structure {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ms-space-1);
}

.ms-structure__block {
	padding: 2px var(--ms-space-2);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	background: var(--ms-surface);
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	font-weight: 400;
}

/* ── 顶部公告条 ────────────────────────────────────────────────────────── */

.ms-notice {
	position: relative;
	z-index: 55;
	background: var(--ms-ink);
	color: var(--ms-canvas);
	font-size: var(--ms-text-ui);
}

.ms-notice__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ms-space-4);
	padding-block: var(--ms-space-2);
	text-align: center;
}

.ms-notice__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-notice__close {
	background: none;
	border: 0;
	padding: 0 var(--ms-space-1);
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}

.ms-notice__close:hover { opacity: 1; }

/* ── 页脚：栏目导航 ────────────────────────────────────────────────────── */

.ms-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: calc(var(--ms-space-8) * var(--ms-density));
	margin-block-end: calc(var(--ms-space-10) * var(--ms-density));
}

.ms-footer-nav__title {
	margin: 0 0 var(--ms-space-3);
	color: var(--ms-ink);
	font-size: var(--ms-text-meta);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ms-footer-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
}

.ms-footer-nav a { color: var(--ms-muted); }

@media (hover: hover) {
	.ms-footer-nav a:hover { color: var(--ms-ink); }
}

/* ── 页脚：版权 / 备案 / 社交 ──────────────────────────────────────────── */

.ms-site-info {
	padding-block-start: calc(var(--ms-space-5) * var(--ms-density));
	border-top: 1px solid var(--ms-line);
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
	font-size: var(--ms-text-meta);
}

.ms-site-info__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-space-2) var(--ms-space-4);
}

.ms-site-info__copy { margin: 0; color: var(--ms-muted); }

.ms-site-info__certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-space-1) var(--ms-space-3);
}

.ms-cert {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-1);
	color: var(--ms-muted);
}

.ms-cert:hover { color: var(--ms-ink); }
.ms-cert__icon { flex: none; }

.ms-site-info__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-space-2) var(--ms-space-4);
}

.ms-social {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ms-muted);
}

.ms-social:hover { color: var(--ms-ink); }

/* 二维码在 hover / 聚焦时展开，不占用静态版面 */
.ms-social--qr { cursor: help; }

.ms-social__qr {
	position: absolute;
	bottom: calc(100% + var(--ms-space-2));
	left: 50%;
	transform: translateX(-50%);
	padding: var(--ms-space-2);
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	box-shadow: var(--ms-shadow-media);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ms-dur-base) var(--ms-ease-out);
}

.ms-social:hover .ms-social__qr,
.ms-social:focus-within .ms-social__qr {
	opacity: 1;
	visibility: visible;
}

.ms-social__qr img { width: 140px; height: 140px; object-fit: contain; }

.ms-site-info__friends {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ms-space-2) var(--ms-space-3);
	color: var(--ms-muted);
}

.ms-site-info__friends-label { font-weight: 600; }

/* ── 悬浮客服 ──────────────────────────────────────────────────────────── */

.ms-support {
	position: fixed;
	right: var(--ms-space-5);
	bottom: var(--ms-space-5);
	z-index: 60;
}

.ms-support__toggle {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	list-style: none;
	border-radius: var(--ms-radius-pill);
	background: var(--ms-accent);
	color: var(--ms-on-accent);
	cursor: pointer;
	box-shadow: var(--ms-shadow-media);
	transition: transform var(--ms-dur-base) var(--ms-ease-out);
}

.ms-support__toggle::-webkit-details-marker { display: none; }
.ms-support__toggle::marker { content: ""; }

@media (hover: hover) {
	.ms-support__toggle:hover { transform: translateY(-2px); }
}

.ms-support[open] .ms-support__toggle { transform: rotate(-8deg); }

.ms-support__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--ms-space-3));
	width: 230px;
	padding: var(--ms-space-4);
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	box-shadow: var(--ms-shadow-media);
	text-align: center;
}

.ms-support__title { display: block; margin-block-end: var(--ms-space-2); }
.ms-support__qr { margin-inline: auto; border-radius: var(--ms-radius-sm); }
.ms-support__value { margin: var(--ms-space-1) 0; font-weight: 600; }
.ms-support__hint,
.ms-support__time { margin: var(--ms-space-2) 0 0; color: var(--ms-muted); font-size: var(--ms-text-meta); }

/* ── 卡片角标 ──────────────────────────────────────────────────────────── */

.ms-card { position: relative; }

.ms-card__badge {
	position: absolute;
	top: var(--ms-space-3);
	left: var(--ms-space-3);
	z-index: 2;
	background: var(--ms-accent);
	border-color: transparent;
	color: var(--ms-on-accent);
}

/* 结构摘要 */
.ms-card__pages {
	margin: 0;
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── 状态组件 ─────────────────────────────────────────────────────────── */

.ms-skeleton {
	background: linear-gradient(
		90deg,
		var(--ms-surface-subtle) 25%,
		var(--ms-fill) 37%,
		var(--ms-surface-subtle) 63%
	);
	background-size: 400% 100%;
	border-radius: var(--ms-radius-sm);
	animation: ms-shimmer 1.4s ease infinite;
}

@keyframes ms-shimmer {
	from { background-position: 100% 50%; }
	to { background-position: 0 50%; }
}

.ms-toast {
	position: fixed;
	left: 50%;
	bottom: var(--ms-space-8);
	transform: translate(-50%, var(--ms-space-4));
	z-index: 80;
	padding: var(--ms-space-3) var(--ms-space-5);
	border-radius: var(--ms-radius-md);
	background: var(--ms-ink);
	color: var(--ms-canvas);
	font-size: var(--ms-text-ui);
	box-shadow: var(--ms-shadow-media);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--ms-dur-base) var(--ms-ease-out),
		transform var(--ms-dur-base) var(--ms-ease-out);
}

.ms-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* 结果计数等动态区域用 aria-live 播报，视觉上保持克制 */
.ms-result-count {
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	font-variant-numeric: tabular-nums;
}

/* 数字对齐：价格、统计、倒计时 */
.ms-num { font-variant-numeric: tabular-nums; }

/* ── 筛选栏 ────────────────────────────────────────────────────────────── */

.ms-filters {
	position: sticky;
	top: var(--ms-header-height);
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
	margin-block-end: calc(var(--ms-space-8) * var(--ms-density));
	padding-block: var(--ms-space-4);

	/* 回退：不支持 color-mix 时给不透明底，避免滚动时内容透出 */
	background: var(--ms-canvas);
	background: color-mix(in srgb, var(--ms-canvas) 92%, transparent);

	-webkit-backdrop-filter: blur(var(--ms-header-blur));
	backdrop-filter: blur(var(--ms-header-blur));
	border-bottom: 1px solid var(--ms-line);
	transition: opacity var(--ms-dur-base) linear;
}

.ms-filters.is-loading { opacity: .65; }

.ms-filters__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-space-4);
	flex-wrap: wrap;
}

.ms-filters__tools {
	display: flex;
	align-items: center;
	gap: var(--ms-space-2);
	flex-wrap: wrap;
}

.ms-filters__search,
.ms-filters__sort {
	padding: var(--ms-space-2) var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	background: var(--ms-surface);
	color: var(--ms-ink);
	font-size: var(--ms-text-ui);
}

.ms-filters__search { width: clamp(11rem, 28vw, 20rem); }

.ms-filters__group {
	display: flex;
	align-items: center;
	gap: var(--ms-space-3);
	min-width: 0;
}

.ms-filters__label {
	flex: none;
	min-width: 3.5rem;
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* chips 过多时横向滚动，两端渐隐提示还有内容 */
.ms-chips {
	display: flex;
	gap: var(--ms-space-1);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-block: 2px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.ms-chips::-webkit-scrollbar { display: none; }

.ms-chip-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-1);
	flex: none;
	padding: var(--ms-space-1) var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	cursor: pointer;
	transition:
		background var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out),
		color var(--ms-dur-micro) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-chip-filter:hover { border-color: var(--ms-line-strong); color: var(--ms-ink); }
}

.ms-chip-filter.is-active {
	background: var(--ms-ink);
	border-color: var(--ms-ink);
	color: var(--ms-canvas);
}

.ms-chip-filter__count {
	font-size: var(--ms-text-meta);
	font-variant-numeric: tabular-nums;
	opacity: .55;
}

.ms-filters__status {
	display: flex;
	align-items: center;
	gap: var(--ms-space-4);
}

.ms-filters__clear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ms-filters__clear[hidden] { display: none; }

/* ── 卡片增强 ──────────────────────────────────────────────────────────── */

.ms-card__media { position: relative; }

.ms-card__badge-wrap {
	position: absolute;
	top: var(--ms-space-3);
	left: var(--ms-space-3);
	z-index: 2;
	display: flex;
	gap: var(--ms-space-1);
}

/* 悬停时浮出快捷操作，提升单次访问的转化 */
.ms-card__actions {
	position: absolute;
	right: var(--ms-space-3);
	bottom: var(--ms-space-3);
	z-index: 2;
	display: flex;
	gap: var(--ms-space-1);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--ms-dur-base) var(--ms-ease-out),
		transform var(--ms-dur-base) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-card:hover .ms-card__actions,
	.ms-card:focus-within .ms-card__actions { opacity: 1; transform: none; }
}

/* 触屏没有 hover，直接常显 */
@media (hover: none) {
	.ms-card__actions { opacity: 1; transform: none; }
}

.ms-card__action {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-sm);
	background: color-mix(in srgb, var(--ms-surface) 92%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ms-ink);
	cursor: pointer;
	transition: background var(--ms-dur-micro) var(--ms-ease-out);
}

.ms-card__action:hover { background: var(--ms-surface); }

.ms-card__pages,
.ms-card__date {
	margin: 0;
	color: var(--ms-muted);
	font-size: var(--ms-text-meta);
}

.ms-card__date { font-variant-numeric: tabular-nums; }

/* 新一批卡片的错开入场 */
.ms-card.is-entering {
	animation: ms-card-in var(--ms-dur-enter) var(--ms-ease-out) both;
	animation-delay: var(--ms-delay, 0ms);
}

@keyframes ms-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* 骨架卡片 */
.ms-card--skeleton { pointer-events: none; }
.ms-skeleton--line {
	height: 12px;
	border-radius: var(--ms-radius-sm);
	margin-block-end: var(--ms-space-2);
}

/*
 * 精选横幅：每 N 张插一张双列卡，打断均匀网格的单调。
 * 同时充当运营位。
 */
.ms-card--feature {
	grid-column: span 2;
	min-height: 11rem;
	border-color: transparent;
	background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-hover));
}

@media (max-width: 40rem) {
	.ms-card--feature { grid-column: span 1; }
}

.ms-card--feature__link {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--ms-space-2);
	height: 100%;
	padding: var(--ms-space-6);
	color: var(--ms-on-accent);
}

.ms-card--feature__eyebrow {
	font-size: var(--ms-text-meta);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .65;
}

.ms-card--feature__title {
	font-size: var(--ms-text-title);
	font-weight: 700;
	line-height: var(--ms-leading-tight);
	letter-spacing: -.02em;
}

.ms-card--feature__cta { font-weight: 600; font-size: var(--ms-text-ui); }

/* ── 首屏统计条 ───────────────────────────────────────────────────────── */

.ms-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ms-space-6) var(--ms-space-10);
	margin: var(--ms-space-8) 0 0;
}

.ms-stats__item {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 2px;
}

.ms-stats__label { color: var(--ms-muted); font-size: var(--ms-text-meta); }

.ms-stats__value {
	margin: 0;
	font-size: var(--ms-text-title);
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ── 面包屑 ───────────────────────────────────────────────────────────── */

.ms-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-space-2);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
}

.ms-breadcrumb__link:hover { color: var(--ms-ink); }
.ms-breadcrumb__sep { opacity: .45; }
.ms-breadcrumb__current { color: var(--ms-ink); font-weight: 600; }

.ms-archive-head {
	padding-block: calc(var(--ms-space-8) * var(--ms-density)) 0;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-3);
}

.ms-archive-title {
	margin: 0;
	font-size: var(--ms-text-page);
	letter-spacing: -.02em;
}

.ms-archive-desc { margin: 0; color: var(--ms-muted); max-width: var(--ms-measure); }

/* ── 悬浮工具（回到顶部 / 主题切换） ─────────────────────────────────── */

.ms-fab {
	position: fixed;
	right: var(--ms-space-5);
	z-index: 58;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: color-mix(in srgb, var(--ms-surface) 90%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ms-ink);
	cursor: pointer;
	box-shadow: var(--ms-shadow-sm);
	transition:
		background var(--ms-dur-base) var(--ms-ease-out),
		border-color var(--ms-dur-base) var(--ms-ease-out),
		transform var(--ms-dur-base) var(--ms-ease-out);
}

.ms-fab[hidden] { display: none; }
.ms-fab:hover { background: var(--ms-surface); border-color: var(--ms-line-strong); }

/*
 * 右侧竖排：客服在最下，回到顶部在它上方，主题切换再往上。
 * 三者互不重叠。
 */
.ms-support { bottom: var(--ms-space-5); }
.ms-fab--top { bottom: calc(var(--ms-space-5) + 48px + var(--ms-space-3)); }
.ms-fab--theme { bottom: calc(var(--ms-space-5) + 48px + var(--ms-space-3)); }

/* 客服存在时才把两个 fab 往上让一格 */
.ms-support ~ .ms-fab--top,
body:has(.ms-support) .ms-fab--top { bottom: calc(var(--ms-space-5) + 48px + var(--ms-space-3)); }

body:has(.ms-support) .ms-fab--theme { bottom: calc(var(--ms-space-5) + 96px + var(--ms-space-4)); }

/* ── 分享 ─────────────────────────────────────────────────────────────── */

.ms-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-space-2);
	margin-block-start: var(--ms-space-6);
	padding-block-start: var(--ms-space-5);
	border-top: 1px solid var(--ms-line);
}

.ms-share__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-space-1);
	padding: var(--ms-space-1) var(--ms-space-3);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-pill);
	background: var(--ms-surface);
	color: var(--ms-muted);
	font-size: var(--ms-text-ui);
	cursor: pointer;
	transition:
		color var(--ms-dur-micro) var(--ms-ease-out),
		border-color var(--ms-dur-micro) var(--ms-ease-out);
}

.ms-share__btn:hover { color: var(--ms-ink); border-color: var(--ms-line-strong); }

.ms-share__qr {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ms-space-2);
	padding: var(--ms-space-4);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-md);
	background: var(--ms-surface);
}

.ms-share__qr[hidden] { display: none; }
.ms-share__qr-title { font-size: var(--ms-text-ui); font-weight: 600; }
.ms-share__qr-hint { color: var(--ms-muted); font-size: var(--ms-text-ui); }

/* ── 无障碍：减少动效 ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ms-skeleton { animation: none; }
	.ms-toast { transition: none; }
	.ms-support__toggle { transition: none; }
	.ms-card.is-entering { animation: none; }
	.ms-card__actions { transition: none; }
}