:root {
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-page: #ffffff;
	--bg-page-hero: radial-gradient(circle at 50% 0%, #f0f8f1, #E6F4EA 80%);
	--text-primary: #2d3748;
	--text-secondary: #718096;
	--text-on-theme: #ffffff;
	--theme-green: #34A853;
	--theme-green-dark: #2b7a4b;
	--theme-green-light-bg: #E6F4EA;
	--border-primary: #e2e8f0;
	--border-theme: #34A853;
	--shadow-color-light: rgba(0,0,0,0.08);
	--shadow-color-medium: rgba(0,0,0,0.12);
	--shadow-theme: rgba(52, 168, 83, 0.3);
	--shadow-theme-hover: rgba(52, 168, 83, 0.4);
	--shadow-theme-heavy: rgba(52, 168, 83, 0.5);
	--radio-border: #adb5bd;
	--btn-disabled-bg: #969696;
	--alert-bg: #ef4444;
	--alert-shadow: rgba(239, 68, 68, 0.4);
	--quick-nav-bg: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] {
	--bg-primary: #1A202C;
	--bg-secondary: #2D3748;
	--bg-page: #1A202C;
	--bg-page-hero: radial-gradient(circle at 50% 0%, #2D3748, #12161F 80%);
	--text-primary: #E2E8F0;
	--text-secondary: #A0AEC0;
	--text-on-theme: #ffffff;
	--theme-green: #38A169;
	--theme-green-dark: #C6F6D5;
	--theme-green-light-bg: #2D3748;
	--border-primary: #4A5568;
	--border-theme: #38A169;
	--shadow-color-light: rgba(0,0,0,0.2);
	--shadow-color-medium: rgba(0,0,0,0.3);
	--shadow-theme: rgba(56, 161, 105, 0.4);
	--shadow-theme-hover: rgba(56, 161, 105, 0.5);
	--shadow-theme-heavy: rgba(56, 161, 105, 0.6);
	--radio-border: #718096;
	--btn-disabled-bg: #718096;
	--alert-bg: #ef4444;
	--alert-shadow: rgba(239, 68, 68, 0.4);
	--quick-nav-bg: rgba(45, 55, 72, 0.95);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
	line-height: 1.6;
	color: var(--text-primary);
	background: var(--bg-page);
	overflow-x: hidden;
	transition: background 0.3s ease, color 0.3s ease;
}

.hero {
	background: var(--bg-page-hero);
	color: var(--text-primary);
	padding: 80px 20px 120px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: background 0.3s ease;
}

.hero-logo {
	width: 120px;
	height: 120px;
	margin: 0 auto 15px;
	display: block;
	animation: fadeInUp 0.8s ease;
}

.hero h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 20px;
	position: relative;
	z-index: 1;
	animation: fadeInUp 0.8s ease 0.2s backwards;
	color: var(--theme-green);
}

.hero p {
	font-size: 1.3rem;
	color: var(--text-secondary);
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
	animation: fadeInUp 0.8s ease 0.4s backwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.features {
	padding: 80px 20px;
	background: var(--bg-secondary);
	transition: background 0.3s ease;
}

.features h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 60px;
	color: var(--text-primary);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	margin-bottom: 60px;
}

.feature-card {
	background: var(--bg-primary);
	padding: 40px;
	border-radius: 16px;
	box-shadow: 0 4px 20px var(--shadow-color-light);
	transition: all 0.3s ease;
	animation: fadeIn 0.6s ease;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 40px var(--shadow-color-medium);
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

.feature-icon {
	width: 60px;
	height: 60px;
	background: var(--theme-green);
	color: var(--text-on-theme);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	font-size: 28px;
}

.feature-card h3 {
	font-size: 1.4rem;
	margin-bottom: 12px;
	color: var(--text-primary);
}

.feature-card p {
	color: var(--text-secondary);
	line-height: 1.8;
}

.screenshots {
	padding: 80px 20px;
	background: var(--bg-primary);
	transition: background 0.3s ease;
}

.screenshots h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--text-primary);
}

.screenshots-subtitle {
	text-align: center;
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 50px;
}

.screenshot-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.screenshot-item {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 30px var(--shadow-color-medium);
	transition: transform 0.3s ease;
	background: var(--bg-primary);
	width: 100%;
	max-width: 800px;
	text-align: center;
	padding: 20px;
}

.screenshot-item:hover {
	transform: scale(1.03);
}

.screenshot-item img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	cursor: pointer;
}

.screenshot-caption {
	margin-top: 20px;
	font-size: 1.1rem;
	color: var(--text-secondary);
	line-height: 1.7;
}

.pricing {
	padding: 80px 20px;
	background: var(--bg-secondary);
	color: var(--text-primary);
	transition: background 0.3s ease;
}

.pricing h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--text-primary);
}

.pricing-subtitle {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 50px;
	color: var(--text-secondary);
}

.original-price {
	text-align: center;
	font-size: 1.1rem;
	margin-bottom: 40px;
	color: var(--text-secondary);
}

.original-price span {
	text-decoration: line-through;
	font-size: 1.3rem;
	margin: 0 10px;
}

.pricing-grid {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	gap: 20px;
}

.pricing-option {
	background: var(--bg-primary);
	border: 2px solid var(--border-primary);
	border-radius: 16px;
	padding: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 20px;
}

.pricing-option:hover {
	border-color: var(--border-theme);
	transform: translateY(-5px);
}

.pricing-option.selected {
	background: var(--theme-green-light-bg);
	border-color: var(--border-theme);
	box-shadow: 0 8px 30px var(--shadow-theme);
}

.radio-circle {
	width: 24px;
	height: 24px;
	border: 2px solid var(--radio-border);
	border-radius: 50%;
	position: relative;
	transition: all 0.3s ease;
}

.pricing-option.selected .radio-circle {
	border-color: var(--border-theme);
}

.pricing-option.selected .radio-circle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	background: var(--border-theme);
	border-radius: 50%;
}

.pricing-info {
	display: flex;
	flex-direction: column;
}

.pricing-period {
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 5px;
}

.pricing-note {
	font-size: 0.9rem;
	opacity: 0.8;
	color: var(--text-secondary);
}

.pricing-amount {
	font-size: 2rem;
	font-weight: 700;
	color: var(--theme-green);
}

.popular-badge {
	background: var(--theme-green-light-bg);
	color: var(--theme-green-dark);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-left: 10px;
}

.subscribe-btn {
	display: block;
	max-width: 500px;
	margin: 50px auto 0;
	padding: 20px 60px;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-on-theme);
	background: var(--theme-green);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 30px var(--shadow-theme);
}

.subscribe-btn:hover:not(:disabled) {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px var(--shadow-theme-hover);
}

.subscribe-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--btn-disabled-bg);
	box-shadow: none;
}

.referral {
	padding: 80px 20px;
	background: var(--bg-primary);
	transition: background 0.3s ease;
}

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

.referral h2 {
	font-size: 2.5rem;
	margin-bottom: 40px;
	color: var(--theme-green);
}

.referral-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin-bottom: 50px;
}

.benefit-card {
	background: var(--bg-secondary);
	padding: 40px 30px;
	border-radius: 16px;
	box-shadow: 0 4px 20px var(--shadow-color-light);
	transition: background 0.3s ease;
}

.benefit-icon {
	font-size: 3rem;
	margin-bottom: 20px;
	color: var(--theme-green);
}

.benefit-card h3 {
	font-size: 1.3rem;
	margin-bottom: 10px;
	color: var(--text-primary);
}

.benefit-card p {
	color: var(--text-secondary);
	font-size: 1.1rem;
	line-height: 1.8;
}

.download-btn {
	display: inline-block;
	padding: 20px 60px;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--text-on-theme);
	background: var(--theme-green);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 30px var(--shadow-theme);
	text-decoration: none;
}

.download-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px var(--shadow-theme-heavy);
}

/* New Download Section Styles */
.download {
	padding: 80px 20px;
	/* [修改] 遵循交错样式 */
	background: var(--bg-secondary); 
	text-align: center;
	transition: background 0.3s ease;
}

.download-content {
	max-width: 800px;
	margin: 0 auto;
}

.download h2 {
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--theme-green);
}

.download p {
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 40px;
	line-height: 1.7;
}
/* End New Download Section Styles */


.alert {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--alert-bg);
	color: white;
	padding: 15px 30px;
	border-radius: 8px;
	box-shadow: 0 4px 20px var(--alert-shadow);
	z-index: 1000;
	display: none;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translate(-50%, -20px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.alert.show {
	display: block;
}

.quick-nav {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background: var(--quick-nav-bg);
	border-radius: 10px;
	box-shadow: 0 4px 15px var(--shadow-color-medium);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 999;
	border: 1px solid var(--border-primary);
	transition: all 0.3s ease;
}
.quick-nav a {
	text-decoration: none;
	color: var(--theme-green);
	font-weight: 500;
	font-size: 0.9rem;
	padding: 8px 12px;
	border-radius: 5px;
	transition: all 0.2s ease;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.quick-nav a:hover {
	background: var(--theme-green-light-bg);
	color: var(--theme-green-dark);
}
/* 快捷栏中的语言选择器样式调整 */
.quick-nav .hero-lang-selector {
    position: relative; /* 用于绝对定位 select */
    display: flex;
    align-items: center;
    gap: 5px; /* 与其他菜单项的 gap 一致 */
    padding: 8px 12px; /* 与 .quick-nav a 的 padding 一致 */
    border-radius: 5px; /* 与 .quick-nav a 的 border-radius 一致 */
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease; /* 与 .quick-nav a 的 transition 一致 */
    color: var(--theme-green); /* 新增：默认绿色文字，与其他菜单项一致 */
}

.quick-nav .hero-lang-selector:hover {
    background: var(--theme-green-light-bg); /* 与 .quick-nav a:hover 一致 */
    color: var(--theme-green-dark); /* hover 时颜色变深，与其他一致 */
}

.quick-nav .hero-lang-selector select {
    background: transparent; /* 移除默认背景 */
    border: none; /* 移除默认边框 */
    color: var(--theme-green); /* 与菜单项文字颜色一致 */
    font-weight: 500; /* 与 .quick-nav a 的 font-weight 一致 */
    font-size: 0.9rem; /* 与 .quick-nav a 的 font-size 一致 */
    appearance: none; /* 移除浏览器默认的下拉箭头 */
    cursor: pointer;
    outline: none; /* 移除焦点边框 */
    padding: 0; /* 移除额外 padding */
    margin: 0;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 隐藏显示 */
    z-index: 1; /* 确保可点击 */
}

.quick-nav .hero-lang-selector select option {
    color: var(--text-primary); /* 选项文字颜色 */
    background: var(--bg-primary); /* 选项背景 */
}

.quick-nav .hero-lang-selector span {
    z-index: 0; /* 确保在 select 下层 */
    pointer-events: none; /* 防止干扰点击 */
}
/* 1. Language selector (Quick-nav) container styles - REMOVED, now in hero */

#theme-toggle .icon-sun { display: none; }
[data-theme="dark"] #theme-toggle .icon-moon { display: none; }
[data-theme="dark"] #theme-toggle .icon-sun { display: inline-block; }
#theme-toggle .icon-moon { display: inline-block; }


.site-footer {
	text-align: center;
	padding: 40px 20px;
	background: var(--bg-primary);
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-top: 0;
	transition: background 0.3s ease, color 0.3s ease;
}

.lightbox {
	display: none;
	position: fixed;
	z-index: 2000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.3s ease;
}
.lightbox.active {
	display: flex;
}
.lightbox-content {
	max-width: 90%;
	max-height: 90vh;
	animation: zoomIn 0.3s ease;
}
.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 40px;
	color: white;
	cursor: pointer;
	transition: transform 0.2s ease;
}
.lightbox-close:hover {
	transform: scale(1.1);
}
@keyframes zoomIn {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

/* 2. 折叠导航样式 */
.quick-nav .nav-item {
	display: flex; /* 确保所有 'a' 标签都是 flex */
}
/* REMOVED .quick-nav .nav-select-container.nav-item */
.quick-nav .nav-toggle {
	justify-content: center;
	border-top: 1px solid var(--border-primary);
	margin-top: 8px;
	padding-top: 8px;
}

/* 折叠状态 */
.quick-nav.collapsed {
	padding: 10px;
	width: auto; /* 自动宽度 */
	right: 15px; /* 调整位置 */
}
.quick-nav.collapsed .nav-item {
	display: none; /* 隐藏所有项目 */
}
.quick-nav.collapsed .nav-toggle {
	border: none;
	margin: 0;
	padding: 0;
	/* 填充整个按钮区域 */
	padding: 8px 12px;
	margin: -8px -12px;
}
.quick-nav.collapsed .nav-toggle .icon-collapse {
	display: none;
}
.quick-nav.collapsed .nav-toggle .icon-expand {
	display: inline-block;
}

/* New Hero Controls Styles */
.hero-controls {
	position: absolute;
	top: 25px;
	right: 25px;
	display: flex;
	align-items: center;
	gap: 15px;
	z-index: 10;
	background: var(--bg-primary);
	padding: 8px 15px;
	border-radius: 50px;
	box-shadow: 0 4px 15px var(--shadow-color-light);
	transition: background 0.3s ease;
}

.hero-controls #theme-toggle {
	text-decoration: none;
	color: var(--text-primary);
	font-size: 1.2rem; /* Make icon bigger */
	cursor: pointer;
	padding: 5px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}
.hero-controls #theme-toggle:hover {
	background: var(--bg-secondary);
	transform: scale(1.1);
}
/* Hide text span from theme toggle in hero */
.hero-controls #theme-toggle [data-lang="navTheme"] {
	display: none;
}

.hero-controls .hero-lang-selector {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--text-primary);
	font-size: 1.2rem; /* Make icon bigger */
}
.hero-controls .hero-lang-selector select {
	background: transparent;
	color: var(--text-primary);
	border: none;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 5px 0 0;
}
.hero-controls .hero-lang-selector select:focus {
	outline: none;
}
.hero-controls .hero-lang-selector select option {
	background: var(--bg-primary);
	color: var(--text-primary);
}

.hero-controls-divider {
	width: 1px;
	height: 20px;
	background: var(--border-primary);
	transition: background 0.3s ease;
}
/* End Hero Controls Styles */


@media (max-width: 768px) {
	.hero h1 {
		font-size: 2rem;
	}

	.hero p {
		font-size: 1.1rem;
	}

	.features h2, .screenshots h2, .pricing h2, .referral h2, .download h2, .faq-board h2 {
		font-size: 2rem;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}

	.pricing-option {
		grid-template-columns: 30px 1fr;
		gap: 15px;
	}

	.pricing-amount {
		grid-column: 2;
		text-align: left;
		margin-top: 10px;
	}

	.subscribe-btn, .download-btn {
		font-size: 1.2rem;
		padding: 15px 40px;
	}

	/* Responsive Hero Controls */
	.hero-controls {
		padding: 5px 10px;
		gap: 10px;
		top: 15px;
		right: 15px;
	}
	.hero-controls #theme-toggle,
	.hero-controls .hero-lang-selector {
		font-size: 1.1rem;
	}
	.hero-controls .hero-lang-selector select {
		font-size: 0.85rem;
	}
	
	/* [新增] 响应式昵称输入框 */
	.faq-submit-form .faq-form-row {
		grid-template-columns: 1fr;
	}
}

/* --- FAQ Board Styles --- */
.faq-board {
	padding: 80px 20px;
	background: var(--bg-primary); /* [修改] 遵循交错样式 */
	transition: background 0.3s ease;
}
.faq-board h2 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--text-primary);
}
.faq-board-subtitle {
	text-align: center;
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 50px;
}

#faq-message-board-container {
	max-width: 900px;
	margin: 0 auto;
}

.faq-loading {
	text-align: center;
	font-size: 1.2rem;
	color: var(--text-secondary);
	padding: 40px;
}

.faq-search-bar {
	margin-bottom: 30px;
	display: flex;
	gap: 10px;
	max-width: 720px;
	margin: 0 auto 40px;
}
.faq-search-bar input {
	flex-grow: 1;
	padding: 15px 20px;
	border-radius: 12px;
	border: 2px solid var(--border-primary);
	font-size: 1rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	transition: all 0.3s ease;
	min-width: 0; 
}
.faq-search-bar input:focus {
	outline: none;
	border-color: var(--border-theme);
	box-shadow: 0 0 0 3px var(--shadow-theme);
}
.faq-search-bar button {
	padding: 0 25px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-on-theme);
	background: var(--theme-green);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.faq-search-bar button:hover {
	opacity: 0.85;
}

.faq-submit-form {
	background: var(--bg-primary);
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 4px 20px var(--shadow-color-light);
	margin-bottom: 40px;
}
.faq-submit-form h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
	text-align: center;
}
.faq-submit-form textarea {
	width: 100%;
	min-height: 120px;
	padding: 15px;
	border-radius: 12px;
	border: 2px solid var(--border-primary);
	font-size: 1rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: inherit;
	resize: vertical;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}
.faq-submit-form textarea:focus {
	outline: none;
	border-color: var(--border-theme);
}
.faq-submit-form button {
	display: block;
	width: 100%;
	padding: 15px;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-on-theme);
	background: var(--theme-green);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.faq-submit-form button:hover:not(:disabled) {
	opacity: 0.85;
}
 .faq-submit-form button:disabled {
	background: var(--btn-disabled-bg);
	cursor: not-allowed;
 }
.faq-message {
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-top: 15px;
	text-align: center;
	display: none; /* Hidden by default */
}
.faq-message.show {
	display: block;
}
.faq-message.success {
	color: var(--theme-green);
}
.faq-message.error {
	color: var(--alert-bg);
}

.faq-list-container {
	margin-top: 30px;
}
.faq-list-container h3 {
	font-size: 1.5rem;
	margin-bottom: 20px;
	color: var(--theme-green-dark);
	border-bottom: 2px solid var(--theme-green-light-bg);
	padding-bottom: 10px;
}

.faq-item {
	background: var(--bg-primary);
	border-radius: 12px;
	border: 1px solid var(--border-primary);
	margin-bottom: 20px;
	overflow: hidden;
	box-shadow: 0 4px 10px var(--shadow-color-light);
	transition: all 0.3s ease;
}
.faq-item.is-pinned {
	border-left: 5px solid var(--border-theme);
}

.faq-item-header {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}
.faq-item-header:hover {
	background: var(--theme-green-light-bg);
}

.faq-item-question {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	padding-right: 15px; /* 防止文字和图标重叠 */
	width: 100%; /* 确保昵称布局生效 */
}

.faq-item-toggle {
	font-size: 1.5rem;
	color: var(--theme-green);
	transition: transform 0.3s ease;
	flex-shrink: 0; /* 防止图标被压缩 */
}

.faq-item-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}
.faq-item.open .faq-item-body {
	/* max-height will be set by JS dynamically */
}
.faq-item.open .faq-item-toggle {
	transform: rotate(45deg);
}

.faq-item-content {
	padding: 0 20px 20px 20px;
}

.faq-admin-reply {
	background: var(--theme-green-light-bg);
	border-radius: 8px;
	padding: 15px;
	margin-top: 15px;
	border-left: 4px solid var(--theme-green);
}
.faq-admin-reply-header {
	font-weight: 700;
	color: var(--theme-green-dark);
	margin-bottom: 5px;
}
.faq-admin-reply p {
	color: var(--text-primary);
	line-height: 1.7;
	white-space: pre-wrap; /* Preserve line breaks */
	word-break: break-word; /* 保证长单词换行 */
}

.faq-item-question-content p {
	 white-space: pre-wrap;
	 word-break: break-word;
}

.faq-user-replies {
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px dashed var(--border-primary);
}
.faq-user-replies h5 {
	font-size: 1rem;
	color: var(--text-secondary);
	margin-bottom: 10px;
}
.faq-user-reply {
	font-size: 0.95rem;
	color: var(--text-secondary);
	padding: 10px;
	background: var(--bg-secondary);
	border-radius: 6px;
	margin-bottom: 8px;
	white-space: pre-wrap;
	word-break: break-word;
}
.faq-user-reply:last-child {
	margin-bottom: 0;
}

.faq-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 40px;
}
.faq-pagination button {
	padding: 10px 15px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--theme-green);
	background: var(--bg-primary);
	border: 2px solid var(--border-primary);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.faq-pagination button:hover:not(:disabled) {
	background: var(--theme-green-light-bg);
	border-color: var(--theme-green);
}
.faq-pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.faq-pagination span {
	font-size: 1rem;
	color: var(--text-secondary);
	padding: 0 10px;
}
.faq-no-results {
	text-align: center;
	font-size: 1.1rem;
	color: var(--text-secondary);
	padding: 30px 0;
}
/* --- End FAQ Board Styles --- */

/* --- [新增] Admin Login Modal Styles --- */
.admin-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: none; /* 默认隐藏 */
	justify-content: center;
	align-items: center;
	z-index: 3000;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.admin-modal-overlay.show {
	display: flex;
	opacity: 1;
}
.admin-modal-content {
	background: var(--bg-primary);
	padding: 40px;
	border-radius: 16px;
	box-shadow: 0 10px 40px var(--shadow-color-medium);
	width: 90%;
	max-width: 400px;
	transform: scale(0.9);
	transition: transform 0.3s ease;
}
.admin-modal-overlay.show .admin-modal-content {
	transform: scale(1);
}
.admin-modal-content h3 {
	font-size: 1.8rem;
	margin-bottom: 25px;
	text-align: center;
	color: var(--theme-green);
}
.admin-modal-form-group {
	margin-bottom: 20px;
}
.admin-modal-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--text-secondary);
}
.admin-modal-form-group input {
	width: 100%;
	padding: 12px 15px;
	border-radius: 10px;
	border: 2px solid var(--border-primary);
	font-size: 1rem;
	background: var(--bg-secondary);
	color: var(--text-primary);
	transition: all 0.3s ease;
}
.admin-modal-form-group input:focus {
	outline: none;
	border-color: var(--border-theme);
}
.admin-modal-buttons {
	display: flex;
	gap: 15px;
	margin-top: 25px;
}
.admin-modal-buttons button {
	flex: 1;
	padding: 12px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
}
.admin-modal-buttons .admin-login-btn {
	background: var(--theme-green);
	color: var(--text-on-theme);
}
.admin-modal-buttons .admin-login-btn:hover {
	opacity: 0.85;
}
.admin-modal-buttons .admin-cancel-btn {
	background: var(--bg-secondary);
	color: var(--text-secondary);
}
.admin-modal-buttons .admin-cancel-btn:hover {
	opacity: 0.8;
}
.admin-modal-error {
	text-align: center;
	color: var(--alert-bg);
	font-size: 0.9rem;
	margin-top: 15px;
	display: none; /* 默认隐藏 */
}
/* --- End Admin Modal Styles --- */

/* --- [新增] Nickname Input Styles --- */
.faq-submit-form .faq-form-row {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-columns: 1fr; /* 响应式修改后，默认为1列 */
	gap: 15px;
	margin-bottom: 15px;
}

/* 仅在 larger screens (e.g., > 480px) 上并排 */
@media (min-width: 480px) {
	 .faq-submit-form .faq-form-row {
		 grid-template-columns: 1fr; /* 保持1列，或改为 1fr 1fr */
	 }
	 /* 如果希望昵称行在桌面端也保持单列 */
	 .faq-submit-form .faq-form-row:first-of-type {
		 grid-template-columns: 1fr;
	 }
}

/* 强制 textarea 始终占满整行 */
.faq-submit-form .faq-form-full {
	grid-column: 1 / -1;
}

.faq-submit-form input[type="text"] {
	width: 100%;
	padding: 15px;
	border-radius: 12px;
	border: 2px solid var(--border-primary);
	font-size: 1rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: inherit;
	transition: all 0.3s ease;
}
.faq-submit-form input[type="text"]:focus {
	outline: none;
	border-color: var(--border-theme);
}

.faq-item-nickname {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 5px;
}
.faq-item-nickname span {
	font-weight: 400;
	color: var(--text-secondary);
	font-size: 0.9rem;
}
.faq-item-question-content {
	padding-left: 10px;
	border-left: 3px solid var(--border-primary);
}
.faq-item.is-pinned .faq-item-question-content {
	border-left-color: var(--theme-green-light-bg);
}

/* --- [新增] Admin Controls Styles --- */
.faq-admin-bar {
	background: var(--bg-secondary);
	padding: 15px 20px;
	border-radius: 12px;
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4px 10px var(--shadow-color-light);
}
.faq-admin-bar span {
	font-weight: 600;
	color: var(--theme-green);
}
.faq-admin-bar .admin-logout-btn {
	padding: 8px 15px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-on-theme);
	background: var(--alert-bg);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.faq-admin-bar .admin-logout-btn:hover {
	opacity: 0.8;
}

.faq-item-admin-controls {
	padding: 15px 20px;
	background: var(--theme-green-light-bg);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border-top: 1px solid var(--border-primary);
}
.faq-item-admin-controls button, .faq-item-admin-controls span {
	padding: 8px 12px;
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex; /* 确保 span 和 button 表现一致 */
	align-items: center;
}
.faq-admin-btn-approve {
	background: var(--theme-green);
	color: var(--text-on-theme);
}
.faq-admin-btn-approve:hover { opacity: 0.8; }

.faq-admin-btn-reject, .faq-admin-btn-delete, .faq-admin-btn-unpin {
	background: #ef4444;
	color: white;
}
.faq-admin-btn-reject:hover, .faq-admin-btn-delete:hover, .faq-admin-btn-unpin:hover { opacity: 0.8; }

.faq-admin-btn-reply, .faq-admin-btn-pin {
	background: #3b82f6; /* Blue */
	color: white;
}
.faq-admin-btn-reply:hover, .faq-admin-btn-pin:hover { opacity: 0.8; }

.faq-admin-btn-pending, .faq-admin-btn-rejected {
	background: #eab308; /* Yellow */
	color: white;
	cursor: not-allowed;
}
.faq-admin-btn-rejected {
	background: #718096; /* Gray */
}

.faq-item-admin-reply-form {
	padding: 15px 20px;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border-primary);
}
.faq-item-admin-reply-form textarea {
	width: 100%;
	min-height: 80px;
	padding: 10px;
	border-radius: 8px;
	border: 2px solid var(--border-primary);
	font-size: 0.95rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: inherit;
	resize: vertical;
	margin-bottom: 10px;
}
.faq-item-admin-reply-form textarea:focus {
	outline: none;
	border-color: var(--border-theme);
}
.faq-item-admin-reply-form div {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.faq-item-admin-reply-form button {
	 padding: 8px 12px;
	font-size: 0.9rem;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.faq-admin-reply-save {
	background: var(--theme-green);
	color: var(--text-on-theme);
}
.faq-admin-reply-cancel {
	background: var(--bg-primary);
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
}

/* --- Contact Section --- */
.contact {
    padding: 80px 20px;
    background: var(--bg-secondary);
    text-align: center;
    transition: background 0.3s ease;
}

.contact h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--theme-green);
}

.contact-qr {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--shadow-color-light);
}

.contact-tip {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-top: 10px;
}

.contact-email-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.contact-email {
    font-size: 1.2rem;
    color: var(--theme-green);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

.contact-email:hover {
    color: var(--theme-green-dark);
    transform: scale(1.05);
}

.copy-btn {
    background: var(--theme-green);
    color: var(--text-on-theme);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    background: var(--theme-green-dark);
    transform: scale(1.05);
}
/* --- End Contact Section --- */

/* --- [新增] Web 认证弹窗样式 --- */
.auth-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex; /* 改为 flex 以便居中 */
	justify-content: center;
	align-items: center;
	z-index: 3000;
	opacity: 0;
    transition: opacity 0.3s ease;
    visibility: hidden;
}
.auth-modal-overlay.show {
	opacity: 1;
    visibility: visible;
}

.auth-modal-content {
	background: var(--bg-primary);
	padding: 30px 40px;
	border-radius: 16px;
	box-shadow: 0 10px 40px var(--shadow-color-medium);
	width: 90%;
	max-width: 420px;
	transform: scale(0.9);
	transition: transform 0.3s ease;
    position: relative;
}
.auth-modal-overlay.show .auth-modal-content {
	transform: scale(1);
}

.auth-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.auth-modal-close:hover {
    transform: scale(1.1);
}

.auth-modal-content h3 {
	font-size: 1.8rem;
	margin-bottom: 20px;
	text-align: center;
	color: var(--theme-green);
}

.auth-modal-register-prompt {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}
.auth-modal-register-prompt a {
    color: var(--theme-green);
    text-decoration: none;
    font-weight: 600;
}
.auth-modal-register-prompt a:hover {
    text-decoration: underline;
}

.auth-form-group {
	margin-bottom: 20px;
}
.auth-form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--text-primary);
    font-size: 0.95rem;
}
.auth-form-group input {
	width: 100%;
	padding: 14px 16px;
	border-radius: 10px;
	border: 2px solid var(--border-primary);
	font-size: 1rem;
	background: var(--bg-primary);
	color: var(--text-primary);
	transition: all 0.3s ease;
    font-family: inherit;
}
.auth-form-group input:focus {
	outline: none;
	border-color: var(--border-theme);
    box-shadow: 0 0 0 3px var(--shadow-theme);
}

/* 复用 .alert 样式，但用于弹窗内 */
.auth-modal-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
}
.auth-alert-error {
    background: var(--alert-bg); /* 复用 index-style.css 的 --alert-bg */
    color: white;
    box-shadow: 0 4px 15px var(--alert-shadow);
}
.auth-alert-success {
    background: var(--theme-green); /* 成功时用主题绿 */
    color: white;
}
/* --- Web 认证弹窗样式结束 --- */

/* 1. 为昵称输入框创建一个相对定位的容器 */
.faq-nickname-container {
    position: relative;
    width: 100%;
}

/* 2. 让昵称输入框为按钮腾出空间 */
/* 我们使用 !important 确保覆盖 .faq-submit-form input[type="text"] 的通用 padding */
.faq-submit-form #faq-submit-nickname {
    padding: 10px; /* 设置与其他输入框一致的默认 padding */
}

/* 3. “填入我的账号”按钮的样式 */
#faq-use-my-name-btn {
    position: absolute;
    right: 8px; /* 按钮距右侧8px */
    top: 50%;
    transform: translateY(-50%);
    
    /* --- 关键修复：确保按钮只占用内容宽度 --- */
    width: auto; 
    /* 移除: max-width: 100px; */ /* 允许按钮根据文字长度扩展 */
    
    /* 优雅的按钮样式 */
    background: var(--bg-secondary); /* 灰色背景 */
    color: var(--text-secondary); /* 灰色文字 */
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem; /* 小字体 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: none; /* 默认隐藏 */
    white-space: nowrap; /* 防止文字换行 */
}

#faq-use-my-name-btn:hover {
    background: var(--border-primary);
    color: var(--text-primary);
}/* --- [结束] 内嵌按钮样式 --- */

/* 【新】宽屏注册弹窗布局 */
.register-modal-wide {
    max-width: 900px !important;
    width: 95% !important;
    padding: 40px !important;
    max-height: 90vh;
    overflow-y: auto;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.register-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.register-sidebar h3 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: var(--theme-green);
}

.register-privacy-notice {
    background: var(--bg-secondary);
    border-left: 4px solid var(--theme-green);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    margin: 25px 0;
    flex-grow: 1;
}

.privacy-title {
    font-weight: 700;
    color: var(--theme-green-dark, var(--theme-green));
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.privacy-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

/* 手机端自动变单列 */
@media (max-width: 768px) {
    .register-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .register-modal-wide {
        padding: 30px 25px !important;
    }
    
    .register-sidebar h3 {
        font-size: 1.7rem;
        text-align: center;
    }
    
    .register-privacy-notice {
        order: -1;
        margin: 0 0 25px 0;
    }
}

/* 可选：让登录弹窗也稍微宽一点（保持原样即可，不强制） */
#login-modal-overlay .auth-modal-content {
    max-width: 480px;
}