/*
 * 会员组购买 - 付费内容 / 隐藏内容 / 编辑器弹窗与下拉
 */

/* ===========================================================================
 * 付费内容区（文章底部 + 侧栏小工具）
 * ========================================================================= */

.mgb-paid {
	--mgb-pink: #e8467c;
	--mgb-line: rgba(39, 39, 39, .08);
	margin: 24px 0;
	padding: 18px 20px;
	border: 1px solid var(--mgb-line);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(var(--bs-primary-rgb, 78, 156, 255), .05), transparent 60%);
}

.mgb-paid.is-open {
	background: linear-gradient(180deg, rgba(34, 197, 94, .07), transparent 60%);
}

.mgb-paid-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.mgb-paid-lock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: .95rem;
}

.mgb-paid-lock i {
	color: var(--mgb-pink);
}

.mgb-paid.is-open .mgb-paid-lock i {
	color: #22c55e;
}

.mgb-paid-state {
	font-size: .76rem;
	padding: 2px 10px;
	border-radius: 20px;
	background: rgba(34, 197, 94, .12);
	color: #15803d;
}

/* 价格 */
.mgb-paid-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mgb-paid-num {
	font-size: 2rem;
	font-weight: 700;
	color: var(--mgb-pink);
	line-height: 1;
}

.mgb-paid-unit {
	font-size: .82rem;
	color: #9aa0a6;
}

.mgb-paid-price del {
	font-size: .82rem;
	color: #b9bec4;
}

.mgb-paid-off {
	font-size: .72rem;
	padding: 1px 8px;
	border-radius: 20px;
	background: rgba(232, 70, 124, .12);
	color: var(--mgb-pink);
}

.mgb-paid-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.mgb-paid-tier {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .75rem;
	background: color-mix(in srgb, var(--mgb-color, #4e9cff) 12%, transparent);
	color: var(--mgb-color, #4e9cff);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.mgb-paid-tier {
		background: rgba(78, 156, 255, .12);
	}
}

.mgb-paid-tier b {
	font-weight: 600;
}

.mgb-paid-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mgb-paid-actions .mgb-act {
	flex: 0 1 auto;
	min-width: 170px;
}

.mgb-paid-hidden {
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(39, 39, 39, .03);
	margin-bottom: 12px;
	font-size: .9rem;
}

.mgb-paid-empty {
	color: #9aa0a6;
	font-size: .85rem;
	margin: 0;
}

/* 资源列表 */
.mgb-res-items {
	margin: 0;
}

.mgb-res-item {
	padding: 12px 14px;
	border: 1px solid var(--mgb-line);
	border-radius: 10px;
	background: var(--bs-body-bg, #fff);
	margin-bottom: 10px;
}

.mgb-res-item:last-child {
	margin-bottom: 0;
}

.mgb-res-info {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mgb-res-label {
	font-weight: 500;
	font-size: .9rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mgb-res-label i {
	color: var(--bs-primary, #4e9cff);
}

.mgb-res-pwd {
	font-size: .8rem;
	color: #6c757d;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.mgb-res-pwd code {
	background: rgba(232, 70, 124, .1);
	color: var(--mgb-pink);
	padding: 1px 7px;
	border-radius: 5px;
	font-size: .82rem;
	letter-spacing: 1px;
}

.mgb-copy-pwd {
	border: 0;
	background: transparent;
	color: #9aa0a6;
	cursor: pointer;
	padding: 0 2px;
}

.mgb-copy-pwd:hover {
	color: var(--bs-primary, #4e9cff);
}

.mgb-res-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 8px;
	background: linear-gradient(90deg, #4fc3f7, #2196f3);
	color: #fff;
	font-size: .85rem;
	text-decoration: none;
	transition: all .2s ease;
}

.mgb-res-go:hover {
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(33, 150, 243, .25);
}

/* 下载地址可用性反馈 */
.mgb-res-check {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--mgb-line);
	font-size: .76rem;
	color: #9aa0a6;
}

.mgb-res-check-tip i {
	color: #f59e0b;
}

.mgb-res-check-btns {
	display: inline-flex;
	gap: 8px;
}

.mgb-check-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 11px;
	border: 1px solid var(--mgb-line);
	border-radius: 20px;
	background: transparent;
	color: #6c757d;
	font-size: .76rem;
	cursor: pointer;
	transition: all .2s ease;
}

.mgb-check-btn:hover:not(:disabled) {
	border-color: var(--bs-primary, #4e9cff);
	color: var(--bs-primary, #4e9cff);
}

.mgb-check-btn:disabled {
	opacity: .55;
	cursor: default;
}

.mgb-check-btn b {
	font-weight: 600;
}

.mgb-res-check-last {
	margin-left: auto;
}

.mgb-res-check.voted .mgb-res-check-last {
	color: #15803d;
}

/* 支付方式选择 */
.mgb-paypick {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid var(--mgb-line);
	border-radius: 10px;
}

.mgb-paypick-title {
	font-size: .8rem;
	color: #9aa0a6;
	margin-bottom: 8px;
}

.mgb-paypick-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 8px 8px 0;
	padding: 6px 14px;
	border: 1px solid var(--mgb-line);
	border-radius: 8px;
	background: transparent;
	color: #5c636d;
	font-size: .82rem;
	cursor: pointer;
	transition: all .2s ease;
}

.mgb-paypick-btn:hover {
	border-color: var(--bs-primary, #4e9cff);
	color: var(--bs-primary, #4e9cff);
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .06);
}

/* 侧栏里的紧凑版 */
.mgb-paid-widget {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mgb-paid-widget .mgb-paid-num {
	font-size: 1.5rem;
}

.mgb-paid-widget .mgb-paid-actions .mgb-act {
	min-width: 0;
	width: 100%;
}

.mgb-paid-widget .mgb-res-info {
	gap: 8px;
}

.mgb-paid-widget .mgb-res-check {
	font-size: .72rem;
}

.mgb-paid-widget .mgb-res-check-last {
	margin-left: 0;
	width: 100%;
}

.widget-mgb-member .mgb-widget-member {
	text-align: center;
}

.widget-mgb-member .mgb-widget-avatar img {
	width: 54px;
	height: 54px;
	border-radius: 50%;
}

.widget-mgb-member .mgb-widget-name {
	font-weight: 600;
	margin-top: 8px;
}

.widget-mgb-member .mgb-widget-links {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 12px;
	font-size: .8rem;
}

.widget-mgb-member .mgb-widget-links a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #6c757d;
	text-decoration: none;
}

.widget-mgb-member .mgb-widget-links a:hover {
	color: var(--bs-primary, #4e9cff);
}

.widget-mgb-member .mgb-widget-guest {
	text-align: center;
	font-size: .85rem;
	color: #9aa0a6;
}

/* ===========================================================================
 * 隐藏内容提示块
 * ========================================================================= */

.mgb-hide-box {
	margin: 20px 0;
	padding: 24px 20px;
	border: 1px dashed rgba(232, 70, 124, .35);
	border-radius: 14px;
	background: rgba(232, 70, 124, .04);
	text-align: center;
}

.mgb-hide-icon {
	font-size: 26px;
	color: #e8467c;
	margin-bottom: 8px;
}

.mgb-hide-login .mgb-hide-icon,
.mgb-hide-comment .mgb-hide-icon {
	color: #4e9cff;
}

.mgb-hide-vip .mgb-hide-icon {
	color: #e0a63c;
}

.mgb-hide-text {
	font-size: .9rem;
	color: #5c636d;
	margin-bottom: 14px;
}

.mgb-hide-action {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.mgb-hide-action .mgb-act {
	flex: 0 1 auto;
	min-width: 150px;
}

.mgb-pwd-form {
	display: flex;
	gap: 8px;
	flex: 1 1 100%;
	max-width: 380px;
	margin: 0 auto;
}

/* 这个表单是 .mgb-hide-action 的 flex 子项，输入框要显式允许收缩，
   否则会被旁边 min-width:150px 的按钮挤成一条缝 */
.mgb-pwd-form .mgb-dialog-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.mgb-pwd-form .mgb-act {
	/* .mgb-act 自带 width:100%，flex-basis:auto 会直接取这个 100%，
	   按钮就把整行吃掉了，必须显式改回 auto */
	flex: 0 0 auto;
	width: auto;
	min-width: 96px;
	padding-left: 18px;
	padding-right: 18px;
}

.mgb-hide-open {
	margin: 16px 0;
	padding: 14px 16px;
	border-left: 3px solid #22c55e;
	border-radius: 0 10px 10px 0;
	background: rgba(34, 197, 94, .05);
}

.mgb-hide-open-tip {
	font-size: .76rem;
	color: #15803d;
	margin-bottom: 8px;
}

/* ===========================================================================
 * 工具栏下拉
 * ========================================================================= */

.mgb-tb-drop {
	position: relative;
	display: inline-flex;
}

.mgb-tb-caret {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.mgb-tb-caret .fa-caret-down {
	font-size: 11px;
	opacity: .6;
}

.mgb-tb-drop.open .mgb-tb-caret {
	border-color: var(--mgb-pink, #e8467c);
	color: var(--mgb-pink, #e8467c);
}

.mgb-tb-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 160px;
	margin-top: 4px;
	padding: 6px;
	border: 1px solid rgba(39, 39, 39, .1);
	border-radius: 10px;
	background: var(--bs-body-bg, #fff);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.mgb-tb-drop.open .mgb-tb-menu {
	display: block;
}

.mgb-tb-menu > button {
	display: block;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #5c636d;
	font-size: .84rem;
	text-align: left;
	cursor: pointer;
	white-space: nowrap;
}

.mgb-tb-menu > button:hover {
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .08);
	color: var(--bs-primary, #4e9cff);
}

.mgb-tb-menu-wide {
	min-width: 200px;
	max-height: 320px;
	overflow-y: auto;
}

.mgb-tb-menu-head {
	padding: 6px 12px 4px;
	font-size: .72rem;
	color: #9aa0a6;
	border-top: 1px solid rgba(39, 39, 39, .07);
	margin-top: 4px;
}

.mgb-tb-menu-head:first-child {
	border-top: 0;
	margin-top: 0;
}

/* 颜色面板 */
.mgb-tb-colorwrap .mgb-tb-color {
	position: relative;
	padding-bottom: 7px;
}

.mgb-tb-colorbar {
	position: absolute;
	left: 6px;
	right: 14px;
	bottom: 4px;
	height: 3px;
	border-radius: 2px;
	background: #e8467c;
}

.mgb-color-panel {
	padding: 10px;
	min-width: auto;
}

.mgb-color-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
}

.mgb-color-cell {
	width: 22px;
	height: 22px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
	transition: transform .12s ease;
}

.mgb-color-cell:hover {
	transform: scale(1.18);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.mgb-color-none {
	background: var(--bs-body-bg, #fff);
	color: #9aa0a6;
	font-size: 14px;
	line-height: 1;
}

.mgb-color-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(39, 39, 39, .08);
	font-size: .8rem;
	color: #5c636d;
	cursor: pointer;
}

.mgb-color-custom input[type="color"] {
	width: 34px;
	height: 22px;
	padding: 0;
	border: 1px solid rgba(39, 39, 39, .14);
	border-radius: 4px;
	cursor: pointer;
	background: none;
}

/* ===========================================================================
 * 媒体弹窗
 * ========================================================================= */

.mgb-dialog-lg {
	max-width: 620px;
}

.mgb-media-tabs {
	display: flex;
	gap: 18px;
}

.mgb-media-tabs button {
	position: relative;
	border: 0;
	background: transparent;
	padding: 4px 0;
	font-size: .9rem;
	color: #6c757d;
	cursor: pointer;
}

.mgb-media-tabs button.active {
	color: var(--mgb-pink, #e8467c);
	font-weight: 500;
}

.mgb-media-tabs button.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--mgb-pink, #e8467c);
}

.mgb-media-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.mgb-media-search {
	position: relative;
	flex: 1;
}

.mgb-media-search input {
	width: 100%;
	padding: 8px 32px 8px 12px;
	border: 1px solid rgba(39, 39, 39, .14);
	border-radius: 8px;
	background: transparent;
	font-size: .84rem;
	outline: none;
}

.mgb-media-search input:focus {
	border-color: var(--mgb-pink, #e8467c);
}

.mgb-media-search i {
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: #b9bec4;
	pointer-events: none;
}

.mgb-media-help {
	color: #b9bec4;
	cursor: help;
}

.mgb-media-upload {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(90deg, #4fc3f7, #2196f3);
	color: #fff;
	font-size: .84rem;
	cursor: pointer;
}

.mgb-media-upload:disabled {
	opacity: .6;
}

.mgb-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 10px;
	min-height: 200px;
	max-height: 320px;
	overflow-y: auto;
}

.mgb-media-empty {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	color: #b9bec4;
	font-size: .85rem;
}

.mgb-media-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border: 1px solid rgba(39, 39, 39, .1);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	text-align: left;
	transition: all .18s ease;
}

.mgb-media-cell:hover {
	border-color: var(--bs-primary, #4e9cff);
}

.mgb-media-cell.picked {
	border-color: var(--mgb-pink, #e8467c);
	box-shadow: 0 0 0 2px rgba(232, 70, 124, .15);
}

.mgb-media-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 66px;
	border-radius: 7px;
	background: rgba(39, 39, 39, .05);
	overflow: hidden;
	color: #b9bec4;
	font-size: 22px;
}

.mgb-media-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mgb-media-name {
	font-size: .76rem;
	color: var(--bs-body-color, #2c3038);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mgb-media-meta {
	font-size: .68rem;
	color: #b9bec4;
}

.mgb-media-pager {
	display: flex;
	gap: 5px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.mgb-media-pager button {
	min-width: 26px;
	height: 26px;
	border: 1px solid rgba(39, 39, 39, .12);
	border-radius: 6px;
	background: transparent;
	color: #6c757d;
	font-size: .76rem;
	cursor: pointer;
}

.mgb-media-pager button.active {
	background: var(--mgb-pink, #e8467c);
	border-color: var(--mgb-pink, #e8467c);
	color: #fff;
}

.mgb-dialog-textarea {
	resize: vertical;
	min-height: 110px;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: .8rem;
}

.mgb-dialog-label.mt-3 {
	margin-top: 14px;
}

/* ===========================================================================
 * 会员中心：收起左栏
 * ========================================================================= */

.mgb-publish-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .06);
	font-size: .8rem;
	color: #5c636d;
}

.mgb-publish-bar-ops {
	display: inline-flex;
	gap: 8px;
}

.mgb-bar-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	border: 1px solid rgba(var(--bs-primary-rgb, 78, 156, 255), .35);
	border-radius: 20px;
	background: var(--bs-body-bg, #fff);
	color: var(--bs-primary, #4e9cff);
	font-size: .78rem;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s ease;
}

.mgb-bar-btn:hover {
	background: var(--bs-primary, #4e9cff);
	color: #fff;
}

/* 收起状态：左栏变成窄图标条 */
@media (min-width: 992px) {
	.mgb-uc-collapsed .mgb-uc-side {
		width: 76px;
		flex: 0 0 76px;
		max-width: 76px;
		transition: all .25s ease;
	}

	.mgb-uc-collapsed .mgb-uc-main {
		width: calc(100% - 76px);
		flex: 0 0 calc(100% - 76px);
		max-width: calc(100% - 76px);
		transition: all .25s ease;
	}

	.mgb-uc-collapsed .mgb-user-side .card-body {
		padding: 14px 6px;
	}

	.mgb-uc-collapsed .mgb-user-avatar img {
		width: 40px;
		height: 40px;
		border-width: 2px;
	}

	.mgb-uc-collapsed .mgb-user-name,
	.mgb-uc-collapsed .mgb-user-end,
	.mgb-uc-collapsed .mgb-user-badge span,
	.mgb-uc-collapsed .mgb-user-nav a span {
		display: none;
	}

	.mgb-uc-collapsed .mgb-user-badge {
		padding: 2px 6px;
		margin-top: 4px;
	}

	.mgb-uc-collapsed .mgb-user-nav a {
		justify-content: center;
		padding: 13px 0;
		gap: 0;
	}

	.mgb-uc-collapsed .mgb-user-nav a i {
		font-size: 16px;
	}
}

/* 会员中心里的发布页：右栏更紧凑 */
.mgb-publish-compact .mgb-side-card {
	padding: 14px;
}

.mgb-publish-compact .mgb-cover {
	height: 150px;
}

.mgb-publish-compact .mgb-title-input {
	font-size: 1.35rem;
}

.mgb-publish-compact .mgb-res-row {
	grid-template-columns: 1fr 1fr;
}

.mgb-publish-compact .mgb-res-row .mgb-res-del {
	grid-column: span 2;
	justify-self: end;
}

/* 分类层级 */
.mgb-cat-tip {
	padding: 6px 10px;
	font-size: .72rem;
	color: #9aa0a6;
}

.mgb-cat-item.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}

.mgb-cat-sub {
	color: #c4c8cf;
	font-size: .7rem;
	margin-right: 3px;
}

.mgb-cat-d0 > span {
	font-weight: 500;
}

/* 封面视频 */
.mgb-cover-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	z-index: 1;
	background: #000;
}

.mgb-cover.has-video .mgb-cover-actions {
	opacity: 0;
}

.mgb-cover.has-video:hover .mgb-cover-actions {
	opacity: 1;
	z-index: 3;
}

.mgb-cover.has-video .mgb-cover-del {
	display: block;
}

/* ===========================================================================
 * 暗色与移动端
 * ========================================================================= */

@media (prefers-color-scheme: dark) {
	.mgb-paid,
	.mgb-res-item,
	.mgb-tb-menu,
	.mgb-dialog {
		--mgb-line: rgba(255, 255, 255, .1);
	}

	.mgb-paid-hidden,
	.mgb-media-thumb {
		background: rgba(255, 255, 255, .05);
	}
}

@media (max-width: 767.98px) {
	.mgb-paid {
		padding: 14px;
	}

	.mgb-paid-actions .mgb-act {
		min-width: 0;
		flex: 1 1 100%;
	}

	.mgb-res-check-last {
		margin-left: 0;
		width: 100%;
	}

	.mgb-media-grid {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	.mgb-tb-menu {
		left: auto;
		right: 0;
	}
}

/* ===========================================================================
 * 资源状态标签（锁定/解锁都显示；没人反馈默认「资源有效」）
 * ========================================================================= */

.mgb-paid-badges {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.mgb-health {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: .74rem;
	white-space: nowrap;
	cursor: help;
}

.mgb-health-ok {
	background: rgba(34, 197, 94, .12);
	color: #15803d;
}

.mgb-health-partial {
	background: rgba(245, 158, 11, .14);
	color: #b45309;
}

.mgb-health-broken {
	background: rgba(209, 67, 67, .12);
	color: #b91c1c;
}

/* ===========================================================================
 * 收起菜单后的图标悬停提示
 * ========================================================================= */

.mgb-user-nav a[data-tip],
.mgb-user-badge[data-tip] {
	position: relative;
}

/* .mgb-user-side 有 overflow:hidden（为了卡片圆角），会把气泡裁掉，
   收起状态下必须放开 */
.mgb-uc-collapsed .mgb-user-side,
.mgb-uc-collapsed .mgb-user-side .card-body,
.mgb-uc-collapsed .mgb-user-nav,
.mgb-uc-collapsed .mgb-user-nav li {
	overflow: visible;
}

.mgb-user-nav a[data-tip]::after,
.mgb-user-badge[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) scale(.92);
	z-index: 70;
	padding: 5px 11px;
	border-radius: 7px;
	background: #2c3038;
	color: #fff;
	font-size: .76rem;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.mgb-user-nav a[data-tip]::before,
.mgb-user-badge[data-tip]::before {
	content: "";
	position: absolute;
	left: calc(100% + 4px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 71;
	border: 5px solid transparent;
	border-right-color: #2c3038;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.mgb-user-nav a[data-tip]:hover::after,
.mgb-user-badge[data-tip]:hover::after {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.mgb-user-nav a[data-tip]:hover::before,
.mgb-user-badge[data-tip]:hover::before {
	opacity: 1;
}

/* 窄屏时侧栏本来就是展开的，不需要提示 */
@media (max-width: 991.98px) {
	.mgb-user-nav a[data-tip]::after,
	.mgb-user-nav a[data-tip]::before,
	.mgb-user-badge[data-tip]::after,
	.mgb-user-badge[data-tip]::before {
		display: none;
	}
}

/* ===========================================================================
 * 未登录时的会员组占位
 * ========================================================================= */

.mgb-groups-blur {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
	filter: blur(2px);
	opacity: .6;
	user-select: none;
}

.mgb-groups-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 18px;
	border-radius: 20px;
	font-size: .85rem;
	background: color-mix(in srgb, var(--mgb-color, #4e9cff) 14%, transparent);
	color: var(--mgb-color, #4e9cff);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.mgb-groups-chip {
		background: rgba(78, 156, 255, .14);
	}
}

/* ===========================================================================
 * 通用输入弹窗
 * ========================================================================= */

.mgb-prompt-field select.mgb-dialog-input {
	height: 40px;
}

#mgb-prompt-mask .mgb-dialog {
	max-width: 420px;
}

/* ===========================================================================
 * 后台：失效资源统计
 * ========================================================================= */

.mgb-admin .mgb-row-warn > td {
	background: #fff8f8;
}

.mgb-admin .mgb-voters-row > td {
	background: #fafafa;
}

.mgb-admin .mgb-voters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 0;
}

.mgb-admin .mgb-voter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid #e3e5e8;
	border-radius: 20px;
	background: #fff;
	font-size: 12px;
}

.mgb-admin .mgb-voter.is-bad {
	border-color: #f3c2c2;
	background: #fff5f5;
}

.mgb-admin .mgb-voter.is-ok {
	border-color: #c6ebd1;
	background: #f3fbf5;
}

.mgb-admin .mgb-voter .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.mgb-admin .mgb-voter.is-bad .dashicons {
	color: #b32d2e;
}

.mgb-admin .mgb-voter.is-ok .dashicons {
	color: #007017;
}

.mgb-admin .mgb-voter small {
	color: #787c82;
}

.mgb-admin .mgb-voter-ip {
	font-family: Consolas, Monaco, monospace;
}

.mgb-admin .mgb-voter a {
	color: #b32d2e;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	margin-left: 2px;
}

/* ===========================================================================
 * 会员中心视觉层次
 *
 * 原来的卡片边框是 rgba(39,39,39,.08)，在浅灰背景上几乎看不见，
 * 整页像是糊在一起。这里统一加深边框、加强阴影，并给左侧菜单
 * 更清晰的分隔线与选中态。
 * ========================================================================= */

.mgb-user-center {
	--mgb-line: rgba(39, 39, 39, .13);
	--mgb-line-soft: rgba(39, 39, 39, .08);
	/*
	 * 会员中心单独用这支蓝，不跟主题的 --bs-primary（本站是紫色）。
	 * 直接在作用域里改写 --bs-primary / --bs-primary-rgb，
	 * 这样菜单选中态、徽章、图标、按钮一次性全跟过来，不用一条条覆盖。
	 * 会员组卡片有自己的 --mgb-color（每个档位单独配色），不受影响。
	 */
	--bs-primary: #8b3dff;
	--bs-primary-rgb: 139, 61, 255;
}

.mgb-user-center .mgb-box {
	/* 用统一的卡片描边（跟随主题「边框风格」设置），
	   之前这里写死 1px 浅色，把 .mgb-box 的描边盖掉了，看起来几乎没有边 */
	border: var(--mgb-border);
	box-shadow: 0 2px 8px rgba(23, 37, 63, .06), 0 10px 28px rgba(23, 37, 63, .05);
	border-radius: 14px;
}

.mgb-user-center .mgb-box-title {
	font-size: 1rem;
	font-weight: 600;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--mgb-line);
	display: flex;
	align-items: center;
	gap: 7px;
}

.mgb-user-center .mgb-box-title i {
	color: var(--bs-primary, #4e9cff);
}

/* ---------- 左侧卡片 ---------- */
.mgb-user-side {
	border: var(--mgb-border);
}

.mgb-user-side .card-body {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--mgb-line);
	background: linear-gradient(180deg, rgba(var(--bs-primary-rgb, 78, 156, 255), .05), transparent);
}

.mgb-user-name {
	font-size: 1rem;
}

/* ---------- 菜单 ---------- */
.mgb-user-nav {
	border-top: 0;
	padding: 6px 0;
}

.mgb-user-nav li + li {
	border-top: 1px solid var(--mgb-line-soft);
}

.mgb-user-nav a {
	padding: 13px 20px;
	font-size: .9rem;
	color: #4b5563;
	font-weight: 500;
	border-left: 3px solid transparent;
}

.mgb-user-nav a i {
	width: 20px;
	font-size: 15px;
	color: #9aa3b0;
	transition: color .2s ease;
}

.mgb-user-nav a:hover {
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .06);
	color: var(--bs-primary, #4e9cff);
}

.mgb-user-nav a:hover i {
	color: var(--bs-primary, #4e9cff);
}

.mgb-user-nav a.active {
	background: rgba(var(--bs-primary-rgb, 78, 156, 255), .1);
	border-left-color: var(--bs-primary, #4e9cff);
	color: var(--bs-primary, #4e9cff);
	font-weight: 600;
}

.mgb-user-nav a.active i {
	color: var(--bs-primary, #4e9cff);
}

.mgb-user-nav .mgb-logout {
	color: #94a3b8;
}

.mgb-user-nav .mgb-logout:hover {
	background: rgba(209, 67, 67, .07);
	color: #d14343;
}

.mgb-user-nav .mgb-logout:hover i {
	color: #d14343;
}

/* ---------- 数据格 / 表格 ---------- */
.mgb-user-center .mgb-stat-cell {
	background: rgba(39, 39, 39, .035);
	border: 1px solid var(--mgb-line-soft);
}

.mgb-user-center .mgb-table thead th {
	border-bottom: 2px solid var(--mgb-line);
	color: #64748b;
	font-weight: 600;
}

.mgb-user-center .mgb-table tbody td {
	border-bottom: 1px solid var(--mgb-line-soft);
}

.mgb-user-center .mgb-post-row {
	border-bottom: 1px solid var(--mgb-line-soft);
}

/* 表单 */
.mgb-user-center .mgb-form .form-control,
.mgb-user-center .mgb-form .form-select {
	border-color: var(--mgb-line);
}

.mgb-user-center .mgb-form .form-label {
	color: #475569;
	font-weight: 600;
}

/* 积分页 */
.mgb-user-center .mgb-points-head {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--mgb-line);
	margin-bottom: 4px;
}

@media (prefers-color-scheme: dark) {
	.mgb-user-center {
		--mgb-line: rgba(255, 255, 255, .14);
		--mgb-line-soft: rgba(255, 255, 255, .08);
	}

	.mgb-user-nav a {
		color: #cbd5e1;
	}

	.mgb-user-center .mgb-stat-cell {
		background: rgba(255, 255, 255, .05);
	}
}

[data-bs-theme="dark"] .mgb-user-center {
	--mgb-line: rgba(255, 255, 255, .14);
	--mgb-line-soft: rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------------------
 * 会员中心：左右两栏顶部齐平
 *
 * 两次翻车记录，别再改回去：
 *  1. 给左栏加 position:sticky —— 一滚动左卡片就钉在 top 处、右栏继续上移，
 *     看起来「左边比右边低一大截」。
 *  2. 让左卡片拉伸到和右栏等高 —— Bootstrap 的 .card-body 自带 flex:1 1 auto，
 *     多出来的高度全被头像区吃掉，菜单被压到卡片最底部，中间空一大片。
 *
 * 正解是什么都别做：Bootstrap 的 row 默认 align-items:stretch 拉伸的是「列」，
 * 列里的卡片是普通块级元素，自然高度、贴着列顶部 —— 顶部本来就是齐的。
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.mgb-user-side {
		position: static;
		max-height: none;
	}
}

/* 发布页顶部那条提示栏不要把右栏内容顶下去 */
.mgb-publish-bar {
	margin-top: 0;
}

.mgb-uc-main > .card:first-child,
.mgb-uc-main > .mgb-wrap > .row > div > .card:first-child {
	margin-top: 0;
}