/**
 * WP 用户中心 Pro - 前端样式（独立全屏 + PC/手机响应式）
 */

/* ==================== CSS Reset（仅重置结构层，不破坏内容区） ==================== */

/* 只重置 UCP 结构容器的 margin/padding，不用 * 通配符 */
.ucp-standalone,
.ucp-standalone .ucp-root,
.ucp-standalone .ucp-center-wrapper,
.ucp-standalone .ucp-topbar,
.ucp-standalone .ucp-topbar-left,
.ucp-standalone .ucp-topbar-right,
.ucp-standalone .ucp-topbar-user,
.ucp-standalone .ucp-topbar-logout,
.ucp-standalone .ucp-body,
.ucp-standalone .ucp-sidebar,
.ucp-standalone .ucp-nav,
.ucp-standalone .ucp-main,
.ucp-standalone .ucp-content-area,
.ucp-standalone .ucp-content-loading,
.ucp-standalone .ucp-auth-wrapper,
.ucp-standalone .ucp-auth-card,
.ucp-standalone .ucp-menu-group,
.ucp-standalone .ucp-submenu,
.ucp-standalone .ucp-sidebar-overlay {
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.ucp-standalone body,
body.ucp-standalone,
.ucp-root {
	margin: 0 !important;
	padding: 0 !important;
	background: #f0f2f5 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	color: #2d3748 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	overflow-x: hidden !important;
}

.ucp-standalone a {
	text-decoration: none !important;
	color: inherit;
}

.ucp-standalone input,
.ucp-standalone textarea,
.ucp-standalone select,
.ucp-standalone button {
	font-family: inherit !important;
	font-size: inherit !important;
	outline: none !important;
}

.ucp-standalone img {
	max-width: 100% !important;
	height: auto !important;
}

/* ==================== 内容区样式恢复（AJAX 加载的 WP 页面/文章内容） ==================== */

.ucp-content-area h1,
.ucp-content-area h2,
.ucp-content-area h3,
.ucp-content-area h4,
.ucp-content-area h5,
.ucp-content-area h6 {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #1a202c !important;
}

.ucp-content-area h1 { font-size: 24px !important; }
.ucp-content-area h2 { font-size: 20px !important; }
.ucp-content-area h3 { font-size: 18px !important; }
.ucp-content-area h4 { font-size: 16px !important; }
.ucp-content-area h5 { font-size: 14px !important; }
.ucp-content-area h6 { font-size: 13px !important; }

.ucp-content-area p {
	margin: 0 0 14px !important;
	padding: 0 !important;
	line-height: 1.7 !important;
	color: #4a5568 !important;
}

.ucp-content-area ul,
.ucp-content-area ol {
	margin: 0 0 14px !important;
	padding-left: 24px !important;
	line-height: 1.7 !important;
}

.ucp-content-area ul { list-style: disc !important; }
.ucp-content-area ol { list-style: decimal !important; }

.ucp-content-area li {
	margin: 0 0 6px !important;
	padding: 0 !important;
}

.ucp-content-area blockquote {
	margin: 0 0 14px !important;
	padding: 12px 20px !important;
	border-left: 4px solid var(--ucp-primary) !important;
	background: #f7fafc !important;
	color: #4a5568 !important;
	font-style: italic !important;
}

.ucp-content-area pre {
	margin: 0 0 14px !important;
	padding: 16px !important;
	background: #1a202c !important;
	color: #e2e8f0 !important;
	border-radius: 6px !important;
	overflow-x: auto !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.ucp-content-area code {
	padding: 2px 6px !important;
	background: #edf2f7 !important;
	border-radius: 4px !important;
	font-size: 13px !important;
	color: #d53f8c !important;
}

.ucp-content-area pre code {
	padding: 0 !important;
	background: none !important;
	color: inherit !important;
}

.ucp-content-area table {
	width: 100% !important;
	margin: 0 0 14px !important;
	border-collapse: collapse !important;
}

.ucp-content-area th,
.ucp-content-area td {
	padding: 10px 14px !important;
	border: 1px solid #e2e8f0 !important;
	text-align: left !important;
}

.ucp-content-area th {
	background: #f7fafc !important;
	font-weight: 700 !important;
}

.ucp-content-area img {
	margin: 0 0 14px !important;
	border-radius: 6px !important;
	max-width: 100% !important;
	height: auto !important;
}

.ucp-content-area hr {
	margin: 20px 0 !important;
	border: none !important;
	border-top: 1px solid #e2e8f0 !important;
}

.ucp-content-area a {
	color: var(--ucp-primary) !important;
	text-decoration: none !important;
}

.ucp-content-area a:hover {
	text-decoration: underline !important;
}

.ucp-content-area figure {
	margin: 0 0 14px !important;
}

.ucp-content-area figcaption {
	margin-top: 8px !important;
	font-size: 13px !important;
	color: var(--ucp-text-light) !important;
	text-align: center !important;
}

.ucp-content-area .wp-block-image,
.ucp-content-area .wp-block-button,
.ucp-content-area .wp-block-quote,
.ucp-content-area .wp-block-gallery {
	margin: 0 0 14px !important;
}

/* CSS 变量 */
:root {
	--ucp-primary: #667eea;
	--ucp-primary-dark: #5a67d8;
	--ucp-primary-light: #ebf0ff;
	--ucp-bg: #f0f2f5;
	--ucp-text: #2d3748;
	--ucp-text-light: #718096;
	--ucp-border: #e2e8f0;
	--ucp-white: #ffffff;
	--ucp-success: #48bb78;
	--ucp-error: #f56565;
	--ucp-radius: 12px;
	--ucp-radius-sm: 8px;
	--ucp-shadow: 0 2px 8px rgba(0,0,0,0.06);
	--ucp-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
	--ucp-sidebar-width: 260px;
	--ucp-topbar-height: 60px;
	--ucp-transition: 0.25s ease;
}

/* ==================== 登录/注册页 ==================== */

.ucp-auth-wrapper {
	width: 100vw !important;
	height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: linear-gradient(135deg, var(--ucp-primary) 0%, var(--ucp-primary-dark) 100%) !important;
	padding: 20px !important;
	position: relative !important;
	overflow-y: auto !important;
}

.ucp-auth-card {
	background: var(--ucp-white) !important;
	border-radius: var(--ucp-radius) !important;
	box-shadow: var(--ucp-shadow-lg) !important;
	width: 100% !important;
	max-width: 420px !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}

.ucp-auth-header {
	text-align: center !important;
	padding: 36px 30px 20px !important;
	border-bottom: 1px solid var(--ucp-border) !important;
}

.ucp-auth-title {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--ucp-text) !important;
	margin-bottom: 6px !important;
}

.ucp-auth-subtitle {
	font-size: 14px !important;
	color: var(--ucp-text-light) !important;
}

.ucp-auth-footer {
	text-align: center !important;
	padding: 20px !important;
	border-top: 1px solid var(--ucp-border) !important;
	font-size: 14px !important;
	color: var(--ucp-text-light) !important;
}

.ucp-auth-footer a {
	color: var(--ucp-primary) !important;
	font-weight: 600 !important;
}

.ucp-auth-footer a:hover {
	text-decoration: underline !important;
}

.ucp-form {
	padding: 24px 30px !important;
}

.ucp-field {
	margin-bottom: 18px !important;
}

.ucp-field label {
	display: block !important;
	margin-bottom: 6px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ucp-text) !important;
}

.ucp-input {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid var(--ucp-border) !important;
	border-radius: var(--ucp-radius-sm) !important;
	font-size: 14px !important;
	color: var(--ucp-text) !important;
	background: #fff !important;
	transition: border-color var(--ucp-transition), box-shadow var(--ucp-transition) !important;
}

.ucp-input:focus {
	border-color: var(--ucp-primary) !important;
	box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important;
}

.ucp-password-field {
	position: relative !important;
}

.ucp-toggle-pass {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: pointer !important;
	font-size: 12px !important;
	color: var(--ucp-text-light) !important;
	user-select: none !important;
	z-index: 5 !important;
}

.ucp-toggle-pass:hover {
	color: var(--ucp-primary) !important;
}

.ucp-field-inline {
	display: flex !important;
	align-items: center !important;
}

.ucp-checkbox-label {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 400 !important;
	cursor: pointer !important;
}

.ucp-btn {
	display: inline-block !important;
	padding: 10px 24px !important;
	border: none !important;
	border-radius: var(--ucp-radius-sm) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all var(--ucp-transition) !important;
	text-decoration: none !important;
	line-height: 1.5 !important;
}

.ucp-btn-primary {
	background: var(--ucp-primary) !important;
	color: var(--ucp-white) !important;
}

.ucp-btn-primary:hover {
	background: var(--ucp-primary-dark) !important;
	box-shadow: 0 4px 12px rgba(102,126,234,0.3) !important;
}

.ucp-btn-danger {
	background: var(--ucp-error) !important;
	color: var(--ucp-white) !important;
}

.ucp-btn-full {
	width: 100% !important;
	padding: 12px !important;
}

.ucp-alert {
	padding: 12px 16px !important;
	border-radius: var(--ucp-radius-sm) !important;
	font-size: 14px !important;
	margin: 0 30px 16px !important;
}

.ucp-alert-error {
	background: #fed7d7 !important;
	color: #c53030 !important;
	border-left: 4px solid var(--ucp-error) !important;
}

.ucp-alert-success {
	background: #c6f6d5 !important;
	color: #276749 !important;
	border-left: 4px solid var(--ucp-success) !important;
}

.ucp-redirect {
	padding: 40px !important;
	text-align: center !important;
	color: var(--ucp-text) !important;
}

/* ==================== 用户中心（独立全屏） ==================== */

.ucp-center-wrapper {
	display: flex !important;
	flex-direction: column !important;
	width: 100vw !important;
	height: 100vh !important;
	background: var(--ucp-bg) !important;
	overflow: hidden !important;
}

/* 顶部导航栏 */
.ucp-topbar {
	height: var(--ucp-topbar-height) !important;
	background: var(--ucp-white) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 24px !important;
	flex-shrink: 0 !important;
	z-index: 100 !important;
}

.ucp-topbar-left {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.ucp-topbar-toggle {
	cursor: pointer !important;
	padding: 8px !important;
	border-radius: 6px !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
}

.ucp-topbar-toggle:hover {
	background: var(--ucp-border) !important;
}

.ucp-topbar-toggle .dashicons {
	font-size: 24px !important;
	width: 24px !important;
	height: 24px !important;
	color: var(--ucp-text) !important;
}

.ucp-topbar-logo {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ucp-primary) !important;
	white-space: nowrap !important;
}

.ucp-topbar-right {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

.ucp-topbar-user {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 14px !important;
	color: var(--ucp-text) !important;
	white-space: nowrap !important;
}

.ucp-topbar-user .dashicons {
	color: var(--ucp-text-light) !important;
}

.ucp-topbar-logout {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	color: var(--ucp-text-light) !important;
	padding: 6px 12px !important;
	border-radius: 6px !important;
	transition: all var(--ucp-transition) !important;
	white-space: nowrap !important;
}

.ucp-topbar-logout:hover {
	background: #fed7d7 !important;
	color: var(--ucp-error) !important;
}

/* 主体区域 */
.ucp-body {
	display: flex !important;
	flex: 1 !important;
	overflow: hidden !important;
	position: relative !important;
}

/* 侧边栏 */
.ucp-sidebar {
	width: var(--ucp-sidebar-width) !important;
	background: var(--ucp-white) !important;
	border-right: 1px solid var(--ucp-border) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 12px 0 !important;
	flex-shrink: 0 !important;
	transition: transform var(--ucp-transition) !important;
	z-index: 90 !important;
}

.ucp-nav {
	margin: 0 !important;
	padding: 0 !important;
}

.ucp-menu-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	color: var(--ucp-text) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	border-left: 3px solid transparent !important;
	user-select: none !important;
}

.ucp-menu-item:hover {
	background: var(--ucp-bg) !important;
	border-left-color: var(--ucp-primary) !important;
	color: var(--ucp-primary) !important;
}

.ucp-menu-item.active {
	background: var(--ucp-primary-light) !important;
	border-left-color: var(--ucp-primary) !important;
	color: var(--ucp-primary) !important;
	font-weight: 600 !important;
}

.ucp-menu-item .dashicons {
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	color: var(--ucp-text-light) !important;
	flex-shrink: 0 !important;
}

.ucp-menu-item.active .dashicons {
	color: var(--ucp-primary) !important;
}

.ucp-menu-item img {
	width: 18px !important;
	height: 18px !important;
	border-radius: 3px !important;
}

/* 菜单文字：排除图标和箭头，避免图标被拉伸 */
.ucp-menu-item > span:not(.dashicons):not(.ucp-menu-arrow):not(.ucp-menu-icon-default):not(.ucp-menu-icon-emoji) {
	flex: 1 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* 默认图标占位 */
.ucp-menu-icon-default {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

/* emoji 图标 */
.ucp-menu-icon-emoji {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
}

/* 图片图标 */
.ucp-menu-icon-img {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	object-fit: cover !important;
}

/* 菜单分组容器 */
.ucp-menu-group {
	width: 100% !important;
}

/* 子菜单展开/收起 */
.ucp-submenu {
	overflow: hidden !important;
}

.ucp-menu-parent {
	font-weight: 600 !important;
}

.ucp-menu-arrow {
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	transition: transform var(--ucp-transition) !important;
	flex-shrink: 0 !important;
}

.ucp-menu-arrow.expanded {
	transform: rotate(180deg) !important;
}

.ucp-submenu .ucp-menu-item {
	padding-left: 48px !important;
	font-size: 13px !important;
}

/* 主内容区 */
.ucp-main {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 24px !important;
	background: var(--ucp-bg) !important;
	-webkit-overflow-scrolling: touch !important;
}

.ucp-content-area {
	background: var(--ucp-white) !important;
	border-radius: var(--ucp-radius) !important;
	box-shadow: var(--ucp-shadow) !important;
	padding: 28px !important;
	min-height: calc(100vh - var(--ucp-topbar-height) - 48px) !important;
}

.ucp-content-loading {
	display: none !important;
	text-align: center !important;
	padding: 80px 0 !important;
}

.ucp-content-loading.show {
	display: block !important;
}

.ucp-spinner {
	width: 36px !important;
	height: 36px !important;
	border: 3px solid var(--ucp-border) !important;
	border-top-color: var(--ucp-primary) !important;
	border-radius: 50% !important;
	margin: 0 auto 12px !important;
	animation: ucp-spin 0.8s linear infinite !important;
}

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

.ucp-content-loading p {
	color: var(--ucp-text-light) !important;
	font-size: 14px !important;
}

.ucp-welcome {
	text-align: center !important;
	padding: 40px 0 !important;
}

.ucp-welcome h2 {
	font-size: 22px !important;
	color: var(--ucp-text) !important;
	margin-bottom: 8px !important;
}

.ucp-welcome p {
	color: var(--ucp-text-light) !important;
	font-size: 15px !important;
}

/* 用户中心面板 */
.ucp-panel {
	max-width: 700px !important;
}

.ucp-panel-title {
	font-size: 20px !important;
	color: var(--ucp-text) !important;
	margin-bottom: 24px !important;
	padding-bottom: 12px !important;
	border-bottom: 2px solid var(--ucp-border) !important;
}

.ucp-panel-subtitle {
	font-size: 16px !important;
	color: var(--ucp-text) !important;
	margin: 28px 0 16px !important;
}

.ucp-info-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

.ucp-info-item {
	padding: 14px !important;
	background: var(--ucp-bg) !important;
	border-radius: var(--ucp-radius-sm) !important;
}

.ucp-info-item label {
	display: block !important;
	font-size: 12px !important;
	color: var(--ucp-text-light) !important;
	margin-bottom: 4px !important;
}

.ucp-info-item span {
	font-size: 15px !important;
	color: var(--ucp-text) !important;
	font-weight: 600 !important;
}

/* ==================== 响应式：手机端 ==================== */

/* 平板（≤1024px） */
@media (max-width: 1024px) {
	:root {
		--ucp-sidebar-width: 220px;
	}

	.ucp-main {
		padding: 16px !important;
	}

	.ucp-content-area {
		padding: 20px !important;
	}
}

/* 手机（≤768px） */
@media (max-width: 768px) {
	:root {
		--ucp-sidebar-width: 280px;
		--ucp-topbar-height: 54px;
	}

	/* 侧边栏变为固定定位覆盖层 */
	.ucp-sidebar {
		position: fixed !important;
		left: 0 !important;
		top: var(--ucp-topbar-height) !important;
		bottom: 0 !important;
		box-shadow: 2px 0 12px rgba(0,0,0,0.12) !important;
		transform: translateX(-100%) !important;
	}

	.ucp-sidebar.show {
		transform: translateX(0) !important;
	}

	/* 显示汉堡菜单按钮 */
	.ucp-topbar-toggle {
		display: flex !important;
	}

	/* 顶部导航栏简化 */
	.ucp-topbar {
		padding: 0 12px !important;
	}

	.ucp-topbar-logo {
		font-size: 16px !important;
	}

	.ucp-topbar-user span:not(.dashicons) {
		display: none !important;
	}

	.ucp-topbar-user .dashicons {
		font-size: 20px !important;
	}

	.ucp-topbar-logout span:not(.dashicons) {
		display: none !important;
	}

	/* 主内容区 */
	.ucp-main {
		padding: 12px !important;
	}

	.ucp-content-area {
		padding: 16px !important;
		border-radius: var(--ucp-radius-sm) !important;
	}

	/* 面板信息网格改为单列 */
	.ucp-info-grid {
		grid-template-columns: 1fr !important;
	}

	/* 登录/注册卡片适配 */
	.ucp-auth-card {
		max-width: 100% !important;
		margin: 10px !important;
	}

	.ucp-auth-wrapper {
		padding: 10px !important;
		align-items: flex-start !important;
		padding-top: 40px !important;
	}

	.ucp-form {
		padding: 20px !important;
	}

	.ucp-alert {
		margin: 0 20px 16px !important;
	}

	.ucp-panel-title {
		font-size: 18px !important;
	}

	.ucp-welcome h2 {
		font-size: 18px !important;
	}

	/* 移动端遮罩层 */
	.ucp-sidebar-overlay {
		display: none !important;
		position: fixed !important;
		top: var(--ucp-topbar-height) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		background: rgba(0,0,0,0.4) !important;
		z-index: 89 !important;
	}

	.ucp-sidebar-overlay.show {
		display: block !important;
	}
}

/* 小屏手机（≤375px） */
@media (max-width: 375px) {
	.ucp-topbar-logo {
		font-size: 14px !important;
	}

	.ucp-auth-header {
		padding: 24px 20px 16px !important;
	}

	.ucp-auth-title {
		font-size: 20px !important;
	}

	.ucp-form {
		padding: 16px !important;
	}

	.ucp-content-area {
		padding: 12px !important;
	}
}

/* 横屏手机适配 */
@media (max-width: 768px) and (orientation: landscape) {
	.ucp-auth-wrapper {
		align-items: center !important;
		padding-top: 10px !important;
	}

	.ucp-auth-card {
		max-width: 380px !important;
	}
}