:root {
	/* 主色调 */
	--primary-color: #6366f1;
	--primary-hover: #4f46e5;
	--primary-light: #818cf8;
	--primary-dark: #4338ca;
	--secondary-color: #8b5cf6;
	--accent-color: #a78bfa;
	
	/* 文本颜色 */
	--text-color: #18181b;
	--text-muted: #303035;
	--text-subtle: #6b7280;
	
	/* 背景颜色 */
	--light-bg: #fafafa;
	--card-bg: #ffffff;
	--border-color: #e4e4e7;
	--hover-bg: #f4f4f5;
	
	/* 状态颜色 */
	--success-color: #10b981;
	--success-light: #34d399;
	--danger-color: #ef4444;
	--danger-light: #f87171;
	--warning-color: #f59e0b;
	--info-color: #0ea5e9;
	
	/* 阴影系统 - 扁平化 */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
	--shadow: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
	--shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
	--shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.1), 0 4px 8px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.15);
	
	/* 圆角系统 */
	--radius-sm: 6px;
	--radius: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	
	/* 玻璃体背景 - 统一透明度层级 */
	--glass-bg-light: rgba(255, 255, 255, 0.7);
	--glass-bg-medium: rgba(255, 255, 255, 0.85);
	--glass-bg-heavy: rgba(255, 255, 255, 0.95);
	--glass-bg: var(--glass-bg-medium);
	
	/* 玻璃体边框 */
	--glass-border-light: rgba(255, 255, 255, 0.5);
	--glass-border-medium: rgba(255, 255, 255, 0.3);
	--glass-border-subtle: rgba(0, 0, 0, 0.06);
	--glass-border: var(--glass-border-subtle);
	
	/* 模糊度统一 */
	--glass-blur-sm: 8px;
	--glass-blur-md: 12px;
	--glass-blur-lg: 20px;
	--glass-blur: var(--glass-blur-md);
	
	/* 玻璃体效果 */
	--glass-effect: blur(var(--glass-blur)) saturate(180%);
	--glass-effect-secondary: blur(var(--glass-blur-md)) saturate(150%);
	--glass-effect-light: blur(var(--glass-blur-sm));
	--glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	--glass-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	
	/* 卡片和按钮阴影 */
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
	--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-btn: 0 1px 3px rgba(99, 102, 241, 0.2);
	--shadow-btn-hover: 0 4px 12px rgba(99, 102, 241, 0.25);
	--shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.1);
	--shadow-focus-dark: 0 0 0 3px rgba(129, 140, 248, 0.15);
	
	/* 间距系统 */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;
	--spacing-3xl: 64px;
	
	/* 字体大小系统 */
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-base: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 32px;
	
	/* 字重系统 */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	
	/* 行高系统 */
	--line-height-tight: 1.4;
	--line-height-normal: 1.6;
	--line-height-relaxed: 1.8;
	
	/* 过渡动画 */
	--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bg: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-shadow: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	
	/* 滚动条颜色系统 */
	--scrollbar-width: 8px;
	--scrollbar-track-bg: transparent;
	--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
	--scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.3);
	--scrollbar-thumb-active-bg: rgba(0, 0, 0, 0.4);
}

/* SVG Icon System */
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	flex-shrink: 0;
}

.icon-fill {
	fill: currentColor;
	stroke: none;
}

.icon-sm {
	width: 14px;
	height: 14px;
}

.icon-md {
	width: 16px;
	height: 16px;
}

.icon-lg {
	width: 18px;
	height: 18px;
}


/* Dark Theme */
body[data-theme="dark"] {
	--text-color: #f4f4f5;
	--text-muted: #a1a1aa;
	--text-subtle: #71717a;
	--light-bg: #09090b;
	--card-bg: #27272a;
	--border-color: #3f3f46;
	--hover-bg: #3f3f46;
	/* 暗色模式玻璃体背景 */
	--glass-bg-light: rgba(24, 24, 27, 0.6);
	--glass-bg-medium: rgba(24, 24, 27, 0.8);
	--glass-bg-heavy: rgba(24, 24, 27, 0.95);
	--glass-bg: var(--glass-bg-medium);
	/* 暗色模式玻璃体边框 */
	--glass-border-light: rgba(255, 255, 255, 0.1);
	--glass-border-medium: rgba(255, 255, 255, 0.15);
	--glass-border-subtle: rgba(255, 255, 255, 0.08);
	--glass-border: var(--glass-border-subtle);
	/* 暗色模式模糊度 */
	--glass-blur-sm: 10px;
	--glass-blur-md: 16px;
	--glass-blur-lg: 24px;
	--glass-blur: var(--glass-blur-md);
	/* 暗色模式阴影 */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
	--shadow: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
	--shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
	--shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 4px 8px -4px rgb(0 0 0 / 0.4);
	--shadow-xl: 0 20px 40px -8px rgb(0 0 0 / 0.5);
	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
	--shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.4);
	
	/* 暗色模式滚动条 */
	--scrollbar-thumb-bg: rgba(255, 255, 255, 0.15);
	--scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.25);
	--scrollbar-thumb-active-bg: rgba(255, 255, 255, 0.35);
}


body[data-theme="dark"] .docs-top-nav {
	background: #1e1e1e;
}

/* Dark Theme - Code Blocks */
body[data-theme="dark"] pre {
	background: var(--light-color);
	border-color: var(--border-color);
}

body[data-theme="dark"] pre code {
	color: #d4d4d4 !important;
}

body[data-theme="dark"] code {
	background: #3f3f46;
	color: #e4e4e7;
}

body[data-theme="dark"] .hljs {
	background: #1e1e1e !important;
	color: #d4d4d4 !important;
}

body[data-theme="dark"] .docs-code-example pre {
	background: #1e1e1e !important;
}

body[data-theme="dark"] .docs-endpoint-path {
	background: #3f3f46 !important;
	color: #a78bfa !important;
}

body[data-theme="dark"] .docs-param-example code {
	background: var(--light-bg);
	color: var(--text-muted);
}

body[data-theme="dark"] .docs-search-modal-content {
	background: var(--card-bg);
}

body[data-theme="dark"] .docs-api-call-block {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes fadeOut {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.95);
	}
}
:root {
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	--glass-blur: 16px;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	min-height: 100%;
	background-color: var(--light-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html.theme-light {
	background-color: var(--light-bg);
}
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	color: var(--text-color);
	line-height: 1.8;
	min-height: 100vh;
	background-color: var(--light-bg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 64px;
}

/* ============================================
 Top Navigation Bar
 ============================================ */
.docs-top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	z-index: 100;
	box-shadow: var(--shadow-sm);
}

.docs-top-nav-container {
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Logo */
.docs-top-nav-left {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.docs-logo-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--text-color);
	font-weight: 700;
	font-size: 18px;
	transition: opacity 0.2s;
}

.docs-logo-link:hover {
	opacity: 0.8;
}

.docs-logo-img {
	height: 32px;
	width: auto;
}

.docs-logo-text {
	color: var(--text-color);
}

/* Search */
.docs-top-nav-center {
	flex: 1;
	min-width: 360px;
	display: flex;
	justify-content: center;
}

.docs-search-btn {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	color: var(--text-muted);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s;
}

.docs-search-btn:hover {
	border-color: var(--primary-color);
	box-shadow: var(--shadow-focus);
}

.docs-search-btn i {
	color: var(--text-muted);
	font-size: 14px;
}

.docs-search-btn span {
	flex: 1;
	text-align: left;
}

.docs-search-kbd {
	padding: 2px 6px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	font-family: monospace;
}

/* Right Links */
.docs-top-nav-right {
	margin-left: auto;
    display: flex;
    align-items: center;
	flex-shrink: 0;
}

.docs-top-nav-links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.docs-top-nav-link {
	padding: 8px 5px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius);
	transition: all 0.2s;
	white-space: nowrap;
}

.docs-top-nav-link:hover {
	color: var(--text-color);
	background: var(--hover-bg);
}

.docs-top-nav-link.active {
	color: var(--primary-color);
	background: rgba(99, 102, 241, 0.1);
	font-weight: 600;
}

/* Theme Toggle */
.docs-theme-toggle {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}

.docs-theme-toggle:hover {
	background: var(--hover-bg);
	color: var(--text-color);
}

.docs-theme-icon-auto,
.docs-theme-icon-light,
.docs-theme-icon-dark {
	position: absolute;
	transition: all 0.2s;
	opacity: 0;
}

/* 跟随系统模式 - 显示电脑图标 */
body[data-theme-mode="auto"] .docs-theme-icon-auto {
	opacity: 1;
}

/* 白天模式 - 显示太阳图标 */
body[data-theme-mode="light"] .docs-theme-icon-light {
	opacity: 1;
}

/* 夜晚模式 - 显示月亮图标 */
body[data-theme-mode="dark"] .docs-theme-icon-dark {
	opacity: 1;
}

/* Dashboard Button */
.docs-dashboard-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-color);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--radius);
	transition: all 0.2s;
	white-space: nowrap;
	padding-left: 8px;
}

.docs-dashboard-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.docs-dashboard-btn i {
	font-size: 12px;
}

/* Mobile */
.docs-top-nav-mobile {
	display: none;
	align-items: center;
	gap: 2px;
}

.docs-mobile-search-btn,
.docs-mobile-menu-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius);
	transition: all 0.2s;
}

.docs-mobile-search-btn:hover,
.docs-mobile-menu-btn:hover {
	background: var(--hover-bg);
	color: var(--text-color);
}

@media (max-width: 768px) {
	.docs-top-nav-center {
		display: none;
	}
	
	.docs-top-nav-mobile {
		display: flex;
		margin-left: 0;
	}
	
	.docs-logo-text {
		font-size: 16px;
	}
	
	.docs-logo-img {
		height: 28px;
	}
}

@media (max-width: 425px) {
	.docs-top-nav-container {
		padding: 0 10px;
		gap: 10px;
	}

	.docs-logo-link {
		gap: 6px;
	}

	.docs-logo-img {
		height: 24px;
	}

	.docs-logo-text {
		display: inline;
		font-size: 14px;
	}

	#docsLangSwitcher,
	#topThemeToggle {
		display: none !important;
	}

	.docs-top-nav-right {
		gap: 4px;
	}

	.docs-mobile-menu-btn {
		width: 32px;
		height: 32px;
	}

	#topSearchBtn,
	#topSearchBtnMobile {
		display: none !important;
	}
}
/* ============================================
 Search Modal
 ============================================ */
.docs-search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 100px;
}

.docs-search-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.docs-search-modal-content {
	position: relative;
	width: 90%;
	max-width: 600px;
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	border: 1px solid var(--border-color);
	overflow: hidden;
	animation: fadeIn 0.2s ease;
}

.docs-search-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
}

.docs-search-modal-header i.fa-search {
	color: var(--text-muted);
	font-size: 16px;
}

.docs-search-modal-header input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 16px;
	color: var(--text-color);
}

.docs-search-modal-header input::placeholder {
	color: var(--text-muted);
}

.docs-search-modal-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--radius);
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.2s;
}

.docs-search-modal-close:hover {
	background: var(--hover-bg);
	color: var(--text-color);
}

.docs-search-modal-results {
	max-height: 400px;
	overflow-y: auto;
}

.docs-search-modal-empty,
.docs-search-modal-loading {
	padding: 40px 20px;
	text-align: center;
	color: var(--text-muted);
	font-size: 14px;
}

.docs-search-modal-loading i {
	margin-right: 8px;
}

.docs-search-result-item {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	transition: all 0.2s;
}

.docs-search-result-item:last-child {
	border-bottom: none;
}

.docs-search-result-item:hover {
	background: var(--hover-bg);
}

.docs-search-result-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 4px;
}

.docs-search-result-url {
	font-size: 13px;
	color: var(--text-muted);
}

@media (max-width: 768px) {
	.docs-search-modal {
		padding-top: 80px;
	}
	
	.docs-search-modal-content {
		width: 95%;
	}
	
	.docs-search-modal-results {
		max-height: 300px;
	}
}


/* ============================================
 Documentation Page Layout - Wrapper & Main Structure
 ============================================ */
.docs-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 20px 0;
	display: flex;
	min-height: calc(100vh - 64px);
	background: transparent;
}

.docs-main {
    margin-left: 260px;
    flex: 1;
    min-height: 0; /* 允许 flex 子收缩，配合 docs-content-wrapper 的 overflow 链 */
    display: flex;
    flex-direction: column;
}

.docs-sidebar-nav {
	position: fixed;
	top: 64px;
	width: 260px;
	height: calc(100vh - 64px);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 40;
	padding: 0;
}

.docs-header-bar {
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	flex-shrink: 0;
}

.docs-breadcrumb-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.docs-breadcrumb-nav a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

.docs-breadcrumb-nav a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

.docs-breadcrumb-nav span {
	color: var(--text-muted);
}

.docs-content-wrapper {
	display: grid;
	/*grid-template-columns: 1fr 460px;*/
	gap: 24px;
	padding: 24px;
	flex: 1;
	min-height: 0; /* 允许 flex 子收缩，使 overflow-y 创建内部滚动，sticky 才能生效 */
	overflow-y: auto;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
}

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

.docs-toc-sidebar {
	position: sticky;
	top: 44px;
	height: fit-content;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	max-width: 500px;
	min-width: 400px;
}

/* ========================================
   全局滚动条美化
   ======================================== */

/* Webkit 浏览器（Chrome, Safari, Edge）滚动条 */
*::-webkit-scrollbar {
	width: var(--scrollbar-width);
	height: var(--scrollbar-width);
}

*::-webkit-scrollbar-track {
	background: var(--scrollbar-track-bg);
}

*::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-bg);
	border-radius: calc(var(--scrollbar-width) / 2);
	transition: background 0.2s ease;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-bg);
}

*::-webkit-scrollbar-thumb:active {
	background: var(--scrollbar-thumb-active-bg);
}

/* Firefox 滚动条美化 - 暂时注释掉排查问题 */
/*
@supports (scrollbar-color: auto) {
	html, body {
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
	}
}
*/


/* 代码块滚动条 - 更细 */
pre::-webkit-scrollbar,
.docs-code-example::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

/* 模态框滚动条 - 更细 */
.docs-try-it-modal-body::-webkit-scrollbar,
.docs-search-modal-content::-webkit-scrollbar {
	width: 6px;
}

/* 侧边栏滚动条 - 保持原有样式但使用变量 */
.docs-toc-sidebar::-webkit-scrollbar {
	width: 6px;
}

.docs-toc-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.docs-toc-sidebar::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-bg);
	border-radius: 3px;
	transition: background 0.2s ease;
}

.docs-toc-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-bg);
}


.docs-parameter-table-wrapper {
	overflow-x: auto;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--card-bg);
}
.docs-faq-item {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border-color);
}
.docs-faq-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.docs-faq-question {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 8px;
	cursor: pointer;
	transition: color 0.2s ease;
}
.docs-faq-question:hover {
	color: var(--primary-color);
}
.docs-faq-answer {
	color: var(--text-muted);
	line-height: 1.8;
	margin: 0;
	font-size: 0.9375rem;
}
.docs-model-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.docs-model-item {
	display: inline-block;
	padding: 8px 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	font-size: 0.9375rem;
	color: var(--text-color);
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	transition: all 0.2s ease;
}
.docs-model-item:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}
.docs-model-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.docs-model-card {
	padding: 16px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}
.docs-model-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-color);
}
.docs-model-card h4 {
	margin: 0 0 8px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-model-id {
	margin: 0 0 8px 0;
	font-size: 0.8125rem;
	color: var(--primary-color);
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-weight: 500;
}
.docs-model-type {
	margin: 0 0 8px 0;
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.docs-model-desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.5;
}
.docs-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 0.875rem;
	color: var(--text-muted);
}
.docs-breadcrumb a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.2s ease;
}
.docs-breadcrumb a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}
.docs-toc {
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-bottom: 24px;
}
.docs-toc-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
}
.docs-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.docs-toc-list li {
	margin-bottom: 8px;
}
.docs-toc-list li:last-child {
	margin-bottom: 0;
}
.docs-toc-list a {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.2s ease;
}
.docs-toc-list a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}
.docs-api-endpoint {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 0.9375rem;
}
.docs-endpoint-method {
	display: inline-block;
	padding: 4px 8px;
	background: var(--primary-color);
	color: white;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	min-width: 50px;
	text-align: center;
	flex-shrink: 0;
}
.docs-api-endpoint code {
	color: var(--primary-color);
	font-weight: 500;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.docs-api-endpoint .docs-try-it-btn {
	display: inline-flex;
	margin-left: auto;
	flex-shrink: 0;
	align-self: center;
}
@media (max-width: 1400px) {
	.docs-layout {
		grid-template-columns: 240px 1fr 320px;
		gap: 16px;
	}
}
@media (max-width: 1280px) {
	.docs-layout {
		grid-template-columns: 1fr;
	}
	.docs-sidebar,
	.docs-sidebar-right,
	.docs-top-nav-links  {
		display: none;
	}
	.docs-content {
		max-height: none;
	}
}
@media (max-width: 768px) {
	.docs-main {
		margin-left: 0;
	}
	
	.docs-sidebar-nav {
		position: fixed;
		top: 64px;
		left: -280px;
		width: 280px;
		height: calc(100vh - 64px);
		transition: left 0.3s ease;
		box-shadow: var(--shadow-lg);
	}
	
	.docs-sidebar-nav.open {
		left: 0;
	}
	
	.docs-layout {
		grid-template-columns: 1fr;
	}
	.docs-sidebar,
	.docs-sidebar-right {
		display: none;
	}
	.docs-content {
		padding: 20px;
		max-height: none;
	}
	.docs-model-grid {
		grid-template-columns: 1fr;
	}
	.docs-code-tabs {
		flex-wrap: wrap;
	}
	.docs-code-tab {
		padding: 6px 10px;
		font-size: 0.75rem;
	}
	
	.docs-content-wrapper {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	
	.docs-toc-sidebar {
		display: none;
	}
}
.docs-scroll-to-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: var(--shadow-lg);
	transition: all 0.3s ease;
	z-index: 100;
}
.docs-scroll-to-top:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-xl);
}
.docs-scroll-to-top:active {
	transform: translateY(-2px);
}
.docs-search-highlight {
	background: rgba(252, 211, 77, 0.4);
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 500;
	color: #92400e;
}
.docs-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: all 0.2s ease;
	display: none;
	font-size: 14px;
	z-index: 10;
}
.docs-search-clear:hover {
	background: var(--hover-bg);
	color: var(--text-color);
}
.docs-search-box.has-value .docs-search-clear {
	display: block;
}
.docs-nav-no-results {
	padding: 16px;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.875rem;
	border-top: 1px solid var(--border-color);
	margin-top: 16px;
}
.docs-nav-list a.hidden {
	display: none;
}
.docs-nav-list a {
	animation: navItemFadeIn 0.2s ease;
}
@keyframes navItemFadeIn {
	from {
		opacity: 0;
		transform: translateX(-4px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.docs-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	max-height: 300px;
	overflow-y: auto;
	z-index: 1000;
	display: none;
	box-shadow: var(--shadow-md);
}
.docs-search-result-item {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background 0.2s ease;
	font-size: 0.9375rem;
	color: var(--text-color);
}
.docs-search-result-item:last-child {
	border-bottom: none;
}
.docs-search-result-item:hover {
	background: var(--hover-bg);
	color: var(--primary-color);
}
.docs-search-result-item i {
	color: var(--primary-color);
	font-size: 0.875rem;
}
.docs-search-no-results {
	padding: 16px;
	text-align: center;
	color: var(--text-muted);
	font-size: 0.875rem;
}
.docs-tooltip {
	position: fixed;
	background: var(--text-color);
	color: var(--card-bg);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	white-space: nowrap;
	z-index: 1001;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	box-shadow: var(--shadow-lg);
}
body.theme-dark .docs-tooltip {
	background: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
}
.docs-best-practices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}
.docs-practice-category {
	padding: 20px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.2s ease;
}
.docs-practice-category:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-color);
}
.docs-practice-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-practice-title i {
	color: var(--primary-color);
	font-size: 1.1rem;
}
.docs-practice-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.docs-practice-list li {
	padding: 8px 0 8px 24px;
	position: relative;
	color: var(--text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.docs-practice-list li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success-color);
	font-weight: bold;
	font-size: 1.1rem;
}
.docs-limits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}
.docs-limit-card {
	padding: 20px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	text-align: center;
	transition: all 0.2s ease;
}
.docs-limit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-color);
}
.docs-limit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto 12px;
	background: rgba(99, 102, 241, 0.1);
	border-radius: var(--radius);
	font-size: 1.5rem;
	color: var(--primary-color);
}
.docs-limit-card h4 {
	margin: 0 0 8px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-limit-value {
	margin: 0 0 4px 0;
	font-size: 1.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.docs-limit-desc {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--text-muted);
}
.docs-quota-info {
	padding: 16px;
	background: rgba(99, 102, 241, 0.05);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: var(--radius-md);
	margin-top: 16px;
}
.docs-quota-info h4 {
	margin: 0 0 8px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-quota-info p {
	margin: 0 0 8px 0;
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.6;
}
.docs-quota-info p:last-child {
	margin-bottom: 0;
}
.docs-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 0.875rem;
	color: var(--text-muted);
	flex-wrap: wrap;
}
.docs-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--primary-color);
	text-decoration: none;
	transition: all 0.2s ease;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.docs-breadcrumb a:hover {
	color: var(--primary-hover);
	background: var(--hover-bg);
	text-decoration: underline;
}
.docs-breadcrumb-separator {
	color: var(--text-muted);
	margin: 0 4px;
}
.docs-breadcrumb-current {
	color: var(--text-color);
	font-weight: 500;
	padding: 4px 8px;
}
.docs-toc {
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-bottom: 24px;
	position: sticky;
	top: 20px;
	transition: all 0.3s ease;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 100;
}
.docs-toc.collapsed {
	padding: 12px;
	max-width: 200px;
}
.docs-toc.collapsed .docs-toc-list {
	display: none;
}
.docs-toc.collapsed .docs-toc-title {
	cursor: pointer;
	user-select: none;
}
.docs-toc.collapsed .docs-toc-title:after {
	content: " ▼";
	font-size: 0.75rem;
	margin-left: auto;
}
.docs-toc:not(.collapsed) .docs-toc-title {
	cursor: pointer;
	user-select: none;
}
.docs-toc:not(.collapsed) .docs-toc-title:after {
	content: " ▲";
	font-size: 0.75rem;
	margin-left: auto;
}
.docs-toc.auto-collapsed {
	transform: translateX(-10px);
	opacity: 0.7;
}
.docs-toc.auto-collapsed:hover {
	transform: translateX(0);
	opacity: 1;
}
.docs-toc-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.docs-toc-list li {
	margin-bottom: 8px;
}
.docs-toc-list li:last-child {
	margin-bottom: 0;
}
.docs-toc-list a {
	display: block;
	padding: 6px 12px;
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.9375rem;
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
	border-left: 2px solid transparent;
}
.docs-toc-list a:hover {
	background: var(--card-bg);
	color: var(--primary-hover);
	border-left-color: var(--primary-color);
	padding-left: 16px;
}
.docs-toc-list a.active {
	background: var(--card-bg);
	color: var(--primary-hover);
	border-left-color: var(--primary-color);
	font-weight: 500;
	padding-left: 16px;
}
.docs-parameter-table tbody tr {
	transition: background-color 0.2s ease;
}
.docs-parameter-table tbody tr:hover {
	background: var(--hover-bg);
	box-shadow: inset 0 0 0 1px var(--border-color);
}
.docs-code-example {
	transition: opacity 0.2s ease;
}
@media (max-width: 1024px) {
	.docs-scroll-to-top {
		bottom: 20px;
		right: 20px;
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
	.docs-best-practices {
		grid-template-columns: 1fr;
	}
	.docs-limits-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.docs-toc {
		position: static;
	}
}
@media (max-width: 768px) {
	.docs-scroll-to-top {
		bottom: 16px;
		right: 16px;
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
	.docs-limits-grid {
		grid-template-columns: 1fr;
	}
	.docs-breadcrumb {
		font-size: 0.8125rem;
	}
	.docs-search-results {
		max-height: 200px;
	}
}
.docs-test-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.docs-test-form,
.docs-test-preview,
.docs-test-history {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 20px;
}
.docs-test-form h4,
.docs-test-preview h4,
.docs-test-history h4 {
	margin: 0 0 16px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-test-params {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}
.docs-test-params input,
.docs-test-params textarea {
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	font-size: 0.875rem;
	background: var(--hover-bg);
	color: var(--text-color);
}
.docs-test-request,
.docs-test-response {
	margin-bottom: 16px;
}
.docs-test-request:last-child,
.docs-test-response:last-child {
	margin-bottom: 0;
}
.docs-test-response-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}
.docs-test-tab {
	padding: 8px 12px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 0.875rem;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
}
.docs-test-tab:hover {
	color: var(--primary-color);
}
.docs-test-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}
.docs-test-history-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 300px;
	overflow-y: auto;
}
.docs-test-history-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--hover-bg);
	border-radius: var(--radius);
	font-size: 0.875rem;
	transition: all 0.2s ease;
}
.docs-test-history-item:hover {
	background: var(--border-color);
}
.docs-test-history-time {
	color: var(--text-muted);
	font-family: monospace;
	font-size: 0.8125rem;
}
.docs-test-history-status {
	flex: 1;
}
.docs-test-status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.docs-test-status-badge.success {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
}
.docs-test-history-reuse {
	background: transparent;
	border: none;
	color: var(--primary-color);
	cursor: pointer;
	font-size: 0.875rem;
	transition: all 0.2s ease;
}
.docs-test-history-reuse:hover {
	transform: scale(1.2);
}
.docs-use-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}
.docs-use-case-card {
	background: var(--light-bg);
	transition: all 0.2s ease;
}
.docs-use-case-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-color);
}
.docs-use-case-card h4 {
	margin: 0 0 12px 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-use-case-desc {
	margin: 0 0 16px 0;
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.6;
}
.docs-use-case-steps,
.docs-use-case-code {
	margin-bottom: 16px;
}
.docs-use-case-steps:last-child,
.docs-use-case-code:last-child {
	margin-bottom: 0;
}
.docs-use-case-steps h5,
.docs-use-case-code h5 {
	margin: 0 0 8px 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-use-case-steps ol {
	margin: 0;
	padding-left: 20px;
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.8;
}
.docs-use-case-steps li {
	margin-bottom: 4px;
}
.docs-use-case-code pre {
	margin: 0;
	background: var(--hover-bg);
	border-radius: var(--radius);
	overflow-x: auto;
}
.docs-version-table-wrapper {
	overflow-x: auto;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: 24px;
}
.docs-version-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.docs-version-table th,
.docs-version-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}
.docs-version-table th {
	background: var(--hover-bg);
	font-weight: 600;
	color: var(--text-color);
}
.docs-version-table tbody tr:hover {
	background: var(--hover-bg);
}
.docs-version-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--hover-bg);
	color: var(--text-muted);
}
.docs-version-badge.current {
	background: rgba(99, 102, 241, 0.1);
	color: var(--primary-color);
}
.docs-status-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.docs-status-badge.active {
	background: rgba(16, 185, 129, 0.1);
	color: #10b981;
}
.docs-status-badge.maintenance {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}
.docs-status-badge.deprecated {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}
.docs-compatibility-info,
.docs-deprecation-warning {
	padding: 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
}
.docs-compatibility-info:last-child,
.docs-deprecation-warning:last-child {
	margin-bottom: 0;
}
.docs-compatibility-info h4,
.docs-deprecation-warning h4 {
	margin: 0 0 12px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-compatibility-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.docs-compatibility-info li {
	padding: 6px 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}
.docs-warning-box {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: rgba(239, 68, 68, 0.05);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: var(--radius);
}
.docs-warning-box i {
	color: #ef4444;
	font-size: 1.2rem;
	flex-shrink: 0;
}
.docs-warning-box strong {
	display: block;
	color: var(--text-color);
	margin-bottom: 4px;
}
.docs-warning-box p {
	margin: 0 0 8px 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}
.docs-link {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}
.docs-link:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}
.docs-generator-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
.docs-generator-form,
.docs-generator-output {
	background: var(--light-bg);
	padding-top: 20px;
}
.docs-generator-form h4,
.docs-generator-output h4 {
	margin: 0 0 16px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-color);
}
.docs-language-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.docs-lang-btn {
	padding: 8px 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	color: var(--text-muted);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease;
}
.docs-lang-btn:hover {
	background: var(--border-color);
	color: var(--primary-color);
}
.docs-lang-btn.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}
.docs-generator-form label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 0.875rem;
	color: var(--text-color);
	cursor: pointer;
}
.docs-generator-form input[type="checkbox"] {
	cursor: pointer;
}
.docs-generator-toolbar {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.docs-generator-toolbar .btn {
	flex: 1;
}
@media (max-width: 1024px) {
	.docs-test-container {
		grid-template-columns: 1fr;
	}
	.docs-generator-container {
		grid-template-columns: 1fr;
	}
	.docs-use-cases-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 768px) {
	.docs-test-container {
		grid-template-columns: 1fr;
	}
	.docs-generator-container {
		grid-template-columns: 1fr;
	}
	.docs-use-cases-grid {
		grid-template-columns: 1fr;
	}
	.docs-language-selector {
		flex-direction: column;
	}
	.docs-lang-btn {
		width: 100%;
	}
	.docs-version-table {
		font-size: 0.8125rem;
	}
	.docs-version-table th,
	.docs-version-table td {
		padding: 8px 12px;
	}
}
/* ============================================
 迭代 3：功能完善 - Try it 增强、响应式优化
 ============================================ */
.docs-param-hint {
	font-size: 0.75rem;
	margin-top: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 20px;
	transition: all 0.2s ease;
}
.docs-param-hint-error {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}
.docs-param-hint-warning {
	background: rgba(245, 158, 11, 0.1);
	color: #f59e0b;
}
.docs-param-hint-success {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}
.docs-param-hint i {
	font-size: 0.875rem;
}
.docs-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
	font-size: 0.75rem;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
}
.docs-copy-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border-color: rgba(255, 255, 255, 0.4);
}
.docs-copy-btn.copied {
	background: rgba(34, 197, 94, 0.2);
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.4);
}
.docs-test-history-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 200px;
	overflow-y: auto;
	padding: 12px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 6px;
	margin-top: 12px;
}
.docs-history-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	transition: all 0.2s ease;
}
.docs-history-item:hover {
	background: var(--hover-bg);
	border-color: var(--primary-color);
}
.docs-history-time {
	font-size: 0.75rem;
	color: var(--text-muted);
	min-width: 80px;
}
.docs-history-status {
	flex: 1;
}
.docs-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.docs-status-badge.success {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}
.docs-status-badge.error {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}
.docs-history-reuse {
	padding: 4px 8px;
	background: transparent;
	border: 1px solid var(--border-color);
	color: var(--text-muted);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.875rem;
}
.docs-history-reuse:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}
.docs-test-response-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
	overflow-x: auto;
}
.docs-test-tab {
	padding: 8px 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.docs-test-tab:hover {
	color: var(--primary-color);
}
.docs-test-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	font-weight: 600;
}
.docs-test-response-content {
	display: none;
}
.docs-test-response-content.active {
	display: block;
	animation: fadeIn 0.2s ease;
}
.docs-mobile-menu-toggle {
	display: none;
	position: fixed;
	top: 80px;
	left: 20px;
	width: 40px;
	height: 40px;
	background: var(--primary-color);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	font-size: 18px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.docs-mobile-menu-toggle:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.docs-mobile-menu-toggle.active {
	background: var(--primary-hover);
}
.table-scroll-wrapper {
	overflow-x: auto;
	border-radius: var(--radius-md);
	margin: 12px 0;
}
.table-scroll-wrapper table {
	min-width: 100%;
}
@media (max-width: 1024px) {
	.docs-layout {
		grid-template-columns: 200px 1fr !important;
		gap: 20px !important;
	}
	.docs-sidebar-right {
		display: none !important;
	}
	.docs-test-container {
		grid-template-columns: 1fr;
	}
	.docs-generator-container {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 768px) {
	.docs-layout {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.docs-sidebar {
		position: fixed;
		left: -100%;
		top: 0;
		width: 280px;
		height: 100vh;
		background: var(--card-bg);
		border: 1px solid var(--border-color);
		border-radius: 0;
		padding: 20px;
		overflow-y: auto;
		max-height: none;
		z-index: 99;
		transition: left 0.3s ease;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
	}
	.docs-sidebar.mobile-open {
		left: 0;
	}
	.docs-sidebar-right {
		display: none !important;
	}
	.docs-top-nav-links {
		display: none !important;
	}
	.docs-mobile-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.docs-content {
		position: relative;
	}
	.docs-test-container {
		grid-template-columns: 1fr;
	}
	.docs-generator-container {
		grid-template-columns: 1fr;
	}
	.docs-use-cases-grid {
		grid-template-columns: 1fr;
	}
	.docs-language-selector {
		flex-direction: column;
	}
	.docs-lang-btn {
		width: 100%;
	}
	.docs-version-table {
		font-size: 0.8125rem;
	}
	.docs-version-table th,
	.docs-version-table td {
		padding: 8px 12px;
	}
	.docs-parameter-table {
		font-size: 0.875rem;
	}
	.docs-parameter-table th,
	.docs-parameter-table td {
		padding: 12px;
	}
	.code-block {
		font-size: 12px;
		padding: 16px;
	}
	.btn {
		padding: 8px 16px;
		font-size: 13px;
	}
	.btn.small {
		padding: 6px 12px;
		font-size: 12px;
	}
}
@media (max-width: 480px) {
	.docs-sidebar {
		width: 100%;
	}
	.docs-mobile-menu-toggle {
		top: 70px;
		left: 10px;
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.docs-content {
		padding: 20px 16px;
	}
	.docs-breadcrumb {
		font-size: 0.75rem;
		gap: 4px;
	}
	.docs-breadcrumb a,
	.docs-breadcrumb-current {
		padding: 2px 4px;
	}
	.docs-nav-list a {
		padding: 8px 10px;
		font-size: 0.875rem;
	}
	.docs-toc {
		padding: 12px;
		margin-bottom: 20px;
	}
	.docs-toc-title {
		font-size: 0.875rem;
		margin-bottom: 10px;
	}
	.docs-toc-list a {
		padding: 4px 6px;
		font-size: 0.8125rem;
	}
	.btn {
		padding: 6px 12px;
		font-size: 12px;
	}
	.code-block {
		font-size: 11px;
		padding: 12px;
	}
	.result {
		font-size: 12px;
		padding: 12px;
		max-height: 240px;
	}
}
[data-screen-size="mobile"] .docs-sidebar-right {
	display: none !important;
}
[data-screen-size="tablet"] .docs-sidebar-right {
	display: none !important;
}
[data-screen-size="desktop"] .docs-sidebar-right {
	display: block !important;
}
[data-breakpoint="sm"] {
	--font-size-body: 14px;
	--font-size-h1: 24px;
	--font-size-h2: 20px;
	--font-size-h3: 18px;
	--spacing-xs: 4px;
	--spacing-sm: 6px;
	--spacing-md: 8px;
	--spacing-lg: 12px;
	--spacing-xl: 16px;
}
[data-breakpoint="md"] {
	--font-size-body: 14px;
	--font-size-h1: 28px;
	--font-size-h2: 22px;
	--font-size-h3: 18px;
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 20px;
}
[data-breakpoint="lg"] {
	--font-size-body: 15px;
	--font-size-h1: 32px;
	--font-size-h2: 24px;
	--font-size-h3: 20px;
	--spacing-xs: 6px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 20px;
	--spacing-xl: 24px;
}
[data-breakpoint="xl"] {
	--font-size-body: 15px;
	--font-size-h1: 36px;
	--font-size-h2: 28px;
	--font-size-h3: 22px;
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 20px;
	--spacing-lg: 24px;
	--spacing-xl: 28px;
}
[data-breakpoint="2xl"] {
	--font-size-body: 16px;
	--font-size-h1: 40px;
	--font-size-h2: 32px;
	--font-size-h3: 24px;
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 28px;
	--spacing-xl: 32px;
}
.docs-try-it-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--primary-color);
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.docs-try-it-btn:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.docs-try-it-btn:active {
	transform: translateY(0);
}
.docs-try-it-btn i {
	font-size: 0.875rem;
}

/* Try It Modal Styles */
/* 统一风格的试一试弹窗 */
.try-it-modal {
	background: var(--glass-bg-heavy);
	backdrop-filter: blur(var(--glass-blur-lg));
	-webkit-backdrop-filter: blur(var(--glass-blur-lg));
	border: 1px solid var(--glass-border-medium);
	border-radius: var(--radius-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.try-it-modal-header {
	padding: var(--spacing-lg);
	background: var(--glass-bg-medium);
	backdrop-filter: blur(var(--glass-blur-md));
	-webkit-backdrop-filter: blur(var(--glass-blur-md));
}

.try-it-send-button {
	background: var(--primary-color) !important;
	color: white !important;
	border: none !important;
	padding: 8px 16px !important;
	border-radius: var(--radius) !important;
	cursor: pointer !important;
	font-weight: var(--font-weight-medium) !important;
	font-size: var(--font-size-sm) !important;
	transition: var(--transition-normal) !important;
	box-shadow: var(--shadow-btn) !important;
	backdrop-filter: blur(var(--glass-blur-sm)) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur-sm)) !important;
}

.try-it-send-button:hover {
	background: var(--primary-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-btn-hover) !important;
}

.try-it-send-button:active {
	transform: translateY(0) !important;
	box-shadow: var(--shadow-btn) !important;
}

.try-it-modal-overlay {
	animation: fadeIn 0.3s ease;
}

.try-it-modal.hidden {
	display: none !important;
}

.try-it-param-item {
	margin-bottom: 16px;
}

.try-it-param-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
}

.try-it-param-label.required::after {
	content: '*';
	color: var(--danger-color);
	font-weight: 700;
}

.try-it-param-input {
	width: 100%;
	padding: 10px 12px;
	background: var(--glass-bg-light);
	backdrop-filter: blur(var(--glass-blur-sm));
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
	color: var(--text-color);
	font-size: var(--font-size-sm);
	font-family: inherit;
	transition: var(--transition-normal);
	border: none;
}

.try-it-param-input:focus {
	outline: none;
	border: 1px solid var(--border-color);	
	background: var(--glass-bg-medium);
}

.try-it-param-input::placeholder {
	color: var(--text-muted);
}

.try-it-param-hint {
	margin-top: 6px;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	display: none;
}

.try-it-param-hint.error {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger-color);
}

.try-it-param-hint.warning {
	background: rgba(245, 158, 11, 0.1);
	color: var(--warning-color);
}

.try-it-param-hint.success {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success-color);
}

/* Parameter Description Styles */
.try-it-param-desc {
	padding: var(--spacing-md);
	background: var(--glass-bg-medium);
	backdrop-filter: blur(var(--glass-blur-sm));
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
	margin-bottom: var(--spacing-md);
	transition: var(--transition-normal);
	box-shadow: var(--shadow-xs);
}

.try-it-param-desc:hover {
	transform: translateX(2px);
	box-shadow: var(--shadow-sm);
	border-color: rgba(99, 102, 241, 0.2);
}

.try-it-param-desc-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.try-it-param-desc-type {
	display: inline-block;
	padding: 2px 8px;
	background: var(--primary-color);
	color: white;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.try-it-param-desc-required {
	display: inline-block;
	padding: 2px 8px;
	background: var(--danger-color);
	color: white;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
}

.try-it-param-desc-optional {
	display: inline-block;
	padding: 2px 8px;
	background: var(--text-muted);
	color: white;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
}

.try-it-param-desc-text {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 6px;
}

.try-it-param-desc-meta {
	font-size: 11px;
	color: var(--text-subtle);
	font-family: 'Monaco', 'Menlo', monospace;
	background: var(--hover-bg);
	padding: 4px 8px;
	border-radius: 4px;
	display: inline-block;
}

.try-it-response-tab {
	padding: 8px 14px;
	background: transparent;
	color: var(--text-muted);
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.try-it-response-tab:hover {
	color: var(--primary-color);
}

.try-it-response-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.try-it-response-content {
	display: none;
}

.try-it-response-content.active {
	display: block;
}

.try-it-copy-button {
	padding: 8px 12px;
	background: var(--glass-bg-light);
	backdrop-filter: blur(var(--glass-blur-sm));
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
	border: 1px solid var(--glass-border-subtle);
	border-radius: var(--radius);
	cursor: pointer;
	font-size: var(--font-size-xs);
	color: var(--text-color);
	transition: var(--transition-normal);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--font-weight-medium);
	box-shadow: var(--shadow-xs);
}

.try-it-copy-button:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.try-it-copy-button.copied {
	background: var(--success-color);
	color: white;
	border-color: var(--success-color);
}

/* 试一试弹窗 - 代码块使用等宽字体 */
.try-it-modal pre,
.try-it-modal code,
.try-it-modal pre code {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace !important;
}

/* 试一试弹窗 - 代码高亮样式增强 */
.try-it-modal pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em;
	background: var(--glass-bg-light);
	border-radius: var(--radius);
}

/* 确保 highlight.js 的样式能够应用 */
.try-it-modal .hljs {
	background: var(--glass-bg-light) !important;
	color: var(--text-color) !important;
}

/* 暗色模式下的代码高亮 */
body[data-theme="dark"] .try-it-modal .hljs {
	background: #1e1e1e !important;
	color: #d4d4d4 !important;
}

/* Responsive Try It Modal */
@media (max-width: 1024px) {
	.try-it-column-left {
		flex: 0 0 20% !important;
	}
	
	.try-it-column-middle {
		flex: 0 0 35% !important;
	}
	
	.try-it-column-right {
		flex: 0 0 45% !important;
	}
}

@media (max-width: 768px) {
	#tryItModal {
		width: 95% !important;
		max-width: 100% !important;
		max-height: 95vh !important;
	}
	
	#tryItModal > div:last-child {
		flex-direction: column !important;
	}
	
	.try-it-column-left,
	.try-it-column-middle,
	.try-it-column-right {
		flex: 1 1 auto !important;
		border-right: none !important;
		border-bottom: 1px solid var(--glass-border-subtle) !important;
		max-height: none !important;
	}
	
	.try-it-column-right {
		border-bottom: none !important;
	}
}

@media (max-width: 480px) {
	#tryItModal {
		width: 98% !important;
		max-height: 98vh !important;
	}
	
	.try-it-param-input {
		font-size: 16px;
	}
}


/* Enhanced Docs Page Styling */
.docs-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.docs-layout {
	display: grid;
	grid-template-columns: 250px 1fr 300px;
	gap: 20px;
	min-height: calc(100vh - 100px);
}

.docs-sidebar {
	background: var(--card-bg);
	border-radius: 8px;
	padding: 20px;
	height: fit-content;
	position: sticky;
	top: 20px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

.docs-sidebar:hover {
	box-shadow: var(--shadow);
}

.docs-content {
	background: var(--card-bg);
	border-radius: 8px;
	padding: 40px;
	border: 1px solid var(--border-color);
	overflow-y: auto;
	max-height: calc(100vh - 100px);
	box-shadow: var(--shadow-sm);
}

.docs-content:hover {
	box-shadow: var(--shadow);
}

.docs-sidebar-right {
	background: var(--card-bg);
	border-radius: 8px;
	padding: 20px;
	height: fit-content;
	position: sticky;
	top: 20px;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

.docs-sidebar-right:hover {
	box-shadow: var(--shadow);
}

.docs-header {
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--border-color);
}

.docs-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 10px 0;
	color: var(--text-color);
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

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

.docs-section {
	margin-bottom: 40px;
	padding-bottom: 20px;
}

.docs-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.docs-section-title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 15px 0;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 10px;
}

.docs-section-title::before {
	content: '';
	width: 4px;
	height: 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	border-radius: 2px;
}

.docs-subsection-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: var(--text-color);
}

.docs-paragraph {
	font-size: 14px;
	line-height: 1.8;
	margin: 0 0 15px 0;
	color: var(--text-color);
}

.docs-paragraph a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s ease;
}

.docs-paragraph a:hover {
	text-decoration: underline;
	color: var(--primary-hover);
}

.docs-code-block {
	background: var(--code-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 15px;
	overflow-x: auto;
	margin-bottom: 15px;
	box-shadow: var(--shadow-sm);
}

.docs-code-block code {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 12px;
	color: var(--code-color);
	line-height: 1.5;
}

.docs-api-endpoint {
	display: flex;
	align-items: center;
	gap: 15px;
	background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 20px;
	border: 1px solid var(--border-color);
}

.docs-endpoint-method {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 11px;
	min-width: 60px;
	text-align: center;
	box-shadow: var(--shadow-sm);
}

/* 扁平化试一试按钮 - 去除渐变 */
.docs-try-it-btn {
	background: var(--primary-color);
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: var(--transition-normal);
	white-space: nowrap;
	box-shadow: var(--shadow-btn);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	backdrop-filter: blur(var(--glass-blur-sm));
	-webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.docs-try-it-btn:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-hover);
}

.docs-try-it-btn:active {
	transform: translateY(0);
}

.docs-parameter-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 15px;
	font-size: 14px;
	box-shadow: var(--shadow-sm);
	border-radius: 6px;
	overflow: hidden;
}

.docs-parameter-table thead {
	background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
}

.docs-parameter-table th {
	padding: 12px;
	text-align: left;
	font-weight: 600;
	color: var(--text-color);
	border-bottom: 2px solid var(--border-color);
}

.docs-parameter-table td {
	padding: 12px;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-color);
}

.docs-parameter-table tbody tr:hover {
	background: var(--hover-bg);
}

.docs-toc {
	background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
	border-left: 3px solid var(--primary-color);
	padding: 15px;
	margin-bottom: 30px;
	border-radius: 6px;
	border: 1px solid var(--border-color);
}

.docs-toc-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 10px 0;
	cursor: pointer;
	letter-spacing: 0.5px;
}

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

.docs-toc-list li {
	margin-bottom: 6px;
}

.docs-toc-list a {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.2s;
	padding: 4px 0;
	display: inline-block;
}

.docs-toc-list a:hover {
	text-decoration: underline;
	color: var(--primary-hover);
}

.docs-model-card {
	padding: 15px;
	background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
	border-radius: 6px;
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}

.docs-model-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-color);
}

.docs-model-card h4 {
	margin: 0 0 8px 0;
	font-size: 15px;
	color: var(--text-color);
}

.docs-model-id {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0 0 4px 0;
	font-family: monospace;
}

.docs-model-type {
	font-size: 12px;
	background: var(--primary-color);
	color: white;
	padding: 2px 6px;
	border-radius: 3px;
	display: inline-block;
	margin: 0 0 8px 0;
	font-weight: 500;
}

.docs-model-desc {
	font-size: 13px;
	color: var(--text-color);
	margin: 0;
	line-height: 1.5;
}

/* Responsive Docs Layout */
@media (max-width: 1024px) {
	.docs-layout {
		grid-template-columns: 1fr;
	}
	
	.docs-sidebar-right {
		display: none;
	}
	
	.docs-sidebar {
		position: relative;
		top: 0;
	}
}

@media (max-width: 768px) {
	.docs-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.docs-sidebar {
		display: none;
	}
	
	.docs-content {
		padding: 24px;
		max-height: none;
		overflow-y: visible;
	}
	
	.docs-title {
		font-size: 24px;
	}
	
	.docs-section-title {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.docs-container {
		padding: 12px;
	}
	
	.docs-content {
		padding: 16px;
		border-radius: 6px;
	}
	
	.docs-title {
		font-size: 20px;
	}
	
	.docs-description {
		font-size: 14px;
	}
	
	.docs-section-title {
		font-size: 16px;
	}
	
	.docs-paragraph {
		font-size: 13px;
	}
	
	.docs-api-endpoint {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.docs-parameter-table {
		font-size: 12px;
	}
	
	.docs-parameter-table th,
	.docs-parameter-table td {
		padding: 8px;
	}
}


/* Docs button styles */
.docs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.docs-btn-primary {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.docs-btn-primary:hover {
	background: linear-gradient(135deg, var(--primary-hover), var(--secondary-color));
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
	transform: translateY(-2px);
}

.docs-btn-outline {
	background: transparent;
	color: var(--primary-color);
	border: 1.5px solid var(--border-color);
}

.docs-btn-outline:hover {
	background: var(--hover-bg);
	border-color: var(--primary-color);
	color: var(--primary-hover);
}

.docs-btn-small {
	padding: 8px 12px;
	font-size: 12px;
}


/* ===== HIGH-PRIORITY VISUAL OPTIMIZATIONS ===== */

/* 1. Code Block Enhancements */
pre, code {
	background: var(--hover-bg);
	border-radius: 6px;
}

pre {
	position: relative;
	padding: 16px;
	overflow-x: auto;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--code-color, #18181b);
}

/* Code block language label */
pre::before {
	content: attr(data-language);
	position: absolute;
	top: 0px;
	right: 88px;
	z-index: 5;
	font-size: 11px;
	color: var(--text-color);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.5px;
	background: var(--card-bg);
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

/* Code copy button */
.docs-code-copy-btn {
	position: absolute;
	top: 0px;
	right: 8px;
	padding: 6px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.docs-code-copy-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.docs-code-copy-btn.copied {
	background: var(--success-color);
	color: white;
	border-color: var(--success-color);
}

/* Code generator: wrapper & download button (top-right) */
.docs-generator-code-wrapper {
	position: relative;
}

.docs-code-download-btn {
	position: absolute;
	top: 0;
	right: 8px;
	z-index: 10;
	padding: 6px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.docs-code-download-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* 2. Table Zebra Striping */
table tbody tr:nth-child(odd) {
	background: rgba(99, 102, 241, 0.02);
}

table tbody tr:hover {
	background: rgba(99, 102, 241, 0.08);
	transition: background 0.2s ease;
}

.docs-parameter-table tbody tr:nth-child(odd) {
	background: rgba(99, 102, 241, 0.02);
}

.docs-parameter-table tbody tr:hover {
	background: rgba(99, 102, 241, 0.08);
}

.docs-parameter-table tbody tr td:first-child {
	font-weight: 600;
	color: var(--primary-color);
}

/* Required parameter marker */
.docs-param-required::after {
	content: '*';
	color: var(--danger-color);
	font-weight: 700;
	margin-left: 4px;
}

/* 3. Search Box Enhancement */
input[placeholder*="搜索"],
input[placeholder*="search"] {
	position: relative;
	padding-left: 36px;
	transition: all 0.2s ease;
}

input[placeholder*="搜索"]::before,
input[placeholder*="search"]::before {
	content: '\f002';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
}

input[placeholder*="搜索"]:focus,
input[placeholder*="search"]:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
	background: var(--card-bg);
}

/* 4. Button Ripple Effect */
.docs-btn,
.btn {
	position: relative;
	overflow: hidden;
}

.docs-btn::before,
.btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
	pointer-events: none;
}

.docs-btn:active::before,
.btn:active::before {
	width: 300px;
	height: 300px;
}

/* 5. Navigation Section Visual Separation */
.docs-nav-section {
	margin-bottom: 24px;
	padding-bottom: 16px;
	transition: all 0.2s ease;
}

.docs-nav-section:last-child {
	border-bottom: none;
}

.docs-nav-section:hover {
	background: rgba(99, 102, 241, 0.02);
	border-radius: 6px;
	padding: 0 8px;
	margin: 0 -8px 24px -8px;
	padding-bottom: 16px;
}

.docs-nav-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 12px 0;
	letter-spacing: 0.5px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-nav-section-title::before {
	width: 3px;
	height: 3px;
	background: var(--primary-color);
	border-radius: 50%;
	opacity: 0.6;
}

/* 6. Enhanced TOC Sidebar */
.docs-toc-link {
	display: block;
	padding: 8px 12px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 13px;
	transition: all 0.2s ease;
	border-left: 2px solid transparent;
	border-radius: 4px;
	position: relative;
}

.docs-toc-link:hover {
	color: var(--primary-color);
	background: rgba(99, 102, 241, 0.05);
	/*
	padding-left: 16px;
	*/
}

.docs-toc-link.active {
	color: var(--primary-color);
	border-left-color: var(--primary-color);
	font-weight: 600;
	background: rgba(99, 102, 241, 0.08);
	padding-left: 12px;
}

.docs-toc-link.level-2 {
	padding-left: 24px;
	font-size: 12px;
	color: var(--text-subtle);
}

.docs-toc-link.level-2:hover {
	padding-left: 28px;
}

/* 7. Card and Container Enhancements */
.card {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--border-color);
	transition: all 0.2s ease;
}

.card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	border-color: var(--primary-color);
	transform: translateY(-2px);
}

/* 8. Loading and Feedback States */
.docs-loading {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-color);
	border-top-color: var(--primary-color);
	animation: spin 0.8s linear infinite;
}

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

.docs-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--danger-color);
	color: var(--danger-color);
	padding: 12px 16px;
	font-size: 13px;
	margin-bottom: 16px;
}

.docs-success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid var(--success-color);
	color: var(--success-color);
	padding: 12px 16px;
	font-size: 13px;
	margin-bottom: 16px;
}

.docs-warning {
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid var(--warning-color);
	color: var(--warning-color);
	padding: 12px 16px;
	font-size: 13px;
	margin-bottom: 16px;
}

/* 9. Step Indicator Enhancement */
.docs-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
	transition: all 0.2s ease;
}

.docs-step:hover .docs-step-number {
	transform: scale(1.1);
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

/* 10. Responsive Optimizations */
@media (max-width: 768px) {
	pre {
		padding: 12px;
		font-size: 12px;
	}
	
	pre code {
		font-size: 11px;
	}
	
	.docs-code-copy-btn {
		padding: 4px 8px;
		font-size: 11px;
		right: 50px;
	}
	
	.docs-code-download-btn {
		padding: 4px 8px;
		font-size: 11px;
	}
	
	.docs-parameter-table {
		font-size: 12px;
	}
	
	.docs-parameter-table th,
	.docs-parameter-table td {
		padding: 8px;
	}
	
	input[placeholder*="搜索"],
	input[placeholder*="search"] {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	pre {
		padding: 8px;
		margin-bottom: 12px;
	}
	
	pre code {
		font-size: 10px;
		line-height: 1.4;
	}
	
	.docs-code-copy-btn {
		display: none;
	}
	
	.docs-parameter-table {
		font-size: 11px;
	}
	
	.docs-parameter-table th,
	.docs-parameter-table td {
		padding: 6px;
	}
}


/* ===== MIDDLE COLUMN CONTENT OPTIMIZATION ===== */

/* Content area modern styling */
.docs-content-main {
	background: var(--light-bg);
}

/* Section headers with gradient */
.docs-content-main h1 {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	background-clip: text;
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 8px;
}

.docs-content-main h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-color);
	margin-top: 32px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.docs-content-main h2::before {
	content: '';
	width: 4px;
	height: 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	border-radius: 2px;
}

/* Parameter field card styling */
.docs-param-field {
	margin-bottom: 16px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.docs-param-field:hover {
	border-color: var(--primary-color);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
	transform: translateY(-2px);
}

/* Parameter name and metadata */
.docs-param-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.docs-param-name {
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color);
	word-break: break-all;
}

/* Type badge */
.docs-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	white-space: nowrap;
}

.docs-type-badge.string {
	background: rgba(34, 197, 94, 0.1);
	border-color: rgba(34, 197, 94, 0.2);
	color: #22c55e;
}

.docs-type-badge.integer {
	background: rgba(59, 130, 246, 0.1);
	border-color: rgba(59, 130, 246, 0.2);
	color: #3b82f6;
}

.docs-type-badge.boolean {
	background: rgba(168, 85, 247, 0.1);
	border-color: rgba(168, 85, 247, 0.2);
	color: #a855f7;
}

.docs-type-badge.array {
	background: rgba(249, 115, 22, 0.1);
	border-color: rgba(249, 115, 22, 0.2);
	color: #f97316;
}

.docs-type-badge.object {
	background: rgba(236, 72, 153, 0.1);
	border-color: rgba(236, 72, 153, 0.2);
	color: #ec4899;
}

/* Required badge */
.docs-required-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--danger-color);
	white-space: nowrap;
}
/* Optional badge */
.docs-optional-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(107, 114, 128, 0.1);
	border: 1px solid rgba(107, 114, 128, 0.2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	white-space: nowrap;
}

/* Default value badge */
.docs-default-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: rgba(107, 114, 128, 0.1);
	border: 1px solid rgba(107, 114, 128, 0.2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	white-space: nowrap;
}

.docs-default-badge::before {
	content: 'Default: ';
	font-weight: 600;
}

/* Parameter description */
.docs-param-description {
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 12px;
	white-space: pre-wrap;
}

.docs-collapsible-block {
	margin-top: 10px;
	background: var(--light-bg);
	overflow: hidden;
}

.docs-collapsible-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--text-color);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.docs-collapsible-title {
	flex: 1;
}

.docs-collapsible-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.docs-collapsible-block.is-expanded .docs-collapsible-icon {
	transform: rotate(180deg);
}

.docs-collapsible-content {
	font-size: 13px;
	color: var(--text-muted);
}

.docs-collapsible-list {
	margin: 0;
	padding-left: 18px;
}

.docs-collapsible-list li + li {
	margin-top: 4px;
}

.docs-param-description code {
	background: var(--hover-bg);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--primary-color);
}

.docs-param-description ul,
.docs-param-description ol {
	margin: 8px 0;
	padding-left: 20px;
}

.docs-param-description li {
	margin: 4px 0;
	font-size: 13px;
}

/* Example section */
.docs-param-example {
	background: var(--light-bg);
	margin-top: 12px;
}

.docs-param-example-label {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.docs-param-example code {
	background: var(--card-bg);
	padding: 8px 12px;
	border-radius: 6px;
	display: block;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--code-color, #18181b);
	overflow-x: auto;
	word-break: break-all;
}

.docs-param-range {
	background: var(--light-bg);
	padding: 12px;
	margin-top: 12px;
}

.docs-param-range-value {
	font-size: 13px;
	color: var(--text-muted);
	white-space: pre-line;
	word-break: break-word;
}

/* API 调用配置块：模型选择 + 端点，视觉分组 + sticky */
.docs-api-call-block {
	position: -webkit-sticky; /* Safari 兼容 */
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--light-bg, #fff);
	margin-bottom: 32px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.docs-api-call-block .docs-endpoint-heading {
	margin: 0 0 12px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--text-color);
}

.docs-api-call-block .docs-model-selector {
	margin-bottom: 20px;
}

.docs-api-call-block .docs-model-selector:last-of-type {
	margin-bottom: 20px;
}

.docs-api-call-block .docs-model-selector h3 {
	font-size: 14px;
	margin: 0 0 8px 0;
	font-weight: 600;
	color: var(--text-muted);
}

.docs-api-call-block .docs-model-selector-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.docs-api-call-block .docs-endpoint-card {
	margin-bottom: 0;
	box-shadow: none;
}

/* 移动端：模型选择按钮可横向滚动，避免挤压 */
@media (max-width: 768px) {
	.docs-api-call-block {
		margin-bottom: 24px;
	}

	.docs-api-call-block .docs-model-selector-btns {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		gap: 6px;
	}

	.docs-api-call-block .docs-model-btn {
		flex-shrink: 0;
	}

	.docs-api-call-block .docs-endpoint-header {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Endpoint card */
.docs-endpoint-card {
	padding: 0px;
	margin-bottom: 32px;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.docs-endpoint-method {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background: var(--primary-color);
	color: white;
	border-radius: 6px;
	font-weight: 700;
	font-size: 12px;
	min-width: 60px;
	text-align: center;
}

.docs-endpoint-method.get {
	background: #3b82f6;
}

.docs-endpoint-method.post {
	background: #10b981;
}

.docs-endpoint-method.put {
	background: #f59e0b;
}

.docs-endpoint-method.delete {
	background: #ef4444;
}

.docs-endpoint-path {
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 14px;
	color: var(--text-color);
	background: var(--card-bg);
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 6px;
	flex: 1;
	word-break: break-all;
	border: 1px solid var(--border-color);
}

.docs-endpoint-header {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.docs-endpoint-copy-btn {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 6px 6px;
	border-radius: 4px;
	transition: all 0.2s;
	font-size: 14px;
	margin-left: auto;
}

.docs-endpoint-copy-btn:hover {
	background: var(--hover-bg);
	color: var(--primary-color);
}

.docs-endpoint-description {
	font-size: 14px;
	color: var(--text-muted);
	margin-top: 12px;
}

/* Response status tabs */
.docs-response-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 12px;
}

.docs-response-tab {
	padding: 8px 16px;
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
	position: relative;
}

.docs-response-tab:hover {
	color: var(--text-color);
}

.docs-response-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.docs-response-tab.status-200 {
	color: #10b981;
}

.docs-response-tab.status-200.active {
	color: #10b981;
	border-bottom-color: #10b981;
}

.docs-response-tab.status-400,
.docs-response-tab.status-401,
.docs-response-tab.status-402,
.docs-response-tab.status-403,
.docs-response-tab.status-429 {
	color: #f59e0b;
}

.docs-response-tab.status-400.active,
.docs-response-tab.status-401.active,
.docs-response-tab.status-402.active,
.docs-response-tab.status-403.active,
.docs-response-tab.status-429.active {
	color: #f59e0b;
	border-bottom-color: #f59e0b;
}

.docs-response-tab.status-500,
.docs-response-tab.status-502 {
	color: #ef4444;
}

.docs-response-tab.status-500.active,
.docs-response-tab.status-502.active {
	color: #ef4444;
	border-bottom-color: #ef4444;
}

/* Response content */
.docs-response-content {
	display: none;
	animation: fadeIn 0.2s ease;
}

.docs-response-content.active {
	display: block;
}

/* Code tabs modern styling */
.docs-code-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 12px;
}

.docs-code-tab {
	padding: 8px 16px;
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.docs-code-tab:hover {
	color: var(--text-color);
}

.docs-code-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

/* Code example container */
.docs-code-example {
	display: none;
	overflow: hidden;
	margin-bottom: 24px;
}

.docs-code-example.active {
	display: block;
	animation: fadeIn 0.2s ease;
}

.docs-code-example pre {
	margin: 0;
	padding: 16px;
	background: var(--card-bg);
	border: none;
	border-radius: 0;
	overflow-x: auto;
}

/* Authorization section */
.docs-auth-section {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(16, 185, 129, 0.05));
	border: 1px solid rgba(34, 197, 94, 0.2);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 32px;
}

.docs-auth-section h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-auth-section h3::before {
	content: '🔐';
	font-size: 18px;
}

.docs-auth-section p {
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 8px;
	line-height: 1.6;
}

.docs-auth-section code {
	background: var(--card-bg);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--primary-color);
}

/* Section divider */
.docs-section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-color), transparent);
	margin: 40px 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.docs-endpoint-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.docs-endpoint-path {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.docs-content-main h1 {
		font-size: 24px;
	}
	
	.docs-content-main h2 {
		font-size: 18px;
		margin-top: 24px;
		margin-bottom: 16px;
	}
	
	.docs-param-field {
		padding: 16px;
		margin-bottom: 12px;
	}
	
	.docs-param-header {
		gap: 8px;
	}
	
	.docs-type-badge,
	.docs-required-badge,
	.docs-default-badge {
		font-size: 11px;
		padding: 3px 8px;
	}
	
	.docs-param-description {
		font-size: 13px;
	}
	
	.docs-code-tabs,
	.docs-response-tabs {
		gap: 4px;
	}
	
	.docs-code-tab,
	.docs-response-tab {
		padding: 6px 12px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.docs-content-main h1 {
		font-size: 20px;
	}
	
	.docs-content-main h2 {
		font-size: 16px;
		margin-top: 20px;
		margin-bottom: 12px;
	}
	
	.docs-param-field {
		padding: 12px;
		margin-bottom: 10px;
	}
	
	.docs-param-header {
		align-items: flex-start;
		gap: 6px;
	}
	
	.docs-type-badge,
	.docs-required-badge,
	.docs-default-badge {
		font-size: 10px;
		padding: 2px 6px;
	}
	
	.docs-param-description {
		font-size: 12px;
	}
	
	.docs-param-example code {
		font-size: 11px;
	}
}


/* ===== COMPREHENSIVE MIDDLE COLUMN UI OPTIMIZATION ===== */

/* ===== 1. QUICK START STEPS OPTIMIZATION ===== */

.docs-step {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), rgba(139, 92, 246, 0.03));
	border-left: 4px solid;
	border-left-color: var(--primary-color);
	padding: 24px;
	margin-bottom: 24px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.docs-step:hover {
	box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
	transform: translateY(-2px);
	border-left-color: var(--secondary-color);
}

.docs-step:nth-child(2) {
	border-left-color: #3b82f6;
}

.docs-step:nth-child(3) {
	border-left-color: #10b981;
}

.docs-step:nth-child(4) {
	border-left-color: #f59e0b;
}

.docs-step:nth-child(5) {
	border-left-color: #8b5cf6;
}

.docs-step-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.docs-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 20px;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
	transition: all 0.3s ease;
}

.docs-step:hover .docs-step-number {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.docs-step-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-color);
	margin: 0;
}

.docs-step p {
	margin: 12px 0;
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.6;
}

.docs-step p:first-of-type {
	margin-top: 0;
}

.docs-step ul {
	margin: 12px 0;
	padding-left: 24px;
	list-style: none;
}

.docs-step ul li {
	margin: 8px 0;
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.6;
	position: relative;
	padding-left: 24px;
}

.docs-step ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--primary-color);
	font-weight: 700;
	font-size: 16px;
}

.docs-step a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s ease;
	border-bottom: 1px solid transparent;
}

.docs-step a:hover {
	color: var(--primary-hover);
	border-bottom-color: var(--primary-color);
}

/* ===== 2. ERROR CODE TABLE OPTIMIZATION ===== */

.docs-error-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 32px;
	background: var(--card-bg);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.docs-error-table thead {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
	border-bottom: 2px solid var(--border-color);
}

.docs-error-table th {
	padding: 16px;
	text-align: left;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	color: var(--text-color);
	letter-spacing: 0.5px;
}

.docs-error-table tbody tr {
	border-bottom: 1px solid var(--border-color);
	transition: background 0.2s ease;
}

.docs-error-table tbody tr:nth-child(odd) {
	background: rgba(99, 102, 241, 0.02);
}

.docs-error-table tbody tr:hover {
	background: rgba(99, 102, 241, 0.08);
}

.docs-error-table tbody tr:last-child {
	border-bottom: none;
}

.docs-error-table td {
	padding: 14px 16px;
	font-size: 14px;
	color: var(--text-color);
}

.docs-error-code {
	font-family: 'Monaco', 'Menlo', monospace;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.docs-error-code::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.docs-error-code.code-200 {
	color: #10b981;
}

.docs-error-code.code-400 {
	color: #f59e0b;
}

.docs-error-code.code-401 {
	color: #f59e0b;
}

.docs-error-code.code-429 {
	color: #f59e0b;
}

.docs-error-code.code-500 {
	color: #ef4444;
}

/* ===== 3. BEST PRACTICES LIST OPTIMIZATION ===== */

.docs-best-practices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

.docs-practice-item {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
	border: 1px solid var(--border-color);
	border-left: 4px solid var(--primary-color);
	border-radius: 8px;
	padding: 16px;
	transition: all 0.2s ease;
}

.docs-practice-item:hover {
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
	transform: translateY(-2px);
}

.docs-practice-item strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.docs-practice-item strong::before {
	content: '→';
	font-size: 16px;
}

.docs-practice-item p {
	margin: 0;
	font-size: 13px;
	color: var(--text-color);
	line-height: 1.5;
}

/* ===== 4. MODEL CARDS OPTIMIZATION ===== */

.docs-models-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.docs-model-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	position: relative;
	display: flex;
	flex-direction: column;
}

.docs-model-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.docs-model-card:hover {
	box-shadow: 0 12px 32px rgba(99, 102, 241, 0.2);
	transform: translateY(-4px);
	border-color: var(--primary-color);
}

.docs-model-card-content {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.docs-model-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color);
	margin: 0 0 8px 0;
}

.docs-model-id {
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 12px;
	color: var(--text-muted);
	margin: 0 0 12px 0;
	padding: 8px 12px;
	background: var(--hover-bg);
	border-radius: 6px;
	border: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.docs-model-id-copy {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 12px;
	padding: 0;
	transition: color 0.2s ease;
}

.docs-model-id-copy:hover {
	color: var(--primary-color);
}

.docs-model-type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 12px;
	width: fit-content;
}

.docs-model-type.chat {
	background: rgba(59, 130, 246, 0.1);
	border-color: rgba(59, 130, 246, 0.2);
	color: #3b82f6;
}

.docs-model-type.image {
	background: rgba(249, 115, 22, 0.1);
	border-color: rgba(249, 115, 22, 0.2);
	color: #f97316;
}

.docs-model-type.video {
	background: rgba(236, 72, 153, 0.1);
	border-color: rgba(236, 72, 153, 0.2);
	color: #ec4899;
}

.docs-model-type.audio {
	background: rgba(168, 85, 247, 0.1);
	border-color: rgba(168, 85, 247, 0.2);
	color: #a855f7;
}

.docs-model-description {
	font-size: 13px;
	color: var(--text-color);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}

/* ===== 5. FAQ CARDS OPTIMIZATION ===== */

.docs-faq-card {
	background: var(--light-bg);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.docs-faq-card:hover {
	box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
	border-color: var(--primary-color);
}

.docs-faq-question {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-color);
	margin: 0 0 12px 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.docs-faq-question::before {
	content: 'Q';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-radius: 50%;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}

.docs-faq-answer {
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.6;
	margin: 0;
	padding: 12px;
	background: var(--hover-bg);
	border-radius: 8px;
	border-left: 3px solid var(--primary-color);
}

.docs-faq-answer code {
	background: var(--card-bg);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--primary-color);
	border: 1px solid var(--border-color);
}

.docs-faq-answer a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

.docs-faq-answer a:hover {
	color: var(--primary-hover);
	border-bottom-color: var(--primary-color);
}

/* ===== 6. GLOBAL LIST OPTIMIZATION ===== */

.docs-content-main ul {
	list-style: none;
	padding-left: 0;
}

.docs-content-main ul li {
	padding-left: 18px;
	position: relative;
	font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.docs-content-main ul li::before {
	content: '•';
	left: 0;
	position: absolute;
	color: var(--text-muted);
	font-weight: 700;
	font-size: 16px;
}

.docs-content-main ol {
	list-style: none;
	padding-left: 0;
	margin: 16px 0;
	counter-reset: item;
}

.docs-content-main ol li {
	margin: 10px 0;
	padding-left: 32px;
	position: relative;
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.6;
	counter-increment: item;
}

.docs-content-main ol li::before {
	content: counter(item);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 50%;
	color: var(--primary-color);
	font-weight: 700;
	font-size: 12px;
}

/* ===== 7. GLOBAL TEXT AND PARAGRAPH OPTIMIZATION ===== */

.docs-content-main p {
	margin: 12px 0;
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.7;
}

.docs-content-main strong {
	font-weight: 700;
}

.docs-content-main em {
	font-style: italic;
	color: var(--text-muted);
}

.docs-content-main code {
	background: var(--hover-bg);
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--primary-color);
}

.docs-content-main a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

.docs-content-main a:hover {
	color: var(--primary-hover);
	border-bottom-color: var(--primary-color);
}

/* ===== 8. PAGE SPACING AND TYPOGRAPHY ===== */

.docs-content-main h1 {
	margin: 0 0 12px 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--text-color);
}

.docs-content-main h2 {
	margin: 32px 0 20px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--text-color);
	padding-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.docs-content-main h2::before {
	content: '';
	width: 4px;
	height: 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	border-radius: 2px;
}

.docs-content-main h3 {
	margin: 20px 0 12px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color);
}

.docs-page-subtitle {
	font-size: 16px;
	color: var(--text-muted);
	margin: 0 0 32px 0;
	line-height: 1.6;
}

/* ===== 9. INTERACTIVE FEEDBACK ===== */

.docs-loading-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--border-color);
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

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

.docs-success-message {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-left: 4px solid #10b981;
	color: #10b981;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-success-message::before {
	content: '✓';
	font-weight: 700;
	font-size: 16px;
}

.docs-error-message {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-left: 4px solid #ef4444;
	color: #ef4444;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-error-message::before {
	content: '✕';
	font-weight: 700;
	font-size: 16px;
}

.docs-warning-message {
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-left: 4px solid #f59e0b;
	color: #f59e0b;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-warning-message::before {
	content: '⚠';
	font-weight: 700;
	font-size: 16px;
}

/* ===== 10. DARK THEME ADAPTATIONS ===== */

body.theme-dark .docs-step {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}

body.theme-dark .docs-model-card {
	background: var(--card-bg);
}

body.theme-dark .docs-faq-card {
	background: var(--light-bg);
}

body.theme-dark .docs-error-table {
	background: var(--card-bg);
}

body.theme-dark .docs-error-table thead {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 1024px) {
	.docs-models-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
	
	.docs-best-practices {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.docs-step {
		padding: 16px;
		margin-bottom: 16px;
	}
	
	.docs-step-header {
		gap: 12px;
	}
	
	.docs-step-number {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
	
	.docs-step-title {
		font-size: 16px;
	}
	
	.docs-model-card-content {
		padding: 16px;
	}
	
	.docs-faq-card {
		padding: 16px;
	}
	
	.docs-models-grid {
		grid-template-columns: 1fr;
	}
	
	.docs-error-table {
		font-size: 12px;
	}
	
	.docs-error-table th,
	.docs-error-table td {
		padding: 12px;
	}
	
	.docs-content-main h2 {
		font-size: 18px;
		margin: 24px 0 16px 0;
	}
	
	.docs-content-main h3 {
		font-size: 15px;
		margin: 16px 0 10px 0;
	}
	
	.docs-content-main p {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.docs-step {
		padding: 12px;
		margin-bottom: 12px;
	}
	
	.docs-step-number {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	
	.docs-step-title {
		font-size: 14px;
	}
	
	.docs-step p {
		font-size: 13px;
	}
	
	.docs-faq-card {
		padding: 12px;
		margin-bottom: 12px;
	}
	
	.docs-faq-question {
		font-size: 13px;
	}
	
	.docs-faq-answer {
		font-size: 12px;
	}
	
	.docs-content-main h1 {
		font-size: 24px;
	}
	
	.docs-content-main h2 {
		font-size: 16px;
		margin: 20px 0 12px 0;
	}
	
	.docs-content-main h3 {
		font-size: 14px;
	}
	
	.docs-content-main p {
		font-size: 12px;
	}
	
	.docs-page-subtitle {
		font-size: 14px;
	}
}

/* ===== 代码高亮显示优化 (Phase 4 - 优先级1) ===== */

/* 1. 代码块行号显示 */
.docs-code-block-wrapper {
	position: relative;
	display: flex;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.docs-code-line-numbers {
	display: flex;
	flex-direction: column;
	background: rgba(99, 102, 241, 0.05);
	border-right: 1px solid var(--border-color);
	padding: 16px 12px;
	text-align: right;
	user-select: none;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
	min-width: 50px;
}

.docs-code-line-number {
	display: block;
	height: 1.6em;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0 4px;
	border-radius: 2px;
}

.docs-code-line-number:hover {
	background: rgba(99, 102, 241, 0.1);
	color: var(--primary-color);
}

.docs-code-line-number.highlighted {
	background: rgba(99, 102, 241, 0.2);
	color: var(--primary-color);
	font-weight: 600;
}

/* 2. 代码块内容区域 */
.docs-code-content {
	flex: 1;
	overflow-x: auto;
	padding: 16px;
	position: relative;
}

.docs-code-content pre {
	margin: 0;
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
}

.docs-code-content code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--code-color, #18181b);
}

/* 3. 代码行高亮 */
.docs-code-line {
	display: block;
	padding: 0 8px;
	border-radius: 4px;
	transition: all 0.2s ease;
	cursor: pointer;
}

.docs-code-line:hover {
	background: rgba(99, 102, 241, 0.08);
}

.docs-code-line.highlighted {
	background: rgba(99, 102, 241, 0.15);
	border-left: 3px solid var(--primary-color);
	padding-left: 5px;
}

/* 4. 语言标签 */
.docs-code-language-tag {
	position: absolute;
	top: 8px;
	right: 8px;
	background: var(--card-bg);
	color: var(--text-muted);
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: 1px solid var(--border-color);
	z-index: 10;
}

/* 5. 代码注释气泡 */
.docs-code-annotation {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted var(--primary-color);
	cursor: help;
}

.docs-code-annotation-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--text-color);
	color: var(--card-bg);
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	margin-bottom: 8px;
}

.docs-code-annotation:hover .docs-code-annotation-tooltip {
	opacity: 1;
}

/* 6. 代码差异显示 */
.docs-code-diff {
	display: flex;
	gap: 0;
	margin-bottom: 16px;
}

.docs-code-diff-section {
	flex: 1;
	min-width: 0;
}

.docs-code-diff-section h4 {
	margin: 0 0 8px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0 16px;
}

.docs-code-diff-added {
	background: rgba(16, 185, 129, 0.05);
	border-left: 3px solid var(--success-color);
}

.docs-code-diff-removed {
	background: rgba(239, 68, 68, 0.05);
	border-left: 3px solid var(--danger-color);
}

.docs-code-diff-line {
	display: flex;
	align-items: center;
	padding: 4px 12px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 12px;
	line-height: 1.6;
}

.docs-code-diff-line::before {
	content: attr(data-marker);
	display: inline-block;
	width: 20px;
	text-align: center;
	margin-right: 8px;
	font-weight: 600;
	color: var(--text-muted);
}

.docs-code-diff-added .docs-code-diff-line::before {
	color: var(--success-color);
}

.docs-code-diff-removed .docs-code-diff-line::before {
	color: var(--danger-color);
}

/* 7. 代码折叠功能 */
.docs-code-fold-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 6px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 12px;
	transition: all 0.2s ease;
	border-radius: 3px;
}

.docs-code-fold-toggle:hover {
	background: rgba(99, 102, 241, 0.1);
	color: var(--primary-color);
}

.docs-code-folded {
	display: none;
}

/* 8. 代码搜索高亮 */
.docs-code-search-highlight {
	background: rgba(252, 211, 77, 0.4);
	padding: 2px 4px;
	border-radius: 2px;
	font-weight: 500;
	color: #92400e;
}

/* 9. 代码主题选择器 */
.docs-code-theme-selector {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	padding: 12px;
	background: var(--hover-bg);
	border-radius: 6px;
	border: 1px solid var(--border-color);
}

.docs-code-theme-btn {
	padding: 6px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	transition: all 0.2s ease;
}

.docs-code-theme-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

.docs-code-theme-btn.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

/* 10. 代码缩放功能 */
.docs-code-zoom-controls {
	display: flex;
	gap: 4px;
	position: absolute;
	top: 8px;
	right: 120px;
	z-index: 20;
}

.docs-code-zoom-btn {
	padding: 4px 8px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	color: var(--text-muted);
	transition: all 0.2s ease;
}

.docs-code-zoom-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

/* 11. 代码下载功能 */
.docs-code-download-btn {
	padding: 6px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.docs-code-download-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

/* 12. 语法错误检测 */
.docs-code-error {
	position: relative;
	background: rgba(239, 68, 68, 0.05);
	border-left: 3px solid var(--danger-color);
	padding-left: 8px;
}

.docs-code-error-indicator {
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: var(--danger-color);
	border-radius: 50%;
	cursor: help;
}

.docs-code-error-message {
	position: absolute;
	bottom: -24px;
	left: 0;
	background: var(--danger-color);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	white-space: nowrap;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.docs-code-error:hover .docs-code-error-message {
	opacity: 1;
}

/* 响应式优化 */
@media (max-width: 1024px) {
	.docs-code-block-wrapper {
		flex-direction: column;
	}
	
	.docs-code-line-numbers {
		flex-direction: row;
		border-right: none;
		border-bottom: 1px solid var(--border-color);
		padding: 8px 12px;
		min-width: auto;
	}
	
	.docs-code-line-number {
		display: inline-block;
		margin-right: 12px;
	}
}

@media (max-width: 768px) {
	.docs-code-block-wrapper {
		margin-bottom: 12px;
	}
	
	.docs-code-line-numbers {
		display: none;
	}
	
	.docs-code-content {
		padding: 12px;
	}
	
	.docs-code-language-tag {
		font-size: 10px;
		padding: 3px 8px;
	}
	
	.docs-code-zoom-controls {
		display: none;
	}
	
	.docs-code-download-btn {
		padding: 4px 8px;
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.docs-code-block-wrapper {
		border-radius: 4px;
	}
	
	.docs-code-content {
		padding: 8px;
		font-size: 11px;
	}
	
	.docs-code-content code {
		font-size: 11px;
	}
	
	.docs-code-language-tag {
		display: none;
	}
}


/* ===== 代码生成器优化 (Phase 4 - 优先级2) ===== */

/* 1. 代码生成器容器 */
.docs-code-generator-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}

.docs-code-generator-panel {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

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

.docs-code-generator-panel h3 i {
	color: var(--primary-color);
	font-size: 18px;
}

/* 2. 语言选择器 */
.docs-language-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.docs-language-btn {
	padding: 8px 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-muted);
	transition: all 0.2s ease;
}

.docs-language-btn:hover {
	background: var(--border-color);
	color: var(--primary-color);
}

.docs-language-btn.active {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* 3. 参数输入区域 */
.docs-generator-params {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.docs-generator-param-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.docs-generator-param-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 6px;
}

.docs-generator-param-label.required::after {
	content: '*';
	color: var(--danger-color);
	font-weight: 700;
}

.docs-generator-param-input {
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background: var(--hover-bg);
	color: var(--text-color);
	font-size: 13px;
	font-family: inherit;
	transition: all 0.2s ease;
}

.docs-generator-param-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
	background: var(--card-bg);
}

.docs-generator-param-input::placeholder {
	color: var(--text-muted);
}

.docs-generator-param-hint {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 4px;
}

/* 4. 模板选择 */
.docs-generator-templates {
	margin-bottom: 16px;
}

.docs-generator-templates-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.docs-template-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.docs-template-item {
	padding: 10px 12px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	color: var(--text-color);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-template-item:hover {
	background: var(--border-color);
	border-color: var(--primary-color);
	color: var(--primary-color);
}

.docs-template-item.active {
	background: rgba(99, 102, 241, 0.1);
	border-color: var(--primary-color);
	color: var(--primary-color);
	font-weight: 600;
}

.docs-template-item i {
	font-size: 14px;
}

/* 5. 生成按钮 */
.docs-generator-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.docs-generator-btn {
	flex: 1;
	padding: 10px 16px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.docs-generator-btn:hover {
	background: linear-gradient(135deg, var(--primary-hover), var(--secondary-color));
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.docs-generator-btn:active {
	transform: translateY(0);
}

.docs-generator-btn i {
	font-size: 14px;
}

/* 6. 代码预览区域 */
.docs-generator-preview {
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 16px;
	font-family: 'Monaco', 'Menlo', monospace;
	font-size: 12px;
	line-height: 1.6;
	color: var(--code-color, #18181b);
	overflow-x: auto;
	max-height: 400px;
	overflow-y: auto;
	margin-bottom: 12px;
}

.docs-generator-preview:empty::before {
	content: '生成的代码将显示在这里...';
	color: var(--text-muted);
	font-style: italic;
}

/* 7. 代码操作按钮 */
.docs-generator-code-actions {
	display: flex;
	gap: 8px;
}

.docs-generator-copy-btn,
.docs-generator-download-btn {
	flex: 1;
	padding: 8px 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.docs-generator-copy-btn:hover,
.docs-generator-download-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

.docs-generator-copy-btn.copied {
	background: var(--success-color);
	color: white;
	border-color: var(--success-color);
}

/* 8. 历史记录 */
.docs-generator-history {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
}

.docs-generator-history-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.docs-generator-history-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 200px;
	overflow-y: auto;
}

.docs-generator-history-item {
	padding: 8px 10px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	font-size: 12px;
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.docs-generator-history-item:hover {
	background: var(--border-color);
	color: var(--primary-color);
}

.docs-generator-history-time {
	font-size: 11px;
	color: var(--text-muted);
	font-family: monospace;
}

/* 响应式优化 */
@media (max-width: 1024px) {
	.docs-code-generator-wrapper {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.docs-code-generator-panel {
		padding: 16px;
	}
	
	.docs-language-selector {
		flex-direction: column;
	}
	
	.docs-language-btn {
		width: 100%;
	}
	
	.docs-generator-preview {
		max-height: 300px;
	}
}

@media (max-width: 480px) {
	.docs-code-generator-panel {
		padding: 12px;
	}
	
	.docs-generator-actions {
		flex-direction: column;
	}
	
	.docs-generator-btn {
		width: 100%;
	}
	
	.docs-generator-code-actions {
		flex-direction: column;
	}
	
	.docs-generator-copy-btn,
	.docs-generator-download-btn {
		width: 100%;
	}
}


/* ===== 限制与配额展示优化 (Phase 4 - 优先级3) ===== */

/* 1. 配额进度条 */
.docs-quota-progress-wrapper {
	margin-bottom: 24px;
}

.docs-quota-progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.docs-quota-progress-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
}

.docs-quota-progress-value {
	font-size: 12px;
	color: var(--text-muted);
	font-family: monospace;
}

.docs-quota-progress-bar {
	width: 100%;
	height: 8px;
	background: var(--hover-bg);
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--border-color);
}

.docs-quota-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
	transition: width 0.3s ease;
	border-radius: 4px;
}

.docs-quota-progress-fill.safe {
	background: linear-gradient(90deg, var(--success-color), var(--success-light));
}

.docs-quota-progress-fill.warning {
	background: linear-gradient(90deg, var(--warning-color), #fbbf24);
}

.docs-quota-progress-fill.critical {
	background: linear-gradient(90deg, var(--danger-color), var(--danger-light));
	animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* 2. 限制卡片 */
.docs-limit-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.docs-limit-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 16px;
	transition: all 0.2s ease;
}

.docs-limit-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: var(--primary-color);
}

.docs-limit-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.docs-limit-card-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(99, 102, 241, 0.1);
	border-radius: 6px;
	color: var(--primary-color);
	font-size: 16px;
}

.docs-limit-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	margin: 0;
}

.docs-limit-card-value {
	font-size: 20px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 8px;
}

.docs-limit-card-description {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

/* 3. 配额告警 */
.docs-quota-alert {
	padding: 12px 16px;
	background: rgba(239, 68, 68, 0.05);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 6px;
	margin-bottom: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.docs-quota-alert.warning {
	background: rgba(245, 158, 11, 0.05);
	border-color: rgba(245, 158, 11, 0.2);
}

.docs-quota-alert.info {
	background: rgba(14, 165, 233, 0.05);
	border-color: rgba(14, 165, 233, 0.2);
}

.docs-quota-alert-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--danger-color);
	font-size: 16px;
}

.docs-quota-alert.warning .docs-quota-alert-icon {
	color: var(--warning-color);
}

.docs-quota-alert.info .docs-quota-alert-icon {
	color: var(--info-color);
}

.docs-quota-alert-content {
	flex: 1;
}

.docs-quota-alert-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
	margin: 0 0 4px 0;
}

.docs-quota-alert-message {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
}

/* 4. 配额对比表 */
.docs-quota-comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
	font-size: 13px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.docs-quota-comparison-table th,
.docs-quota-comparison-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}

.docs-quota-comparison-table th {
	background: rgba(99, 102, 241, 0.05);
	font-weight: 600;
	color: var(--text-color);
}

.docs-quota-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.docs-quota-comparison-table tbody tr:hover {
	background: var(--hover-bg);
}

/* 5. 配额倒计时 */
.docs-quota-countdown {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--hover-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	margin-bottom: 16px;
}

.docs-quota-countdown-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.docs-quota-countdown-timer {
	font-family: monospace;
	font-size: 14px;
	font-weight: 700;
	color: var(--primary-color);
}

/* 6. 升级建议 */
.docs-quota-upgrade-card {
	padding: 16px;
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 8px;
	margin-bottom: 24px;
}

.docs-quota-upgrade-card h4 {
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}

.docs-quota-upgrade-card h4 i {
	color: var(--primary-color);
	font-size: 16px;
}

.docs-quota-upgrade-card p {
	margin: 0 0 12px 0;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.docs-quota-upgrade-card p:last-child {
	margin-bottom: 0;
}

.docs-quota-upgrade-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--primary-color);
	color: white;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.docs-quota-upgrade-btn:hover {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 响应式优化 */
@media (max-width: 1024px) {
	.docs-limit-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.docs-limit-cards-grid {
		grid-template-columns: 1fr;
	}
	
	.docs-quota-comparison-table {
		font-size: 12px;
	}
	
	.docs-quota-comparison-table th,
	.docs-quota-comparison-table td {
		padding: 10px 12px;
	}
}

@media (max-width: 480px) {
	.docs-quota-alert {
		flex-direction: column;
	}
	
	.docs-quota-countdown {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.docs-quota-upgrade-card {
		padding: 12px;
	}
}

/* ============================================
 Responsive Layout Styles
 ============================================ */
@media (max-width: 1280px) {
	.docs-wrapper {
		grid-template-columns: 240px 1fr;
	}
	
	.docs-sidebar-nav {
		width: 240px;
	}
	
	.docs-content-wrapper {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}
	
	.docs-toc-sidebar {
		display: none;
	}
}

@media (max-width: 768px) {
	.docs-wrapper {
		grid-template-columns: 1fr;
	}
	
	.docs-sidebar-nav {
		position: fixed;
		left: -100%;
		width: 280px;
		height: 100vh;
		transition: left 0.3s ease;
		z-index: 99;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
		background: var(--light-bg);
		border-right-color: var(--border-color);
	}
	
	.docs-sidebar-nav.mobile-open {
		left: 0;
	}
	
	.docs-header-bar {
		padding: 12px 16px;
		height: 56px;
	}
	
	.docs-content-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px;
	}
	
	.docs-toc-sidebar {
		display: none;
	}
	
	.docs-content-main {
		padding: 0;
	}
}

@media (max-width: 480px) {
	.docs-header-bar {
		padding: 12px;
		height: 52px;
	}
	
	.docs-breadcrumb-nav {
		font-size: 0.8125rem;
	}
	
	.docs-content-wrapper {
		padding: 12px;
		gap: 12px;
	}
}

/* Dark theme support */
body.theme-dark .docs-wrapper {
	background: var(--light-bg);
}

body.theme-dark .docs-main {
	background: var(--light-bg);
}

body.theme-dark .docs-sidebar-nav {
	background: var(--light-bg);
	border-right-color: var(--border-color);
}

body.theme-dark .docs-header-bar {
	background: var(--light-bg);
	border-bottom-color: var(--border-color);
}

body.theme-dark .docs-content-wrapper {
	background: var(--light-bg);
}

body.theme-dark .docs-toc-sidebar {
	background: var(--light-bg);
	border-color: var(--border-color);
}

/* ============================================
 Navigation Section Styles
 ============================================ */
.docs-nav-section {
	padding: 20px 0 0;
}

.docs-nav-section:last-child {
	border-bottom: none;
}

.docs-nav-section-title {
	padding: 0 16px;
	font-size: 1.0rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-color);
	margin-bottom: 8px;
}

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

.docs-nav-item {
	margin: 0;
	padding: 0;
}

.docs-nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: all 0.2s ease;
	border-left: 2px solid transparent;
	will-change: color, background-color, border-color;
}

.docs-nav-link:hover {
	color: var(--primary-color);
	background: var(--hover-bg);
}

.docs-nav-link.active {
	color: var(--primary-color);
	font-weight: 500;
}

.docs-nav-link i {
	font-size: 0.9375rem;
	opacity: 0.8;
}

/* ============================================
 Submenu Styles
 ============================================ */
/* 子菜单容器 */
.docs-nav-submenu {
	position: relative;
}

/* 父菜单项 */
.docs-nav-parent {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius);
	cursor: pointer;
	user-select: none;
	transition: all 0.2s ease;
}

.docs-nav-parent:hover {
	background: var(--hover-bg);
	color: var(--primary-color);
}

/* 箭头图标 */
.docs-nav-arrow {
	font-size: 10px;
	margin-left: auto;
	transition: transform 0.2s ease;
}

/* 展开状态的箭头 */
.docs-nav-submenu.open .docs-nav-arrow {
	transform: rotate(180deg);
}

/* 子菜单列表 */
.docs-nav-sublist {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* 展开状态的子菜单 */
.docs-nav-submenu.open .docs-nav-sublist {
	max-height: 300px;
}

/* 子菜单项 */
.docs-nav-sublist .docs-nav-item {
	padding-left: 16px;
}

/* 子菜单链接 */
.docs-nav-sublist .docs-nav-link {
	display: block;
	padding: 8px 16px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	border-radius: var(--radius);
	transition: all 0.2s ease;
	border-left: none;
}

.docs-nav-sublist .docs-nav-link:hover {
	background: var(--hover-bg);
	color: var(--primary-color);
	padding-left: 20px;
}

.docs-nav-sublist .docs-nav-link.active {
	background: rgba(99, 102, 241, 0.1);
	color: var(--primary-color);
	font-weight: 600;
}

/* 移动端适配 */
@media (max-width: 768px) {
	.docs-nav-parent {
		padding: 12px 16px;
	}
	
	.docs-nav-sublist .docs-nav-link {
		padding: 10px 16px;
	}
}

/* ============================================
 TOC List Styles
 ============================================ */
.docs-toc-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}


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

.docs-toc-list li {
	margin-bottom: 8px;
}

.docs-toc-list li:last-child {
	margin-bottom: 0;
}

.docs-toc-list a {
	display: block;
	padding: 6px 12px;
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.9375rem;
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
	border-left: 2px solid transparent;
}

.docs-toc-list a:hover {
	background: var(--card-bg);
	color: var(--primary-hover);
	border-left-color: var(--primary-color);
	padding-left: 16px;
}

.docs-toc-list a.active {
	background: var(--card-bg);
	color: var(--primary-hover);
	border-left-color: var(--primary-color);
	font-weight: 500;
	padding-left: 16px;
}


/* Section card for grouping content */
.docs-section-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 24px;
}


/* ============================================
 Code Examples Panel Styles (Right Sidebar)
 ============================================ */

/* 代码面板容器 */
.docs-code-panel {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 代码示例容器 - 自适应高度 */
.docs-code-examples,
.docs-response-examples {
	position: relative;
}

.docs-code-example,
.docs-response-content {
	display: none;
}

.docs-code-example.active,
.docs-response-content.active {
	display: block;
}

/* 代码块自适应高度 */
.docs-code-panel pre {
	margin: 0;
	max-height: none;
	overflow-x: auto;
	padding: 16px;
	background: var(--hover-bg);
	border-radius: 0;
}

.docs-code-panel code {
	background: none;
	padding: 0;
	font-size: 12px;
	line-height: 1.5;
}

/* 标签页样式 */
.docs-code-tabs,
.docs-response-tabs {
	display: flex;
	gap: 8px;
	padding: 12px 4px;
	overflow-x: auto;
}

.docs-code-tab,
.docs-response-tab {
	padding: 8px 14px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.docs-code-tab:hover,
.docs-response-tab:hover {
	color: var(--text-color);
}

.docs-code-tab.active,
.docs-response-tab.active {
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

/* 状态码标签颜色 */
.docs-response-tab.status-200 {
	color: #10b981;
}

.docs-response-tab.status-200.active {
	color: #10b981;
	border-bottom-color: #10b981;
}

.docs-response-tab.status-error {
	color: #f59e0b;
}

.docs-response-tab.status-error.active {
	color: #f59e0b;
	border-bottom-color: #f59e0b;
}

/* 移动端代码面板 */
.docs-mobile-code-panel {
	display: none;
	margin: 24px 0;
}

/* 移动端代码面板容器 - 用于在中间列插入代码面板 */
.docs-mobile-code-panel-container {
	display: none;
	margin: 24px 0;
	padding: 0;
}

/* 桌面端：隐藏占位符容器，显示右侧栏 */
@media (min-width: 769px) {
	.docs-mobile-code-panel-container {
		display: none !important;
	}
	
	.docs-toc-sidebar {
		display: block !important;
	}
}

/* 移动端：显示占位符容器，隐藏右侧栏 */
@media (max-width: 1280px) {
	.docs-mobile-code-panel {
		display: block;
	}
	
	.docs-mobile-code-panel-container {
		display: block !important;
	}
	
	/* 隐藏右侧栏 */
	.docs-toc-sidebar {
		display: none !important;
	}
	
	/* 代码面板响应式调整 */
	.docs-code-panel pre {
		padding: 12px;
		font-size: 11px;
	}
	
	.docs-code-tabs,
	.docs-response-tabs {
		padding: 10px 12px;
		gap: 6px;
	}
	
	.docs-code-tab,
	.docs-response-tab {
		padding: 6px 10px;
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.docs-code-panel pre {
		padding: 8px;
		font-size: 10px;
		line-height: 1.4;
	}
	
	.docs-code-tabs,
	.docs-response-tabs {
		padding: 8px;
		gap: 4px;
	}
	
	.docs-code-tab,
	.docs-response-tab {
		padding: 4px 8px;
		font-size: 10px;
	}
}


/* ===== 参数说明样式 ===== */
.try-it-param-desc {
	padding: 12px;
	background: var(--card-bg);
	border-radius: 6px;
	margin-bottom: 8px;
	font-size: 13px;
}

.try-it-param-desc-name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--text-color);
}

.try-it-param-desc-priority {
	display: inline-block;
	padding: 2px 8px;
	background: var(--primary-color);
	color: white;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.try-it-param-desc-priority.required {
	background: var(--danger-color);
}

.try-it-param-desc-priority.common {
	background: var(--primary-color);
}

.try-it-param-desc-priority.advanced {
	background: var(--secondary-color);
}

.try-it-param-desc-type {
	display: inline-block;
	padding: 2px 8px;
	background: var(--info-color);
	color: white;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.try-it-param-desc-text {
	color: var(--text-muted);
	margin-bottom: 8px;
	line-height: 1.5;
	font-size: 13px;
}

.try-it-param-desc-meta {
	color: var(--text-subtle);
	font-size: 12px;
	margin-bottom: 8px;
}

.try-it-param-desc-scenarios {
	color: var(--text-muted);
	font-size: 12px;
	margin-bottom: 8px;
}

.try-it-param-desc-scenarios strong {
	color: var(--text-color);
	font-weight: 600;
}

.try-it-param-desc-practices {
	color: var(--text-muted);
	font-size: 12px;
	margin-bottom: 8px;
}

.try-it-param-desc-practices strong {
	color: var(--text-color);
	font-weight: 600;
}

.try-it-param-desc-practices ul {
	margin: 4px 0 0 20px;
	padding: 0;
	list-style: disc;
}

.try-it-param-desc-practices li {
	margin: 2px 0;
}

.try-it-param-desc-example {
	color: var(--text-muted);
	font-size: 12px;
	margin-top: 6px;
	padding: 6px 8px;
	background: var(--card-bg);
	border-radius: 4px;
	border-left: 2px solid var(--primary-color);
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	word-break: break-all;
}

/* ===== 场景选择样式 ===== */
.try-it-scenario-selector {
	padding: 12px;
	background: var(--hover-bg);
	border-radius: 6px;
	margin-bottom: 16px;
	border: 1px solid var(--border-color);
}

.try-it-scenario-selector h4 {
	margin: 0 0 12px 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-color);
}

.try-it-scenario-btn {
	display: inline-block;
	padding: 6px 12px;
	margin: 4px 4px 4px 0;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--text-color);
	white-space: nowrap;
}

.try-it-scenario-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.try-it-scenario-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

/* ===== 参数验证提示样式 ===== */
.try-it-param-hint {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.try-it-param-hint.error {
	background: rgba(239, 68, 68, 0.1);
	color: var(--danger-color);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

.try-it-param-hint.warning {
	background: rgba(245, 158, 11, 0.1);
	color: var(--warning-color);
	border: 1px solid rgba(245, 158, 11, 0.2);
}

.try-it-param-hint.success {
	background: rgba(16, 185, 129, 0.1);
	color: var(--success-color);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.try-it-param-hint i {
	font-size: 11px;
}

/* ===== 响应式布局 ===== */
@media (max-width: 768px) {
	.try-it-scenario-btn {
		padding: 5px 10px;
		font-size: 11px;
		margin: 3px 3px 3px 0;
	}

	.try-it-param-desc {
		padding: 10px;
		font-size: 12px;
	}

	.try-it-param-desc-name {
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* ===== 深色模式适配 ===== */
body[data-theme="dark"] .try-it-param-desc {
	background: var(--light-bg);
}

body[data-theme="dark"] .try-it-scenario-selector {
	background: var(--light-bg);
}

body[data-theme="dark"] .try-it-scenario-btn {
	background: var(--card-bg);
	border-color: var(--border-color);
	color: var(--text-color);
}

body[data-theme="dark"] .try-it-scenario-btn:hover {
	background: var(--primary-color);
	color: white;
	border-color: var(--primary-color);
}

body[data-theme="dark"] .try-it-param-desc-example {
	background: var(--light-bg);
	border-left-color: var(--primary-color);
}


/* ===== Toast 通知动画 ===== */
@keyframes slideInRight {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(400px);
		opacity: 0;
	}
}

/* 1. 移除 docs-content-wrapper 的 overflow */
.docs-section-block-header{display:flex;align-items:center}.docs-section-block-toggle{margin-left:auto}.docs-section-block-toggle .icon{transform:rotate(180deg);transition:transform .2s ease}.docs-section-block.is-collapsed .docs-section-block-toggle .icon{transform:rotate(0)}
/* 固定的模型选择器 */
.docs-model-selector-fixed {
	position: sticky;
	top: 64px;
	z-index: 1000;
	padding: 0 24px 16px;
}

.docs-model-selector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.docs-model-selector-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: var(--card-bg);
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	margin-left: auto;
}

.docs-model-selector-fixed h3 {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--text-color);
	background: var(--light-bg);
}

.docs-model-selector-fixed .docs-model-selector-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.docs-model-selector-fixed.is-collapsible .docs-model-selector-btns {
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.docs-model-selector-fixed.is-collapsed .docs-model-selector-btns {
	max-height: 38px;
}

.docs-model-selector-fixed.is-expanded .docs-model-selector-btns {
	max-height: 400px;
}

.docs-model-selector-fixed.is-expanded .docs-model-selector-toggle {
	transform: rotate(180deg);
}

@media (max-width: 768px) {
	.docs-model-selector-fixed {
		padding: 0 16px 12px;
	}

	.docs-model-selector-fixed.is-collapsed .docs-model-selector-btns {
		max-height: 36px;
	}
}