@charset "UTF-8";
/**
 * vis.css — VISCSS 框架核心
 * 跨站共享（viskem / ssssdev / sensegames），仅收录被 2+ 站点使用的组件。
 * 治理协议详见 protocol/VISCSS_GOVERNANCE.md
 *
 * 层级：vis.css（框架） → vis-legacy.css（兼容） → viskem.css / vis-ssssdev.css（域）
 */

/* ================================================================
   :root 变量
   ================================================================ */
:root {
	--navbar-height: 62px;
	--color-secondary: #6b9b9b;
	--color-edit-text: #ccc;

	/* 间距刻度（全站统一，禁止裸写 px；lg/xl 视口感知） */
	--gap-xs: 4px;
	--gap-sm: 8px;
	--gap-md: 12px;
	--gap-lg: clamp(20px, 1.25rem + 0.25vw, 30px);
	--gap-xl: clamp(30px, 1.875rem + 0.4vw, 48px);

	/* 组件内边距 */
	--box-padding: var(--gap-md);

	/* VISCSS 主题色 */
	--accent-red: #ef4444;
	--accent-yellow: #eab308;
	--accent-blue: #4fc3f7;
	--gray-light: #e5e7eb;
	--gray-medium: #9ca3af;
	--gray-dark: #4b5563;

	/* 布局宽度（流体：大屏自动展宽） */
	--reading-width: clamp(720px, 50vw, 1200px);

	/* 字体栈 */
	--font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", monospace;
}


/* ================================================================
   Scrollbar（全局暗色薄轨，解决 Windows 默认 17px 粗滚动条）
   ================================================================ */
* {
	scrollbar-width: thin;
	scrollbar-color: #333 transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }


/* ================================================================
   基础 Reset
   ================================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	/* 流体根字号：≤1920→16px, 2560→18px, 3840→22px；所有 rem 自动缩放 */
	font-size: clamp(16px, 0.625rem + 0.3125vw, 22px);
}

body {
	margin: 0;
	background-color: #181818;
	color: #888;
	font-size: 0.875rem;   /* 14px @ 默认 16px 基准，响应浏览器字体设置 */
	line-height: 1.5;
	letter-spacing: 0.02em;
	font-family: var(--font-mono);
}

body.has-fixed-nav {
	padding-top: var(--navbar-height);
}

img {
	padding: 0;
	margin: 0;
	line-height: 1;
	display: block;
	list-style-type: none;
}

.relative { position: relative; }

button {
	border: 0;
	padding: 0;
	margin: 0;
}

a { color: #6b8096; text-decoration: none; }

h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	line-height: 1;
}

h1 { font-size: clamp(2rem, 1.5rem + 1.5vw, 3.5rem); font-weight: 100; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.75rem); font-weight: 100; }
h3 { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.5rem); font-weight: 600; }
h4 { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.25rem); font-weight: 600; }

label { color: #999; }

ol, ul, li {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ol li { margin-left: 15px; }


/* ================================================================
   阅读框架宽度 — 长文/列表页标准容器
   ================================================================ */
.reading-frame {
	max-width: var(--reading-width);
	margin-left: auto;
	margin-right: auto;
}


/* ================================================================
   Grid 系统（12 列 flex，Bootstrap 4 兼容）
   ================================================================ */
.container,
.container-fluid {
	width: 100%;
	max-width: none;
	padding: var(--gap-lg) 20px 0;
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-left: -10px;
}

.col, .col-auto,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-auto,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-auto,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-auto,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl, .col-xl-auto,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-2xl, .col-2xl-auto,
.col-2xl-1, .col-2xl-2, .col-2xl-3, .col-2xl-4, .col-2xl-5, .col-2xl-6,
.col-2xl-7, .col-2xl-8, .col-2xl-9, .col-2xl-10, .col-2xl-11, .col-2xl-12,
.col-3xl, .col-3xl-auto,
.col-3xl-1, .col-3xl-2, .col-3xl-3, .col-3xl-4, .col-3xl-5, .col-3xl-6,
.col-3xl-7, .col-3xl-8, .col-3xl-9, .col-3xl-10, .col-3xl-11, .col-3xl-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

.col    { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.col-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%;        max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%;        max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%;        max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%;       max-width: 100%; }

@media (min-width: 576px) {
	.col-sm      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-sm-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-sm-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-sm-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-sm-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-sm-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 768px) {
	.col-md      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-md-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-md-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-md-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 992px) {
	.col-lg      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-lg-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1200px) {
	.col-xl      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-xl-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-xl-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-xl-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-xl-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-xl-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1536px) {
	.col-2xl      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-2xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-2xl-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-2xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-2xl-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-2xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-2xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-2xl-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-2xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-2xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-2xl-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-2xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-2xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-2xl-12 { flex: 0 0 100%;       max-width: 100%; }
}

@media (min-width: 1920px) {
	.col-3xl      { flex-basis: 0; flex-grow: 1; max-width: 100%; }
	.col-3xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
	.col-3xl-1  { flex: 0 0  8.333333%; max-width:  8.333333%; }
	.col-3xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-3xl-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-3xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-3xl-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-3xl-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-3xl-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-3xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-3xl-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-3xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-3xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.col-3xl-12 { flex: 0 0 100%;       max-width: 100%; }
}


/* ================================================================
   Navbar
   ================================================================ */
.navbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	border-bottom: 2px solid #222;
}
.navbar-brand {
	display: inline-block;
	white-space: nowrap;
	margin: 0 30px 0 0;
	padding: 5px 0;
	font-size: 0.8125rem;
	font-weight: bold;
	color: #fff;
	line-height: 30px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.navbar-brand::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.navbar-brand:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Nav auto-hide */
#mainNavbar {
	transition: transform 0.3s ease;
}
#mainNavbar.nav-hidden {
	transform: translateY(-100%);
}
body.nav-scrolled-up .admin-toolbar-wrapper {
	top: 0;
}

/* nav-link */
.navbar-dark .navbar-nav .nav-link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}
.navbar-dark .navbar-nav .nav-link:hover {
	color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.current,
.navbar-dark .navbar-nav .nav-link.b {
	color: white;
	font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link.current::before,
.navbar-dark .navbar-nav .nav-link.b::before {
	content: '[ ';
	color: #555;
	font-weight: 400;
}
.navbar-dark .navbar-nav .nav-link.current::after,
.navbar-dark .navbar-nav .nav-link.b::after {
	content: ' ]';
	color: #555;
	font-weight: 400;
}

.navbar-nav {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.navbar-nav .nav-link {
	display: block;
	padding: 8px 12px;
}

.navbar-toggler {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.5);
}
.navbar-toggler:hover {
	border-color: rgba(255, 255, 255, 0.25);
}
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background: no-repeat center center;
	background-size: 100% 100%;
}
.navbar-dark .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* navbar-collapse */
.navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	display: none;
	visibility: visible;
}
.navbar-collapse.show {
	display: block;
}
.navbar-expand-xl .navbar-toggler {
	display: flex;
}
@media (min-width: 1200px) {
	.navbar-expand-xl .navbar-nav {
		flex-direction: row;
		align-items: center;
	}
	.navbar-expand-xl .navbar-collapse {
		display: flex !important;
		flex-basis: auto;
		align-items: center;
	}
	.navbar-expand-xl .navbar-toggler {
		display: none;
	}
}
.navbar-text {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

/* User dropdown */
.user-dropdown-menu {
	background: #111;
	border: 1px solid #333;
	border-radius: 0;
	padding: 6px 0;
	margin-top: 8px;
	min-width: 160px;
}
.user-dropdown-menu .dropdown-item {
	color: #ccc;
	font-size: 0.8125rem;
	padding: 8px 16px;
	transition: background 0.1s, color 0.1s;
}
.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item:focus {
	background: #222;
	color: #ddd;
}
.user-dropdown-menu .dropdown-header { color: #888; }
.user-dropdown-menu .dropdown-divider {
	border-top-color: #2a2a2a;
	margin: 4px 0;
}


/* ================================================================
   Tag 系统
   ================================================================ */
.tag {
	border: 1px solid;
	display: inline-block;
	border-color: #333;
	background-color: #111;
	color: #666;
	padding: 3px 10px;
	border-radius: 0;
	line-height: 1;
	font-size: 0.75rem;
	font-weight: bold;
}
	color: #003954;
	background: #7ac8ff;
	border-color: #a7eaff;
}
.tag-purple {
	color: #3e1756;
	background: #ac8fc1;
	border-color: #fcc7ff;
}
.tag-yellow {
	color: #926d19;
	background: #ffedb9;
	border-color: #ffe7ba;
}
.tag-orange {
	color: #713900;
	background: #ffba65;
	border-color: #ffd78b;
}
.tag-green {
	color: #155724;
	background-color: #94e0a7;
	border-color: #b4ffc5;
}
.tag-tl {
	margin: 5px;
	position: absolute;
	left: 0;
	top: 0;
}
.tag-tr {
	margin: 5px;
	position: absolute;
	right: 0;
	top: 0;
}
.tag-darkgray {
	border-color: #333;
	color: #444;
	background-color: #181818;
}


/* ================================================================
   Markdown 渲染（通用）— GitHub-dark 风格，适配 VISCSS 暗色体系
   ================================================================ */
.markdown-rendered {
	font-size: 1rem;
	line-height: 1.8;
	color: #c9d1d9;
	word-wrap: break-word;
}

/* —— 标题 —— */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
	color: #e6edf3;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 0.625rem;
}
.markdown-rendered h1 { font-size: 2rem; margin-bottom: 1.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid #30363d; }
.markdown-rendered h2 { font-size: 1.75rem; margin-bottom: 1.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid #30363d; }
.markdown-rendered h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.markdown-rendered h4 { font-size: 1.25rem; margin-bottom: 0.875rem; }
.markdown-rendered h5 { font-size: 1.125rem; margin-bottom: 0.75rem; }
.markdown-rendered h6 { font-size: 1rem; margin-bottom: 0.75rem; color: #8b949e; }
.markdown-rendered > :first-child { margin-top: 0; }

/* —— 段落 —— */
.markdown-rendered p { margin: 0.75rem 0; }
.markdown-rendered p:last-child { margin-bottom: 0; }

/* —— 行内元素 —— */
.markdown-rendered strong { color: #e6edf3; font-weight: 600; }
.markdown-rendered em { color: #c9d1d9; }
.markdown-rendered a { color: #58a6ff; text-decoration: none; }
.markdown-rendered a:hover { text-decoration: underline; }

/* —— 列表 —— */
.markdown-rendered ul,
.markdown-rendered ol {
	padding-left: 2rem;
	margin: 0.75rem 0;
}
.markdown-rendered li { line-height: 1.8; margin: 0.25rem 0; }
.markdown-rendered ul > li { list-style-type: disc; }
.markdown-rendered ol > li { list-style-type: decimal; }
.markdown-rendered ul ul > li { list-style-type: circle; }
.markdown-rendered ul ul ul > li { list-style-type: square; }
.markdown-rendered li > p { margin: 0.25rem 0; }

/* —— 引用块 —— */
.markdown-rendered blockquote {
	border-left: 3px solid #3b82f6;
	padding: 0.25rem 1rem;
	margin: 1rem 0;
	color: #8b949e;
	background: rgba(56, 139, 253, 0.04);
}
.markdown-rendered blockquote p:first-child { margin-top: 0; }
.markdown-rendered blockquote p:last-child { margin-bottom: 0; }

/* —— 行内代码 —— */
.markdown-rendered code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	background: rgba(110, 118, 129, 0.2);
	padding: 0.2em 0.4em;
	border-radius: 4px;
	color: #e6edf3;
}

/* —— 代码块 —— */
.markdown-rendered pre {
	background: #0d1117;
	border: 1px solid #30363d;
	border-radius: 6px;
	padding: 1rem;
	margin: 1rem 0;
	overflow-x: auto;
}
.markdown-rendered pre code {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #c9d1d9;
}

/* —— 水平线 —— */
.markdown-rendered hr {
	border: none;
	height: 1px;
	background: #30363d;
	margin: 1.5rem 0;
}

/* —— 表格 —— */
.markdown-rendered table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	font-size: 0.875rem;
}
.markdown-rendered th,
.markdown-rendered td {
	border: 1px solid #30363d;
	padding: 0.5rem 0.75rem;
	text-align: left;
}
.markdown-rendered th { background: #161b22; color: #e6edf3; font-weight: 600; }
.markdown-rendered td { color: #c9d1d9; }
.markdown-rendered tr:nth-child(even) td { background: rgba(110, 118, 129, 0.06); }

/* —— 图片 —— */
.markdown-rendered img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0; }

/* —— 任务列表 —— */
.markdown-rendered li input[type="checkbox"] {
	margin-right: 0.4em;
	vertical-align: middle;
}

.hljs, .hljs-tag, .hljs-subst { color: #a2a2a2; }
code { color:#ff864c; font-family: var(--font-mono); }


/* ================================================================
   Btn 系统
   ================================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	color: #888;
	padding: 6px 14px;
	border: 1px solid #444;
	border-radius: 0;
	background: #111;
	text-decoration: none;
	transition: all 0.15s ease;
	line-height: 1.4;
	font-family: var(--font-mono);
	cursor: pointer;
}
.btn:hover {
	color: #aaa;
	background: #1a1a1a;
	border-color: var(--color-secondary, #6b9b9b);
	text-decoration: none;
}
.btn--secondary { color: #555; background: transparent; border-color: #333; }
.btn--secondary:hover { color: #aaa; background: transparent; border-color: #555; }
.btn--secondary.is-active { color: #ddd; border-color: #7ec8e3; }
.btn--primary { color: #7ec8e3; background-color: #1a2e38; border-color: #3a7a94; }
.btn--primary:hover { color: #a0ddf0; background-color: #243d4a; border-color: #7ec8e3; }
.btn--warning { color: #ce9178; border-color: #8b5a2b; }
.btn--warning:hover { color: #e5a88a; border-color: #ce9178; }
.btn--danger { color: #af5252; border-color: #5c2d2d; }
.btn--danger:hover { color: #d17878; border-color: #af5252; }
.btn--cta {
	font-size: 1rem;
	padding: var(--gap-sm) var(--gap-md);
	background-image: repeating-linear-gradient(
		0deg,
		transparent 0px, transparent 2px,
		rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 3px
	);
	background-size: 100% 3px;
	animation: crt-scan 4s linear infinite;
}
@keyframes crt-scan {
	0% { background-position: 0 0; }
	100% { background-position: 0 3px; }
}
.btn--block { display: block; width: 100%; }
.btn--sm { font-size: 0.75rem; padding: 3px 8px; }
.btn-naked { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
button.btn { font-family: inherit; }
a.btn { white-space: nowrap; }


/* ================================================================
   Form 控件
   命名：语义化英文，无框架前缀。
   旧 Bootstrap 别名（form-control / custom-select 等）保留供三站兼容。
   ================================================================ */

/* ── 变量 ── */
:root {
	--input-bg: #0A0A0A;
	--input-bg-focus: #0E0E0E;
	--input-border: #191919;
	--input-border-focus: #232c2d;
	--input-text: var(--color-edit-text, #ccc);
	--input-placeholder: #333;
	--input-disabled-bg: #252525;
	--input-radius: 0;
	--input-font: 0.9375rem;
	--input-padding: .375rem .75rem;
	--input-padding-sm: .25rem .5rem;
	--input-padding-lg: .5rem 1rem;
}

/* ── form-input：text / password / email / url / search / tel / number / date 等 ── */
.form-input,
.form-control /* 旧别名 */ {
	display: block;
	width: 100%;
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	outline: none;
	color: var(--input-text);
	font-size: var(--input-font);
	font-family: inherit;
	padding: var(--input-padding);
	line-height: 1.5;
	transition: border-color 0.15s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form-input:focus,
.form-control:focus {
	background-color: var(--input-bg-focus);
	border-color: var(--input-border-focus);
	outline: none;
	color: var(--input-text);
}
.form-input::placeholder,
.form-control::placeholder,
.form-control::-webkit-input-placeholder {
	color: var(--input-placeholder);
}
.form-input:disabled, .form-input[readonly],
.form-control:disabled, .form-control[readonly] {
	background-color: var(--input-disabled-bg);
	opacity: 1;
	cursor: not-allowed;
}

/* ── 尺寸变体 ── */
.form-input--sm,
.form-control-sm {
	height: calc(1.5em + .5rem + 2px);
	padding: var(--input-padding-sm);
	font-size: .875rem;
	line-height: 1.5;
}
.form-input--lg,
.form-control-lg {
	padding: var(--input-padding-lg);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* ── textarea ── */
textarea.form-input,
textarea.form-control {
	resize: vertical;
	min-height: 2.5rem;
}

/* ── form-select：下拉 ── */
.form-select,
.custom-select /* 旧别名 */ {
	display: block;
	width: 100%;
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	outline: none;
	color: var(--input-text);
	font-size: var(--input-font);
	font-family: inherit;
	padding: var(--input-padding);
	line-height: 1.5;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 0l6 6 6-6' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	padding-right: 2rem;
}
.form-select:focus,
.custom-select:focus {
	background-color: var(--input-bg-focus);
	border-color: var(--input-border-focus);
	outline: none;
}
.form-select:disabled,
.custom-select:disabled {
	background-color: var(--input-disabled-bg);
	opacity: 1;
	cursor: not-allowed;
}

/* ── date / time / color 类型修正 ── */
.form-input[type="date"],
.form-input[type="datetime-local"],
.form-input[type="time"],
.form-input[type="month"],
.form-input[type="week"],
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="time"],
.form-control[type="month"],
.form-control[type="week"] {
	color-scheme: dark;
}
.form-input[type="color"],
.form-control[type="color"] {
	padding: .25rem;
	height: 2.25rem;
	cursor: pointer;
}
.form-input[type="number"],
.form-control[type="number"] {
	-moz-appearance: textfield;
}
.form-input[type="number"]::-webkit-inner-spin-button,
.form-input[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
	opacity: 0.4;
}

/* ── form-check：checkbox / radio ── */
.form-check {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	font-size: .875rem;
	color: var(--gray-medium, #9ca3af);
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
	accent-color: var(--accent-yellow, #eab308);
	margin: 0;
	cursor: pointer;
}
/* 旧 legacy 兼容 */
.form-check-input { position: relative; margin: 0; }
.form-check-label { margin-bottom: 0; }

/* ── form-field：字段容器（label + input + hint） ── */
.form-field,
.form-group /* 旧别名 */ {
	margin-bottom: 1rem;
}

/* ── form-label ── */
.form-label {
	display: block;
	margin-bottom: .375rem;
	font-size: .875rem;
	color: var(--gray-medium, #9ca3af);
}

/* ── form-hint：字段下方提示 ── */
.form-hint {
	display: block;
	margin-top: .25rem;
	font-size: .75rem;
	color: var(--gray-dark, #4b5563);
}

/* ── form-row：多列字段 ── */
.form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-md, 12px);
}
.form-row > .col,
.form-row > [class*="col-"] {
	flex: 1 1 0;
	min-width: 0;
}

/* ── input-group：输入框 + 前缀/后缀 ── */
.input-group {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}
.input-group > .form-input,
.input-group > .form-control {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}
.input-group-prepend,
.input-group-append {
	display: flex;
}
.input-group-text {
	display: flex;
	align-items: center;
	padding: var(--input-padding);
	font-size: var(--input-font);
	color: #888;
	background-color: #1a1a1a;
	border: 1px solid var(--input-border);
}

/* ── form-inline ── */
.form-inline {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: var(--gap-sm, 8px);
}
.form-inline .form-input,
.form-inline .form-select,
.form-inline .form-control,
.d-inline-flex .form-control {
	display: inline-block;
	width: auto;
}


/* ================================================================
   Alert 系统
   ================================================================ */
.alert {
	position: relative;
	padding: .4rem 0.75rem;
	margin-bottom: 0.5rem;
	border: 1px solid transparent;
	border-radius: 0;
}
.alert.compact { padding: .1rem 0.4rem; }
.alert-link { font-weight: 500; }
.alert-primary { color: #ddeaf9; background-color: #486380; border-color: #667f9a; }
.alert-primary .alert-link { color: #b9d1ea; }
.alert-secondary { color: #697075; background-color: #313131; border-color: #434548; }
.alert-secondary .alert-link { color: #919192; }
.alert-warning { color: #856404; background-color: #ffdf9d; border-color: #ffe7af; }
.alert-warning .alert-link { color: #6d4600; }
.alert-light { color: #b9b9b9; background-color: #151515; border-color: #212121; }
.alert-light:hover { background-color: #191919; border-color: #2f2f2f; }
.alert-light .alert-link, .alert-light a { color: #3c3c3c; }
.alert-success { color: #155724; background-color: #a0d48c; border-color: #a4f5b6; }
.alert-danger { color: #d8afb3; background-color: #981420; border-color: #bf3342; }
.alert-danger .alert-link { color: #ff6666; }


/* ================================================================
   Table
   ================================================================ */
.table td, .table th {
	text-align: center;
	padding: 2px 0px;
	vertical-align: middle;
	font-size: 0.7rem;
	border: none;
	line-height: 1.1;
	background-color: #202020;
}
.table td { color: #999; }
.table th { color: #666; }
.table tr th, .table tr td { border-bottom: 1px solid #161515; }
.table thead tr th {
	color: #555;
	background-color: #111;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	line-height: 1.5;
}
thead tr th { color: #444; }
.table-dark { color: #AAA; background-color: #1d1e1f; }
.table-dark.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(132, 132, 132, 0.05); }
.table-dark td, .table-dark th, .table-dark thead th { border-color: #111111; }

.handle { cursor: grab; }


/* ================================================================
   Admin Toolbar
   ================================================================ */
.admin-toolbar-wrapper {
	position: sticky;
	top: var(--navbar-height);
	z-index: 100;
	width: 100%;
	margin-bottom: 1rem;
	transition: top 0.3s ease;
}
.admin-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	min-height: 44px;
	padding: 8px 15px;
	background: #1a1a1a;
	border-bottom: 1px solid #333;
}
.admin-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	color: #888;
	padding: 4px 10px;
	border: 1px solid #444;
	border-radius: 0;
	background: #111;
	text-decoration: none;
	transition: all 0.15s ease;
	line-height: 1.4;
}
.admin-toolbar-btn:hover {
	color: #aaa;
	background: #1a1a1a;
	border-color: var(--color-secondary, #6b9b9b);
	text-decoration: none;
}
.admin-toolbar-btn i { font-size: 0.6875rem; opacity: 0.7; }


/* ================================================================
   page-console（编辑日志等）
   ================================================================ */
.page-console {
	margin-top: var(--gap-lg);
	margin-bottom: var(--gap-lg);
	background: #111;
	border: 1px solid #333;
	overflow: hidden;
}
.page-console-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--gap-xs) var(--gap-md);
	background: #1a1a1a;
	border-bottom: 1px solid #333;
	cursor: pointer;
	user-select: none;
	font-size: 0.6875rem;
	line-height: 1;
	color: #666;
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
}
.page-console-header:hover { color: #999; }
.page-console-title::before {
	content: '>';
	color: #444;
	margin-right: var(--gap-xs);
}
.page-console-toggle { color: #444; font-size: 0.875rem; line-height: 1; }
.page-console-toggle::before { content: '−'; }
.page-console.is-collapsed .page-console-toggle::before { content: '+'; }
.page-console-body {
	padding: 0;
	max-height: 160px;
	overflow-y: auto;
	font-size: 0.6875rem;
	color: #777;
	line-height: 1;
	font-family: var(--font-mono);
}
.page-console.is-collapsed .page-console-body { display: none; }
.page-console-body ul { list-style: none; padding: 0; margin: 0; }
.page-console-body li {
	margin-bottom: 0;
	padding: var(--gap-xs) var(--gap-md);
	border-bottom: 1px solid #1e1e1e;
}
.page-console-body li:last-child { border-bottom: none; }
.page-console-body .log-time { color: #444; margin-right: var(--gap-sm); }
.page-console-body .log-empty { color: #444; padding: var(--gap-xs) var(--gap-md); }


/* ================================================================
   ascii-frame / ascii-section-title
   ================================================================ */
.ascii-frame {
	border: 1px solid #444;
	padding: var(--gap-md);
	margin-bottom: var(--gap-md);
	background: #111;
}
.ascii-section-title {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #ddd;
	margin-bottom: var(--gap-md);
	padding-bottom: var(--gap-sm);
	border-bottom: 1px solid #333;
}
.ascii-section-title::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.ascii-section-title--muted { color: #555; }


/* ================================================================
   card-clickable（可点击卡片）
   ================================================================ */
.card-clickable {
	position: relative;
	transition: border-color 0.2s;
	cursor: pointer;
}
.card-clickable:hover { border-color: #7ec8e3; }
.card-link-overlay { position: absolute; inset: 0; z-index: 1; }
.card-clickable a:not(.card-link-overlay),
.card-clickable .tag { position: relative; z-index: 2; }


/* ================================================================
   VISCSS Grid System（统一网格）
   ────────────────────────────────────────────────────────────────
   全站统一的自适应网格布局。auto-fill + minmax，容器内自动适配列数。

   用法：
     class="grid-m"              → 标准 6 列 @1920
     class="grid-s"              → 紧凑 9 列 @1920
     class="grid-l"              → 宽松 3 列 @1920

   命名规范：grid-{类别}-{尺寸}
     纯尺寸（grid-s/m/l）为通用场景。
     类别前缀定义内容格局和细节属性，尺寸后缀统一宽度标准：
     grid-card-m / grid-npc-s / grid-msg-l …（按需扩展）

   基准：1920px 全宽 / gap = var(--gap-md) = 12px
     grid-s  (200px) → 9列@1920, 6@1440, 4@1024, 3@768, 1@375
     grid-m  (300px) → 6列@1920, 4@1440, 3@1024, 2@768, 1@375
     grid-l  (480px) → 3列@1920, 2@1440, 2@1024, 1@768, 1@375

   注意：工具类 .grid { display:grid } 保持不变，用于固定列布局
   （如 .grid.grid-cols-2）。Grid System 通过尺寸后缀自激活。
   ================================================================ */

/* 公共机制 */
.grid-s, .grid-m, .grid-ml, .grid-l {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
	gap: var(--grid-gap, var(--gap-md));
}

/* 尺寸标准 */
.grid-s  { --grid-min: 200px; }   /* ~9列 @1920 */
.grid-m  { --grid-min: 300px; }   /* ~6列 @1920 */
.grid-ml { --grid-min: 400px; }   /* ~4列 @1920 */
.grid-l  { --grid-min: 480px; }   /* ~3列 @1920 */


/* ================================================================
   card-grid + card（通用卡片）
   ================================================================ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--gap-md);
	margin-bottom: var(--gap-lg);
}
.card {
	display: block;
	padding: var(--gap-md);
	background: #111;
	border: 1px solid #444;
	transition: border-color 0.2s;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	color: inherit;
}
.card:hover { border-color: #7ec8e3; }
.card-title { font-weight: bold; font-size: 1rem; color: #ddd; line-height: 1.3; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: #7ec8e3; }
.card-thumb {
	width: 100%;
	aspect-ratio: 2 / 1;
	background-size: cover;
	background-position: center;
	background-color: #0a0a0a;
	margin-bottom: var(--gap-sm);
}
.card--cover {
	padding: 0;
	aspect-ratio: 2 / 1;
	background-size: cover;
	background-position: center;
	background-color: #0a0a0a;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}
.card--cover .card-overlay {
	display: block;
	padding: var(--gap-lg) var(--gap-md) var(--gap-md);
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.card--cover .card-title { font-size: 0.875rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.card--cover .card-actions {
	position: absolute;
	top: var(--gap-sm);
	right: var(--gap-sm);
	display: flex;
	gap: var(--gap-xs);
	opacity: 0;
	transition: opacity 0.2s;
}
.card--cover:hover .card-actions { opacity: 1; }
.card-action {
	font-size: 0.6875rem;
	color: #aaa;
	cursor: pointer;
	background: rgba(0,0,0,0.6);
	padding: 0 var(--gap-xs);
	line-height: 1.6;
}
.card-action:hover { color: #fff; }
.card-desc { font-size: 0.875rem; color: #555; margin-top: var(--gap-xs); }
.card-badge {
	position: absolute;
	top: var(--gap-sm);
	right: var(--gap-sm);
	font-size: 0.625rem;
	color: #e8a73b;
	border: 1px solid #e8a73b;
	padding: 0 var(--gap-xs);
	line-height: 1.4;
}
.card-badge--muted { color: #555; border-color: #444; }


/* ================================================================
   msg-grid（消息/谏言网格）
   ────────────────────────────────────────────────────────────────
   auto-fill 自适应列数，用 --msg-grid-min 控制最小列宽。
   默认 = m (240px)。变体叠加使用：class="msg-grid msg-grid-l"
   ================================================================ */
.msg-grid {
	--msg-grid-min: 240px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--msg-grid-min), 1fr));
	gap: var(--gap-sm);
}
.msg-grid-s  { --msg-grid-min: 180px; }
.msg-grid-l  { --msg-grid-min: 320px; }
.msg-grid-xl { --msg-grid-min: 400px; }


/* ================================================================
   lang-switcher
   ================================================================ */
.lang-switcher {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
	font-size: 0.6875rem;
}
.lang-switcher a {
	color: #555;
	text-decoration: none;
	padding: 0 var(--gap-sm);
	line-height: 1.8;
	border: 1px solid #333;
	transition: border-color 0.2s, color 0.2s;
}
.lang-switcher a:hover { color: #aaa; border-color: #555; }
.lang-switcher a.is-active { color: #ddd; border-color: #7ec8e3; }


/* ================================================================
   info-table
   ================================================================ */
.info-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.info-table th, .info-table td {
	border-bottom: 1px solid #333;
	padding: var(--gap-sm) var(--gap-md);
	text-align: left;
	vertical-align: top;
}
.info-table th { color: #666; font-weight: normal; white-space: nowrap; }
.info-table td { color: #aaa; }
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }


/* ================================================================
   page-title-box
   ================================================================ */
.page-title-box {
	border: 1px solid #444;
	margin-bottom: var(--gap-lg);
	background: transparent;
}
.page-title-box-title {
	text-align: left;
	color: #ddd;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1;
	margin: 0;
	padding: var(--gap-md);
	text-transform: uppercase;
}
.page-title-box-title::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.page-title-box-meta {
	text-align: left;
	color: #666;
	font-size: 0.8125rem;
	margin: 0;
	padding: 0 var(--gap-md) var(--gap-md);
}
.page-title-box-meta a { color: #6b8096; }
.page-title-box-divider { border: none; border-top: 1px solid #333; margin: 0; }
.page-title-box-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xs);
	padding: var(--gap-md);
}
.page-title-box-content {
	padding: var(--gap-md);
	color: #c0c0c0;
	font-size: 0.8125rem;
}
.page-title-box-content a { color: #6b8096; }
.page-title-box-actions {
	margin: 0;
	padding: var(--gap-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-sm);
}
.page-title-box--with-avatar { display: flex; align-items: flex-start; }
.page-title-box-avatar {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	object-fit: cover;
	border: 1px solid #444;
	margin: var(--gap-md) 0 var(--gap-md) var(--gap-md);
}
.page-title-box-body { flex: 1; min-width: 0; }


/* ================================================================
   para-title — 段落标题（无边框，纯标题+副标题）
   ================================================================ */
.para-title {
	color: #ddd;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	margin: 0 0 var(--gap-xs) 0;
}
.para-title::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.para-title-sub {
	color: #666;
	font-size: 0.8125rem;
	margin: 0 0 var(--gap-md) 0;
}


/* ================================================================
   page-wrap
   ================================================================ */
.page-wrap {
	font-family: var(--font-mono);
	background: #181818;
	color: #c0c0c0;
	padding: 0 0 var(--gap-lg);
	margin: 0 0 var(--gap-lg);
}
.page-wrap a { color: #7ec8e3; }
.page-wrap a:hover { color: #9ee; }
.page-wrap input,
.page-wrap select,
.page-wrap textarea {
	background: #1a1a1a;
	border: 1px solid #555;
	color: #c0c0c0;
	padding: 6px 10px;
}
.page-wrap label { display: block; margin-top: 10px; color: #aaa; }


/* ================================================================
   project-box / project-card
   ================================================================ */
.project-box {
	border: 1px solid #444;
	padding: var(--gap-md);
	margin-bottom: var(--gap-md);
}
.project-card {
	display: block;
	border: 1px solid #444;
	padding: var(--gap-md);
	margin-bottom: var(--gap-md);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s;
}
.project-card:hover { border-color: #7ec8e3; text-decoration: none; color: inherit; }
.project-card-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.project-card-title { color: #ddd; font-size: 1rem; }
.project-card-desc { margin-top: 0.375rem; font-size: 0.875rem; color: #888; }

/* project-status */
.project-status { display: inline-block; padding: 0.125rem var(--gap-sm); border: 1px solid #555; }
.project-status.planning { color: #888; }
.project-status.active,
.project-status.project-status-in_progress { color: #7ec8e3; }
.project-status.completed,
.project-status.project-status-completed { color: #6a9955; }
.project-status.paused { color: #ce9178; }
.project-status.project-status-pending { color: #888; }
.project-status.project-status-unknow { color: #444; border-color: #444; }

/* project-summary / risk */
.project-summary { color: #8fbc8f; margin: var(--gap-md) 0; }
.project-risk-high { color: #ce9178; }
.project-risk-mid { color: #dcdcaa; }

/* project-pagination */
.project-pagination {
	display: flex;
	align-items: center;
	gap: var(--gap-xs);
	padding: var(--gap-md) 0;
	font-size: 0.8125rem;
}
.project-pagination a {
	padding: var(--gap-xs) 10px;
	border: 1px solid #444;
	color: #7ec8e3;
	text-decoration: none;
	transition: border-color 0.2s;
}
.project-pagination a:hover { border-color: #7ec8e3; color: #9ee; }
.project-pagination .current {
	padding: var(--gap-xs) 10px;
	border: 1px solid #7ec8e3;
	color: #fff;
	background: rgba(126, 200, 227, 0.15);
}
.project-pagination .disabled { padding: var(--gap-xs) 10px; color: #444; }
.project-pagination .ellipsis { padding: var(--gap-xs) var(--gap-xs); color: #555; }

/* project-table */
.project-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.project-table th, .project-table td {
	border: 1px solid #444;
	padding: var(--gap-sm) var(--gap-md);
	text-align: left;
}
.project-table th { color: #aaa; background: #1a1a1a; }

/* project-title */
.project-title,
.project-page-title {
	margin-bottom: var(--gap-md);
	padding: var(--gap-md);
	border: 1px solid #555;
	color: #999;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: left;
}


/* ================================================================
   Dropdown
   ================================================================ */
.dropdown { position: relative; }
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	min-width: 160px;
	padding: 6px 0;
	margin: 2px 0 0;
	background: #111;
	border: 1px solid #333;
	border-radius: 0;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-item {
	display: block;
	width: 100%;
	padding: 8px 16px;
	clear: both;
	color: #ccc;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background 0.1s, color 0.1s;
}
.dropdown-item:hover, .dropdown-item:focus {
	color: #ddd;
	background-color: #222;
	text-decoration: none;
}
.dropdown-item.active { color: #fff; background-color: #333; }
.dropdown-header {
	display: block;
	padding: 6px 16px;
	margin-bottom: 0;
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
}
.dropdown-divider {
	height: 0;
	margin: 4px 0;
	overflow: hidden;
	border-top: 1px solid #2a2a2a;
}


/* ================================================================
   Modal
   ================================================================ */
.modal {
	position: fixed;
	top: 0; left: 0;
	z-index: 1050;
	width: 100%; height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	outline: 0;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
}
.modal.show { display: block; }
.modal-dialog {
	position: relative;
	width: auto;
	margin: 1.75rem auto;
	max-width: 500px;
	pointer-events: none;
}
.modal .modal-dialog { pointer-events: auto; }
.modal-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #1a1a1a;
	border: 1px solid #444;
	border-radius: 0;
	outline: 0;
}
.modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--gap-md) var(--gap-lg);
	border-bottom: 1px solid #333;
}
.modal-title { margin-bottom: 0; line-height: 1.5; color: #ddd; font-size: 1rem; }
.modal-body { position: relative; flex: 1 1 auto; padding: var(--gap-lg); color: #aaa; }
.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: var(--gap-md) var(--gap-lg);
	border-top: 1px solid #333;
	gap: var(--gap-sm);
}

/* Close */
.close {
	float: right;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #888;
	text-shadow: none;
	opacity: 0.7;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
}
.close:hover { color: #ccc; opacity: 1; }
button.close { padding: 0; background-color: transparent; border: 0; }


/* ================================================================
   Badge
   ================================================================ */
.badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 0.75rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0;
	color: #ccc;
	background-color: #333;
}
.badge-primary { background-color: #177486; color: #afddf3; }
.badge-secondary { background-color: #33363a; color: #999; }
.badge-success { background-color: #2d5f3a; color: #a0d48c; }
.badge-danger { background-color: #981420; color: #d8afb3; }
.badge-warning { background-color: #856404; color: #ffdf9d; }


/* ================================================================
   Misc 组件
   ================================================================ */
.img-fluid { max-width: 100%; height: auto; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-thumbnail {
	padding: 0;
	background-color: #111;
	border: 1px solid #222;
	max-width: 100%;
	height: auto;
}
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Popover */
.ss-popover {
	position: absolute;
	z-index: 1060;
	max-width: 260px;
	padding: var(--gap-sm) var(--gap-md);
	background: #1a1a1a;
	border: 1px solid #444;
	color: #ccc;
	font-size: 0.75rem;
	line-height: 1.4;
	border-radius: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.ss-popover.show { opacity: 1; pointer-events: auto; }

/* List group */
.list-group {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
}
.list-group-item { padding: 5px; font-size: 0.75rem; }


/* ================================================================
   site-footer
   ================================================================ */
.site-footer {
	border-top: 1px solid #333;
	background: #1a1a1a;
	color: #666;
	font-size: 0.6875rem;
	margin-top: var(--gap-xl);
	font-family: var(--font-mono);
}
.site-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	padding: var(--gap-sm) var(--gap-lg);
}
.site-footer-copy a { color: #888; text-decoration: none; }
.site-footer-copy a:hover { color: #aaa; }
.site-footer-perf { color: #444; margin-left: var(--gap-md); }
.site-footer-lang { display: flex; align-items: center; gap: var(--gap-sm); }
.site-footer-lang a { color: #555; text-decoration: none; }
.site-footer-lang a:hover { color: #aaa; }
.site-footer-lang a.is-active { color: #ddd; font-weight: 600; }
.site-footer-sep { color: #333; }


/* ════════════════════════════════════════════════════════════════════
   VISCSS Utility Layer
   ────────────────────────────────────────────────────────────────────
   VISCSS 自有 utility class。所有 VISKEM 页面（含 admin）均使用此层。
   纯 CSS 实现，零 JS 依赖。
   ════════════════════════════════════════════════════════════════════ */

/* ── 布局 Display ── */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.block         { display: block; }
.hidden        { display: none; }
.grid          { display: grid; }

/* ── Position ── */
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0    { top: 0; }
.right-0  { right: 0; }
.left-0   { left: 0; }

/* ── Flex ── */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1         { flex: 1 1 0%; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }
.min-w-0        { min-width: 0; }

/* ── Grid ── */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ── Sizing ── */
.w-full  { width: 100%; }
.w-2     { width: 0.5rem; }
.w-4     { width: 1rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-24    { width: 6rem; }
.w-28    { width: 7rem; }
.h-2     { height: 0.5rem; }
.h-12    { height: 3rem; }
.h-full  { height: 100%; }
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: clamp(64rem, 55vw, 90rem); }
.max-w-6xl { max-width: clamp(72rem, 60vw, 100rem); }
.max-h-32  { max-height: 8rem; }
.max-h-48  { max-height: 12rem; }
.max-h-60  { max-height: 15rem; }
.max-h-64  { max-height: 16rem; }
.min-h-screen { min-height: 100vh; }

/* ── Margin ── */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.ml-1    { margin-left: 0.25rem; }
.ml-1\.5 { margin-left: 0.375rem; }
.ml-2    { margin-left: 0.5rem; }
.ml-3    { margin-left: 0.75rem; }
.mr-1    { margin-right: 0.25rem; }

/* ── Padding ── */
.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-1    { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1    { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-6    { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem; padding-bottom: 2rem; }
.py-12   { padding-top: 3rem; padding-bottom: 3rem; }
.pt-6    { padding-top: 1.5rem; }
.pt-8    { padding-top: 2rem; }
.pt-12   { padding-top: 3rem; }
.pb-2    { padding-bottom: 0.5rem; }
.pb-12   { padding-bottom: 3rem; }
.pl-2    { padding-left: 0.5rem; }

/* ── Space ── */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ── Typography ── */
.text-xs   { font-size: 0.75rem; line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem; line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.font-light    { font-weight: 300; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-mono     { font-family: var(--font-mono); }
.italic        { font-style: italic; }
.leading-none    { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.tracking-wider  { letter-spacing: 0.05em; }
.uppercase       { text-transform: uppercase; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words         { overflow-wrap: break-word; word-break: break-word; }
.select-none         { user-select: none; -webkit-user-select: none; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ── Colors ── */
.text-gray-light  { color: var(--gray-light); }
.text-gray-medium { color: var(--gray-medium); }
.text-gray-dark   { color: var(--gray-dark); }
.text-gray-200    { color: #e5e7eb; }
.text-gray-300    { color: #d1d5db; }
.text-gray-400    { color: #9ca3af; }
.text-gray-500    { color: #6b7280; }
.text-gray-600    { color: #4b5563; }
.text-accent-red    { color: var(--accent-red); }
.text-accent-yellow { color: var(--accent-yellow); }
.text-blue-400    { color: #60a5fa; }
.text-cyan-400    { color: #22d3ee; }
.text-green-400   { color: #4ade80; }
.text-green-600   { color: #16a34a; }
.text-yellow-400  { color: #facc15; }
.text-red-400     { color: #f87171; }
.text-purple-400  { color: #c084fc; }
.text-amber-300   { color: #fcd34d; }
.text-amber-400   { color: #fbbf24; }
.text-red-200     { color: #fecaca; }
.text-green-200   { color: #bbf7d0; }
.text-yellow-600  { color: #ca8a04; }

/* ── Border ── */
.border   { border: 1px solid #444; }
.border-b { border-bottom: 1px solid #444; }
.border-t { border-top: 1px solid #444; }
.border-r { border-right: 1px solid #444; }
.border-l-2  { border-left: 2px solid; }
.border-l-4  { border-left: 4px solid; }
.border-t-0  { border-top: 0; }
.border-dashed { border-style: dashed; }
.border-gray-dark   { border-color: var(--gray-dark); }
.border-gray-700    { border-color: #374151; }
.border-gray-800    { border-color: #1f2937; }
.border-accent-yellow { border-color: var(--accent-yellow); }
.border-green-500   { border-color: #22c55e; }
.border-green-700   { border-color: #15803d; }
.border-red-700     { border-color: #b91c1c; }
.border-purple-500  { border-color: #a855f7; }
.border-amber-800   { border-color: #92400e; }
.rounded     { border-radius: 0.25rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* ── Divide ── */
.divide-y > * + * { border-top: 1px solid #333; }

/* ── Background ── */
.bg-black { background-color: #000; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Effects ── */
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.resize-y     { resize: vertical; }
.object-cover { object-fit: cover; }
.outline-none { outline: none; }
.float-right  { float: right; }
.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ── Transition ── */
.transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.transition-all    { transition: all 0.15s; }
.duration-300      { transition-duration: 300ms; }

/* ── Hover states ── */
.hover\:text-accent-yellow:hover { color: var(--accent-yellow); }
.hover\:text-accent-red:hover    { color: var(--accent-red); }
.hover\:text-gray-light:hover    { color: var(--gray-light); }
.hover\:text-gray-200:hover      { color: #e5e7eb; }
.hover\:text-gray-300:hover      { color: #d1d5db; }
.hover\:text-gray-400:hover      { color: #9ca3af; }
.hover\:text-red-400:hover       { color: #f87171; }
.hover\:text-blue-300:hover      { color: #93c5fd; }
.hover\:underline:hover          { text-decoration: underline; }
.hover\:bg-white\/5:hover        { background-color: rgba(255,255,255,0.05); }
.hover\:bg-accent-yellow\/10:hover { background-color: rgba(234,179,8,0.1); }
.hover\:bg-amber-900\/50:hover   { background-color: rgba(120,53,15,0.5); }
.hover\:bg-green-500\/10:hover   { background-color: rgba(34,197,94,0.1); }
.hover\:bg-purple-500\/10:hover  { background-color: rgba(168,85,247,0.1); }
.hover\:border-accent-yellow\/50:hover { border-color: rgba(234,179,8,0.5); }
.hover\:border-accent-red:hover  { border-color: var(--accent-red); }
.hover\:border-gray-500:hover    { border-color: #6b7280; }
.hover\:opacity-30:hover         { opacity: 0.3; }

/* ── Focus states ── */
.focus\:outline-none:focus        { outline: none; }
.focus\:border-accent-yellow\/50:focus { border-color: rgba(234,179,8,0.5); }
.focus\:border-amber-600:focus    { border-color: #d97706; }

/* ── Group hover ── */
.group:hover .group-hover\:text-accent-yellow { color: var(--accent-yellow); }
.group:hover .group-hover\:text-amber-300     { color: #fcd34d; }
.group:hover .group-hover\:underline          { text-decoration: underline; }

/* ── Last child ── */
.last\:border-0:last-child { border: 0; }

/* ── Placeholder ── */
.placeholder-gray-500::placeholder { color: #6b7280; }

/* ================================================================
   page-slogan — 前台页面公开 slogan 展示（非管理员可见）
   ================================================================ */
.page-slogan {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
	text-align: center;
	animation: pageSloganIn 1.8s ease-out both;
}
.page-slogan-inner {
	max-width: 640px;
	padding: 2rem;
}
.page-slogan-deco {
	color: #444;
	font-size: 0.6875rem;
	letter-spacing: 0.6em;
	font-family: var(--font-mono);
}
.page-slogan-deco--top { margin-bottom: 1.5rem; }
.page-slogan-deco--bot { margin-top: 1.5rem; }
.page-slogan-text {
	font-size: 1.5rem;
	line-height: 1.8;
	color: #9ca3af;
	letter-spacing: 0.12em;
}
.page-slogan-cursor {
	display: inline-block;
	width: 2px;
	height: 1.2em;
	background: var(--accent-yellow);
	margin-left: 4px;
	vertical-align: text-bottom;
	animation: pageSloganBlink 1s step-end infinite;
}
@keyframes pageSloganIn {
	0%   { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes pageSloganBlink {
	0%, 50% { opacity: 0.8; }
	51%, 100% { opacity: 0; }
}
@media (min-width: 768px) {
	.page-slogan-text { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
	.page-slogan-text { font-size: 2rem; }
}


/* ── Responsive: sm (640px) ── */
@media (min-width: 640px) {
	.sm\:flex { display: flex; }
}

/* ── Responsive: md (768px) ── */
@media (min-width: 768px) {
	.md\:hidden       { display: none; }
	.md\:flex         { display: flex; }
	.md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.md\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.md\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.md\:pt-0         { padding-top: 0; }
	.md\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
	.md\:translate-x-0 { transform: translateX(0); }
}

/* ── Responsive: xl (1280px) ── */
@media (min-width: 1280px) {
	.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}