/*
Theme Name: 沃普斯主机
Theme URI: https://wphost.wopus.cn/
Description: wphost.wopus.cn 的站点主题（Twenty Twenty-Five 的子主题）。样式与视觉归设计（Pi）负责，见项目根目录 AGENTS.md 与 docs/ui-contract.md。
Author: WOPUS
Template: twentytwentyfive
Version: 0.1.1
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: wopus-theme
*/

/*
 * 这个文件归 Pi。分工与规则见 docs/ui-contract.md 与 docs/design-rules.md。
 *
 * 1. 改插件页面（客户中心、下单页、套餐卡片、云服务器……）的颜色、字体：给 --wpb-* 变量赋值即可，整站一起变。
 *    插件的默认值在 wopus-billing/assets/css/tokens.css，用 :where(:root) 声明（优先级 0），这里写 :root 一定生效。
 * 2. 改插件页面的布局细节：用 docs/ui-contract.md 里列出的 class，选择器前加 body 提高一级优先级，
 *    例如 body .wpb-plan { … }。插件的样式是在页面里内嵌输出的，同等优先级时插件的会盖过这里。
 * 3. 不要改 wopus-billing/ 下的任何文件；需要插件改结构、加 class，写到 docs/ui-contract.md 的「Pi 的需求」。
 */

/* ---------- 品牌色阶（规则 13）：给插件 --wpb-* 变量赋值 ---------- */
:root {
	--brand-50: #f3eefc;
	--brand-100: #e6dcf9;
	--brand-200: #c9b4ef;
	--brand-500: #503aa8;
	--brand-600: #3d2b80;
	--brand-700: #2b1d5c;
	--brand-900: #1a1238;

	/* 中性灰阶（规则 5） */
	--ink: #1d2327;
	--ink-2: #3c434a;
	--ink-3: #646970;
	--line: #e3e1ef;
	--line-2: #efedf7;
	--bg: #ffffff;
	--bg-soft: #f7f6fc;

	/* 语义色（规则 6） */
	--green: #0a7d33;
	--green-bg: #e6f7ee;
	--yellow: #b8860b;
	--yellow-bg: #fdf3d7;

	/* 圆角 / 阴影（规则 15） */
	--r-card: 8px;
	--r-btn: 8px;
	/* 插件页模块之间的垂直间距（规则 21） */
	--gap-block: 24px;
	--shadow-sm: 0 1px 2px rgba(26, 18, 56, 0.05), 0 1px 3px rgba(26, 18, 56, 0.06);
	--shadow-md: 0 6px 20px -6px rgba(80, 58, 168, 0.18);
	--shadow-lg: 0 18px 40px -12px rgba(80, 58, 168, 0.28);

	/* 插件变量映射（规则「与插件变量对应」） */
	--wpb-primary: #503aa8;
	--wpb-primary-hover: #3d2b80;
	--wpb-primary-soft: #f3eefc;
	--wpb-primary-border: #c9b4ef;
	--wpb-primary-200: #e6dcf9;
	--wpb-ink: #1d2327;
	--wpb-ink-2: #3c434a;
	--wpb-ink-3: #50575e;
	--wpb-ink-4: #646970;
	--wpb-muted: #787c82;
	--wpb-muted-2: #8c8f94;
	--wpb-line: #e3e1ef;
	--wpb-line-2: #efedf7;
	--wpb-line-strong: #c3c4c7;
	--wpb-line-3: #d5d8dc;
	--wpb-bg-soft: #f7f6fc;
	--wpb-success: #0a7d33;
	--wpb-success-2: #00a32a;
	--wpb-success-soft: #edfaef;
	--wpb-font: "Manrope", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* ---------- 全站基础（规则 1 / 3 / 11） ---------- */
body {
	font-family: var(--wpb-font);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* 标题：800 字重、负字距（规则 2） */
h1,
h2,
h3,
h4 {
	font-weight: 800;
	letter-spacing: -0.01em;
}
h1 {
	letter-spacing: -0.02em;
	line-height: 1.12;
}
h2 {
	line-height: 1.2;
}

/* 链接主色（规则 4） */
a {
	color: var(--brand-600);
}
a:hover {
	color: var(--brand-500);
}

/* 按钮圆角统一（规则 17），父主题默认方形按钮这里收成 10px */
.wp-block-button__link,
.wp-element-button,
button.wp-block-button__link {
	border-radius: var(--r-btn);
}

/* 导航栏：悬停浅紫背景+白字，当前页深紫背景+白字 */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	border-radius: 8px;
	padding: 6px 14px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--brand-500);
	color: #fff;
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--brand-600);
	color: #fff;
}

/* ============================================================
   页头（吸顶毛玻璃 + Logo + 居中导航 + 登录/注册）
   ============================================================ */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* 页头后面第一个区块（首页 hero、其它页 main）去掉全局块间距，紧贴页头，避免页头下方多一条白边 */
body .wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}
.site-header {
	position: relative;
	isolation: isolate;
}
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: -1;
}
.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 68px;
	gap: 16px;
}
/* is-layout-flow 会给第 2 个起的子元素加段落间距（margin-block-start），把导航/按钮往下推；清掉 */
body .site-header .header-inner > * {
	margin-block-start: 0;
}
.wp-block-site-title.site-logo {
	margin: 0;
	justify-self: start;
	display: flex;
	align-items: center;
	line-height: 1;
	/* 站名再长也不撑破布局：列可收缩、超出部分裁剪（见下方 760 断点） */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}
.wp-block-site-title.site-logo a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.wp-block-site-title.site-logo a::before {
	content: "W";
	width: 42px;
	height: 42px;
	border-radius: 9px;
	margin-right: 11px;
	vertical-align: middle;
	background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
	color: #fff;
	font-weight: 800;
	font-size: 21px;
	display: inline-grid;
	place-items: center;
	box-shadow: var(--shadow-sm);
}
.site-nav {
	justify-self: center;
}
.header-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
}
.header-actions .link-login {
	margin: 0;
}
.header-actions .link-login a {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--ink-2);
	text-decoration: none;
	padding: 6px 14px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.header-actions .link-login a:hover {
	background: var(--brand-500);
	color: #fff;
	text-decoration: none;
}
.header-actions .btn-register .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium);
	padding: 6px 14px;
	background: var(--brand-100);
	color: var(--brand-600);
	border-radius: 8px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.header-actions .btn-register .wp-block-button__link:hover {
	background: var(--brand-500);
	color: #fff;
}

/* 「沃普斯面板」：默认浅紫底（和旁边的普通菜单区分开），鼠标悬停时变回和其它菜单一样的紫色。
   类名写两遍是故意的：WP 核心 navigation/style.min.css 有
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`（0,3,0），
   单写一遍（0,2,1）会被它压过、字色变回深灰 */
body .wpb-nav-wpanel .wp-block-navigation-item__content.wp-block-navigation-item__content {
	background: var(--brand-100);
	color: var(--brand-600);
}
body .wpb-nav-wpanel .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	background: var(--brand-500);
	color: #fff;
}
body .wpb-nav-wpanel .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	background: var(--brand-600);
	color: #fff;
}

/* ============================================================
   页脚（深紫）
   ============================================================ */
.site-footer {
	background: var(--brand-900);
	color: rgba(255, 255, 255, 0.72);
}
.footer-inner {
	padding-top: 50px;
	padding-bottom: 50px;
	align-items: center;
	justify-content: space-between;
}
.footer-copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
}
.footer-beian {
	margin: 0;
}
.footer-beian a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 14px;
}
.footer-beian a:hover {
	color: #fff;
}
/* 页脚右侧：服务协议 + 备案号，一行排列 */
.footer-links {
	display: flex;
	align-items: center;
	gap: 20px;
}
.footer-links p {
	margin: 0;
}
.footer-terms a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	font-size: 14px;
}
.footer-terms a:hover {
	color: #fff;
}
/* 页脚贴底（规则 22）：内容不足一屏时（客户中心的云服务器 / 订单 / 工单 / 资料等短页面），
   把页脚推到视口底部，页脚下不会留一大截空白。中间内容吃掉剩余高度 */
body .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
body .wp-site-blocks > main {
	flex: 1 0 auto;
}

/* 顶栏导航放不下时（2026-10-12）：菜单项一律不折行；1280～1599 收紧间距；1279 及以下收起成菜单按钮。
   原来只在 760 以下收起，菜单加到 7 项后 1024～1300 中文逐字折行（1280 时导航要 794px，Logo + 右侧按钮 500px，可用 1265px）。
   1440 本来就卡得很紧（.wrap 内宽 1276，宽松导航 798 + 右侧 255 只剩给 Logo 约 190），站名一长就压到菜单上，
   所以 1280～1679 都用收紧间距（导航 659，给 Logo 留约 292～330），1680 起 .wrap 加宽到 1560 再恢复宽松。
   见 docs/design-rules.md 第 18、20 节 */
.wp-block-navigation .wp-block-navigation-item__content {
	white-space: nowrap;
}
@media (min-width: 1280px) and (max-width: 1679px) {
	body .site-nav .wp-block-navigation__container {
		gap: 6px;
	}
	body .site-nav .wp-block-navigation-item__content {
		padding: 6px 10px;
	}
}
/* 收起后点开的菜单层：WP 核心把菜单项内边距清零了，浅紫底 / 悬停底会贴着字，补回来 */
body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 6px 14px;
}
@media (max-width: 1279px) {
	.header-inner {
		grid-template-columns: 1fr auto auto;
	}
	.site-nav {
		justify-self: end;
		order: 3;
	}
	.header-actions {
		justify-self: end;
		order: 2;
	}
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 760px) {
	.header-inner {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 10px;
	}
	/* 站名较长时（测试站叫「WOPUS 主机（测试）」）Logo 顶宽整页、页面横向溢出；
	   Logo 列允许收缩（minmax(0,1fr) + 上面 base 的 min-width:0/overflow:hidden），字号也收小 */
	.wp-block-site-title.site-logo a {
		font-size: 17px;
	}
	.wp-block-site-title.site-logo a::before {
		width: 34px;
		height: 34px;
		font-size: 17px;
		margin-right: 8px;
	}
	.site-nav {
		justify-self: end;
		order: 3;
	}
	.header-actions {
		justify-self: end;
		order: 2;
		gap: 8px;
	}
	.header-actions .link-login a {
		font-size: 14px;
		padding: 6px 4px;
	}
	.header-actions .btn-register .wp-block-button__link {
		padding: 7px 12px;
		font-size: 13px;
	}
	.header-actions .link-login.link-register {
		display: none;
	}
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.footer-inner {
		justify-content: center;
		text-align: center;
	}
}

/* 插件页面覆盖（docs/ui-contract.md 第 1 节：选择器前加 body） ---------- */

/* 插件页面标题带紧贴页头：原来这里给标题加 24px 上边距，用户 2026-10-06 改为和首页 hero 一样贴紧
   （main 上边距已由上面的 `+ *` 规则清零，标题带自带的 56px 上下内边距足够） */


/* 套餐卡「省 ¥xx」提示放大加粗（默认 13px 偏小） */
body .wpb-saved {
	font-size: 15px;
	font-weight: 600;
}

/* 服务协议目录：滚动到哪个章节，就高亮哪个（与 hover 同色） */
body .wpb-doc-toc a.is-active {
	background: var(--wpb-primary-soft);
	color: var(--wpb-primary);
}

/* 客户中心 / 下单页等插件页面：圆角也统一到 8px（规则 15） */
body .wpb-btn,
body .wpb-submit,
body .wpb-coupon button,
body .wpb-renew-months {
	border-radius: 8px;
}
body .wpb-field input,
body .wpb-field select,
body .wpb-field textarea,
body .wpb-coupon input,
body .wpb-pb-field,
body .wpb-pay-opt,
body .wpb-dns-qsub input,
body .wpb-dns-qrow textarea {
	border-radius: 8px;
}
body .wpb-card,
body .wpb-co-card,
body .wpb-msg,
body .wpb-ns,
body .wpb-dns-quick,
body .wpb-dns-qtabs,
body .wpb-auth-split,
body .wpb-auth-art,
body .wpb-doc-body,
body .wpb-doc-toc,
body .wpb-host,
body .wpb-profile,
body .wpb-renew-bar,
body .wpb-nav,
body .wpb-modal-box,
body .wpb-nav a,
body .wpb-doc-toc a {
	border-radius: 8px;
}

/* 插件页「模块」之间的垂直间距统一 24px（规则 21）：原来表格和它下面的说明只隔 10px，挨得太近 */
body .wpb-cart-link,
body .wpb-hosts,
body .wpb-table-wrap,
body .wpb-cart-table,
body .wpb-ns,
body .wpb-dns-quick,
body .wpb-flow {
	margin-bottom: var(--gap-block);
}
body .wpb-hosts + .wpb-hint,
body .wpb-table-wrap + .wpb-hint {
	margin-top: var(--gap-block);
}
/* 操作按钮行（`.wpb-actions`：我的产品 / 实名模板 / 工单等页面底部）上间距统一到 24px（插件是 22px） */
body .wpb-actions {
	margin-top: var(--gap-block);
}
/* 操作列（`.wpb-host-actions`：我的域名 / 我的产品 / 实名模板三个表）：
   列宽收到和按钮一样宽（`width:1px` + `nowrap`），标题「操作」居中就正好压在按钮上方；
   这样也不会有「最右边空一大块」。`.wpb-hosts` 在 ≤1280px 是卡片堆叠布局（表头隐藏），
   那里只保留按钮不换行 */
body .wpb-cart-table .wpb-host-actions,
body .wpb-cart-table:has(.wpb-host-actions) th:last-child {
	width: 1px;
	white-space: nowrap;
	text-align: center;
}
@media (min-width: 1281px) {
	body .wpb-hosts .wpb-host-actions,
	body .wpb-hosts th:last-child {
		width: 1px;
		white-space: nowrap;
		text-align: center;
	}
}
/* 插件给按钮留了 6px 右外边距，最后一个按钮的右边缘比「操作」标题少 6px，去掉 */
body .wpb-host-actions > .wpb-btn:last-child,
body .wpb-host-actions > .wpb-linkbtn:last-child {
	margin-right: 0;
}

/* 解析页「DNS 修改」（查看 / 修改两态，照用户给的图）：标签左、内容右两列 */
body .wpb-ns-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #eaf3fd;
	border-color: #cfe3f8;
	color: #17518a;
	line-height: 1.7;
}
body .wpb-ns-alert::before {
	content: "i";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	background: #1a6fd0;
	color: #fff;
	font: italic 700 12px/18px Georgia, serif;
	text-align: center;
}
/* 当前 DNS、两块设置：两列（标签 140px + 内容）；标签只在第一行，内容在右列往下排 */
body .wpb-ns-current,
body .wpb-ns-block {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 10px;
	align-items: start;
}
/* 网格里子元素的外边距不会塌陷，插件给的 10px 会叠加成 24～28px；间距统一交给 row-gap */
body .wpb-ns-current > *,
body .wpb-ns-block > * {
	margin: 0;
}
body .wpb-ns-current .wpb-ns-label,
body .wpb-ns-block h4 {
	grid-column: 1;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
body .wpb-ns-current .wpb-ns-list,
body .wpb-ns-block > *:not(h4) {
	grid-column: 2;
}
/* 块之间分隔线 */
body .wpb-ns-block {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line-2);
}
/* 删除按钮圆角 8px（插件 6px） */
body .wpb-ns-del {
	border-radius: 8px;
}

/* ============================================================
   域名转出 / 过户（domain-flow.css）：照图细化
   ============================================================ */
/* 基础字号：插件没在 .wpb-flow 上设字号，裸 <p> 会继承主题正文（偏大、像标题） */
body .wpb-flow {
	font-size: 14px;
	line-height: 1.7;
}
body .wpb-flow-center > p {
	margin: 6px 0;
	font-size: 14px;
}
/* 蓝色提示条：浅蓝底 + 蓝字 + 左侧 ⓘ */
body .wpb-flow-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #eaf3fd;
	border-color: #cfe3f8;
	color: #17518a;
}
body .wpb-flow-info::before {
	content: "i";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	background: #1a6fd0;
	color: #fff;
	font: italic 700 12px/18px Georgia, serif;
	text-align: center;
}
/* 步骤条：数字 / ✓ 圆点更清楚，已完成的圆点也用实心品牌色 */
body .wpb-steps-no {
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 600;
}
body .wpb-steps li.is-done .wpb-steps-no {
	background: var(--wpb-primary);
	border-color: var(--wpb-primary);
	color: #fff;
}
/* 过户模板表：加外框圆角 */
body .wpb-holder-table {
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}
body .wpb-holder-table tr.is-off td {
	color: var(--wpb-muted-2);
}
body .wpb-holder-pager a {
	border-radius: 8px;
}
/* 窄屏：步骤条原来是 5 个 flex:1 等分 + 24px 连接线，375 下比容器宽 15px */
@media (max-width: 600px) {
	/* 步项间距和连接线再收一点：当前步是 4 个字（如「安全验证」）时原来超出卡片 11px */
	body .wpb-steps li {
		flex: 0 0 auto;
		gap: 6px;
	}
	body .wpb-steps li + li {
		margin-left: auto;
	}
	body .wpb-steps li + li::before {
		flex: 0 0 8px;
		margin-right: 0;
	}
	/* 验证码行：固定 140px 的输入框会顶出卡片 7px，改成弹性宽 */
	body .wpb-flow-code {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
	body .wpb-flow-code input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		box-sizing: border-box;
	}
	/* 「获取验证码」按钮窄屏不折成两行 */
	body .wpb-flow-code button {
		white-space: nowrap;
	}
	/* 过户模板表：列多，窄屏会被横向裁掉，改成表内横向滚动 */
	body .wpb-holder-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* 域名管理标签栏（域名解析 / DNS 修改 / 域名转出 / 域名过户）：
   窄屏每个标签会折成两行，改成不折行 + 收内边距（375 下能一行放下），再留横向滚动兜底 */
@media (max-width: 600px) {
	body .wpb-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body .wpb-tabs::-webkit-scrollbar {
		display: none;
	}
	body .wpb-tabs a {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 10px 8px;
	}
}
/* 窄屏：两列改一列（否则右栏只剩 130px，DNS 名折行） */
@media (max-width: 600px) {
	body .wpb-ns-current,
	body .wpb-ns-block {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
	}
	body .wpb-ns-current .wpb-ns-label,
	body .wpb-ns-block h4,
	body .wpb-ns-current .wpb-ns-list,
	body .wpb-ns-block > *:not(h4) {
		grid-column: 1;
	}
}

/* 工单表单：全宽 + 分类/关联产品一行 */
body .wpb-main > .wpb-ticket-form {
	max-width: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .wpb-ticket-form > .wpb-field:has(select#wpb-ticket-cat) {
	grid-column: 1;
	grid-row: 1;
}
body .wpb-ticket-form > .wpb-field:has(select[name="service"]) {
	grid-column: 2;
	grid-row: 1;
}
body .wpb-ticket-form > .wpb-field:has(textarea[name="body"]),
body .wpb-ticket-form > .wpb-field:has(input[type="file"]),
body .wpb-ticket-form > .wpb-order-fields,
body .wpb-ticket-form > .wpb-invoice-fields {
	grid-column: 1 / -1;
}
body .wpb-ticket-form > .wpb-order-fields,
body .wpb-ticket-form > .wpb-invoice-fields {
	display: grid;
	gap: 14px;
}
body .wpb-ticket-form > .wpb-btn {
	grid-column: 1 / -1;
	justify-self: start;
}
@media (max-width: 600px) {
	body .wpb-main > .wpb-ticket-form {
		grid-template-columns: 1fr;
	}
	body .wpb-ticket-form > .wpb-field:has(select#wpb-ticket-cat),
	body .wpb-ticket-form > .wpb-field:has(select[name="service"]),
	body .wpb-ticket-form > .wpb-field:has(textarea[name="body"]),
	body .wpb-ticket-form > .wpb-field:has(input[type="file"]),
	body .wpb-ticket-form > .wpb-order-fields,
	body .wpb-ticket-form > .wpb-invoice-fields,
	body .wpb-ticket-form > .wpb-btn {
		grid-column: auto;
		grid-row: auto;
	}
}

/* 域名（公开页 /domain/ + 客户中心注册新域名/实名模板/域名管理） */
body .wpb-dn-hero {
	border-radius: 8px;
}
body .wpb-cart-table {
	border-radius: 8px;
}
body .wpb-dn-holder {
	border-radius: 8px;
}
body .wpb-dn-invert {
	border-radius: 8px;
}
body .wpb-dp-hint {
	text-align: center;
}
body .wpb-dp-results tr.is-pending td,
body .wpb-dn-results tr.is-pending td {
	color: var(--wpb-muted-2);
}
/* 域名搜索区（首页 / /domain/ / 客户中心「注册新域名」）：搜索框撑满、后缀列数自适应（最宽 9 列、格子≥120px） */
body .wpb-dn-hero {
	padding-left: 32px;
	padding-right: 32px;
}
body .wpb-dn-hero .wpb-dn-search {
	max-width: none;
}
body .wpb-dn-hero .wpb-dn-tldpick {
	max-width: none;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	font-size: 1.05rem;
}
/* 首页域名搜索区在 .wrap 里（.wrap 已给 32px），hero 内再留 24px，内容不贴渐变块边缘 */
body.home .wpb-dn-hero {
	padding-left: 24px;
	padding-right: 24px;
}
/* 窄屏（手机）：每行 3 个；展开区 .wpb-dn-tldmore 用 inherit 自动跟随 */
@media (max-width: 600px) {
	body .wpb-dn-hero .wpb-dn-tldpick {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ============================================================
   附加购买 / 附加项（DESIGN §7.4，2026-10-14）
   下单页「附加购买（可选）」卡片 + 客户中心「附加项」页
   ============================================================ */

/* 数字框：全站统一的方框（8px 圆角、居中、等宽数字），去掉原生上下箭头
   （方向键仍能加减；窄屏本来就没有箭头） */
body .wpb-addon-qty input,
body .wpb-addon-table input[type="number"] {
	width: 72px;
	padding: 7px 10px;
	border: 1px solid var(--wpb-line-strong);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink);
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
body .wpb-addon-qty input::-webkit-outer-spin-button,
body .wpb-addon-qty input::-webkit-inner-spin-button,
body .wpb-addon-table input[type="number"]::-webkit-outer-spin-button,
body .wpb-addon-table input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body .wpb-addon-qty input:focus-visible,
body .wpb-addon-table input[type="number"]:focus-visible {
	border-color: var(--wpb-primary);
}

/* ---- 下单页「附加购买（可选）」卡片 ---- */
/* 说明文字和清单之间留一点空隙（插件默认紧贴） */
body .wpb-addons .wpb-addon-list {
	margin-top: 14px;
	gap: 0;
}
/* 每项一行：左「名称 + 单价小字」，右数量框；行间用细线分隔，不再一项一个方框 */
body .wpb-addons .wpb-addon {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 2px;
	align-items: center;
	padding: 12px 2px;
	border: 0;
	border-top: 1px solid var(--line-2);
	border-radius: 0;
}
body .wpb-addons .wpb-addon:first-child {
	border-top: 0;
	padding-top: 2px;
}
body .wpb-addons .wpb-addon:last-child {
	padding-bottom: 2px;
}
body .wpb-addons .wpb-addon-name {
	grid-column: 1;
	grid-row: 1;
	align-self: end;
	color: var(--ink);
}
body .wpb-addons .wpb-addon-price {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	font-size: 13px;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
/* 数量框 + 单位：整体右对齐，单位放在固定宽的小格里，各项的框右边缘能对齐 */
body .wpb-addons .wpb-addon-qty {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: grid;
	grid-template-columns: auto 1.6em;
	align-items: center;
	column-gap: 6px;
	justify-content: end;
	min-width: 104px;
	font-size: 13px;
	color: var(--ink-3);
}

/* ---- 客户中心「附加项」页 ---- */
/* 表格基础外观来自插件 account.css 里的 .wpb-cart-table（2026-10-14 Claude 已把各页那份并进去），
   这里只留附加项特有的：数字等宽、数量列收到和数字框一样宽 */
body .wpb-addon-table th,
body .wpb-addon-table td {
	font-variant-numeric: tabular-nums;
}
/* 数量列：标题压在数字框上方，列收到和数字框一样宽（「续费时减少」表用这个） */
body .wpb-addon-table th:last-child,
body .wpb-addon-table td:last-child {
	width: 1px;
	white-space: nowrap;
}
/* 「加购」表的数量格里多了数量规则说明：框 + 单位一行，说明另起一行小字 */
body .wpb-addon-buy .wpb-addon-table td:last-child {
	width: auto;
	white-space: normal;
}
body .wpb-addon-buy .wpb-addon-table td:last-child > input {
	vertical-align: middle;
}
body .wpb-addon-buy .wpb-addon-table td:last-child > small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
}
/* 「加购」「续费时减少」两个小节之间 24px（规则 21）；说明到表格 16px */
body .wpb-addon-buy,
body .wpb-addon-reduce {
	margin-top: var(--gap-block);
}
body .wpb-addon-buy .wpb-addon-table,
body .wpb-addon-reduce .wpb-addon-table {
	margin-top: 16px;
}

/* 窄屏：五列的加购表固定列宽、缩小内边距，让内容换行放下，不横向溢出 */
@media (max-width: 600px) {
	body .wpb-addon-buy .wpb-addon-table {
		table-layout: fixed;
	}
	body .wpb-addon-buy .wpb-addon-table th,
	body .wpb-addon-buy .wpb-addon-table td {
		padding: 10px 6px;
		font-size: 13px;
	}
	body .wpb-addon-buy .wpb-addon-table th {
		white-space: normal;
	}
	body .wpb-addon-buy .wpb-addon-table th:first-child,
	body .wpb-addon-buy .wpb-addon-table td:first-child {
		width: 17%;
	}
	body .wpb-addon-buy .wpb-addon-table th:nth-child(2),
	body .wpb-addon-buy .wpb-addon-table td:nth-child(2) {
		width: 14%;
	}
	body .wpb-addon-buy .wpb-addon-table th:nth-child(3),
	body .wpb-addon-buy .wpb-addon-table td:nth-child(3) {
		width: 18%;
	}
	body .wpb-addon-buy .wpb-addon-table th:nth-child(4),
	body .wpb-addon-buy .wpb-addon-table td:nth-child(4) {
		width: 21%;
	}
	body .wpb-addon-buy .wpb-addon-table th:last-child,
	body .wpb-addon-buy .wpb-addon-table td:last-child {
		width: 30%;
	}
	body .wpb-addon-buy .wpb-addon-table input[type="number"] {
		width: 100%;
		max-width: 64px;
		padding: 7px 6px;
	}
	body .wpb-addon-buy .wpb-addon-table td:last-child > small {
		font-size: 11px;
		white-space: normal;
	}
}

/* ============================================================
   余额 / 充值 / 推荐有奖 / 退回本金（DESIGN §24，2026-10-14）
   ============================================================ */

/* 这几个分区里的裸文字会继承到主题正文的 22px（客户中心别处是 14px，看着太大），统一到 14px */
body .wpb-recharge,
body .wpb-referral,
body .wpb-withdraw {
	font-size: 14px;
}
body .wpb-wallet-pager {
	font-size: 14px;
}

/* ---- 余额卡片：和「概览」的统计卡（.wpb-stat）同一套字号 / 内边距，全站一致 ---- */
body .wpb-wallet-summary {
	gap: 14px;
	margin-bottom: 16px;
}
body .wpb-wallet-item {
	padding: 16px;
	border-radius: 8px;
}
body .wpb-wallet-item span {
	font-size: 13px;
	color: var(--wpb-ink-4);
}
body .wpb-wallet-item strong {
	margin-top: 4px;
	font-size: 26px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
body .wpb-wallet-item small {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.55;
	color: var(--wpb-muted);
}

/* ---- 余额明细 / 推荐明细 / 退回本金：数字列右对齐、等宽数字 ---- */
body .wpb-wallet-table td,
body .wpb-referral-table td,
body .wpb-withdraw-table td {
	font-variant-numeric: tabular-nums;
}
body .wpb-wallet-table th:nth-child(3),
body .wpb-wallet-table td:nth-child(3),
body .wpb-wallet-table th:nth-child(4),
body .wpb-wallet-table td:nth-child(4),
body .wpb-referral-table th:nth-child(3),
body .wpb-referral-table td:nth-child(3),
body .wpb-referral-table th:nth-child(4),
body .wpb-referral-table td:nth-child(4) {
	text-align: right;
	white-space: nowrap;
}
body .wpb-wallet-table td:nth-child(3) {
	font-weight: 600;
}
body .wpb-wallet-table td:nth-child(4) {
	color: var(--ink-3);
}
/* 入账绿色（规则 6 / 14 的成功色），支出保持中性深色，不刺眼 */
body .wpb-wallet-in {
	color: var(--green);
}
body .wpb-wallet-out {
	color: var(--ink-2);
}
/* 第一列（时间 / 申请时间）和金额列不换行 */
body .wpb-wallet-table td:first-child,
body .wpb-referral-table td:first-child,
body .wpb-withdraw-table td:first-child {
	white-space: nowrap;
	color: var(--ink-3);
}
body .wpb-withdraw-table td:nth-child(2) {
	white-space: nowrap;
	font-weight: 600;
}

/* 分页按钮 */
body .wpb-wallet-pager a {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wpb-primary);
}
body .wpb-wallet-pager a:hover {
	background: var(--brand-50);
}

/* ---- 充值：活动横幅 + 快捷金额 + 其他金额 ---- */
body .wpb-promo {
	position: relative;
	margin-bottom: 16px;
	padding: 14px 18px 14px 20px;
	border-color: var(--brand-200);
	border-left: 3px solid var(--brand-500);
	background: var(--brand-50);
}
body .wpb-promo strong {
	font-size: 15px;
	color: var(--brand-700);
}
body .wpb-promo span {
	color: var(--ink-2);
}
body .wpb-promo small {
	margin-top: 2px;
}
body .wpb-recharge-presets {
	gap: 12px;
	margin-bottom: 16px;
}
/* 快捷金额做成可选卡片：单选在左，金额和「送 ¥x」上下排 */
body .wpb-recharge-preset {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 8px;
	row-gap: 1px;
	align-items: center;
	min-width: 122px;
	padding: 10px 14px;
	transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
body .wpb-recharge-preset:hover {
	border-color: var(--brand-200);
}
body .wpb-recharge-preset input {
	grid-row: 1 / span 2;
	margin: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--wpb-primary);
}
body .wpb-recharge-preset span {
	grid-column: 2;
	grid-row: 1;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
body .wpb-recharge-preset small {
	grid-column: 2;
	grid-row: 2;
}
body .wpb-recharge-preset:has(input:checked) {
	border-color: var(--brand-500);
	background: var(--brand-50);
	box-shadow: 0 0 0 1px var(--brand-500);
}
body .wpb-recharge-gift {
	color: var(--brand-600);
	font-weight: 600;
}
body .wpb-recharge-custom {
	gap: 10px;
}
body .wpb-recharge-custom > span {
	font-weight: 600;
	color: var(--ink);
}
body .wpb-recharge-custom input {
	width: 150px;
	padding: 9px 12px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* ---- 推荐有奖：链接框 + 统计 ---- */
body .wpb-referral-link input {
	padding: 9px 12px;
	border-radius: 8px;
	background: var(--bg-soft);
	color: var(--ink-2);
	font-size: 14px;
}
body .wpb-referral-stats {
	color: var(--ink-3);
}

/* ---- 退回本金 ---- */
body .wpb-withdraw-form .wpb-field {
	max-width: 420px;
}
body .wpb-withdraw-form input {
	border-radius: 8px;
	font-family: inherit;
}

/* 宽屏：充值 / 推荐并排（半栏里的推荐明细缩小字号和内边距，五列放得下） */
/* 宽屏：只有「推荐有奖」在时「充值 / 推荐」才并排；推荐关掉时充值自动通栏
   （`.wpb-referral` 不存在时这些规则全不生效，退回单列、快捷金额也回到 flex 一排） */
@media (min-width: 1400px) {
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 30px;
		align-items: start;
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > * {
		grid-column: 1 / -1;
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-recharge {
		grid-column: 1;
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-referral {
		grid-column: 2;
	}
	/* 半栏里的快捷金额改成等宽网格（自适应列数），四档能排成一行 */
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-recharge .wpb-recharge-presets {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-recharge .wpb-recharge-preset {
		min-width: 0;
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-referral .wpb-referral-table {
		font-size: 13px;
	}
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-referral .wpb-referral-table th,
	body .wpb-main:has(> .wpb-wallet-summary):has(> .wpb-referral) > .wpb-referral .wpb-referral-table td {
		padding: 9px 8px;
	}
}

/* 窄屏：三张表改成卡片（用每格的 data-label 当标签），不再横向溢出 */
@media (max-width: 600px) {
	body .wpb-wallet-table,
	body .wpb-referral-table,
	body .wpb-withdraw-table {
		display: block;
		width: 100%;
		border: 0;
		background: transparent;
		border-radius: 0;
	}
	body .wpb-wallet-table tbody,
	body .wpb-referral-table tbody,
	body .wpb-withdraw-table tbody {
		display: block;
	}
	body .wpb-wallet-table thead,
	body .wpb-referral-table thead,
	body .wpb-withdraw-table thead {
		display: none;
	}
	body .wpb-wallet-table tbody tr,
	body .wpb-referral-table tbody tr,
	body .wpb-withdraw-table tbody tr {
		display: block;
		padding: 12px 14px;
		margin-bottom: 10px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 8px;
	}
	body .wpb-wallet-table tbody tr:last-child,
	body .wpb-referral-table tbody tr:last-child,
	body .wpb-withdraw-table tbody tr:last-child {
		margin-bottom: 0;
	}
	body .wpb-wallet-table td[data-label],
	body .wpb-referral-table td[data-label],
	body .wpb-withdraw-table td[data-label] {
		display: grid;
		grid-template-columns: 5.5em minmax(0, 1fr);
		gap: 10px;
		padding: 3px 0;
		border: 0;
		text-align: left;
		white-space: normal;
	}
	body .wpb-wallet-table td[data-label]::before,
	body .wpb-referral-table td[data-label]::before,
	body .wpb-withdraw-table td[data-label]::before {
		content: attr(data-label);
		color: var(--ink-3);
		font-size: 13px;
		font-weight: 400;
	}
}

/* ---- 订单页：余额抵扣框 ---- */
body .wpb-balance-box {
	padding: 16px 18px;
	border-color: var(--brand-200);
	border-radius: 8px;
	background: var(--brand-50);
}
body .wpb-balance-box p {
	font-size: 15px;
	color: var(--ink);
}
body .wpb-balance-box .wpb-hint {
	color: var(--ink-3);
}

/* ---- 下单页：使用余额勾选 + 服务协议勾选 ---- */
body .wpb-use-balance {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--ink-2);
}
body .wpb-use-balance input,
body .wpb-agree input,
body .wpb-renew-agree input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wpb-primary);
}
/* .wpb-agree / .wpb-renew-agree 是 flex，条款链接会被拆成独立 flex 项挤成一列；
   改回正常行内流，窄屏也能正常换行 */
body .wpb-agree,
body .wpb-renew-agree {
	display: block;
	margin-top: 10px;
	line-height: 1.7;
	color: var(--ink-2);
}
body .wpb-agree input,
body .wpb-renew-agree input {
	margin-right: 6px;
	vertical-align: -2px;
}

/* ---- 主机详情「自动续费」：按钮在 form 里，对齐要单独处理 ---- */
body .wpb-autorenew form {
	margin: 0;
	display: flex;
	flex: 0 0 auto;
}
body .wpb-autorenew > div {
	min-width: 0;
}

/* ============================================================
   首页（front-page.php，对应 design/index.html）
   ============================================================ */

/* 容器与区块（规则 7 / 8） */
.wrap {
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (min-width: 1680px) {
	.wrap {
		max-width: 1560px;
		padding: 0 40px;
	}
}
.section {
	padding: 84px 0;
}
.section--soft {
	background: var(--bg-soft);
}

/* 小标签（eyebrow）与引言（lead） */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brand-600);
	background: var(--brand-50);
	padding: 6px 14px;
	border-radius: 8px;
}
.lead {
	color: var(--ink-3);
	font-size: 1.05rem;
}

/* 按钮（规则 17） */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	border-radius: var(--r-btn);
	padding: 12px 22px;
	cursor: pointer;
	transition: 0.16s ease;
	border: 1.5px solid transparent;
	text-decoration: none;
}
.btn:hover {
	text-decoration: none;
}
.btn--primary {
	background: var(--brand-500);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
	background: var(--brand-600);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn--ghost {
	background: transparent;
	color: var(--brand-600);
	border-color: var(--brand-200);
}
.btn--ghost:hover {
	background: var(--brand-50);
	border-color: var(--brand-500);
	color: var(--brand-600);
}

/* Hero（规则 19） */
.hero {
	position: relative;
	overflow: hidden;
	padding: 112px 0 120px;
	text-align: center;
	color: #fff;
	background: linear-gradient(160deg, #241a4f 0%, #3d2b80 48%, #503aa8 100%);
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 58% at 50% -5%, rgba(255, 255, 255, 0.16), transparent 65%),
		radial-gradient(30% 34% at 86% 8%, rgba(201, 180, 239, 0.28), transparent 70%),
		radial-gradient(30% 34% at 14% 14%, rgba(201, 180, 239, 0.2), transparent 70%);
}
.hero .wrap {
	position: relative;
	z-index: 1;
}
.hero .eyebrow {
	color: var(--brand-700);
	background: rgba(255, 255, 255, 0.92);
}
.hero h1 {
	margin: 20px auto 16px;
	max-width: 760px;
	color: #fff;
}
.hero .lead {
	max-width: 600px;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, 0.82);
}
.hero-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.hero .btn--primary {
	background: #fff;
	color: var(--brand-600);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.hero .btn--primary:hover {
	background: var(--brand-50);
	color: var(--brand-600);
}
.hero .btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.hero .btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}
.hero-trust {
	margin-top: 42px;
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	font-weight: 600;
}
.hero-trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.hero-trust svg {
	color: var(--brand-200);
}

/* 套餐区标题 */
.pricing-head {
	text-align: center;
	margin-bottom: 20px;
}
.pricing-head h2 {
	margin: 16px 0 12px;
}

/* ---------- 套餐卡片（插件 .wpb-* 类，映射到原型 .plan） ---------- */
body .wpb-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 24px;
	margin: 44px 0 32px;
}
body .wpb-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	padding: 30px 26px;
	transition: 0.18s ease;
}
body .wpb-plan:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
/* 推荐卡：主色描边加粗 + 阴影；左上角「推荐」徽章（浅底深字，规则 14） */
body .wpb-plan.is-hot {
	border: 1.5px solid var(--brand-500);
	box-shadow: var(--shadow-md);
}
body .wpb-plan-badge {
	position: absolute;
	top: -12px;
	left: 24px;
	padding: 4px 12px;
	border-radius: 8px;
	background: var(--brand-100);
	color: var(--brand-600);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.7;
}
/* 推荐卡徽章后会被 wpautop 插入一个空 <p>，把名称/价格顶下去，隐藏它（只藏无内容的直系 <p>） */
body .wpb-plan > p:empty {
	display: none;
}
body .wpb-plan-name {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 800;
}
body .wpb-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
body .wpb-price-main {
	color: var(--ink);
}
body .wpb-price-cur {
	font-size: 20px;
	font-weight: 700;
	color: var(--ink-2);
	margin-right: 2px;
}
body .wpb-price-num {
	font-size: 38px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body .wpb-price-unit {
	font-size: 15px;
	color: var(--ink-3);
	font-weight: 600;
}
body .wpb-plan .wpb-specs {
	list-style: none;
	margin: 22px 0 26px;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
body .wpb-plan .wpb-specs li {
	position: relative;
	padding: 0 0 0 26px;
	font-size: 14px;
	color: var(--ink-2);
	border-bottom: 0;
}
body .wpb-plan .wpb-specs li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--green-bg);
	color: transparent;
	font-weight: 400;
}
body .wpb-plan .wpb-specs li::after {
	content: "✓";
	position: absolute;
	left: 4px;
	top: 2px;
	font-size: 11px;
	font-weight: 800;
	color: var(--green);
}
body .wpb-buy {
	display: block;
	text-align: center;
	padding: 12px 16px;
	background: var(--brand-500);
	color: #fff;
	border-radius: var(--r-btn);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.16s ease;
}
body .wpb-buy:hover {
	background: var(--brand-600);
	color: #fff;
}
body .wpb-plan .wpb-price-sub {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ink-3);
}
/* 分组标题（规则 16） */
body .wpb-plans-group {
	margin: 32px 0 0;
	font-size: 1.25rem;
	font-weight: 800;
	padding-left: 14px;
	border-left: 3px solid var(--brand-500);
}
body .wpb-plans-group-desc {
	margin-left: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-3);
	letter-spacing: 0;
}
/* 年限切换 / 机房切换（胶囊，只作用在公开页的 .wpb-plans-switch 上，避免影响下单页时长选择） */
body .wpb-plans-switch {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 26px 0 12px;
	padding: 4px;
	background: var(--bg-soft);
	border: 1px solid var(--line-2);
	border-radius: 8px;
}
body .wpb-plans-switch .wpb-term {
	padding: 8px 16px;
	border: 0;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-3);
	transition: 0.15s;
}
body .wpb-plans-switch .wpb-term:hover {
	color: var(--brand-600);
	background: var(--brand-50);
}
body .wpb-plans-switch .wpb-term.is-active {
	background: var(--brand-500);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
/* 云服务器 / 域名 说明块：与上方同宽、居左、同款浅紫圆点（插件已给背景） */
body .wpb-vps-notes,
body .wpb-dp-notes {
	list-style: none;
	margin: 15px 0;
	max-width: none;
	padding: 26px 24px;
	border-radius: 8px;
}
body .wpb-vps-notes li,
body .wpb-dp-notes li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 16px;
}
body .wpb-vps-notes li::before,
body .wpb-dp-notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand-200);
}
body .wpb-vps-warn {
	color: var(--yellow);
}

/* 为什么选我们 */
.why-head {
	text-align: center;
	margin-bottom: 48px;
}
.why-head h2 {
	margin: 16px 0 12px;
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.why-card {
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: var(--r-card);
	padding: 30px;
	display: flex;
	gap: 18px;
	transition: 0.18s ease;
}
.why-card:hover {
	border-color: var(--brand-200);
	box-shadow: var(--shadow-md);
}
.why-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--brand-50);
	color: var(--brand-500);
	display: grid;
	place-items: center;
}
.why-card h3 {
	font-size: 17px;
	font-weight: 800;
	margin: 0 0 8px;
}
.why-card p {
	font-size: 14.5px;
	color: var(--ink-3);
	margin: 0;
}

/* 联系我们 */
.contact {
	text-align: center;
}
.contact h2 {
	margin: 16px 0 12px;
}
.contact .lead {
	margin-bottom: 8px;
}
.contact-mail {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brand-600);
}
/* 「加微信」展开的微信号卡（默认隐藏，点了按钮才出现） */
.contact-wx {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 14px 20px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg-soft);
}
.contact-wx[hidden] {
	display: none;
}
.contact-wx-id {
	font-size: 1rem;
	color: var(--ink-2);
}
.contact-wx-id strong {
	color: var(--ink);
}
.contact-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
}

/* 响应式（规则 20） */
@media (max-width: 760px) {
	.wrap {
		padding: 0 20px;
	}
	.section {
		padding: 60px 0;
	}
	.hero {
		padding: 64px 0 52px;
	}
	.hero-trust {
		gap: 16px;
	}
	body .wpb-plans {
		grid-template-columns: 1fr;
	}
	.why-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   WordPress×AI 文章（2026-10-12）：归档 / 分类页 home.html、archive.html，文章页 single.html
   标题带照插件页（服务协议等）：浅紫底、40px 800 居中、上下 56px；列表是卡片（规则 10），正文窄栏 760px。
   见 docs/design-rules.md 第 23 节
   ============================================================ */
body .wpai {
	padding-bottom: 84px;
}
body .wpai > * + * {
	margin-block-start: 0;
}
.wpai-band {
	background: var(--brand-50);
	border-bottom: 1px solid var(--line-2);
	padding: 56px 0;
	text-align: center;
}
.wpai-band .eyebrow {
	margin: 0 0 14px;
	background: #fff;
}
body .wpai-band-title {
	margin: 0 auto;
	max-width: 900px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.wpai-band .lead {
	margin: 14px auto 0;
	max-width: 680px;
	color: var(--ink-3);
	font-size: 1.05rem;
	line-height: 1.6;
}
.wpai-band .wpai-meta {
	margin-bottom: 14px;
}

/* 分类标签 + 日期 */
.wpai-meta {
	gap: 10px;
	align-items: center;
	font-size: 13px;
	color: var(--ink-3);
}
.wpai-meta > * {
	margin: 0;
}
body .wpai-tag a {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 8px;
	background: var(--brand-50);
	color: var(--brand-600);
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
}
.wpai-band .wpai-tag a {
	background: #fff;
}
body .wpai-tag a:hover {
	background: var(--brand-100);
}
.wpai-tag .wp-block-post-terms__separator {
	display: none;
}

/* 列表 */
.wpai-wrap {
	max-width: 960px;
	padding-top: 48px;
}
body .wpai-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}
body .wpai-list > li {
	margin: 0;
}
.wpai-card {
	display: flex;
	gap: 24px;
	align-items: stretch;
	padding: 26px 28px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wpai-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--brand-200);
}
body .wpai-card-img {
	flex: 0 0 240px;
	margin: 0;
}
body .wpai-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.wpai-card-body {
	flex: 1 1 auto;
	min-width: 0;
}
.wpai-card-body > * {
	margin: 0;
}
body .wpai-card-title {
	margin: 10px 0 0;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
body .wpai-card-title a {
	color: var(--ink);
	text-decoration: none;
}
body .wpai-card-title a:hover {
	color: var(--brand-500);
}
body .wpai-excerpt {
	margin-top: 10px;
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.7;
}
body .wpai-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body .wpai-excerpt .wp-block-post-excerpt__more-text {
	margin: 10px 0 0;
}
body .wpai-excerpt .wp-block-post-excerpt__more-link {
	color: var(--brand-500);
	font-weight: 700;
	text-decoration: none;
}
body .wpai-excerpt .wp-block-post-excerpt__more-link:hover {
	color: var(--brand-600);
}

/* 分页与空状态 */
body .wpai-pager {
	margin-top: 36px;
	gap: 6px;
	font-size: 15px;
}
body .wpai-pager a,
body .wpai-pager .page-numbers {
	display: inline-block;
	min-width: 38px;
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-align: center;
	color: var(--ink-2);
	text-decoration: none;
}
body .wpai-pager a:hover {
	border-color: var(--brand-200);
	background: var(--brand-50);
	color: var(--brand-600);
}
body .wpai-pager .page-numbers.current {
	background: var(--brand-500);
	border-color: var(--brand-500);
	color: #fff;
}
body .wpai-empty {
	margin: 0;
	font-size: 16px;
	padding: 48px 20px;
	text-align: center;
	color: var(--ink-3);
	border: 1px dashed var(--line);
	border-radius: 8px;
	background: var(--bg-soft);
}

/* ============================================================
   AI×网站 分类归档（category-ai-website.html，2026-10-15）
   三列图片卡：特色图 + 标题 + 摘要（两行）；图片 / 标题新标签打开文章
   ============================================================ */
body .aiw {
	padding-bottom: 84px;
}
body .aiw > * + * {
	margin-block-start: 0;
}
body .aiw-wrap {
	max-width: 1340px;
	padding-top: 48px;
}
body .aiw-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 28px;
}
body .aiw-list > li {
	margin: 0;
	min-width: 0;
}
body .aiw-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body .aiw-card-img {
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
}
body .aiw-card-img a {
	display: block;
}
body .aiw-card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.35s ease;
}
body .aiw-card:hover .aiw-card-img img {
	transform: scale(1.03);
}
body .aiw-card-title {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body .aiw-card-title a {
	color: var(--ink);
	text-decoration: none;
}
body .aiw-card-title a:hover {
	color: var(--brand-500);
}
body .aiw-excerpt {
	margin: 0;
	color: var(--ink-3);
	font-size: 14px;
	line-height: 1.7;
}
body .aiw-excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 1000px) {
	body .aiw-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 22px;
	}
}
@media (max-width: 600px) {
	body .aiw-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}
	body .aiw-card-title {
		font-size: 18px;
	}
}

/* 文章页：正文窄栏 */
.wpai-single .wpai-wrap {
	max-width: 824px; /* 760 + 左右 32 */
}
body .wpai-cover {
	margin: 0 0 32px;
}
body .wpai-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}
body .wpai-content {
	font-size: 16.5px;
	line-height: 1.8;
	color: var(--ink);
	word-wrap: break-word;
}
body .wpai-content > * {
	margin-top: 0;
	margin-bottom: 1.15em;
}
body .wpai-content h2 {
	margin: 2em 0 0.8em;
	padding-left: 14px;
	border-left: 3px solid var(--brand-500);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
body .wpai-content h3 {
	margin: 1.6em 0 0.6em;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4;
}
body .wpai-content h4 {
	margin: 1.4em 0 0.5em;
	font-size: 16.5px;
	font-weight: 800;
}
body .wpai-content a {
	color: var(--brand-500);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--brand-200);
}
body .wpai-content a:hover {
	color: var(--brand-600);
	text-decoration-color: currentColor;
}
body .wpai-content ul,
body .wpai-content ol {
	padding-left: 1.5em;
}
body .wpai-content li + li {
	margin-top: 0.35em;
}
body .wpai-content :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--brand-50);
	color: var(--brand-600);
	font-family: Consolas, Menlo, "SFMono-Regular", monospace;
	font-size: 0.88em;
	word-break: break-word;
}
body .wpai-content pre,
body .wpai-content .wp-block-code {
	margin: 0 0 1.4em;
	padding: 18px 20px;
	overflow-x: auto;
	border: 0;
	border-radius: 8px;
	background: var(--brand-900);
	color: #ece8fb;
	font-family: Consolas, Menlo, "SFMono-Regular", monospace;
	font-size: 14px;
	line-height: 1.65;
	white-space: pre;
	tab-size: 4;
}
body .wpai-content pre code {
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: inherit;
}
body .wpai-content blockquote,
body .wpai-content .wp-block-quote {
	margin: 0 0 1.4em;
	padding: 14px 18px;
	border: 0;
	border-left: 3px solid var(--brand-500);
	border-radius: 0 8px 8px 0;
	background: var(--brand-50);
	color: var(--ink-2);
	font-style: normal;
}
body .wpai-content blockquote > :last-child {
	margin-bottom: 0;
}
/* 父主题把引用里的字放大了，教程里的引用只是提示，用正文字号 */
body .wpai-content blockquote p,
body .wpai-content .wp-block-quote p {
	font-size: 15.5px;
	line-height: 1.75;
	font-style: normal;
}
body .wpai-content .wp-block-table {
	overflow-x: auto;
	margin: 0 0 1.4em;
}
body .wpai-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
}
body .wpai-content th,
body .wpai-content td {
	padding: 9px 12px;
	border: 1px solid var(--line-2);
	text-align: left;
	vertical-align: top;
}
body .wpai-content thead,
body .wpai-content tfoot {
	border: 0; /* 父主题给表头下边加了 3px 黑线 */
}
body .wpai-content thead th {
	background: var(--bg-soft);
	font-weight: 700;
	border-bottom-color: var(--line);
}
body .wpai-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
body .wpai-content figcaption {
	color: var(--ink-3);
	font-size: 13px;
	text-align: center;
}
body .wpai-content hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2em 0;
}

/* 上一篇 / 下一篇、返回 */
.wpai-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
body .wpai-postnav > * {
	margin: 0;
}
body .wpai-postnav .post-navigation-link__label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--ink-3);
}
body .wpai-postnav a {
	display: block;
	padding: 14px 18px;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}
body .wpai-postnav a:hover {
	border-color: var(--brand-200);
	background: var(--brand-50);
	color: var(--brand-600);
}
body .wpai-postnav-next {
	grid-column: 2;
	text-align: right;
}
body .wpai-back {
	margin: 28px 0 0;
	text-align: center;
	font-size: 15px;
}
body .wpai-back a {
	color: var(--brand-500);
	font-weight: 700;
	text-decoration: none;
}
body .wpai-back a:hover {
	color: var(--brand-600);
}

@media (max-width: 760px) {
	body .wpai {
		padding-bottom: 60px;
	}
	.wpai-band {
		padding: 40px 0;
	}
	body .wpai-band-title {
		font-size: 28px;
	}
	.wpai-wrap {
		padding-top: 28px;
	}
	.wpai-card {
		flex-direction: column;
		gap: 16px;
		padding: 20px;
	}
	body .wpai-card-img {
		flex: none;
	}
	body .wpai-card-title {
		font-size: 19px;
	}
	body .wpai-content {
		font-size: 16px;
	}
	body .wpai-content h2 {
		font-size: 21px;
	}
	body .wpai-content pre,
	body .wpai-content .wp-block-code {
		margin-left: -20px;
		margin-right: -20px;
		border-radius: 0;
		font-size: 13px;
	}
	.wpai-postnav {
		grid-template-columns: 1fr;
	}
	body .wpai-postnav-next {
		grid-column: auto;
	}
}

/* 无障碍（2026-10-12）：键盘焦点可见 + 尊重系统「减少动态效果」 */
:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	/* 只收敛主题自己的位移动效（卡片 / 按钮 hover 上移），不动插件里的加载动画 */
	.btn--primary:hover,
	body .wpb-plan:hover,
	body .wpai-card:hover,
	body .aiw-card:hover .aiw-card-img img {
		transform: none !important;
	}
}