html {
	scroll-behavior: smooth;
	/* 滚动条强制显示 */
	overflow-y: scroll;
}

body {
	line-height: 1.5;
	margin: 0;
}

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

@font-face {
	font-family: 'HarmonyOS';
	font-display: swap;
	src: url('./HarmonyOS_Sans_SC_Medium.subset.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrainsMono';
	font-display: swap;
	src: url('./JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Ubuntu_and_JetBrainsMono';
	font-display: swap;
	src: url('./Ubuntu-Regular.subset.woff2?v=2') format('woff2'),
		local("JetBrainsMono");
	word-spacing: -5px; /*等宽空格间距太大*/
}

/* 正文字体 */
body, pre, code, input, textarea {
	font-family: 'JetBrainsMono', 'PingFang SC', 'HarmonyOS', 'Segoe UI Emoji';
}

/*标题&按钮字体*/
h1, h2, h3, h4, h5, h6, button {
	font-family: 'Ubuntu_and_JetBrainsMono', 'HarmonyOS', 'Trebuchet MS', 'Segoe UI Emoji';
}

* { transition: all .2s ease; }
textarea { transition: none !important; }

/*滚动条*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #62626280; }
::-webkit-scrollbar-thumb:hover { background: #62626260; }
::-webkit-scrollbar-thumb:active {background: #62626270; }
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }

.--displayNone {
	display: none !important;
}

@view-transition {
	navigation: auto;
}

/* 页面组件 */


/* CSS Variables for consistent theming */
:root {
	--primary: #5a4bff;
	--primary-dark: #4637f0;
	--primary-light: #f4f3ff;
	--accent: #ffb800;
	--text-main: #111827;
	--text-sub: #6b7280;
	--bg: #f5f5fb;
	--card-bg: #ffffff;
	--border: #e5e7eb;
	--success: #10b981;
	--warning: #f59e0b;
	--radius-lg: 18px;
	--shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.06);
}


body {
	background: var(--bg);
	color: var(--text-main);
	line-height: 1.5;
}


a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

#toast {
	position: fixed;
	top: 55px;
	left: 50%;
	transform: translateX(-50%);
	background: #1f2937;
	color: #fff;
	padding: 12px 24px;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	pointer-events: none;
	z-index: 2000;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

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

header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(229, 231, 235, 0.7);

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		gap: 24px;
	}

	.logo {
		display: flex;
		align-items: center;
		width: 160px;
		gap: 8px;
		font-weight: 800;
		font-size: 22px;
		color: #111827;
		letter-spacing: -0.5px;

		span {
			height: 34px;
		}

		.icon {
			width: 36px;
			height: 36px;
			border-radius: 12px;
			background: linear-gradient(135deg, #4f46e5, #8b5cf6);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 20px;
			font-weight: 800;
			box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
		}

	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: 32px;
		font-size: 15px;
		font-weight: 500;
		color: #4b5563;

		a {
			position: relative;
			padding: 4px 0;
			display: flex;
			align-items: center;

			svg {
				width: 17px;
				height: 17px;
			}
		}

		a:hover {
			color: var(--primary);
		}

		a::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 0;
			height: 2px;
			border-radius: 999px;
			background: var(--primary);
			transition: width 0.2s ease;
		}

		a:hover::after {
			width: 100%;
		}

		.dropdown {
			padding: 0 20px 30px 20px;
			margin: 0 -32px -30px -20px;

			/* & > a {
				color: var(--primary-dark);
			} */
		}

		.dropdown-menu {
			width: 500px;
			margin-left: -40px;
			display: flex;
			top: 95%;

			h4 {
				padding: 0 20px;
			}

			.links {
				width: 100%;
				padding: 15px 20px;
				display: flex;

				& > div {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				a {
					margin: 5px 0;
					padding: 5px 10px;
				}

			}

			.description {
				min-width: 190px;
				max-width: 190px;
				/* width: 45%; */
				padding: 15px 20px;
				border-left: 1px solid rgba(229, 231, 235, 0.7);

				p {
					margin: 15px 0;
					text-indent: 1.35em;
				}

				a {
					margin-top: auto;
					border: 1px solid rgba(229, 231, 235, 0.8);
				}
			}
		}
	}

	.user-profile {
		display: flex;
		flex-direction: row-reverse;
		position: relative;
		cursor: pointer;
		width: 160px;
		padding: 0 0 12px 50px;
		margin-bottom: -12px;

		.user-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			font-weight: 600;
			border: 2px solid white;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			opacity: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.dropdown-menu {
			right: 0;
			margin-right: -20px;
		}

		&.--login {
			& > a {
				pointer-events: none;
				opacity: 0;
			}
			.dropdown-menu {
				pointer-events: auto;
				opacity: 1;
				margin-top: -52px;
				width: max-content;
				transition: opacity .2s ease;
			}
		}
	}

	.dropdown-menu {
		pointer-events: none;
		opacity: 0;
		display: block;
		position: absolute;
		top: 100%;
		background: white;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		border: 1px solid var(--border);
		width: 160px;
		overflow: hidden;
		z-index: 1100;

		a {
			display: block;
			padding: 10px 15px;
			font-size: 14px;
			color: #374151;
			background: #fff;
		}

		a:hover {
			background: #f9fafb;
			color: var(--primary);
		}
	}

	.dropdown:hover .dropdown-menu {
		pointer-events: auto;
		opacity: 1;
	}
}

/* 侧边栏 */
aside {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border-right: 1px solid rgba(229, 231, 235, 0.7);
}

/* 页脚 */
footer {
	padding: 40px 0;
}

.modal-context-area {

	.markdown-content > :first-child {
		margin-top: 24px !important;
	}

	.markdown-content > :last-child {
		margin-bottom: 24px !important;
	}
}

.markdown-content {
	font-size: 15px;
	line-height: 1.7;
	color: #374151;

	/* 标题 Headings */
	h1, h2, h3, h4, h5, h6 {
		font-weight: 700;
		color: var(--text-main);
		margin: 28px 0 16px;
		line-height: 1.4;
	}
	h2 {
		font-size: 22px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--border);
	}
	h3 {
		font-size: 18px;
	}
	h4 {
		font-size: 16px;
		color: var(--text-sub);
	}

	/* 段落 Paragraphs */
	p {
		margin-bottom: 16px;
	}
	p:last-child {
		margin-bottom: 0;
	}

	/* 链接 Links */
	a {
		color: var(--primary);
		font-weight: 600;
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
	}

	/* 列表 Lists (ul, ol) */
	ul, ol {
		padding-left: 24px;
		margin-bottom: 16px;
	}
	li {
		margin-bottom: 8px;
	}
	li > p {
		margin-bottom: 8px; /* 优化列表项内段落间距 */
	}

	/* 引用 Blockquotes */
	blockquote {
		margin: 20px 0;
		padding: 12px 20px;
		border-left: 4px solid var(--primary);
		background-color: #f9fafb; /* 使用卡片脚部的背景色 */
		color: var(--text-sub);
		border-radius: 0 8px 8px 0;
	}
	blockquote p {
		margin: 0;
	}

	/* 代码 Code */
	/* 内联代码 */
	code {
		font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
		background: #eef2ff; /* 使用标签的背景色 */
		color: var(--primary);
		padding: 3px 6px;
		border-radius: 6px;
		font-size: 0.9em;
	}
	/* 代码块 */
	pre {
		margin: 20px 0;
		background-color: #f9fafb;
		border: 1px solid var(--border);
		border-radius: 12px; /* 匹配其他元素的圆角 */
		padding: 16px;
		overflow-x: auto;
	}
	pre code {
		background: none;
		color: #374151;
		padding: 0;
		font-size: 14px;
		line-height: 1.6;
	}

	/* 分割线 Horizontal Rules */
	hr {
		border: none;
		border-top: 1px solid var(--border);
		margin: 32px 0;
	}

	/* 表格 Tables */
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 20px 0;
		border: 1px solid var(--border);
		border-radius: 12px;
		overflow: hidden;
	}
	th, td {
		border: 1px solid var(--border);
		padding: 12px 15px;
		text-align: left;
	}
	th {
		background-color: #f9fafb;
		font-weight: 600;
		color: var(--text-main);
	}
	tr:nth-child(even) {
		background-color: #fdfdff; /* 斑马条纹，更淡雅 */
	}
}