:root{
	--bg:#ffffff;--fg:#0a0a0a;--muted:#6b7280;--pri:#2563eb;--pri-2:#1d4ed8;--card:#fafafa;--line:#e5e7eb;
	--radius:12px;--space:16px;--shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
	--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
}
*{box-sizing:border-box}
html,body{background:linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;margin:0;padding:0;min-height:100vh;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
nav{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:48px;padding:24px 0;border-bottom:1px solid var(--line)}
nav a{text-decoration:none;color:var(--muted);font-weight:500;transition:color 0.2s ease}
nav a:hover{color:var(--fg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;margin:24px 0;box-shadow:var(--shadow);transition:transform 0.2s ease, box-shadow 0.2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn{display:inline-block;background:var(--fg);color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;font-weight:500;transition:all 0.2s ease;font-size:16px}
.btn:hover{background:var(--muted);transform:translateY(-1px)}
.btn.secondary{background:var(--pri);color:#fff}
.btn.secondary:hover{background:var(--pri-2)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--card);border-color:var(--fg)}
input,textarea{width:100%;padding:12px 16px;margin:8px 0;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:16px;transition:border-color 0.2s ease}
input:focus,textarea:focus{outline:none;border-color:var(--pri)}
.table{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0}
.table td,.table th{border-bottom:1px solid var(--line);padding:16px 12px;text-align:left}
.table tr:nth-child(odd){background:rgba(0,0,0,.02)}
.muted{color:var(--muted);font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin:32px 0}
.card-product h3{margin:0 0 12px 0;font-size:20px;font-weight:600}
.price{font-weight:700;font-size:18px;color:var(--fg)}
.hero{border-radius:16px;background:linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);border:1px solid var(--line);padding:64px 48px;margin:48px 0;box-shadow:var(--shadow-lg);text-align:center}
.hero h1{margin:0 0 16px 0;font-size:48px;font-weight:700;line-height:1.2;color:var(--fg)}
.hero p{margin:0 0 32px 0;font-size:20px;color:var(--muted);max-width:600px;margin-left:auto;margin-right:auto}
.hero .actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--fg)}
.badge.success{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.badge.warn{background:#fef3c7;border-color:#fde68a;color:#92400e}
.badge.muted{background:#f3f4f6;border-color:#e5e7eb;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:32px 0}
.alert{padding:16px 20px;border-radius:12px;margin:16px 0;border:1px solid var(--line);font-weight:500}
.alert.success{background:#dcfce7;border-color:#bbf7d0;color:#166534}
.alert.error{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.skeleton{display:block;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:skeleton 1.4s ease infinite;border-radius:8px}
@keyframes skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 响应式 */
@media (max-width: 768px) {
	.container{padding:0 16px}
	.hero{padding:48px 24px}
	.hero h1{font-size:36px}
	.hero p{font-size:18px}
	.hero .actions{flex-direction:column;align-items:center}
	.grid{grid-template-columns:1fr;gap:16px}
	nav{gap:16px;padding:16px 0}
	
	/* 移动端标题调整 */
	h1{font-size:15px !important}
	h2{font-size:24px !important}
	
	/* 移动端功能模块调整 */
	.flex-wrap{flex-direction:column !important;gap:32px !important}
	.flex-wrap > div{order:unset !important;min-width:unset !important}
	
	/* 移动端卡片调整 */
	.card{padding:16px !important}
	.card h3{font-size:14px !important}
	.card p{font-size:11px !important}
	
	/* 移动端CTA区域调整 */
	.cta-section{margin:0 -16px !important;width:calc(100% + 32px) !important}
	.cta-section .cta-content{padding:0 24px !important}
	
	/* 移动端登录注册页面调整 */
	.auth-container{padding:20px 0 !important}
	.auth-card{padding:24px !important}
	.auth-title{font-size:28px !important}
}
/* 表单样式增强 */
input[type="email"], input[type="password"], input[type="text"], textarea, select {
	transition: all 0.2s ease;
}

input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--pri) !important;
	background: white !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

button[type="submit"]:hover {
	background: #1d4ed8 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* 登录注册页面样式 */
.auth-container {
	background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

.auth-card {
	backdrop-filter: blur(10px);
}

.auth-title {
	background: linear-gradient(135deg, var(--pri), #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* 弹窗样式 */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}

.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.modal-content {
	position: relative;
	background: white;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border: 1px solid var(--line);
	max-width: 400px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	animation: modalSlideIn 0.2s ease-out;
	will-change: transform, opacity;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 24px 0 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 24px;
}

.modal-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	color: var(--fg);
	background: linear-gradient(135deg, var(--pri), #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--muted);
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color 0.2s ease;
}

.modal-close:hover {
	color: var(--fg);
}

.modal-body {
	padding: 0 24px 24px 24px;
}

/* 移动端弹窗调整 */
@media (max-width: 768px) {
	.modal-content {
		width: 95%;
		max-height: calc(100vh - 40px);
	}
	
	.modal-header {
		padding: 20px 20px 0 20px;
	}
	
	.modal-body {
		padding: 0 20px 20px 20px;
	}
	
	.modal-title {
		font-size: 20px;
	}
}

/* 极验验证码样式 */
#geetest-captcha-loginForm,
#geetest-captcha-registerForm {
	margin: 16px 0;
	min-height: 40px;
	position: relative;
	overflow: visible;
}

.geetest_holder {
	width: 100% !important;
	position: relative !important;
}

.geetest_wind {
	border-radius: 8px !important;
	border: 2px solid var(--line) !important;
	background: white !important;
	position: relative !important;
	overflow: visible !important;
}

.geetest_btn {
	background: var(--pri) !important;
	border-radius: 6px !important;
	color: white !important;
	font-size: 14px !important;
	padding: 8px 16px !important;
	border: none !important;
	cursor: pointer !important;
	position: relative !important;
}

.geetest_btn:hover {
	background: #1d4ed8 !important;
}

/* 修复极验SVG渲染问题 */
.geetest_holder svg,
.geetest_wind svg {
	width: 100% !important;
	height: auto !important;
	position: relative !important;
}

.geetest_holder path,
.geetest_wind path {
	vector-effect: non-scaling-stroke !important;
}

/* 极验验证码加载状态 */
.geetest-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: var(--muted);
	font-size: 14px;
}

.geetest-loading::before {
	content: '';
	width: 16px;
	height: 16px;
	border: 2px solid var(--line);
	border-top: 2px solid var(--pri);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 8px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 移动端极验样式调整 */
@media (max-width: 768px) {
	.geetest_wind {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.geetest_holder {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.geetest_holder svg,
	.geetest_wind svg {
		max-width: 100% !important;
		height: auto !important;
	}
}

.alert{padding:12px 14px;border-radius:10px;margin:10px 0;border:1px solid var(--line)}
.alert.success{background:#ecffef;border-color:#ccefd1;color:#1b7a32}
.alert.error{background:#ffecec;border-color:#ffc7c7;color:#a11}
.alert.info{background:#eef7ff;border-color:#cfe5ff;color:#175a9e}
.skeleton{display:block;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:skeleton 1.4s ease infinite;border-radius:8px}
@keyframes skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 侧边栏布局样式 */
.mobile-header {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	background: white;
	border-bottom: 1px solid var(--line);
	padding: 16px 24px;
}

.mobile-header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-logo {
	font-size: 20px;
	font-weight: 700;
	color: var(--fg);
}

.mobile-menu-toggle {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.mobile-menu-toggle span {
	width: 24px;
	height: 3px;
	background: var(--fg);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.mobile-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1002;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mobile-overlay.active {
	display: block;
	opacity: 1;
}

.mobile-sidebar {
	position: fixed;
	top: 0;
	left: -280px;
	width: 280px;
	height: 100vh;
	background: white;
	z-index: 1003;
	transition: left 0.3s ease;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-sidebar.active {
	left: 0;
}

.mobile-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid var(--line);
}

.mobile-sidebar-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--fg);
}

.mobile-sidebar-close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--muted);
	cursor: pointer;
	padding: 4px;
}

.desktop-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100vh;
	background: white;
	border-right: 1px solid var(--line);
	z-index: 1000;
}

.sidebar-header {
	padding: 24px 20px;
	border-bottom: 1px solid var(--line);
}

.sidebar-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--fg);
}

.logo-icon {
	font-size: 24px;
}

.sidebar-nav,
.mobile-sidebar-nav {
	padding: 20px 0;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	color: var(--muted);
	text-decoration: none;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
}

.nav-item:hover {
	background: #f8fafc;
	color: var(--fg);
}

.nav-item.active {
	background: #f0f9ff;
	color: var(--pri);
	border-left-color: var(--pri);
}

.nav-icon {
	font-size: 18px;
	width: 20px;
	text-align: center;
}

.nav-text {
	font-weight: 500;
}

.main-content {
	margin-left: 280px;
	min-height: 100vh;
	background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}

.content-header {
	padding: 24px 32px;
	border-bottom: 1px solid var(--line);
	background: white;
}

.content-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--fg);
	margin: 0;
}

.content-body {
	padding: 32px;
}

.main-footer {
	background: #1a1a1a;
	padding: 24px 0;
	margin-top: 60px;
}

.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.footer-links {
	margin-bottom: 12px;
}

.footer-links a {
	color: #9ca3af;
	text-decoration: none;
	font-size: 14px;
	margin: 0 8px;
}

.footer-links span {
	color: #4b5563;
	margin: 0 8px;
}

.footer-text {
	color: #6b7280;
	font-size: 14px;
}

/* 侧边栏商品列表样式 */
.sidebar-content {
	padding: 20px 0;
}

.sidebar-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--fg);
	padding: 0 20px 16px 20px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 16px;
}

.products-sidebar {
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	padding: 0 12px;
}

/* 商品样式已移至 layout_sidebar.php 中，避免样式冲突 */

/* 商品详情样式 */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--muted);
}

.empty-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.empty-state h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--fg);
	margin: 0 0 8px 0;
}

.empty-state p {
	font-size: 14px;
	margin: 0;
}

.product-detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.product-detail-image {
	width: 100%;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-detail-image .no-image {
	font-size: 64px;
	color: var(--muted);
}

.product-detail-content {
	padding: 20px 0;
}

.product-detail-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--fg);
	margin: 0 0 16px 0;
}

.product-detail-description {
	font-size: 16px;
	color: var(--muted);
	line-height: 1.6;
	margin: 0 0 24px 0;
}

.product-detail-price {
	font-size: 32px;
	font-weight: 700;
	color: var(--pri);
	margin: 0 0 32px 0;
}

.product-detail-actions {
	display: flex;
	gap: 16px;
}

.btn-primary {
	background: var(--pri);
	color: white;
	padding: 12px 24px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-primary:hover {
	background: #1d4ed8;
	transform: translateY(-1px);
}

/* 下单表单样式 */
.order-form-container {
	max-width: 800px;
	margin: 0 auto;
}

.order-product-info {
	display: flex;
	gap: 20px;
	background: white;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 24px;
	border: 1px solid var(--line);
}

.order-product-image {
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.order-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.order-product-image .no-image {
	font-size: 32px;
	color: var(--muted);
}

.order-product-details {
	flex: 1;
}

.order-product-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--fg);
	margin: 0 0 8px 0;
}

.order-product-description {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 12px 0;
}

.order-product-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--pri);
	margin: 0;
}

.order-form {
	background: white;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--line);
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	font-weight: 500;
	color: var(--fg);
	margin-bottom: 8px;
	font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--line);
	border-radius: 8px;
	font-size: 16px;
	transition: border-color 0.2s ease;
	background: #fafafa;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
	outline: none;
	border-color: var(--pri);
	background: white;
}

.payment-methods {
	display: flex;
	gap: 16px;
	margin-top: 8px;
}

.payment-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 2px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 1;
}

.payment-option:hover {
	border-color: var(--pri);
	background: #f0f9ff;
}

.payment-option input[type="radio"] {
	width: auto;
	margin: 0;
}

.payment-option input[type="radio"]:checked + .payment-icon + .payment-text {
	color: var(--pri);
}

.payment-icon {
	font-size: 20px;
}

.payment-text {
	font-weight: 500;
}

.form-actions {
	margin-top: 32px;
	text-align: center;
}

.btn-large {
	padding: 16px 32px;
	font-size: 18px;
}

.order-success {
	text-align: center;
	padding: 60px 20px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--line);
}

.success-icon {
	font-size: 64px;
	margin-bottom: 20px;
}

.order-success h3 {
	font-size: 24px;
	font-weight: 600;
	color: var(--fg);
	margin: 0 0 16px 0;
}

.order-success p {
	color: var(--muted);
	margin: 0 0 8px 0;
}

.order-success p:last-of-type {
	margin-bottom: 24px;
}

/* 用户邮箱显示样式 */
.user-email-display {
	padding: 12px 16px;
	border: 2px solid var(--line);
	border-radius: 8px;
	background: #f8fafc;
	min-height: 48px;
	display: flex;
	align-items: center;
}

.user-email-info {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fg);
}

.email-icon {
	font-size: 16px;
}

.email-address {
	font-weight: 500;
	font-size: 16px;
}

.user-email-error {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #dc2626;
}

.error-icon {
	font-size: 16px;
}

.error-text {
	font-size: 14px;
}

.loading-text {
	color: var(--muted);
	font-size: 14px;
}

/* 单选和多选按钮样式 */
.radio-group,
.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

.radio-option,
.checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 2px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: #fafafa;
}

.radio-option:hover,
.checkbox-option:hover {
	border-color: var(--pri);
	background: #f0f9ff;
}

.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
	width: auto;
	margin: 0;
}

.radio-option input[type="radio"]:checked + .radio-label,
.checkbox-option input[type="checkbox"]:checked + .checkbox-label {
	color: var(--pri);
	font-weight: 500;
}

.radio-option input[type="radio"]:checked,
.checkbox-option input[type="checkbox"]:checked {
	accent-color: var(--pri);
}

.radio-label,
.checkbox-label {
	font-size: 14px;
	color: var(--fg);
	transition: all 0.2s ease;
}

/* 移动端响应式 */
@media (max-width: 768px) {
	.mobile-header {
		display: block;
	}
	
	.desktop-sidebar {
		display: none;
	}
	
	.main-content {
		margin-left: 0;
		margin-top: 80px;
	}
	
	.content-header {
		padding: 20px 24px;
	}
	
	.content-title {
		font-size: 24px;
	}
	
	.content-body {
		padding: 24px;
	}
	
	.product-detail {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	
	.product-detail-image {
		height: 200px;
	}
	
	.product-detail-title {
		font-size: 24px;
	}
	
	.product-detail-price {
		font-size: 28px;
	}
	
	.order-product-info {
		flex-direction: column;
		text-align: center;
	}
	
	.order-product-image {
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}
	
	.payment-methods {
		flex-direction: column;
	}
	
	.payment-option {
		justify-content: center;
	}
}