/**
 * MOK 会员中心 —— 视觉层（外观先行）
 *
 * 设计契约
 * - 使命：把会员的七个视图（概览/订单/积分与代币/VIP/收藏/资料/认证）放进一套
 *   与全站完全同源的框架里，让「左导航 240px + 右内容」在桌面稳定、在窄屏可折叠。
 * - 语义 token（全部来自 theme.json 生成的 CSS 变量，本文件不写任何色值）：
 *   底色 surface / 卡片 base / 描边 border / 标题 ink / 正文 muted / 次要 meta
 *   品牌 primary（仅主按钮、选中态、进度条）/ 危险 vivid-red（只用于字段错误）
 *   圆角 radius--card 6px / radius--button 0（直角主按钮，高 42px）/ radius--pill 999px
 *   间距走 spacing--20/30/40/50（8/16/24/32），卡片内边距 24px；栅格 gap 24px
 *   阴影 shadow--card / shadow--card-hover；动效 transition--base（200ms）
 * - Do：同组卡片同宽等高（grid 子项 minmax(0,1fr)）；长单词 overflow-wrap:anywhere；
 *   表格在容器内横滚；所有可聚焦元素有 focus-visible。
 * - Don't：不写硬编码十六进制、不用 !important、不用 overflow-x:hidden 掩盖溢出、
 *   不做 `transition: all`、不给仅装饰的元素加动画。
 *
 * 命名：`.mok-mc-*`（member center）。旧的登录/注册表单仍是 `.mok-member-*`，
 * 两套并存，互不覆盖。
 *
 * @package mok-enterprise-member
 */

/* ------------------------------------------------------------------ 容器 */

.mok-mc {
	--mok-mc-nav-width: 240px;
	--mok-mc-gap: var(--wp--preset--spacing--40, 24px);
	--mok-mc-radius: var(--wp--custom--radius--card, 6px);
	--mok-mc-line: var(--wp--custom--transition--base, 200ms ease);
	padding-block: var(--wp--preset--spacing--50, 32px) var(--wp--preset--spacing--60, 48px);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

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

.mok-mc__inner {
	width: 100%;
	max-width: var(--wp--custom--layout--max-width, 1292px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 24px);
}

.mok-mc__shell {
	display: grid;
	grid-template-columns: var(--mok-mc-nav-width) minmax(0, 1fr);
	gap: var(--mok-mc-gap);
	align-items: start;
}

.mok-mc__main {
	min-width: 0;
}

/* ------------------------------------------------------------------ 页头 */

.mok-mc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
	margin-bottom: var(--wp--preset--spacing--50, 32px);
}

.mok-mc__head-text {
	min-width: 0;
}

.mok-mc__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-2, 26px);
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mok-mc__subtitle {
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc__head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
}

/*
 * 登录信息条（PA sprint-2 第 2 条）：产品模板把「当前登录：xxx / 退出登录」直接输出成
 * 两段裸文本，和下面的卡片体系脱节。这里给它一层卡片承载，并把身份块复用导航里的
 * .mok-mc-user，避免头像/昵称在导航与信息条里各出现一次。
 */
.mok-mc-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0 0 var(--mok-mc-gap);
	padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
}

/* 信息条里的身份块不画分隔线：分隔线是导航卡里的用法。 */
.mok-mc-summary .mok-mc-user {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.mok-mc-summary__line {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.mok-mc-summary__meta {
	margin: 2px 0 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

.mok-mc-summary__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
}

/*
 * 页面 h1 之下的重复标题（PA sprint-2 第 1 条）：模板已经输出 h1「会员中心」，
 * 正文区又出现一行同名纯文本。这里只做视觉降级（12px、meta 色、字距）把它读成
 * 一个次级标签，不用 display:none —— 万一那段文本承载语义，藏掉会丢内容。
 * 根治要靠 PHP 模板去掉重复输出，本文件只是兜底。
 */
.mok-mc__aux,
.mok-mc-view__aux {
	margin: 0 0 var(--wp--preset--spacing--20, 8px);
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.mok-mc__aux + .mok-mc__title,
.mok-mc-view__aux + .mok-mc-view__title {
	margin-top: 0;
}

/* 演示数据提示：只在静态预览/示例数据时出现，正式数据不要输出。 */
.mok-mc-demo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--primary-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

/* ------------------------------------------------------------- 左侧导航 */

.mok-mc-nav {
	position: sticky;
	top: calc(var(--mok-header-total, 80px) + var(--wp--preset--spacing--30, 16px));
	min-width: 0;
	padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--30, 16px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
}

/* 折叠开关：桌面隐藏，≤1023 显示为整宽胶囊按钮。 */
.mok-mc-nav__toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
	min-height: 42px;
	padding: 0 var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--mok-mc-line), border-color var(--mok-mc-line);
}

.mok-mc-nav__toggle:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

.mok-mc-nav__toggle-icon {
	width: 12px;
	height: 12px;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--mok-mc-line);
}

.mok-mc[data-nav-open="true"] .mok-mc-nav__toggle-icon {
	transform: rotate(225deg) translateY(-2px);
}

/* 导航里的当前用户块 */
.mok-mc-user {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
	margin-bottom: var(--wp--preset--spacing--40, 24px);
	padding-bottom: var(--wp--preset--spacing--40, 24px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	min-width: 0;
}

.mok-mc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--icon-bg);
	color: var(--wp--preset--color--primary-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mok-mc-user__meta {
	min-width: 0;
}

.mok-mc-user__name {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mok-mc-user__tier {
	margin: 2px 0 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-nav__item {
	margin: 0;
}

.mok-mc-nav__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 8px);
	min-height: 42px;
	padding: 0 var(--wp--preset--spacing--30, 16px);
	border-left: 3px solid transparent;
	border-radius: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.6;
	text-decoration: none;
	transition: background-color var(--mok-mc-line), color var(--mok-mc-line),
		border-color var(--mok-mc-line);
}

.mok-mc-nav__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-deep);
	text-decoration: none;
}

/* 当前视图：左侧色条 + 浅底 + 加粗，并配合 aria-current="page" 一起用。 */
.mok-mc-nav__link[aria-current="page"],
.mok-mc-nav__link.is-current {
	border-left-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--primary-deep);
	font-weight: 700;
}

.mok-mc-nav__count {
	margin-left: auto;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.mok-mc-nav__link[aria-current="page"] .mok-mc-nav__count {
	color: var(--wp--preset--color--primary-deep);
}

.mok-mc-nav__hint {
	display: none;
	margin: var(--wp--preset--spacing--30, 16px) 0 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
}

.mok-mc-nav__foot {
	margin-top: var(--wp--preset--spacing--40, 24px);
	padding-top: var(--wp--preset--spacing--30, 16px);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ------------------------------------------------------------- 视图骨架 */

.mok-mc-view {
	display: flex;
	flex-direction: column;
	gap: var(--mok-mc-gap);
	min-width: 0;
}

.mok-mc-view[hidden] {
	display: none;
}

.mok-mc-view__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
}

.mok-mc-view__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.mok-mc-view__desc {
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------ 卡片 */

.mok-mc-card {
	min-width: 0;
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
}

.mok-mc-card--flush {
	padding: 0;
}

.mok-mc-card--tinted {
	background: var(--wp--preset--color--surface);
	box-shadow: none;
}

.mok-mc-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0 0 var(--wp--preset--spacing--40, 24px);
}

.mok-mc-card__head--flush {
	padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--40, 24px) 0;
	margin: 0;
}

.mok-mc-card__title {
	position: relative;
	margin: 0;
	padding-left: 14px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 700;
	line-height: 1.5;
}

.mok-mc-card__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
}

.mok-mc-card__foot {
	margin: var(--wp--preset--spacing--40, 24px) 0 0;
	padding-top: var(--wp--preset--spacing--30, 16px);
	border-top: 1px solid var(--wp--preset--color--border);
}

/*
 * flush 卡片（订单表）内部没有统一内边距，卡片底部的操作行要自己补回来，
 * 否则链接会贴到卡片边缘。
 */
.mok-mc-card--flush > .mok-mc-card__foot {
	margin: 0;
	padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--40, 24px);
}

/* -------------------------------------------------------------- 概览数据 */

.mok-mc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mok-mc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-stat {
	min-width: 0;
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
}

.mok-mc-stat__label {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.mok-mc-stat__value {
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.mok-mc-stat--accent .mok-mc-stat__value {
	color: var(--wp--preset--color--primary-deep);
}

.mok-mc-stat__hint {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-stat__hint a {
	color: var(--wp--preset--color--primary-dark);
}

/* ------------------------------------------------------------------ 按钮 */

.mok-mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 8px);
	height: 42px;
	padding: 0 var(--wp--preset--spacing--50, 32px);
	border: 1px solid transparent;
	/* 直角主按钮：与全站元素按钮一致（radius--button = 0）。 */
	border-radius: var(--wp--custom--radius--button, 0);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mok-mc-line), color var(--mok-mc-line),
		border-color var(--mok-mc-line), transform var(--mok-mc-line);
}

.mok-mc-btn:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.mok-mc-btn:active {
	transform: translateY(1px);
}

.mok-mc-btn--ghost {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-dark);
}

.mok-mc-btn--ghost:hover {
	background: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

.mok-mc-btn--quiet {
	height: 34px;
	padding: 0 var(--wp--preset--spacing--30, 16px);
	border-color: var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--primary-dark);
	font-size: 12px;
}

.mok-mc-btn--quiet:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-deep);
}

.mok-mc-btn--sm {
	height: 34px;
	padding: 0 var(--wp--preset--spacing--30, 16px);
	font-size: 12px;
}

.mok-mc-btn[disabled],
.mok-mc-btn[aria-disabled="true"] {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--meta);
	cursor: not-allowed;
}

.mok-mc-btn[disabled]:hover,
.mok-mc-btn[aria-disabled="true"]:hover {
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--meta);
	transform: none;
}

.mok-mc-btn--block {
	width: 100%;
}

.mok-mc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0;
}

/* 链接式按钮：与正文链接同色，但保持 42px 触控高度。 */
.mok-mc-linkbtn {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary-dark);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.mok-mc-linkbtn:hover {
	color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
}

a.mok-mc-linkbtn {
	color: var(--wp--preset--color--primary-dark);
}

/* ------------------------------------------------------------ 订单表格 */

.mok-mc-tablewrap {
	/* 窄屏在容器内横滚，不裁切、不靠 body overflow-x:hidden 掩盖。 */
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--mok-mc-radius);
}

.mok-mc-tablewrap:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mok-mc-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mok-mc-table caption {
	padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--40, 24px) 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	text-align: left;
}

.mok-mc-table th,
.mok-mc-table td {
	padding: 14px var(--wp--preset--spacing--40, 24px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: middle;
}

.mok-mc-table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.mok-mc-table tbody tr {
	transition: background-color var(--mok-mc-line);
}

.mok-mc-table tbody tr:hover {
	background: var(--wp--preset--color--surface);
}

.mok-mc-table tbody tr:last-child th,
.mok-mc-table tbody tr:last-child td {
	border-bottom: 0;
}

.mok-mc-table__num {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mok-mc-table__order {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	white-space: nowrap;
}

.mok-mc-table__action {
	width: 1%;
	white-space: nowrap;
}

/* ------------------------------------------------------------- 状态徽标 */

.mok-mc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--elevated);
	color: var(--wp--preset--color--primary-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.mok-mc-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

.mok-mc-badge--pending {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--meta);
}

.mok-mc-badge--done {
	background: var(--wp--preset--color--icon-bg);
	color: var(--wp--preset--color--primary-dark);
}

.mok-mc-badge--danger {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--vivid-red);
}

/* ------------------------------------------------------------ 流水列表 */

.mok-mc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-list__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 16px);
	padding: var(--wp--preset--spacing--30, 16px) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	min-width: 0;
}

.mok-mc-list__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mok-mc-list__item:first-child {
	padding-top: 0;
}

.mok-mc-list__body {
	min-width: 0;
}

.mok-mc-list__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.mok-mc-list__meta {
	margin: 2px 0 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-list__value {
	flex: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mok-mc-list__value--plus {
	color: var(--wp--preset--color--primary-dark);
}

.mok-mc-list__value--minus {
	color: var(--wp--preset--color--meta);
}

/* 顶部余额条 */
.mok-mc-balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30, 16px);
}

.mok-mc-balance__value {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.mok-mc-balance__unit {
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-weight: 600;
}

/* ----------------------------------------------------------- VIP 档位卡 */

.mok-mc-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mok-mc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: box-shadow var(--mok-mc-line), border-color var(--mok-mc-line),
		transform var(--mok-mc-line);
}

.mok-mc-tier:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

/* 当前档位：品牌色描边 + 顶部标识条。 */
.mok-mc-tier--current {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.mok-mc-tier--current:hover {
	transform: none;
}

/* 当前档位标签做成压在卡片上边框的飘带：三张卡的标题基线才不会因为多一行而错位。 */
.mok-mc-tier__flag {
	position: absolute;
	top: -13px;
	left: var(--wp--preset--spacing--40, 24px);
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.mok-mc-tier__name {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 700;
	line-height: 1.4;
}

.mok-mc-tier__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.2;
}

.mok-mc-tier__price small {
	color: var(--wp--preset--color--meta);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 400;
}

.mok-mc-tier__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 8px);
	margin: var(--wp--preset--spacing--40, 24px) 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-tier__list li {
	display: flex;
	gap: var(--wp--preset--spacing--20, 8px);
	align-items: flex-start;
	min-width: 0;
}

.mok-mc-tier__list li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.65em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.mok-mc-tier__foot {
	margin: var(--wp--preset--spacing--40, 24px) 0 0;
	padding-top: var(--wp--preset--spacing--30, 16px);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* 升级进度条 */
.mok-mc-progress {
	margin: 0;
}

.mok-mc-progress__bar {
	position: relative;
	height: 8px;
	margin: var(--wp--preset--spacing--20, 8px) 0 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--elevated);
	overflow: hidden;
}

.mok-mc-progress__fill {
	display: block;
	height: 100%;
	width: var(--mok-mc-progress, 0%);
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mok-mc-progress__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 8px);
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ 收藏 */

.mok-mc-favs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mok-mc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-fav {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: box-shadow var(--mok-mc-line), transform var(--mok-mc-line);
}

.mok-mc-fav:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

.mok-mc-fav__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--mok-mc-radius) var(--mok-mc-radius) 0 0;
	background: var(--wp--preset--color--surface);
}

.mok-mc-fav__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 8px);
	padding: 14px var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--30, 16px);
	min-width: 0;
}

.mok-mc-fav__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.5;
	/* 两行后省略，保持同组卡片等高。 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.mok-mc-fav__meta {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-fav__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 8px);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20, 8px);
}

/* ------------------------------------------------------------------ 表单 */

.mok-mc-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40, 24px);
	margin: 0;
	max-width: 560px;
}

.mok-mc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 24px);
}

.mok-mc-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 8px);
	min-width: 0;
	margin: 0;
}

.mok-mc-field__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
}

.mok-mc-field__label .mok-mc-field__req {
	color: var(--wp--preset--color--vivid-red);
	margin-left: 2px;
}

.mok-mc-field input,
.mok-mc-field select,
.mok-mc-field textarea {
	width: 100%;
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button, 0);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: border-color var(--mok-mc-line), box-shadow var(--mok-mc-line);
}

.mok-mc-field textarea {
	min-height: 96px;
	resize: vertical;
}

.mok-mc-field input::placeholder,
.mok-mc-field textarea::placeholder {
	color: var(--wp--preset--color--meta);
}

.mok-mc-field input:hover,
.mok-mc-field select:hover,
.mok-mc-field textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

.mok-mc-field input:focus-visible,
.mok-mc-field select:focus-visible,
.mok-mc-field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

.mok-mc-field input[readonly],
.mok-mc-field input[disabled] {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--meta);
	cursor: not-allowed;
}

/* 字段级错误：输入框红边 + 下方 role="alert" 红字。 */
.mok-mc-field--error input,
.mok-mc-field--error select,
.mok-mc-field--error textarea,
.mok-mc-field input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--vivid-red);
	background: var(--wp--preset--color--base);
}

.mok-mc-field__hint {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	color: var(--wp--preset--color--vivid-red);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.mok-mc-field__error::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	line-height: 1;
}

/* ------------------------------------------------------------------ 提示条 */

.mok-mc-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0;
	padding: 14px var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-left-width: 3px;
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* 标题与说明是块级：调用方既可以用 span 也可以 p，不会挤成一行。 */
.mok-mc-alert__title,
.mok-mc-alert__text {
	display: block;
}

.mok-mc-alert__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.6;
}

.mok-mc-alert__text {
	margin: 2px 0 0;
}

.mok-mc-alert--success {
	border-left-color: var(--wp--preset--color--primary);
}

.mok-mc-alert--error {
	border-left-color: var(--wp--preset--color--vivid-red);
}

.mok-mc-alert--error .mok-mc-alert__title {
	color: var(--wp--preset--color--vivid-red);
}

.mok-mc-alert--info {
	border-left-color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------- 空态 / 错误态 / 加载态 */

.mok-mc-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
	padding: var(--wp--preset--spacing--60, 48px) var(--wp--preset--spacing--40, 24px);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.mok-mc-state--error {
	border-style: solid;
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.mok-mc-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 700;
	line-height: 1;
	box-shadow: var(--wp--custom--shadow--soft);
}

.mok-mc-state--error .mok-mc-state__icon {
	color: var(--wp--preset--color--vivid-red);
}

.mok-mc-state__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 700;
	line-height: 1.5;
}

.mok-mc-state__text {
	max-width: 46ch;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-state__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--30, 16px);
	margin: 0;
}

.mok-mc-state__actions a {
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* 骨架屏：只在真实请求进行中由 JS 加上 .is-loading；无 JS 时直接显示内容。 */
.mok-mc-skeleton {
	border-radius: 4px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--surface) 0%,
		var(--wp--preset--color--elevated) 50%,
		var(--wp--preset--color--surface) 100%
	);
	background-size: 200% 100%;
	animation: mok-mc-shimmer 1.4s ease-in-out infinite;
}

.mok-mc-skeleton--line {
	height: 12px;
	margin: 0;
}

.mok-mc-skeleton--title {
	height: 18px;
	width: 40%;
	margin: 0;
}

.mok-mc-skeleton--thumb {
	width: 96px;
	height: 64px;
	flex: none;
	border-radius: var(--mok-mc-radius);
}

.mok-mc-skeleton--stat {
	height: 76px;
	margin: 0;
}

@keyframes mok-mc-shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* 加载行：骨架 + 一句给读屏的说明。 */
.mok-mc-loading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0;
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
}

.mok-mc-loading__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 16px);
}

.mok-mc-loading__row > :last-child {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 8px);
}

.mok-mc-loading__text {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
}

/* 行内 spinner：提交按钮的忙碌态。 */
.mok-mc-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mok-mc-spin 0.8s linear infinite;
}

@keyframes mok-mc-spin {
	to {
		transform: rotate(360deg);
	}
}

.mok-mc-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.9;
}

/* --------------------------------------------------------------- 筛选胶囊 */

.mok-mc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--wp--preset--spacing--30, 16px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--mok-mc-line), color var(--mok-mc-line),
		border-color var(--mok-mc-line);
}

.mok-mc-chip:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
	text-decoration: none;
}

.mok-mc-chip.is-active,
.mok-mc-chip[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* --------------------------------------------------------------- 认证视图 */

.mok-mc-kv {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--40, 24px);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-kv dt {
	color: var(--wp--preset--color--meta);
}

.mok-mc-kv dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- 分栏辅助 */

.mok-mc-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mok-mc-gap);
	min-width: 0;
}

.mok-mc-grid-2 > * {
	min-width: 0;
}

/* ========================================= sprint 3：积分 · VIP · 认证 ==== */

/*
 * 状态徽标补两档（未提交/已拒绝复用既有的 --pending / --danger）：
 * 审核中 = --info（icon-bg + primary-deep），已通过 = --ok（primary + white）。
 * 全部取自 theme.json 既有 preset，不新增色值。
 */
.mok-mc-badge--info {
	background: var(--wp--preset--color--icon-bg);
	color: var(--wp--preset--color--primary-deep);
}

.mok-mc-badge--ok {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.mok-mc-badge--muted {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--meta);
}

/* ------------------------------------------------------- 积分与代币 */

.mok-mc-balances {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mok-mc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mok-mc-balancecard {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 8px);
	min-width: 0;
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid transparent;
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: box-shadow var(--mok-mc-line), border-color var(--mok-mc-line);
}

.mok-mc-balancecard:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.mok-mc-balancecard--accent {
	border-left-color: var(--wp--preset--color--primary);
}

/* 余额不足：左侧条转成危险色，数值与提示同步提醒，不靠颜色单独传达。 */
.mok-mc-balancecard--low {
	border-left-color: var(--wp--preset--color--vivid-red);
}

.mok-mc-balancecard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 8px);
}

.mok-mc-balancecard__value {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.mok-mc-balancecard--low .mok-mc-balancecard__value {
	color: var(--wp--preset--color--vivid-red);
}

.mok-mc-balancecard__unit {
	margin-left: 2px;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-weight: 600;
}

.mok-mc-balancecard__meter {
	height: 6px;
	margin: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--elevated);
	overflow: hidden;
}

.mok-mc-balancecard__meter > span {
	display: block;
	height: 100%;
	width: var(--mok-mc-meter, 0%);
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mok-mc-balancecard--low .mok-mc-balancecard__meter > span {
	background: var(--wp--preset--color--vivid-red);
}

.mok-mc-balancecard__hint {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

.mok-mc-balancecard--low .mok-mc-balancecard__hint {
	color: var(--wp--preset--color--vivid-red);
	font-weight: 600;
}

/* 流水表的数字列：变动带符号，正负靠颜色 + 字号区分，不只靠颜色。 */
.mok-mc-table__time {
	color: var(--wp--preset--color--meta);
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mok-mc-table__delta {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mok-mc-table__delta--plus {
	color: var(--wp--preset--color--primary-dark);
}

.mok-mc-table__note {
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

/* 分页：直角 42px 与主按钮同高，触控可达。 */
.mok-mc-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 8px);
	margin: var(--wp--preset--spacing--40, 24px) 0 0;
	padding: 0;
	list-style: none;
}

.mok-mc-pager__item {
	margin: 0;
	min-width: 0;
}

.mok-mc-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 var(--wp--preset--spacing--30, 16px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--button, 0);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color var(--mok-mc-line), border-color var(--mok-mc-line),
		color var(--mok-mc-line);
}

.mok-mc-pager__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	text-decoration: none;
}

.mok-mc-pager__link[aria-current="page"],
.mok-mc-pager__link.is-current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.mok-mc-pager__link[aria-disabled="true"],
.mok-mc-pager__link.is-disabled {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--meta);
	cursor: not-allowed;
	text-decoration: none;
}

.mok-mc-pager__gap {
	padding: 0 2px;
	color: var(--wp--preset--color--meta);
}

.mok-mc-pager__status {
	margin: 0 0 0 auto;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* 行内空态：卡片里的一条说明 + 一个下一步链接，不占整屏高度。 */
.mok-mc-state--inline {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--30, 16px);
	padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--40, 24px);
	text-align: left;
}

.mok-mc-state--inline .mok-mc-state__icon {
	width: 32px;
	height: 32px;
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-state--inline .mok-mc-state__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-state--inline .mok-mc-state__text {
	max-width: none;
	flex: 1 1 22ch;
}

.mok-mc-state--inline .mok-mc-state__actions {
	margin-left: auto;
	justify-content: flex-start;
}

/* ------------------------------------------------------------- VIP 会员 */

/*
 * 四态共用一套骨架，只换左侧状态条颜色与文案：
 * 未订阅（muted）/ 生效中（primary）/ 已过期（meta）/ 已取消（vivid-red）。
 */
.mok-mc-vip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
	gap: var(--wp--preset--spacing--40, 24px);
	padding: var(--wp--preset--spacing--40, 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--muted);
	border-radius: var(--mok-mc-radius);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--soft);
}

.mok-mc-vip--none {
	border-left-color: var(--wp--preset--color--muted);
}

.mok-mc-vip--active {
	border-left-color: var(--wp--preset--color--primary);
}

.mok-mc-vip--expired {
	border-left-color: var(--wp--preset--color--meta);
}

.mok-mc-vip--cancelled {
	border-left-color: var(--wp--preset--color--vivid-red);
}

.mok-mc-vip__info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
	min-width: 0;
}

.mok-mc-vip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--30, 16px);
}

.mok-mc-vip__name {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-large, 20px);
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.mok-mc-vip__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-vip__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0;
}

.mok-mc-vip__fact {
	min-width: 0;
}

.mok-mc-vip__fact dt {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.mok-mc-vip__fact dd {
	margin: 2px 0 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.mok-mc-vip--active .mok-mc-vip__fact--days dd {
	color: var(--wp--preset--color--primary-deep);
}

.mok-mc-vip--expired .mok-mc-vip__fact--days dd,
.mok-mc-vip--cancelled .mok-mc-vip__fact--days dd {
	color: var(--wp--preset--color--vivid-red);
}

.mok-mc-vip__benefits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--40, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.mok-mc-vip__benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20, 8px);
	min-width: 0;
}

.mok-mc-vip__benefits li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.65em;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* 未生效的权益用小圆环点，避免读成「已可用」。 */
.mok-mc-vip--none .mok-mc-vip__benefits li::before,
.mok-mc-vip--expired .mok-mc-vip__benefits li::before,
.mok-mc-vip--cancelled .mok-mc-vip__benefits li::before {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}

.mok-mc-vip__action {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 8px);
	min-width: 0;
	padding-left: var(--wp--preset--spacing--40, 24px);
	border-left: 1px solid var(--wp--preset--color--border);
}

.mok-mc-vip__price {
	margin: 0;
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.mok-mc-vip__price small {
	color: var(--wp--preset--color--meta);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 400;
}

.mok-mc-vip__action .mok-mc-btn {
	width: 100%;
}

.mok-mc-vip__hint {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

/* ------------------------------------------------------------- 身份认证 */

.mok-mc-cert {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
	min-width: 0;
}

.mok-mc-cert__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--30, 16px);
}

.mok-mc-cert__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body, 16px);
	font-weight: 700;
	line-height: 1.5;
}

.mok-mc-cert__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* 当日额度面板：数值 + 进度条，剩余为 0 时条变灰并给文案。 */
.mok-mc-quota {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
	margin: 0;
}

.mok-mc-quota__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--30, 16px);
}

/*
 * 标签 + 数值一行、进度条通栏一行。三列（标签 | 条 | 数值）时数值长短不同
 * 会让两条进度条长短不一，这里用两行两列保证条宽恒定。
 */
.mok-mc-quota__label {
	grid-area: 1 / 1 / 2 / 2;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.mok-mc-quota__bar {
	grid-area: 2 / 1 / 3 / -1;
	height: 8px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--elevated);
	overflow: hidden;
}

.mok-mc-quota__bar > span {
	display: block;
	height: 100%;
	width: var(--mok-mc-quota, 0%);
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mok-mc-quota__value {
	grid-area: 1 / 2 / 2 / 3;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	text-align: right;
	overflow-wrap: anywhere;
}

.mok-mc-quota__row--exhausted .mok-mc-quota__bar > span {
	background: var(--wp--preset--color--meta);
}

.mok-mc-quota__row--exhausted .mok-mc-quota__value {
	color: var(--wp--preset--color--meta);
}

.mok-mc-quota__foot {
	margin: 0;
	color: var(--wp--preset--color--meta);
	font-size: 12px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- 响应式 */

/* ≤1023：左导航折叠为顶部胶囊 + 抽屉，内容单列。 */
@media (max-width: 1023.98px) {
	.mok-mc {
		padding-block: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--60, 48px);
	}

	.mok-mc__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * 折叠态只留一颗胶囊：去掉导航卡的边框/底色/内边距，避免“卡片里再套一颗胶囊”
	 * 的双层框；展开时才恢复成抽屉卡片。这样胶囊与首个内容块之间只剩 24px 栅格间距。
	 */
	.mok-mc-nav {
		position: static;
		margin-bottom: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.mok-mc-nav__toggle {
		display: flex;
	}

	.mok-mc-nav__list,
	.mok-mc-nav__foot {
		display: none;
	}

	.mok-mc-nav__list {
		margin-top: var(--wp--preset--spacing--30, 16px);
	}

	/* 展开态：胶囊下面挂一层抽屉卡，视觉上明确「已打开」。 */
	.mok-mc[data-nav-open="true"] .mok-mc-nav {
		padding: var(--wp--preset--spacing--30, 16px);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--mok-mc-radius);
		background: var(--wp--preset--color--base);
		box-shadow: var(--wp--custom--shadow--card-hover);
	}

	.mok-mc[data-nav-open="true"] .mok-mc-nav__list,
	.mok-mc[data-nav-open="true"] .mok-mc-nav__foot {
		display: flex;
		flex-direction: column;
	}

	.mok-mc[data-nav-open="true"] .mok-mc-nav__hint {
		display: block;
	}

	.mok-mc-user {
		padding-bottom: var(--wp--preset--spacing--30, 16px);
		margin-bottom: var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mok-mc-tiers,
	.mok-mc-favs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * 折叠态收拢（PA sprint-2 第 3 条）：胶囊按钮与首个内容块之间只留 16px，
	 * 登录信息条也同步收紧，不再出现约 150px 的空白带。
	 */
	.mok-mc-summary {
		margin-bottom: var(--wp--preset--spacing--30, 16px);
		padding-inline: var(--wp--preset--spacing--30, 16px);
	}
}

/* ≤781：手机边距收紧；平板（768）仍保留双列，单列留给 ≤640。 */
@media (max-width: 781px) {
	.mok-mc__inner {
		padding-inline: var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-kv {
		grid-template-columns: minmax(0, 1fr);
	}
	.mok-mc-kv dt {
		margin-top: var(--wp--preset--spacing--20, 8px);
		font-size: 12px;
	}

	.mok-mc-head {
		align-items: flex-start;
	}

	.mok-mc__head-actions {
		width: 100%;
	}

	.mok-mc__head-actions .mok-mc-btn {
		flex: 1 1 auto;
	}

	.mok-mc-card,
	.mok-mc-stat,
	.mok-mc-tier {
		padding: var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-card__head--flush {
		padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--30, 16px) 0;
	}

	.mok-mc-table caption {
		padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--30, 16px) 0;
	}

	.mok-mc-table th,
	.mok-mc-table td {
		padding: 12px var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-state {
		padding: var(--wp--preset--spacing--50, 32px) var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-btn {
		padding-inline: var(--wp--preset--spacing--40, 24px);
	}

	.mok-mc__head {
		margin-bottom: var(--wp--preset--spacing--30, 16px);
	}

	/* VIP 卡在平板起单列：操作区落到信息下方，按钮仍 42px 直角。 */
	.mok-mc-vip {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-vip__action {
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--30, 16px);
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.mok-mc-balancecard {
		padding: var(--wp--preset--spacing--30, 16px);
	}
}

/* ≤640（含 390 / 320）：所有成组栅格落成单列，卡片不再缩成半行。 */
@media (max-width: 640px) {
	.mok-mc-stats,
	.mok-mc-tiers,
	.mok-mc-favs,
	.mok-mc-balances,
	.mok-mc-grid-2,
	.mok-mc-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 390/320：信息条收紧，别再占掉半个首屏；头像略小以便昵称与等级同段可读。 */
	.mok-mc-summary {
		padding-block: var(--wp--preset--spacing--30, 16px);
	}

	.mok-mc-summary .mok-mc-avatar {
		width: 36px;
		height: 36px;
	}

	/* 行内空态在窄屏回到纵向堆叠，说明文字不被挤成一条细缝。 */
	.mok-mc-state--inline {
		flex-direction: column;
		align-items: flex-start;
	}

	.mok-mc-state--inline .mok-mc-state__actions {
		margin-left: 0;
	}

	.mok-mc-pager__status {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* ≤400（含 390 / 320）：极窄屏收紧字号与内边距，仍保持 16px 安全边距。 */
@media (max-width: 400px) {
	.mok-mc__title {
		font-size: var(--wp--preset--font-size--h-3, 22px);
	}

	.mok-mc-stat__value {
		font-size: var(--wp--preset--font-size--lead, 18px);
	}

	.mok-mc-fav__body,
	.mok-mc-card,
	.mok-mc-stat,
	.mok-mc-tier {
		padding-inline: var(--wp--preset--spacing--30, 16px);
	}
}

/* ------------------------------------------------------------- 低动效 */

/*
 * prefers-reduced-motion: reduce —— 会员中心范围内的动效全部归零。
 *
 * 用一条覆盖整棵子树的规则而不是逐类点名：新增组件不会再漏（F-022 实测发现
 * `.mok-mc-nav__toggle-icon` 的 transform 过渡曾漏在旧的逐类名单之外）。
 * `animation: none` / `transition: none` 的计算值就是 0s，并去掉 hover 位移，
 * 避免「低动效下还在动」。
 *
 * 选择器重复写一次类名（`.mok-mc.mok-mc *`）是为了提高特异性压过
 * `.mok-mc-table tbody tr` 这类「1 类 + 2 元素」的既有规则；不使用 !important。
 */
@media (prefers-reduced-motion: reduce) {
	.mok-member.mok-member,
	.mok-member.mok-member *,
	.mok-member.mok-member *::before,
	.mok-member.mok-member *::after,
	.mok-mc.mok-mc,
	.mok-mc.mok-mc *,
	.mok-mc.mok-mc *::before,
	.mok-mc.mok-mc *::after,
	.mok-gate.mok-gate,
	.mok-gate.mok-gate *,
	.mok-gate.mok-gate *::before,
	.mok-gate.mok-gate *::after {
		animation: none;
		transition: none;
		scroll-behavior: auto;
	}

	.mok-mc-skeleton {
		background: var(--wp--preset--color--surface);
	}

	.mok-mc-spinner {
		border-right-color: var(--wp--preset--color--surface);
	}

	.mok-mc-tier:hover,
	.mok-mc-fav:hover,
	.mok-mc-btn:active {
		transform: none;
	}
}