:root{
  --primary:#4F46E5;
  --primary-light:#6366f1;
  --primary-dark:#3730a3;
  --text:#0f172a;
  --text-light:#374151;
  --muted:#64748b;
  --bg:#ffffff;
  --bg-light:#f8fafc;
  --bg-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --border:#e2e8f0;
  --shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --mobile-nav-bg: rgba(255,255,255,.95);
  --mobile-nav-text: #1f2937;
  --mobile-nav-border: rgba(0,0,0,.08);
}

/* Dark Purple Theme Variables */
[data-theme="dark-purple"]{
  --primary:#8b5cf6;
  --primary-light:#a78bfa;
  --primary-dark:#6d28d9;
  --text:#eeeaf9;
  --text-light:#d6ccff;
  --muted:#c7bdf0;
  --bg:#1a123f;
  --bg-light:#241547;
  --bg-gradient:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --border:rgba(196,181,253,.35);
  --shadow:0 10px 30px rgba(29,22,57,.25);
  --shadow-lg:0 20px 50px rgba(29,22,57,.35);
  --mobile-nav-bg: rgba(16,12,38,.92);
  --mobile-nav-text: #cbd5e1;
  --mobile-nav-border: rgba(148,163,184,.16);
}

/* Global surfaces for dark-purple theme */
[data-theme="dark-purple"] body{background:#1d1631;color:var(--text)}
[data-theme="dark-purple"] .site-header{background:rgba(16,12,38,.9);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
[data-theme="dark-purple"] .brand{-webkit-text-fill-color:initial;color:var(--text);background:linear-gradient(90deg,#a78bfa,#60a5fa,#22d3ee);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}
[data-theme="dark-purple"] .nav a{color:var(--text)}
[data-theme="dark-purple"] .nav a:not(.btn)::after{background:var(--primary)}
[data-theme="dark-purple"] .features{background:#1d1631}
[data-theme="dark-purple"] .docs-main{background:transparent}

/* Cards and panels */
[data-theme="dark-purple"] .card{background:linear-gradient(180deg, rgba(120,86,190,.35) 0%, rgba(82,54,150,.30) 100%);border:1px solid var(--border);color:var(--text)}
[data-theme="dark-purple"] .docs-toc{background:linear-gradient(135deg, #2a1a57 0%, #22144a 100%);border:1px solid var(--border);box-shadow:var(--shadow)}
[data-theme="dark-purple"] .snippet{background:#0f172a;color:#e2e8f0;border-color:var(--border)}
[data-theme="dark-purple"] .api-table th{background:#221a44;color:var(--text);border-bottom:1px solid var(--border)}
[data-theme="dark-purple"] .api-table td{border-bottom:1px solid rgba(196,181,253,.18)}

/* Buttons */
[data-theme="dark-purple"] .btn{color:#ecebff !important;background:#1f1140 !important;border:1px solid var(--border) !important;box-shadow:none !important}
[data-theme="dark-purple"] .btn:hover{background:#2a1960 !important;box-shadow:none !important}
[data-theme="dark-purple"] .btn-primary{background:#1f1140 !important;color:#ecebff !important;border:1px solid var(--border) !important}

/* Accordion */
[data-theme="dark-purple"] .accordion{border:1px solid var(--border);background:linear-gradient(180deg,#221a44,#1b1439)}
[data-theme="dark-purple"] .accordion-header{background:linear-gradient(180deg,#241a49,#1d1540)}
[data-theme="dark-purple"] .accordion-title{color:var(--text)}
[data-theme="dark-purple"] .accordion .chevron path{fill:#c7bdf0}

/* Site cards (shared) */
[data-theme="dark-purple"] .site-card{background:linear-gradient(180deg, rgba(120,86,190,.50) 0%, rgba(82,54,150,.45) 100%);border:1px solid var(--border);box-shadow:var(--shadow)}
[data-theme="dark-purple"] .site-domain{color:#c7bdf0}
[data-theme="dark-purple"] .site-code{background:#21164a;border:1px solid var(--border);color:#f1efff}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  color:var(--text);
  background:#fafafa;
  line-height:1.6;
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:100;
  box-shadow:var(--shadow);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{
  font-weight:700;
  color:var(--text);
  text-decoration:none;
  font-size:18px;
  background:var(--bg-gradient);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:all 0.3s ease;
}
.brand:hover{transform:scale(1.05)}
.nav{display:flex;align-items:center}
.nav a{
  margin-left:18px;
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  transition:color 0.3s ease;
  position:relative;
}
.nav a:hover{color:var(--primary)}
.nav a:not(.btn)::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--primary);
  transition:width 0.3s ease;
}
.nav a:not(.btn):hover::after{width:100%}
.btn{
  display:inline-block;
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
  font-weight:500;
  transition:all 0.3s ease;
  box-shadow:var(--shadow);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
}
.btn-primary{
  background:var(--bg-gradient);
  color:#fff;
  border-color:transparent;
}
.hero{
  background:linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity:0.3;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  min-height:600px;
  position:relative;
  z-index:1;
}
.hero-text{color:white}
.hero-text h1{
  font-size:48px;
  line-height:1.1;
  margin:0 0 24px;
  font-weight:800;
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.hero-text p{
  color:rgba(255,255,255,0.9);
  margin:0 0 32px;
  font-size:18px;
  line-height:1.7;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-ctas .btn{
  padding:14px 24px;
  font-size:16px;
  font-weight:600;
  border-radius:12px;
}
.hero-ctas .btn-primary{
  background:rgba(255,255,255,0.95);
  color:var(--primary);
  border:none;
  backdrop-filter:blur(10px);
}
.hero-ctas .btn-primary:hover{
  background:white;
  transform:translateY(-3px);
}
.hero-art{
  height:400px;
  border-radius:20px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero-art::before{
  content:'💬';
  font-size:80px;
  opacity:0.6;
  animation:float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.features{
  padding:80px 0;
  background:linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.features h2{
  margin:0 0 48px;
  text-align:center;
  font-size:36px;
  font-weight:700;
  color:var(--text);
}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 24px;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:var(--bg-gradient);
  transform:scaleX(0);
  transition:transform 0.3s ease;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.card:hover::before{
  transform:scaleX(1);
}
.card h3{
  margin:0 0 16px;
  font-size:20px;
  font-weight:600;
  color:var(--text);
}
.card p{
  color:var(--muted);
  line-height:1.6;
}
.how{padding:64px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px;padding:0;list-style-position:inside}
.snippet{border:1px solid var(--border);background:#0f172a;color:#e2e8f0;border-radius:10px;padding:14px;overflow:auto}
.site-footer{margin-top:24px}
.footer-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}

/* Accordion for theme settings */
.accordion{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;background:linear-gradient(180deg,#ffffff,#fafafa)}
.accordion-title{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;color:var(--text);position:relative;overflow:hidden}
.accordion-meta{display:flex;align-items:center;gap:12px}
.swatch{width:18px;height:18px;border-radius:50%;border:1px solid #e5e7eb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
.chevron{transition:transform .2s ease}
.accordion[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.accordion-body{display:none;padding:14px;border-top:1px solid var(--border)}
.accordion[aria-expanded="true"] .accordion-body{display:block}
.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.input-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff}
.input-pill input[type="color"]{border:none;background:transparent;width:32px;height:28px;padding:0}

.input-pill input[type="text"], .input-pill select{border:none;outline:none}
.help-text{font-size:12px;color:#64748b;margin-top:6px}

/* 文档页面样式 */
.docs-main {
	display: flex;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	background: #fff;
	min-height: calc(100vh - 128px);
}
[data-theme="dark-purple"] .docs-toc-title{color:var(--text)}
[data-theme="dark-purple"] .docs-nav-link{color:#bfb5ee}
[data-theme="dark-purple"] .docs-nav-link:hover{background:#2a1a57;color:#fff}
[data-theme="dark-purple"] .docs-nav-link.active{background:linear-gradient(135deg, var(--primary), #a78bfa);color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.25)}
[data-theme="dark-purple"] .docs-nav-number{background:rgba(196,181,253,.12);color:#e9e5ff}
[data-theme="dark-purple"] .docs-nav-link.active .docs-nav-number{background:rgba(255,255,255,.2);color:#fff}

/* Docs content typographies & dividers */
[data-theme="dark-purple"] .docs-title, 
[data-theme="dark-purple"] .docs-content h2, 
[data-theme="dark-purple"] .docs-content h3,
[data-theme="dark-purple"] .docs-content p,
[data-theme="dark-purple"] .docs-content li{color:var(--text)}
[data-theme="dark-purple"] .docs-content h2{border-bottom:2px solid rgba(196,181,253,.25)}

/* Code blocks and cards */
[data-theme="dark-purple"] .code-block{background:#1f1840;border:1px solid var(--border)}
[data-theme="dark-purple"] .code-header{background:#2a1a57;border-bottom:1px solid var(--border)}
[data-theme="dark-purple"] .copy-btn{background:var(--primary)}
[data-theme="dark-purple"] .copy-btn:hover{background:#7c3aed}
[data-theme="dark-purple"] .api-table{border-color:var(--border);background:transparent}
[data-theme="dark-purple"] .api-table code{background:#2a1a57;color:#ffd7e7;border-color:transparent}

/* Callouts or any generic white cards in docs */
[data-theme="dark-purple"] .card{background:linear-gradient(180deg, rgba(54,36,99,.55), rgba(33,22,74,.45));border:1px solid var(--border)}

/* Docs numbered steps block */
[data-theme="dark-purple"] .docs-content .steps{background:linear-gradient(180deg, rgba(54,36,99,.55), rgba(33,22,74,.45));border:1px solid var(--border)}
[data-theme="dark-purple"] .docs-content .steps li{color:var(--text)}
[data-theme="dark-purple"] .docs-content .steps li::before{background:var(--primary);color:#fff}

.docs-sidebar {
	width: 300px;
	flex-shrink: 0;
}

.docs-toc {
	position: sticky;
	top: 96px;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
}

.docs-toc:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.docs-toc-title {
	margin: 0 0 16px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-toc-icon {
	color: var(--primary);
	opacity: 0.8;
}

.docs-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.docs-nav-item {
	margin-bottom: 2px;
}

.docs-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--muted);
	border-radius: 8px;
	transition: all 0.2s ease;
	font-size: 14px;
	line-height: 1.4;
}

.docs-nav-link:hover {
	background: #f1f5f9;
	color: var(--text);
	transform: translateX(2px);
}

.docs-nav-link.active {
	background: linear-gradient(135deg, var(--primary), #6366f1);
	color: white;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.docs-nav-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: rgba(148, 163, 184, 0.1);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.docs-nav-link.active .docs-nav-number {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.docs-nav-text {
	flex: 1;
}

.docs-content {
	flex: 1;
	min-width: 0;
}

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

.docs-title {
	margin: 0 0 24px 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.2;
}

.docs-content h2 {
	margin: 48px 0 20px 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--text);
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 8px;
}

.docs-content h2:first-of-type {
	margin-top: 32px;
}

.docs-content h3 {
	margin: 32px 0 16px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
}

.docs-content p {
	margin: 16px 0;
	line-height: 1.7;
	color: var(--text);
}

.docs-content ul, .docs-content ol {
	margin: 16px 0;
	padding-left: 24px;
	line-height: 1.7;
}

.docs-content li {
	margin: 8px 0;
	color: var(--text);
}

.docs-content code {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 0.9em;
	color: #e11d48;
	font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
}

.docs-content pre {
	margin: 20px 0;
	overflow-x: auto;
}

.docs-content pre code {
	background: transparent;
	border: none;
	padding: 0;
	color: inherit;
}

.docs-content .card {
	margin: 24px 0;
}

.docs-content .steps {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	margin: 20px 0;
	display: block;
	counter-reset: step-counter;
}

.docs-content .steps li {
	counter-increment: step-counter;
	position: relative;
	padding-left: 40px;
	margin: 12px 0;
	list-style: none;
}

.docs-content .steps li::before {
	content: counter(step-counter);
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: var(--primary);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.docs-main {
		gap: 24px;
		padding: 24px 16px;
	}
	
	.docs-sidebar {
		width: 240px;
	}
}

@media (max-width: 768px) {
	.docs-main {
		flex-direction: column;
		gap: 20px;
		padding: 20px 16px;
	}
	
	.docs-sidebar {
		width: 100%;
		order: 2;
	}
	
	.docs-toc {
		position: static;
		margin-top: 32px;
	}
	
	.docs-content {
		order: 1;
	}
	
	.docs-title {
		font-size: 28px;
	}
	
	.docs-content h2 {
		font-size: 20px;
		margin: 32px 0 16px 0;
	}
}

@media (max-width: 480px) {
	.docs-main {
		padding: 16px 12px;
	}
	
	.docs-title {
		font-size: 24px;
	}
	
	.docs-nav-link {
		padding: 8px 10px;
		font-size: 13px;
	}
	
	.docs-nav-number {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}
}


/* Dashboard cards */
.site-card{position:relative;border:1px solid var(--border);border-radius:14px;padding:16px 16px 14px;transition:box-shadow .2s ease,transform .2s ease;background:#fff}
.site-card:hover{box-shadow:0 6px 20px rgba(15,23,42,.08);transform:translateY(-2px)}
.site-card h3{margin:0 0 6px}
.site-domain{color:var(--muted);font-size:14px;margin:0 0 12px}
.site-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 10px}
.site-actions .btn{padding:8px 12px;border-radius:8px}
.site-code{background:#f8fafc;border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-family:'Fira Code','Monaco','Consolas',monospace;font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#4338ca;font-weight:600;font-size:12px}
.meta-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
.meta-row .site-code{display:block;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}


/* Buttons visual enhancements */
.btn{position:relative;transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease}
.btn:hover{box-shadow:0 6px 16px rgba(15,23,42,.08);transform:translateY(-1px);background:#f9fafb}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(15,23,42,.08)}
.btn:focus-visible{outline:2px solid rgba(79,70,229,.4);outline-offset:2px}

.btn-primary{background:linear-gradient(180deg,#6366f1,#4f46e5);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(79,70,229,.25)}
.btn-primary:hover{background:linear-gradient(180deg,#818cf8,#4f46e5);box-shadow:0 10px 22px rgba(79,70,229,.35)}
.btn-primary:active{box-shadow:0 4px 12px rgba(79,70,229,.25)}

/* Dashboard card polish */
.site-card{border-radius:16px;padding:18px}
.site-card h3{font-weight:700}
.site-actions .btn{box-shadow:0 2px 8px rgba(15,23,42,.06)}
.site-actions .btn:hover{box-shadow:0 6px 16px rgba(15,23,42,.12)}

/* Code pill look */
.site-code{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* 主题设置弹出窗口完整样式 */
.theme-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.theme-modal-content {
	position: relative;
	background: white;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	max-width: 1000px;
	width: 95%;
	max-height: 90vh;
	overflow: hidden;
	animation: modalSlideIn 0.3s ease-out;
	display: flex;
	flex-direction: column;
}

/* Modals - dark purple theme */
[data-theme="dark-purple"] .theme-modal-overlay{background:rgba(10,6,30,.6)}
[data-theme="dark-purple"] .theme-modal-content{background:linear-gradient(180deg,#1f1840,#1a1337);border:1px solid var(--border)}
[data-theme="dark-purple"] .theme-modal-header{background:linear-gradient(135deg,#241a49,#1d1540);border-bottom:1px solid var(--border)}
[data-theme="dark-purple"] .theme-modal-header h3{color:var(--text)}
[data-theme="dark-purple"] .theme-settings-panel{background:#1c1536;border-right:1px solid var(--border)}
[data-theme="dark-purple"] .theme-preview-panel{background:#201943}
[data-theme="dark-purple"] .preview-container{background:#221a44;border-color:var(--border)}
[data-theme="dark-purple"] .settings-section h4{color:var(--text);border-bottom:2px solid rgba(196,181,253,.25)}
[data-theme="dark-purple"] .setting-item input,[data-theme="dark-purple"] .setting-item select{background:#21164a;color:var(--text);border:1px solid var(--border)}
[data-theme="dark-purple"] .btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
[data-theme="dark-purple"] .settings-actions{border-top:1px solid var(--border)}

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

.theme-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.theme-modal-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--text);
}

.theme-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	color: #6b7280;
	cursor: pointer;
	padding: 8px;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.theme-modal-close:hover {
	background: #f3f4f6;
	color: var(--text);
}

.theme-modal-body {
	padding: 20px;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.theme-settings-container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 600px;
	max-height: 600px;
}

.theme-settings-panel {
	padding: 24px;
	border-right: 1px solid #e5e7eb;
	background: #fafbfc;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
}

.theme-preview-panel {
	padding: 24px;
	background: white;
	display: flex;
	flex-direction: column;
}

.preview-header {
	margin-bottom: 20px;
}

.preview-header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.preview-container {
	flex: 1;
	min-height: 500px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preview-container iframe {
	width: 380px !important;
	height: 520px !important;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.settings-section {
	margin-bottom: 0;
	flex-shrink: 0;
}

.settings-section h4 {
	margin: 0 0 12px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 6px;
}

/* 主题选择网格 */
.theme-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.theme-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: white;
	min-height: 70px;
}

/* Theme tiles - dark purple */
[data-theme="dark-purple"] .theme-option{background:#1f1840;border:2px solid rgba(196,181,253,.28)}
[data-theme="dark-purple"] .theme-option:hover{border-color:rgba(196,181,253,.45);box-shadow:0 4px 14px rgba(139,92,246,.25)}
[data-theme="dark-purple"] .theme-option.selected{border-color:var(--primary);background:linear-gradient(135deg, rgba(139,92,246,.15) 0%, rgba(99,102,241,.08) 100%)}
[data-theme="dark-purple"] .theme-option span{color:var(--text)}
[data-theme="dark-purple"] .theme-preview{border-color:rgba(255,255,255,.12)}

.theme-option:hover {
	border-color: #d1d5db;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-option.selected {
	border-color: var(--primary);
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.theme-preview {
	width: 40px;
	height: 28px;
	border-radius: 6px;
	margin-bottom: 6px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.classic-preview { background: linear-gradient(135deg, #4F46E5 0%, #ffffff 50%, #f8fafc 100%); }
.modern-preview { background: linear-gradient(135deg, #667eea 0%, #3B82F6 50%, #ffffff 100%); }
.dark-preview { background: linear-gradient(135deg, #111827 0%, #8B5CF6 50%, #374151 100%); }
.minimal-preview { background: linear-gradient(135deg, #10B981 0%, #ffffff 50%, #f3f4f6 100%); }
.bubble-preview { background: linear-gradient(135deg, #EC4899 0%, #F472B6 50%, #fef7ff 100%); }
.corporate-preview { background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #f8fafc 100%); }
.minimalist-preview { background: linear-gradient(135deg, #1E40AF 0%, #ffffff 50%, #f8fafc 100%); }
.playful-preview { background: linear-gradient(135deg, #F97316 0%, #FEF3C7 50%, #FFFBEB 100%); }
.professional-preview { background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #f8fafc 100%); }
.futuristic-preview { background: linear-gradient(135deg, #1E293B 0%, #3B82F6 50%, #0F172A 100%); }
.natural-preview { background: linear-gradient(135deg, #059669 0%, #ECFDF5 50%, #F0FDF4 100%); }
.a-professional-preview { background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #ffffff 100%); }

.theme-option span {
	font-size: 11px;
	font-weight: 500;
	color: var(--text);
	text-align: center;
	line-height: 1.2;
}

/* 颜色设置 */
.color-settings {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.color-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.color-item label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
	text-align: center;
}

.color-item input[type="color"] {
	width: 100%;
	height: 32px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	cursor: pointer;
}

/* 基本设置 */
.basic-settings {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.setting-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.setting-row {
	display: flex;
	align-items: end;
	margin-bottom: 20px;
}

.setting-row .setting-item {
	margin-bottom: 0;
}

.setting-item label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
}

.setting-item input,
.setting-item select {
	padding: 8px 10px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 13px;
}

.setting-item input:focus,
.setting-item select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* 操作按钮 */
.settings-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
	margin-top: auto;
}

.btn-secondary {
	background: white;
	color: var(--text);
	border: 1px solid #d1d5db;
}

.btn-secondary:hover {
	background: #f9fafb;
	border-color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.theme-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.color-settings {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.theme-settings-container {
		grid-template-columns: 1fr;
		height: auto;
		min-height: auto;
	}
	
	.theme-settings-panel {
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
		max-height: 60vh;
		overflow-y: auto;
		flex-shrink: 0;
	}
	
	.theme-preview-panel {
		border-top: none;
		flex: 1;
		min-height: 300px;
	}
	
	.theme-modal-content {
		width: 95%;
		max-height: 95vh;
	}
	
	.preview-container {
		min-height: 250px;
	}
	
	.preview-container iframe {
		width: 340px !important;
		height: 480px !important;
	}
}

@media (max-width: 768px) {
	.theme-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Mobile bottom nav theming */
	.site-header{
		background: var(--mobile-nav-bg) !important;
		border-top:1px solid var(--mobile-nav-border) !important;
	}
	.site-header .nav a{ color: var(--mobile-nav-text) !important; }
	
	.color-settings {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.basic-settings {
		grid-template-columns: 1fr;
	}
	
	.theme-modal-header {
		padding: 16px 20px;
	}
	
	.theme-settings-panel,
	.theme-preview-panel {
		padding: 20px;
	}
	
	.theme-settings-panel {
		max-height: 50vh;
	}
	
	.preview-container iframe {
		width: 300px !important;
		height: 400px !important;
	}
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
	.theme-modal-content {
		width: 98%;
		max-height: 98vh;
		margin: 1vh;
	}
	
	.theme-settings-panel {
		max-height: 45vh;
		padding: 16px;
	}
	
	.theme-preview-panel {
		padding: 16px;
		min-height: 250px;
	}
	
	.preview-container {
		min-height: 200px;
	}
	
	.preview-container iframe {
		width: 280px !important;
		height: 350px !important;
	}
	
	.theme-modal-header {
		padding: 12px 16px;
	}
	
	.theme-modal-header h3 {
		font-size: 18px;
	}
}

/* API 文档样式 */
.api-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.api-table th {
	background: #f8fafc;
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}

.api-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: top;
}

.api-table tr:last-child td {
	border-bottom: none;
}

.api-table code {
	background: #f1f5f9;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 13px;
	color: #e11d48;
}

/* 代码块样式 */
.code-block {
	margin: 16px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.code-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	background: #f8fafc;
	border-bottom: 1px solid var(--border);
}

.code-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.copy-btn {
	background: var(--primary);
	color: white;
	border: none;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.copy-btn:hover {
	background: #3730a3;
}

.code-block pre {
	margin: 0;
	padding: 16px;
	background: #0f172a;
	color: #e2e8f0;
	overflow-x: auto;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 14px;
	line-height: 1.5;
}

.code-block code {
	background: transparent;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* 语法高亮 */
.code-block .bash {
	color: #10b981;
}

.code-block .json {
	color: #e2e8f0;
}

.code-block .json .string {
	color: #10b981;
}

.code-block .json .number {
	color: #f59e0b;
}

.code-block .json .boolean {
	color: #3b82f6;
}

.code-block .json .null {
	color: #6b7280;
}

/* 响应式表格 */
@media (max-width: 768px) {
	.api-table {
		font-size: 14px;
	}
	
	.api-table th,
	.api-table td {
		padding: 8px 12px;
	}
	
	.code-block pre {
		font-size: 13px;
		padding: 12px;
	}
}

/* 频率限制控制样式 */
.rate-limit-control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.rate-limit-control input[type="number"] {
	width: 80px;
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
}

.rate-limit-control input[type="number"]:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.rate-limit-control .btn {
	padding: 4px 12px;
	font-size: 12px;
}