@charset "UTF-8";
/**
 * vis.css — VISCSS 框架核心
 * 跨站共享（viskem / ssssdev / sensegames），仅收录被 2+ 站点使用的组件。
 * 治理协议详见 protocol/CSS_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） */
	--gap-xs: 4px;
	--gap-sm: 8px;
	--gap-md: 12px;
	--gap-lg: 20px;
	--gap-xl: 30px;

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

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

	/* 字体栈 */
	--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;
}

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: 45px; font-weight: 100; }
h2 { font-size: 33px; font-weight: 100; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; }

label { color: #999; }

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


/* ================================================================
   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 {
	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%; }
}


/* ================================================================
   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: 13px;
	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: 12px;
	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: 13px;
	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: 12px;
	font-weight: bold;
}
.tag-blue {
	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 渲染（通用）
   ================================================================ */
.markdown-rendered {
	font-size: 14px;
	line-height: 1.8;
	color: #bbb;
	word-wrap: break-word;
}
.markdown-rendered p { margin-bottom: 1em; }
.markdown-rendered p:last-child { margin-bottom: 0; }
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4 {
	color: #ddd;
	margin: 1.2em 0 0.6em;
	font-weight: 600;
}
.markdown-rendered h1 { font-size: 1.4em; }
.markdown-rendered h2 { font-size: 1.2em; }
.markdown-rendered h3 { font-size: 1.05em; }
.markdown-rendered h4 { font-size: 1em; }
.markdown-rendered ul,
.markdown-rendered ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}
.markdown-rendered ul li { list-style-type: disc; line-height: 1.8; color: #999; }
.markdown-rendered ol li { list-style-type: decimal; line-height: 1.8; color: #999; }
.markdown-rendered ul ul li { list-style-type: circle; }
.markdown-rendered blockquote {
	padding: 12px 20px;
	border-left: 2px solid #333;
	background-color: #191919;
	margin-bottom: 1em;
}
.markdown-rendered blockquote p:last-child { margin-bottom: 0; }
.markdown-rendered code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	padding: 1px 5px;
	color: #ccc;
}
.markdown-rendered pre {
	background: #141414;
	border: 1px solid #2a2a2a;
	padding: 14px 18px;
	margin-bottom: 1em;
	overflow-x: auto;
}
.markdown-rendered pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	line-height: 1.25;
}
.markdown-rendered a { color: #7ab; text-decoration: none; }
.markdown-rendered a:hover { color: #9cd; text-decoration: underline; }
.markdown-rendered hr { border: none; border-top: 1px solid #2a2a2a; margin: 1.5em 0; }
.markdown-rendered table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
	font-size: 13px;
}
.markdown-rendered th,
.markdown-rendered td {
	border: 1px solid #2a2a2a;
	padding: 8px 12px;
	text-align: left;
}
.markdown-rendered th { background: #1a1a1a; color: #ccc; font-weight: 600; }
.markdown-rendered td { color: #999; }
.markdown-rendered img { max-width: 100%; height: auto; border-radius: 4px; }
.markdown-rendered strong { color: #ddd; font-weight: 600; }
.markdown-rendered em { color: #aaa; }

.hljs, .hljs-tag, .hljs-subst { color: #a2a2a2; }
code { color:#ff864c; }


/* ================================================================
   Btn 系统
   ================================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	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;
	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: 16px;
	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%; }
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: 12px;
	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: 11px; 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: 11px;
	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: 14px; 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: 11px;
	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: 16px;
	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; }


/* ================================================================
   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: 16px; 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: 14px; 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: 11px;
	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__meta { font-size: 11px; color: #555; margin-top: var(--gap-xs); }
.card__badge {
	position: absolute;
	top: var(--gap-sm);
	right: var(--gap-sm);
	font-size: 10px;
	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: 11px;
}
.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: 13px; }
.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: 16px;
	line-height: 1;
	margin: 0;
	padding: var(--gap-md);
}
.page-title-box__title::before {
	content: '> ';
	color: #555;
	font-weight: 400;
}
.page-title-box__meta {
	text-align: left;
	color: #666;
	font-size: 13px;
	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: 13px;
}
.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: 16px;
	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: 13px;
	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: 10px; flex-wrap: wrap; }
.project-card__name { color: #ddd; font-size: 14px; }
.project-card__stats { margin-top: 6px; font-size: 12px; color: #888; }

/* project-status */
.project-status { display: inline-block; padding: 2px 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: 13px;
}
.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: 13px; }
.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: 14px;
	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: 13px;
	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: 12px;
	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: 16px; }
.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: 12px;
	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-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: 12px;
	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: 12px; }


/* ================================================================
   site-footer
   ================================================================ */
.site-footer {
	border-top: 1px solid #333;
	background: #1a1a1a;
	color: #666;
	font-size: 11px;
	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
   ────────────────────────────────────────────────────────────────────
   替代 Tailwind utility。所有 VISKEM 页面（含 admin）均使用此层。
   命名与 Tailwind 兼容，便于迁移；纯 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: 64rem; }
.max-w-6xl { max-width: 72rem; }
.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; }

/* ── 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)); }
}