/* ============================================================
   NEON//GRID — Cyberpunk theme for DataLife Engine
   Skin layer: loaded after engine.css + base.css
   Palette: cyan / magenta / acid yellow on deep void blue
   ============================================================ */

/* ---------- 01. DESIGN TOKENS ---------- */

:root {
	--font-ui: "Rajdhani", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
	--font-mono: "Share Tech Mono", "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
	--font-display: "Orbitron", "Rajdhani", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

	--nc-void: #05070c;
	--nc-void-2: #070b13;
	--nc-panel: #0a1019;
	--nc-panel-2: #0d1623;
	--nc-panel-3: #111c2b;
	--nc-line: #1b2b3b;
	--nc-line-strong: #2a4357;
	--nc-text: #d7e8f5;
	--nc-muted: #7b93a8;
	--nc-dim: #4c6376;
	--nc-cyan: #00f0ff;
	--nc-cyan-deep: #00b9c9;
	--nc-pink: #ff2a6d;
	--nc-yellow: #f3e600;
	--nc-green: #3dffa2;
	--nc-glow: 0 0 14px rgba(0, 240, 255, .35);
	--nc-glow-pink: 0 0 14px rgba(255, 42, 109, .35);
	--nc-font-xs: .6875rem;
	--nc-font-sm: .8125rem;
	--nc-font-md: .9375rem;
}

:root,
:root[data-theme="dark"] {
	--bg: var(--nc-void);
	--surface: var(--nc-panel);
	--surface-soft: var(--nc-panel-2);
	--surface-sunk: #060a11;
	--text: var(--nc-text);
	--muted: var(--nc-muted);
	--line: var(--nc-line);
	--accent: var(--nc-cyan);
	--accent-strong: var(--nc-cyan-deep);
	--accent-soft: rgba(0, 240, 255, .075);
	--accent-hover-soft: rgba(0, 240, 255, .14);
	--accent-ink: #021014;
	--sage: #4bd6b0;
	--sage-soft: rgba(75, 214, 176, .09);
	--sage-ink: #6ef0c8;
	--sage-hover: rgba(75, 214, 176, .16);
	--sage-hover-ink: #8bffdd;
	--mist-soft: rgba(160, 130, 255, .1);
	--mist-ink: #c0a6ff;
	--mist-hover: rgba(160, 130, 255, .18);
	--amber-soft: rgba(243, 230, 0, .08);
	--amber-ink: var(--nc-yellow);
	--amber-hover: rgba(243, 230, 0, .15);
	--rose-soft: rgba(255, 42, 109, .08);
	--rose-ink: #ff7ba3;
	--rose-hover: rgba(255, 42, 109, .15);
	--positive: var(--nc-green);
	--positive-soft: rgba(61, 255, 162, .08);
	--negative: #ff5c88;
	--negative-soft: rgba(255, 42, 109, .1);
	--warn: var(--nc-yellow);
	--warn-soft: rgba(243, 230, 0, .08);
	--news-text: #b6cddd;
	--image-brightness: .82;
	--image-contrast: 1.12;
	--image-saturate: .82;
	--star: var(--nc-yellow);
	--star-off: #263847;
	--dot: #3d5568;
	--shadow: 0 0 0 1px rgba(0, 240, 255, .05), 0 18px 48px rgba(0, 0, 0, .5);
	--shadow-soft: 0 12px 32px rgba(0, 0, 0, .38);
	--shadow-tiny: 0 6px 18px rgba(0, 0, 0, .28);
	--shadow-menu: 0 0 0 1px rgba(0, 240, 255, .14), 0 24px 60px rgba(0, 0, 0, .7);
	--shadow-modal: 0 0 0 1px rgba(0, 240, 255, .18), 0 32px 90px rgba(0, 0, 0, .8);
	--radius: 0px;
	--r-xs: 0px;
	--r-sm: 0px;
	--r-md: 2px;
	--r-lg: 2px;
	--r-xl: 3px;
	--r-pill: 1px;
	--container: 1280px;
	--hair: 1px;
	--code-bg: #060d15;
	--code-border: #16283a;
	--code-ink: #cfe6f5;
	--code-comment: #5f7c92;
	--code-punct: #8ea9bd;
	--code-value: #ff8ab0;
	--code-string: #94f7c7;
	--code-operator: #f3e600;
	--code-keyword: #66e9ff;
	--code-function: #ffb072;
	--code-variable: #b9b2ff;
	--code-regex: #e0c76b;
	--code-select: #12374a;
	--code-shadow: none;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--nc-void: #e6edf3;
	--nc-void-2: #e9eff5;
	--nc-panel: rgba(240, 244, 248, .94);
	--nc-panel-2: #eef3f7;
	--nc-panel-3: #e3ebf2;
	--nc-line: #c9d5e0;
	--nc-line-strong: #a9bac9;
	--nc-text: #2c3e50;
	--nc-muted: #5e7386;
	--nc-dim: #8496a7;
	--nc-cyan: #0e7490;
	--nc-cyan-deep: #0b5f77;
	--nc-pink: #be123c;
	--nc-yellow: #9a7b00;
	--nc-green: #0f7a52;
	--nc-glow: 0 0 10px rgba(14, 116, 144, .14);
	--nc-glow-pink: 0 0 10px rgba(190, 18, 60, .12);

	--bg: var(--nc-void);
	--surface: var(--nc-panel);
	--surface-soft: var(--nc-panel-2);
	--surface-sunk: #dde6ee;
	--text: var(--nc-text);
	--muted: var(--nc-muted);
	--line: var(--nc-line);
	--accent: var(--nc-cyan);
	--accent-strong: var(--nc-cyan-deep);
	--accent-soft: rgba(14, 116, 144, .07);
	--accent-hover-soft: rgba(14, 116, 144, .13);
	--accent-ink: #f7fbfd;
	--sage-soft: rgba(15, 122, 82, .08);
	--sage-ink: #0f7a52;
	--sage-hover: rgba(15, 122, 82, .14);
	--sage-hover-ink: #0a5c3e;
	--mist-soft: rgba(90, 70, 160, .08);
	--mist-ink: #5a46a0;
	--mist-hover: rgba(90, 70, 160, .14);
	--amber-soft: rgba(154, 123, 0, .09);
	--amber-ink: #7d6400;
	--amber-hover: rgba(154, 123, 0, .16);
	--rose-soft: rgba(190, 18, 60, .07);
	--rose-ink: #a3103a;
	--rose-hover: rgba(190, 18, 60, .13);
	--positive: #0f7a52;
	--positive-soft: rgba(15, 122, 82, .08);
	--negative: #b3123f;
	--negative-soft: rgba(190, 18, 60, .08);
	--warn: #806700;
	--warn-soft: rgba(154, 123, 0, .09);
	--news-text: #3d5265;
	--image-brightness: 1;
	--image-contrast: 1.02;
	--image-saturate: .96;
	--star: #9a7b00;
	--star-off: #b8c5d1;
	--dot: #a7b8c6;
	--shadow: 0 12px 30px rgba(15, 23, 42, .08);
	--shadow-soft: 0 8px 22px rgba(15, 23, 42, .06);
	--shadow-tiny: 0 4px 14px rgba(15, 23, 42, .05);
	--shadow-menu: 0 18px 40px rgba(15, 23, 42, .16);
	--shadow-modal: 0 28px 70px rgba(15, 23, 42, .24);
	--code-bg: #eef3f7;
	--code-border: #d4dee8;
	--code-ink: #21384c;
	--code-comment: #74879a;
	--code-punct: #5c7084;
	--code-value: #a3103a;
	--code-string: #0f7a52;
	--code-operator: #7d6400;
	--code-keyword: #0b5f77;
	--code-function: #b45309;
	--code-variable: #4c3f8f;
	--code-regex: #7d6400;
	--code-select: #cfe3ee;
	--code-shadow: none;
	color-scheme: light;
}

/* ---------- 02. GLOBAL ---------- */

*, *::before, *::after { box-sizing: border-box; }

body.cyber {
	margin: 0;
	min-height: 100vh;
	background-color: var(--bg);
	background-image:
		radial-gradient(ellipse 70% 45% at 50% -12%, rgba(0, 240, 255, .10), transparent 62%),
		radial-gradient(ellipse 45% 35% at 102% 12%, rgba(255, 42, 109, .07), transparent 70%),
		radial-gradient(ellipse 60% 50% at -10% 80%, rgba(90, 60, 255, .05), transparent 70%);
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--font-size-lg);
	line-height: 1.65;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:root[data-theme="light"] body.cyber {
	background-image:
		radial-gradient(ellipse 70% 45% at 50% -12%, rgba(14, 116, 144, .05), transparent 62%),
		radial-gradient(ellipse 45% 35% at 102% 12%, rgba(190, 18, 60, .04), transparent 70%);
}

body.cyber > * { font-size: inherit; }

::selection { background: var(--nc-cyan); color: #021014; }
:root[data-theme="light"] ::selection { color: #fff; }

body.cyber a { color: inherit; text-decoration: none; }
body.cyber button { font-family: inherit; }
body.cyber h1, body.cyber h2, body.cyber h3, body.cyber h4, body.cyber h5, body.cyber h6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: .015em;
	line-height: 1.22;
}

body.cyber :focus-visible {
	outline: 2px solid var(--nc-cyan);
	outline-offset: 3px;
}

body.cyber ::-webkit-scrollbar { width: 10px; height: 10px; }
body.cyber ::-webkit-scrollbar-track { background: var(--nc-void-2); }
body.cyber ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--nc-cyan-deep), #123244);
	border: 2px solid var(--nc-void-2);
}
body.cyber ::-webkit-scrollbar-thumb:hover { background: var(--nc-cyan); }
:root[data-theme="light"] body.cyber ::-webkit-scrollbar-thumb { background: #9db3c5; }
:root[data-theme="light"] body.cyber ::-webkit-scrollbar-track { background: #dbe4ec; }

.skip-link {
	border-radius: 0;
	background: var(--nc-cyan);
	color: #021014;
	font-family: var(--font-mono);
	letter-spacing: .08em;
}

.container { width: min(calc(100% - 2.5rem), var(--container)); }

/* ---------- 03. ATMOSPHERE LAYERS ---------- */

.fx-grid {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(0, 240, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 240, 255, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 25%, transparent 78%);
}

:root[data-theme="light"] .fx-grid {
	background-image:
		linear-gradient(to right, rgba(15, 23, 42, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15, 23, 42, .045) 1px, transparent 1px);
}

.fx-scan {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background:
		repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px),
		linear-gradient(90deg, rgba(255, 0, 60, .025), rgba(0, 255, 190, .012), rgba(0, 80, 255, .025));
	opacity: .55;
	mix-blend-mode: multiply;
}

.fx-scan::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 30vh;
	top: -30vh;
	background: linear-gradient(180deg, transparent, rgba(0, 240, 255, .055), transparent);
	animation: scan-sweep 9s linear infinite;
}

:root[data-theme="light"] .fx-scan {
	opacity: .14;
	mix-blend-mode: multiply;
}

:root[data-theme="light"] .fx-scan::after { opacity: .5; }

.fx-vignette {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse 100% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

:root[data-theme="light"] .fx-vignette { display: none; }

@keyframes scan-sweep {
	0% { transform: translateY(0); }
	100% { transform: translateY(130vh); }
}

/* 故障文字 */
.glitch {
	position: relative;
	display: inline-block;
	color: var(--nc-cyan);
	text-shadow: 0 0 18px rgba(0, 240, 255, .35);
}

.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: transparent;
}

.glitch::before {
	left: 2px;
	text-shadow: -2px 0 var(--nc-pink);
	clip: rect(24px, 9999px, 60px, 0);
	animation: glitch-a 6s infinite linear alternate-reverse;
}

.glitch::after {
	left: -2px;
	text-shadow: 2px 0 var(--nc-cyan), 0 1px var(--nc-pink);
	clip: rect(60px, 9999px, 96px, 0);
	animation: glitch-b 5.2s infinite linear alternate-reverse;
}

:root[data-theme="light"] .glitch { text-shadow: none; }

@keyframes glitch-a {
	0% { clip: rect(8px, 9999px, 26px, 0); }
	18% { clip: rect(42px, 9999px, 12px, 0); }
	36% { clip: rect(3px, 9999px, 38px, 0); }
	54% { clip: rect(30px, 9999px, 54px, 0); }
	72% { clip: rect(14px, 9999px, 22px, 0); }
	100% { clip: rect(48px, 9999px, 34px, 0); }
}

@keyframes glitch-b {
	0% { clip: rect(34px, 9999px, 8px, 0); }
	22% { clip: rect(6px, 9999px, 44px, 0); }
	48% { clip: rect(50px, 9999px, 20px, 0); }
	74% { clip: rect(20px, 9999px, 52px, 0); }
	100% { clip: rect(40px, 9999px, 14px, 0); }
}

.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	height: 2px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--nc-cyan), var(--nc-pink));
	box-shadow: 0 0 12px rgba(0, 240, 255, .65);
	pointer-events: none;
}

/* ---------- 04. TYPE UTILITIES ---------- */

.block-kicker,
.feed-head__kicker,
.page-head__kicker,
.hero-copy__kicker,
.cyber-widget__kicker,
.article__node,
.story__serial {
	display: block;
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: var(--nc-font-xs);
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.story__cat,
.related-card__cat {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 2px 8px;
	border: 1px solid rgba(0, 240, 255, .45);
	background: rgba(0, 240, 255, .07);
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: var(--nc-font-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
	transition: background .2s, color .2s, box-shadow .2s;
}

.story__cat a, .related-card__cat a { color: inherit; }
.story__cat:hover, .related-card__cat:hover { background: var(--nc-cyan); color: #021014; box-shadow: var(--nc-glow); }

.chips a,
.tag-cloud a {
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(0, 240, 255, .04);
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: var(--nc-font-xs);
	letter-spacing: .06em;
}

.chips a:hover,
.tag-cloud a:hover {
	border-color: var(--nc-cyan);
	background: rgba(0, 240, 255, .12);
	color: var(--nc-cyan);
}

:root[data-theme="light"] .chips a,
:root[data-theme="light"] .tag-cloud a { background: #e5edf4; }

/* ---------- 05. SYSTEM BAR ---------- */

.sysbar {
	position: relative;
	z-index: 40;
	border-bottom: 1px solid var(--nc-line);
	background: rgba(3, 6, 11, .92);
	backdrop-filter: blur(8px);
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: var(--nc-font-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
}

:root[data-theme="light"] .sysbar { background: rgba(233, 240, 246, .94); }

.sysbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 32px;
}

.sysbar__status {
	display: flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
}

.sysbar__pulse {
	width: 6px;
	height: 6px;
	flex: none;
	background: var(--nc-green);
	box-shadow: 0 0 8px var(--nc-green);
	animation: pulse-dot 2.2s ease-in-out infinite;
}

.sysbar__mode { color: var(--nc-green); }

.sysbar__slash { color: var(--nc-line-strong); }

.sysbar__ticker {
	position: relative;
	overflow: hidden;
	max-width: 34vw;
	height: 1.2em;
	color: var(--nc-dim);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sysbar__ticker-track {
	display: inline-flex;
	white-space: nowrap;
	animation: ticker 38s linear infinite;
}

.sysbar__ticker-track > span { padding-right: 2rem; }

@keyframes ticker {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .55; transform: scale(.72); }
}

.sysbar__links {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: none;
}

.sysbar__links a { color: var(--nc-muted); transition: color .2s; }
.sysbar__links a:hover { color: var(--nc-cyan); text-shadow: var(--nc-glow); }
.sysbar__clock { color: var(--nc-cyan); padding-left: 1rem; border-left: 1px solid var(--nc-line); }

/* ---------- 06. HEADER ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 35;
	border-bottom: 1px solid var(--nc-line);
	background: rgba(6, 10, 17, .86);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}

:root[data-theme="light"] .site-header {
	background: rgba(238, 243, 247, .9);
	box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nc-cyan), transparent);
	opacity: .5;
	pointer-events: none;
}

.header-main {
	min-height: 76px;
	display: flex;
	align-items: center;
	gap: 2rem;
}

.cyber-brand {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	flex: 0 1 auto;
	min-width: 0;
}

.cyber-brand__mark {
	position: relative;
	display: grid;
	gap: 3px;
	width: 38px;
	height: 38px;
	padding: 9px 7px;
	background: rgba(0, 240, 255, .06);
	border: 1px solid rgba(0, 240, 255, .38);
	clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
	box-shadow: inset 0 0 14px rgba(0, 240, 255, .12);
}

.cyber-brand__mark i {
	display: block;
	height: 3px;
	background: var(--nc-cyan);
	box-shadow: 0 0 8px rgba(0, 240, 255, .65);
}

.cyber-brand__mark i:nth-child(1) { width: 100%; }
.cyber-brand__mark i:nth-child(2) { width: 62%; background: var(--nc-pink); box-shadow: 0 0 8px rgba(255, 42, 109, .6); }
.cyber-brand__mark i:nth-child(3) { width: 82%; }

.cyber-brand__text { display: block; min-width: 0; }

.cyber-brand__name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: .06em;
	white-space: nowrap;
}

.cyber-brand__tag {
	display: block;
	margin-top: 2px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .17em;
	text-transform: uppercase;
	white-space: nowrap;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--font-mono);
	font-size: var(--nc-font-sm);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.primary-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: .5rem .7rem;
	color: var(--nc-muted);
	transition: color .2s, background .2s;
}

.primary-nav a::before {
	content: "[";
	position: absolute;
	top: 50%;
	left: 0;
	bottom: auto;
	height: auto;
	background: none;
	border-radius: 0;
	opacity: 0;
	color: var(--nc-cyan);
	transform: translate(4px, -50%);
	transition: opacity .2s, transform .2s;
}

.primary-nav a::after {
	content: "]";
	position: absolute;
	top: 50%;
	right: 0;
	left: auto;
	bottom: auto;
	height: auto;
	background: none;
	border-radius: 0;
	opacity: 0;
	color: var(--nc-cyan);
	transform: translate(-4px, -50%);
	transition: opacity .2s, transform .2s;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] { color: var(--nc-cyan); }

.primary-nav a:hover::before,
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::before,
.primary-nav a[aria-current="page"]::after { opacity: 1; transform: translateY(-50%); }

.primary-nav a[aria-current="page"] { background: rgba(0, 240, 255, .06); }

.header-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
	flex: 0 0 auto;
}

.icon-button {
	width: 38px;
	height: 38px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(0, 240, 255, .03);
	color: var(--nc-muted);
	transition: all .2s;
}

.icon-button:hover {
	border-color: var(--nc-cyan);
	background: rgba(0, 240, 255, .1);
	color: var(--nc-cyan);
	box-shadow: var(--nc-glow);
}

.icon-button .icon { width: 17px; height: 17px; }

.theme-button {
	width: auto;
	padding: 0 .7rem;
	gap: .45rem;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	white-space: nowrap;
}

.theme-button__label { color: inherit; }

.theme-button .theme-moon { display: none; }
.theme-button .theme-sun { display: block; }
:root[data-theme="dark"] .theme-button .theme-moon { display: block; }
:root[data-theme="dark"] .theme-button .theme-sun { display: none; }

.menu-button { display: none; }

/* 搜索面板 */
.search-panel {
	padding: 0 0 1rem;
	border-top: 1px dashed var(--nc-line);
	background: rgba(0, 240, 255, .015);
}

.search-form {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: .6rem;
}

.search-form__prompt {
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 1.2rem;
}

.search-form input[type="search"] {
	min-width: 0;
	height: 44px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(3, 7, 12, .7);
	padding: 0 1rem;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: var(--nc-font-sm);
	letter-spacing: .04em;
}

:root[data-theme="light"] .search-form input[type="search"] { background: #fff; }

.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--nc-cyan);
	box-shadow: 0 0 0 1px var(--nc-cyan), inset 0 0 18px rgba(0, 240, 255, .06);
}

.search-form__advanced {
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: var(--nc-font-xs);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.search-form__advanced:hover { color: var(--nc-cyan); }

/* 分类条 */
.category-bar {
	border-top: 1px solid var(--nc-line);
	background: rgba(4, 8, 14, .55);
}

:root[data-theme="light"] .category-bar { background: rgba(228, 237, 244, .6); }

.category-scroll { min-height: 42px; }

.category-menu { gap: .2rem; }

.category-link {
	min-height: 36px;
	padding: .35rem .8rem;
	border: 1px solid transparent;
	border-radius: 0;
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: all .2s;
}

.category-link:hover {
	border-color: var(--nc-line-strong);
	background: rgba(0, 240, 255, .05);
	color: var(--nc-cyan);
}

.category-link.is-active,
.category-menu__row:has(.category-link.is-active) {
	border-color: rgba(0, 240, 255, .5);
	background: rgba(0, 240, 255, .1);
	color: var(--nc-cyan);
	box-shadow: inset 0 -2px 0 var(--nc-cyan);
}

.category-link__count {
	color: var(--nc-dim);
	font-size: 9px;
	opacity: .9;
}

.category-link.is-active .category-link__count { color: var(--nc-cyan); }

.category-menu__toggle {
	width: 36px;
	min-height: 36px;
	border-radius: 0;
	color: var(--nc-dim);
}
.category-menu__toggle:hover { color: var(--nc-cyan); }

.category-menu__submenu {
	border: 1px solid var(--nc-line-strong);
	border-radius: 0;
	background: #080e17;
	box-shadow: var(--shadow-menu);
}
:root[data-theme="light"] .category-menu__submenu { background: #f4f8fb; }

/* 用户菜单 */
.user-menu__toggle {
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(0, 240, 255, .03);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
}
.user-menu__toggle:hover { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .08); }

.user-menu__panel {
	border: 1px solid var(--nc-line-strong);
	border-radius: 0;
	background: #080e17;
	box-shadow: var(--shadow-menu);
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
:root[data-theme="light"] .user-menu__panel { background: #f6fafc; }

.user-menu__list a { border-radius: 0; font-family: var(--font-ui); }
.user-menu__list a:hover { background: rgba(0, 240, 255, .08); color: var(--nc-cyan); }
.user-menu__badge { border-radius: 0; background: var(--nc-pink); color: #fff; }
.user-menu__panel--login .primary-button { width: 100%; }

/* ---------- 07. BUTTONS / BADGES ---------- */

.primary-button,
.soft-button {
	min-height: 40px;
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.primary-button {
	border: 1px solid var(--nc-cyan);
	background: rgba(0, 240, 255, .12);
	color: var(--nc-cyan);
	box-shadow: inset 0 0 18px rgba(0, 240, 255, .06);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.primary-button:hover {
	border-color: var(--nc-cyan);
	background: var(--nc-cyan);
	color: #021014;
	box-shadow: 0 0 24px rgba(0, 240, 255, .45);
	transform: translateY(-1px);
}

.soft-button {
	border: 1px solid var(--nc-line);
	background: rgba(0, 240, 255, .03);
	color: var(--nc-muted);
}

.soft-button:hover {
	border-color: var(--nc-cyan);
	background: rgba(0, 240, 255, .08);
	color: var(--nc-cyan);
}

:root[data-theme="light"] .primary-button { background: rgba(14, 116, 144, .1); color: var(--nc-cyan); }
:root[data-theme="light"] .primary-button:hover { background: var(--nc-cyan); color: #fff; }
:root[data-theme="light"] .soft-button { background: #eaf1f6; }

.icon-action {
	width: 30px;
	height: 30px;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--nc-dim);
}
.icon-action:hover, .icon-action.is-active {
	border-color: var(--nc-line-strong);
	background: rgba(0, 240, 255, .07);
	color: var(--nc-cyan);
}

.badge, .pin-label, .counter {
	border-radius: 0;
	font-family: var(--font-mono);
	letter-spacing: .08em;
}

.badge { border: 1px solid var(--nc-line); background: rgba(0, 240, 255, .04); color: var(--nc-muted); }
.badge--new { border-color: rgba(61, 255, 162, .4); background: rgba(61, 255, 162, .08); color: var(--nc-green); }
.story__pin {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border: 1px solid rgba(255, 42, 109, .55);
	background: rgba(255, 42, 109, .12);
	color: var(--nc-pink);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}
.story__pin .icon { width: 11px; height: 11px; }
.story__pin--inline { position: static; }

.counter {
	border: 1px solid var(--nc-cyan);
	background: rgba(0, 240, 255, .08);
	color: var(--nc-cyan);
}

/* ---------- 08. LAYOUT / HERO ---------- */

.site-main { position: relative; z-index: 2; padding-top: 1.6rem; padding-bottom: 3rem; }

.hero { padding: 0 0 1.6rem; }

.hero__rail {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-bottom: .75rem;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.hero__rail-label { color: var(--nc-cyan); white-space: nowrap; }
.hero__rail-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 240, 255, .4), transparent); }
.hero__rail-meta { white-space: nowrap; }

.hero-stage {
	position: relative;
	min-height: 430px;
	overflow: hidden;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background:
		linear-gradient(140deg, rgba(10, 18, 29, .96), rgba(5, 9, 15, .98)),
		repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 240, 255, .02) 3px 4px);
	box-shadow: var(--shadow), inset 0 0 60px rgba(0, 240, 255, .03);
}

.hero-stage::before,
.article__media::before,
.cyber-widget::before,
.wide-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 0 / 18px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 0 / 1px 18px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 0 / 18px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 0 / 1px 18px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 100% / 18px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 100% / 1px 18px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 100% / 18px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 100% / 1px 18px no-repeat;
	opacity: .55;
}

.hero-slide {
	display: none;
	min-height: 430px;
	grid-template-columns: 1.02fr .98fr;
}

.hero-slide.is-active { display: grid; animation: hero-in .5s cubic-bezier(.22, 1, .36, 1); }

@keyframes hero-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 42px 38px 64px;
}

.hero-copy .story__cat { margin-top: 12px; }

.hero-title {
	max-width: 42rem;
	margin: 16px 0 14px;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.7vw, 2.5rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: .005em;
}

.hero-title a:hover { color: var(--nc-cyan); text-shadow: var(--nc-glow); }

.hero-lead {
	max-width: 38rem;
	color: var(--nc-muted);
	font-size: var(--nc-font-md);
	line-height: 1.72;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin-top: 20px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hero-meta__item { display: inline-flex; align-items: center; gap: 4px; }
.hero-meta__item .icon { width: 12px; height: 12px; }
.hero-meta__sep { color: var(--nc-line-strong); }

.hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 9px 16px;
	border: 1px solid var(--nc-cyan);
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	transition: all .2s;
}

.hero-cta:hover {
	background: var(--nc-cyan);
	color: #021014;
	box-shadow: 0 0 24px rgba(0, 240, 255, .4);
}

.hero-cta .icon { width: 13px; height: 13px; }

.hero-media {
	position: relative;
	min-width: 0;
	min-height: 330px;
	margin: 24px;
	overflow: hidden;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: var(--surface-sunk);
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(5, 9, 15, .55), transparent 45%),
		linear-gradient(0deg, rgba(5, 9, 15, .6), transparent 45%);
}

.hero-media__link { position: absolute; inset: 0; display: block; }
.hero-media .cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.25) contrast(1.12) saturate(.8) brightness(.85);
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .4s;
}

.hero-media:hover .cover-image { transform: scale(1.045); filter: grayscale(.1) contrast(1.15) saturate(1) brightness(.92); }

.hero-media__grid,
.story__media-grid,
.article__media-grid {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(0, 240, 255, .13) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 240, 255, .13) 1px, transparent 1px);
	background-size: 46px 46px;
	opacity: .35;
	mix-blend-mode: screen;
}

.hero-media__tag {
	position: absolute;
	z-index: 4;
	right: 12px;
	bottom: 12px;
	color: rgba(0, 240, 255, .7);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .16em;
}

.hero-media .story__pin { position: absolute; z-index: 4; top: 12px; left: 12px; }

.hero-controls {
	position: absolute;
	left: 38px;
	bottom: 28px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hero-dot {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 240, 255, .18);
	background-clip: border-box;
	cursor: pointer;
	transition: background .25s, box-shadow .25s;
}
.hero-dot.is-active { background: var(--nc-cyan); box-shadow: 0 0 10px rgba(0, 240, 255, .8); }

.hero-arrows {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 6;
	display: flex;
	gap: 6px;
}

.hero-arrow {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--nc-line-strong);
	border-radius: 0;
	background: rgba(5, 10, 17, .8);
	color: var(--nc-muted);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: all .2s;
}

.hero-arrow:hover { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .12); color: var(--nc-cyan); box-shadow: var(--nc-glow); }
.hero-arrow .icon { width: 15px; height: 15px; }
.hero-arrow .icon-play { display: none; }
.hero-arrow[aria-pressed="true"] .icon-play { display: block; }
.hero-arrow[aria-pressed="true"] .icon-pause { display: none; }

/* ---------- 09. FEED / SECTION HEADS ---------- */

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 1.6rem;
	align-items: start;
}

.layout__main { display: grid; gap: 1rem; align-content: start; min-width: 0; }

.feed-head,
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1rem 0 .9rem;
	padding-bottom: .85rem;
	border-bottom: 1px solid var(--nc-line);
}

.feed-head__left h1,
.page-head h1 {
	margin: .2rem 0 .15rem;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 700;
}

.feed-head__left p,
.page-head__lead,
.section-head p {
	max-width: 46rem;
	color: var(--nc-muted);
	font-size: var(--nc-font-sm);
	line-height: 1.65;
}

.feed-head__right { display: flex; align-items: center; gap: 1rem; }

.feed-head__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--nc-green);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .16em;
}

.feed-head__live span {
	width: 6px;
	height: 6px;
	background: var(--nc-green);
	box-shadow: 0 0 8px var(--nc-green);
	animation: pulse-dot 2s ease-in-out infinite;
}

.feed-head__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border: 1px solid var(--nc-line);
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: all .2s;
}

.feed-head__link:hover {
	border-color: var(--nc-cyan);
	background: rgba(0, 240, 255, .08);
	color: var(--nc-cyan);
}

.feed-head__link .icon { width: 12px; height: 12px; }

.page-head {
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--nc-line);
	border-left: 3px solid var(--nc-cyan);
	background: linear-gradient(90deg, rgba(0, 240, 255, .055), transparent 60%);
}

.page-head__lead { margin-top: .35rem; }

.section-head { align-items: center; }
.section-head h2 { margin-top: .15rem; font-size: 1.35rem; }
.section-head--wide { margin-top: 0; }

.feed { display: grid; gap: 14px; }
.feed > * { min-width: 0; }

.pagetools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }
.pagetools__crumbs { color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.pagetools__crumbs a:hover { color: var(--nc-cyan); }
.pagetools__sort { color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; }

.speedbar { color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; }
.speedbar__inner { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.speedbar a:hover { color: var(--nc-cyan); }

/* ---------- 10. STORY CARD ---------- */

.story {
	position: relative;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	border: 1px solid var(--nc-line);
	background:
		linear-gradient(135deg, rgba(11, 19, 31, .92), rgba(5, 9, 15, .96)),
		repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 240, 255, .015) 4px 5px);
	box-shadow: var(--shadow-tiny);
	transition: border-color .25s, transform .25s, box-shadow .25s;
}

:root[data-theme="light"] .story {
	background: linear-gradient(135deg, rgba(245, 249, 252, .96), rgba(233, 241, 247, .96));
}

.story::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 0 / 14px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 0 0 / 1px 14px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 100% / 14px 1px no-repeat,
		linear-gradient(var(--nc-cyan), var(--nc-cyan)) 100% 100% / 1px 14px no-repeat;
	opacity: .35;
	transition: opacity .25s;
}

.story:hover {
	border-color: var(--nc-line-strong);
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(0, 240, 255, .12), 0 22px 48px rgba(0, 0, 0, .45), inset 0 0 40px rgba(0, 240, 255, .025);
}

.story:hover::before { opacity: 1; }

.story--pinned { border-left: 2px solid var(--nc-pink); }
.story--pinned::before {
	background:
		linear-gradient(var(--nc-pink), var(--nc-pink)) 0 0 / 14px 1px no-repeat,
		linear-gradient(var(--nc-pink), var(--nc-pink)) 0 0 / 1px 14px no-repeat,
		linear-gradient(var(--nc-pink), var(--nc-pink)) 100% 100% / 14px 1px no-repeat,
		linear-gradient(var(--nc-pink), var(--nc-pink)) 100% 100% / 1px 14px no-repeat;
	opacity: .65;
}

.story__media {
	position: relative;
	display: block;
	min-height: 230px;
	overflow: hidden;
	border-right: 1px solid var(--nc-line);
	background: #060b12;
}

.story__media .cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.35) contrast(1.1) saturate(.72) brightness(.8);
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .4s;
}

.story:hover .story__media .cover-image {
	transform: scale(1.04);
	filter: grayscale(.1) contrast(1.14) saturate(.95) brightness(.9);
}

.story__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 55%, rgba(5, 9, 15, .65)),
		linear-gradient(0deg, rgba(5, 9, 15, .55), transparent 40%);
}

:root[data-theme="light"] .story__media::after { background: linear-gradient(90deg, transparent 60%, rgba(233, 241, 247, .55)); }

.story__media-grid { opacity: .22; }

.story__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .2em;
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 240, 255, .08), transparent 65%),
		repeating-linear-gradient(45deg, transparent 0 10px, rgba(0, 240, 255, .03) 10px 11px);
}

.story__placeholder .icon { width: 26px; height: 26px; opacity: .5; }

.story__pin { position: absolute; z-index: 4; top: 10px; left: 10px; }

.story__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 24px 18px;
}

.story__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}

.story__serial { color: var(--nc-dim); font-size: 9px; letter-spacing: .16em; }
.story__flags { display: inline-flex; gap: .35rem; margin-left: auto; }

.story__badge {
	padding: 2px 6px;
	border: 1px solid var(--nc-line);
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
}

.story__badge--new {
	border-color: rgba(61, 255, 162, .45);
	background: rgba(61, 255, 162, .08);
	color: var(--nc-green);
	box-shadow: 0 0 12px rgba(61, 255, 162, .15);
}

.story__title {
	margin: 10px 0 8px;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 700;
	line-height: 1.3;
}

.story__title a { transition: color .2s, text-shadow .2s; }
.story__title a:hover { color: var(--nc-cyan); text-shadow: var(--nc-glow); }

.story__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--nc-muted);
	font-size: var(--nc-font-sm);
	line-height: 1.72;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.story__excerpt p { margin: 0; }
.story__excerpt img, .story__excerpt iframe, .story__excerpt video { display: none; }

.story__edit { margin-top: .5rem; color: var(--nc-dim); font-size: 10px; }

.story__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed rgba(0, 240, 255, .14);
}

:root[data-theme="light"] .story__foot { border-top-color: rgba(15, 23, 42, .12); }

.story__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .04em;
}

.story__stat { display: inline-flex; align-items: center; gap: 4px; }
.story__stat .icon { width: 12px; height: 12px; opacity: .8; }
.story__stat:first-child { color: var(--nc-cyan); }

.story__tools { display: flex; align-items: center; gap: .4rem; }
.story__icon-actions { display: inline-flex; gap: 2px; }
.story__rate { display: inline-flex; align-items: center; gap: 4px; }

.story__read {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: .35rem;
	padding: 5px 10px;
	border: 1px solid rgba(0, 240, 255, .45);
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
	transition: all .2s;
}

.story__read .icon { width: 11px; height: 11px; }
.story__read:hover { background: var(--nc-cyan); color: #021014; box-shadow: var(--nc-glow); }

/* 头条优先显示 */
.feed > .story:first-child .story__title { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }

/* 评分组件 */
.thread__rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; }
.vote-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 6px;
	border: 1px solid var(--nc-line);
	background: rgba(0, 240, 255, .03);
	color: var(--nc-muted);
	cursor: pointer;
	transition: all .2s;
}
.vote-pill .icon { width: 11px; height: 11px; }
.vote-pill--up:hover { border-color: var(--nc-green); color: var(--nc-green); background: rgba(61, 255, 162, .08); }
.vote-pill--down:hover { border-color: var(--nc-pink); color: var(--nc-pink); background: rgba(255, 42, 109, .08); }
.vote-score { color: var(--nc-cyan); font-family: var(--font-mono); }
.thread__stars { color: var(--nc-yellow); letter-spacing: .1em; }

/* ---------- 11. SIDEBAR ---------- */

.sidebar,
.cyber-side { display: grid; gap: 14px; align-content: start; min-width: 0; }

.cyber-widget {
	position: relative;
	padding: 18px;
	border: 1px solid var(--nc-line);
	background: linear-gradient(160deg, rgba(10, 17, 27, .94), rgba(5, 9, 15, .96));
	box-shadow: var(--shadow-tiny);
}

:root[data-theme="light"] .cyber-widget {
	background: rgba(242, 247, 250, .94);
	box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.cyber-widget::before { opacity: .4; }

.cyber-widget::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 18px;
	width: 42px;
	height: 2px;
	background: var(--nc-cyan);
	box-shadow: 0 0 10px rgba(0, 240, 255, .6);
}

.cyber-widget__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--nc-line);
}

.cyber-widget__head h2 { margin-top: 2px; font-size: 1.05rem; letter-spacing: .04em; }

.cyber-widget__link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
}
.cyber-widget__link:hover { color: var(--nc-cyan); }
.cyber-widget__link .icon { width: 11px; height: 11px; }

.rank-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rank;
}

.rank-item {
	position: relative;
	counter-increment: rank;
	border-top: 1px solid rgba(27, 43, 59, .65);
}

.rank-item:first-child { border-top: 0; }

.rank-item__link {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: start;
	gap: 8px;
	padding: 10px 0;
	transition: color .2s, padding-left .2s;
}

.rank-item::before {
	content: counter(rank, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 11px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .05em;
}

.rank-item__title {
	display: -webkit-box;
	grid-column: 2;
	grid-row: 1;
	overflow: hidden;
	color: var(--text);
	font-size: var(--nc-font-sm);
	font-weight: 500;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rank-item__meta {
	display: flex;
	grid-column: 2;
	grid-row: 2;
	align-items: center;
	gap: .7rem;
	margin-top: 4px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .04em;
}

.rank-item__meta .icon { width: 10px; height: 10px; }
.rank-item__link:hover .rank-item__title { color: var(--nc-cyan); }
.rank-item__link:hover { padding-left: 3px; }
.rank-item:hover::before { color: var(--nc-cyan); text-shadow: var(--nc-glow); }

.cyber-widget--ad { padding: 10px; }
.cyber-widget--ad .cyber-widget__kicker { margin-bottom: 6px; }

.cyber-widget .widget,
.cyber-widget .poll-block { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }

.cyber-widget--poll,
.widget--poll { padding: 18px; }

.cyber-widget h2, .widget h2 { font-family: var(--font-display); }

/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-cloud a {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	line-height: 1.4;
}
.tag-cloud a::before { content: "#"; opacity: .5; margin-right: 2px; }

/* 归档 tabs */
.tabs { display: inline-flex; border: 1px solid var(--nc-line); }
.tabs__btn {
	padding: 3px 9px;
	border: 0;
	border-left: 1px solid var(--nc-line);
	background: transparent;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .08em;
	cursor: pointer;
}
.tabs__btn:first-child { border-left: 0; }
.tabs__btn.is-active { background: rgba(0, 240, 255, .12); color: var(--nc-cyan); }

/* 日历与投票（基础组件微调） */
.cyber-widget .calendar,
.cyber-widget .vote,
.cyber-widget .poll-list { color: var(--nc-muted); font-size: var(--nc-font-sm); }
.cyber-widget table { width: 100%; border-collapse: collapse; }
.cyber-widget td, .cyber-widget th { padding: 4px 2px; border: 1px solid var(--nc-line); text-align: center; font-size: 10px; }
.cyber-widget th { color: var(--nc-cyan); font-family: var(--font-mono); font-weight: 400; }
.cyber-widget td a { color: var(--nc-muted); }
.cyber-widget td a:hover { color: var(--nc-cyan); }

.poll-question { margin-bottom: 10px; color: var(--text); font-size: var(--nc-font-sm); }
.poll-list label { display: flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--nc-muted); font-size: var(--nc-font-sm); cursor: pointer; }
.poll-list label:hover { color: var(--nc-cyan); }
.poll-total { margin-top: 8px; color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; }
.poll-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.poll-actions__results { margin-left: auto; }

/* ---------- 12. WIDE SECTIONS / PARTNERS ---------- */

.wide-section {
	position: relative;
	margin-top: 1.4rem;
	padding: 22px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: linear-gradient(160deg, rgba(9, 15, 24, .92), rgba(5, 9, 15, .96));
	box-shadow: var(--shadow-tiny);
}

:root[data-theme="light"] .wide-section { background: rgba(242, 247, 250, .93); }

.wide-section::before { opacity: .35; }

.comment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.comment-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(0, 240, 255, .025);
	transition: border-color .2s, background .2s;
}

.comment-card:hover { border-color: rgba(0, 240, 255, .4); background: rgba(0, 240, 255, .05); }

.comment-card__top { display: flex; align-items: center; gap: 10px; }
.comment-card__who b { display: block; color: var(--text); font-size: var(--nc-font-sm); font-weight: 600; }
.comment-card__when { display: block; color: var(--nc-dim); font-family: var(--font-mono); font-size: 9px; }
.comment-card__pulse { width: 5px; height: 5px; margin-left: auto; background: var(--nc-green); box-shadow: 0 0 8px var(--nc-green); }
.comment-card__text { color: var(--nc-muted); font-size: var(--nc-font-sm); line-height: 1.6; }
.comment-card__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .04em;
}
.comment-card__link .icon { width: 11px; height: 11px; }
.comment-card__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-card__link:hover { text-decoration: underline; }

.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.partners li { border: 1px solid var(--nc-line); background: rgba(0, 240, 255, .02); }
.partners a { display: block; padding: 12px; color: var(--nc-muted); font-size: var(--nc-font-sm); }
.partners a:hover { color: var(--nc-cyan); background: rgba(0, 240, 255, .05); }

.partners__promo { margin-top: 14px; }

/* ---------- 13. ARTICLE ---------- */

.article {
	position: relative;
	padding: 26px 28px 30px;
	border: 1px solid var(--nc-line);
	background: linear-gradient(165deg, rgba(10, 17, 27, .94), rgba(5, 9, 15, .97));
	box-shadow: var(--shadow-tiny);
}

:root[data-theme="light"] .article { background: rgba(246, 250, 253, .96); }

.article__head { padding-bottom: 18px; border-bottom: 1px solid var(--nc-line); }

.article__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }

.article__status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: var(--nc-green);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
}
.article__status span { width: 5px; height: 5px; background: var(--nc-green); box-shadow: 0 0 8px var(--nc-green); }

.article__title {
	margin: 14px 0 12px;
	font-size: clamp(1.6rem, 3vw, 2.45rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: .005em;
}

.article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .55rem;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .04em;
}

.article__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.article__meta-item .icon { width: 12px; height: 12px; opacity: .85; }
.article__meta-item--author { color: var(--nc-cyan); }
.article__meta-sep { color: var(--nc-line-strong); }

.article__actions { display: flex; gap: 3px; margin-top: 14px; }

.article__media {
	position: relative;
	margin: 22px 0 0;
	overflow: hidden;
	border: 1px solid var(--nc-line);
	background: #060b12;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.article__media .cover-image {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	filter: grayscale(.18) contrast(1.1) saturate(.85) brightness(.86);
}

.article__media--plain { min-height: 260px; }
.article__media--plain .visual { min-height: 260px; }

.article__media-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	justify-content: space-between;
	padding: 8px 14px;
	background: linear-gradient(0deg, rgba(3, 6, 11, .9), transparent);
	color: rgba(0, 240, 255, .75);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .14em;
}

.article__body {
	max-width: 78ch;
	margin: 26px auto 0;
	color: var(--news-text);
	font-family: var(--font-ui);
	font-size: 1.02rem;
	line-height: 1.95;
}

.article__body > :first-child { margin-top: 0; }

.article__body p,
.article__body ul,
.article__body ol,
.article__body table,
.article__body pre,
.article__body blockquote { margin: 0 0 1.15em; }

.article__body p { color: var(--news-text); }

.article__body h1,
.article__body h2,
.article__body h3,
.article__body h4,
.article__body h5,
.article__body h6 {
	margin: 1.8em 0 .7em;
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.35;
}

.article__body h2 {
	padding-left: 12px;
	border-left: 3px solid var(--nc-cyan);
	font-size: 1.5rem;
	box-shadow: -6px 0 18px -8px rgba(0, 240, 255, .55);
}

.article__body h3 { font-size: 1.22rem; color: var(--nc-cyan); }
.article__body h4 { font-size: 1.05rem; color: var(--nc-cyan); }

.article__body a {
	color: var(--nc-cyan);
	border-bottom: 1px solid rgba(0, 240, 255, .35);
	transition: border-color .2s, text-shadow .2s;
}
.article__body a:hover { border-color: var(--nc-cyan); text-shadow: var(--nc-glow); }

.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body li { margin: .35em 0; }
.article__body li::marker { color: var(--nc-cyan); }

.article__body blockquote {
	margin: 1.5em 0;
	padding: 14px 18px;
	border: 1px solid var(--nc-line);
	border-left: 3px solid var(--nc-pink);
	background: rgba(255, 42, 109, .04);
	color: var(--nc-muted);
	font-style: normal;
}

.article__body blockquote::before {
	content: "// QUOTE";
	display: block;
	margin-bottom: 6px;
	color: var(--nc-pink);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .16em;
}

.article__body code {
	padding: 2px 6px;
	border: 1px solid var(--code-border);
	background: var(--code-bg);
	color: var(--nc-green);
	font-family: var(--font-mono);
	font-size: .88em;
}

.article__body pre {
	overflow: auto;
	padding: 14px 16px;
	border: 1px solid var(--code-border);
	border-left: 2px solid var(--nc-cyan);
	background: var(--code-bg);
	color: var(--code-ink);
	font-family: var(--font-mono);
	font-size: .85rem;
	line-height: 1.7;
}

.article__body pre code { padding: 0; border: 0; background: transparent; color: inherit; }

.article__body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.article__body th, .article__body td { padding: 8px 10px; border: 1px solid var(--nc-line); text-align: left; }
.article__body th { background: rgba(0, 240, 255, .07); color: var(--nc-cyan); font-family: var(--font-mono); font-weight: 400; }
.article__body tr:nth-child(even) td { background: rgba(0, 240, 255, .02); }

.article__body hr {
	margin: 2em 0;
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nc-cyan), transparent);
	opacity: .4;
}

.article__body img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--nc-line);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.article__body iframe, .article__body video { max-width: 100%; border: 1px solid var(--nc-line); }

.article__body .quote {
	margin: 1.4em 0;
	padding: 12px 16px;
	border-left: 2px solid var(--nc-cyan);
	background: rgba(0, 240, 255, .04);
	color: var(--nc-muted);
}

.article__edit { margin-top: 1.2rem; padding: 10px 12px; border: 1px dashed var(--nc-line); color: var(--nc-dim); font-size: 11px; }

.article__pages { margin-top: 20px; }
.article__pages a, .article__pages span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-right: 4px; border: 1px solid var(--nc-line); color: var(--nc-muted); font-family: var(--font-mono); font-size: 11px; }
.article__pages a:hover { border-color: var(--nc-cyan); color: var(--nc-cyan); }
.article__pages span { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .1); color: var(--nc-cyan); }

.article__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--nc-line);
}

.article__tags-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.article__tags-label .icon { width: 12px; height: 12px; }
.article__tags-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.article__tags-list a { padding: 3px 8px; border: 1px solid var(--nc-line); color: var(--nc-muted); font-family: var(--font-mono); font-size: 10px; }
.article__tags-list a:hover { border-color: var(--nc-cyan); color: var(--nc-cyan); background: rgba(0, 240, 255, .06); }

/* 上下篇 */
.story-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.story-nav__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--nc-line);
	background: rgba(0, 240, 255, .02);
	transition: all .2s;
}
.story-nav__item:hover { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .06); }
.story-nav__label { display: inline-flex; align-items: center; gap: 4px; color: var(--nc-dim); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.story-nav__label .icon { width: 11px; height: 11px; }
.story-nav__title { color: var(--text); font-size: var(--nc-font-sm); font-weight: 600; line-height: 1.45; }
.story-nav__item--next { text-align: right; }
.story-nav__item--next .story-nav__label { justify-content: flex-end; }

/* 相关文章 */
.related { margin-top: 1.6rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.related-card {
	display: grid;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(0, 240, 255, .02);
	transition: border-color .2s, transform .2s;
}
.related-card:hover { border-color: var(--nc-line-strong); transform: translateY(-2px); }

.related-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--nc-line); background: #060b12; }
.related-card__media .cover-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.1) saturate(.7) brightness(.82); transition: transform .4s; }
.related-card:hover .related-card__media .cover-image { transform: scale(1.04); }

.related-card__body { display: grid; gap: 7px; padding: 12px; }
.related-card__cat { justify-self: start; }
.related-card__title { font-family: var(--font-display); font-size: .92rem; line-height: 1.4; font-weight: 700; }
.related-card__title a:hover { color: var(--nc-cyan); }
.related-card__date { display: inline-flex; align-items: center; gap: 4px; color: var(--nc-dim); font-family: var(--font-mono); font-size: 9px; }
.related-card__date .icon { width: 10px; height: 10px; }

/* 文章页投票 */
.poll-block { margin-top: 1.4rem; padding: 18px; border: 1px solid var(--nc-line); background: rgba(0, 240, 255, .02); }

/* ---------- 14. COMMENTS ---------- */

.discussion { margin-top: 1.8rem; }

.thread { display: grid; gap: 10px; }

.thread__item {
	padding: 16px 18px;
	border: 1px solid var(--nc-line);
	border-left: 2px solid rgba(0, 240, 255, .45);
	border-radius: 0;
	background: rgba(0, 240, 255, .02);
	box-shadow: none;
	transition: border-color .2s, background .2s;
}

.thread__item:hover { border-left-color: var(--nc-cyan); background: rgba(0, 240, 255, .035); }
.thread__item--reply { border-left-color: rgba(255, 42, 109, .45); background: rgba(255, 42, 109, .02); }
.thread__item--own { border-left-color: var(--nc-yellow); }

.thread__top { display: flex; align-items: center; gap: 12px; }
.thread__avatar { position: relative; flex: none; }
.thread__ident { min-width: 0; }
.thread__who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.thread__author { color: var(--text); font-weight: 600; font-size: var(--nc-font-sm); }
.thread__badge { padding: 1px 5px; border: 1px solid rgba(243, 230, 0, .4); color: var(--nc-yellow); font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; }
.thread__when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nc-dim); font-family: var(--font-mono); font-size: 9px; }
.thread__group { color: var(--nc-cyan); }
.thread__text { margin-top: 10px; color: var(--news-text); font-size: var(--nc-font-sm); line-height: 1.75; }
.thread__text p { margin: 0 0 .7em; }
.thread__text :last-child { margin-bottom: 0; }
.thread__signature { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--nc-line); color: var(--nc-dim); font-size: 10px; }
.thread__images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thread__images img { max-width: 140px; border: 1px solid var(--nc-line); }

.thread__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--nc-line); }
.thread__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 7px;
	border: 1px solid transparent;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .05em;
	cursor: pointer;
}
.thread__btn .icon { width: 11px; height: 11px; }
.thread__btn:hover { border-color: var(--nc-line-strong); color: var(--nc-cyan); background: rgba(0, 240, 255, .06); }
.thread__btn--danger:hover { border-color: rgba(255, 42, 109, .4); color: var(--nc-pink); background: rgba(255, 42, 109, .06); }
.thread__replies { display: inline-flex; align-items: center; gap: 4px; color: var(--nc-muted); font-family: var(--font-mono); font-size: 9px; }
.thread__replies .icon { width: 11px; height: 11px; }
.thread__online { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border: 1px solid var(--nc-void); background: var(--nc-green); box-shadow: 0 0 8px var(--nc-green); }

.avatar {
	border-radius: 1px;
	border: 1px solid var(--nc-line-strong);
	background: var(--nc-panel-2);
}
.avatar--initial { background: #0d2833; color: var(--nc-cyan); font-family: var(--font-mono); }

/* 评论表单 */
.reply-form, .addcomment, .comments-form {
	padding: 18px;
	border: 1px solid var(--nc-line);
	background: rgba(0, 240, 255, .02);
}

/* ---------- 15. FORMS / AUTH / NOTICE ---------- */

.form-label { color: var(--nc-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.form-input,
.form-body input[type="text"],
.form-body input[type="email"],
.form-body input[type="password"],
.form-body input[type="url"],
.form-body input[type="search"],
.form-body textarea,
.form-body select,
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form input[type="email"],
.auth-form textarea,
.auth-form select {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: rgba(3, 7, 12, .65);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--nc-font-sm);
	transition: border-color .2s, box-shadow .2s;
}

:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-body input,
:root[data-theme="light"] .form-body textarea,
:root[data-theme="light"] .form-body select,
:root[data-theme="light"] .auth-form input,
:root[data-theme="light"] .auth-form textarea,
:root[data-theme="light"] .auth-form select { background: #fff; }

.form-input:focus,
.form-body input:focus,
.form-body textarea:focus,
.form-body select:focus,
.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus {
	outline: none;
	border-color: var(--nc-cyan);
	box-shadow: 0 0 0 1px rgba(0, 240, 255, .45), inset 0 0 16px rgba(0, 240, 255, .05);
}

.form-body textarea, .auth-form textarea { min-height: 130px; resize: vertical; }

.form-hint, .form-actions__hint { color: var(--nc-dim); font-size: 10px; }
.form-req { color: var(--nc-pink); }
.form-sep { border-top: 1px solid var(--nc-line); color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; }

fieldset { border: 1px solid var(--nc-line); }
legend { padding: 0 6px; color: var(--nc-cyan); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; }

/* 消息提示 */
.notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--nc-line);
	border-left: 3px solid var(--nc-cyan);
	background: rgba(0, 240, 255, .04);
}

.notice__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid rgba(0, 240, 255, .35); color: var(--nc-cyan); }
.notice__icon .icon { width: 14px; height: 14px; }
.notice__title { display: block; margin-bottom: 2px; color: var(--text); font-family: var(--font-display); font-size: .95rem; }
.notice__text { color: var(--nc-muted); font-size: var(--nc-font-sm); }
.notice__text a { color: var(--nc-cyan); }

/* 登录 / 注册门 */
.page--gate { background: var(--bg); }
body.page--gate::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, rgba(0, 240, 255, .08), transparent 60%); }

.gate { width: min(560px, calc(100% - 2rem)); }
.gate__back { color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gate__back:hover { color: var(--nc-cyan); }

.gate__card {
	position: relative;
	padding: 34px;
	border: 1px solid var(--nc-line-strong);
	border-radius: 0;
	background: linear-gradient(160deg, rgba(10, 18, 29, .97), rgba(5, 9, 15, .99));
	box-shadow: var(--shadow-modal), inset 0 0 60px rgba(0, 240, 255, .03);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

:root[data-theme="light"] .gate__card { background: rgba(246, 250, 253, .98); }

.cyber-brand--gate { justify-content: center; margin-bottom: 6px; }
.gate__foot { color: var(--nc-dim); font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.gate .notice { margin-bottom: 4px; }
.gate .auth-form__title { font-size: 1.5rem; }
.gate .auth-form__lead { color: var(--nc-muted); font-size: var(--nc-font-sm); }
.gate .auth-form__lead a { color: var(--nc-cyan); }

/* 用户资料、私信等基础面板 */
.profile-popup, .pm-block, .stat-block, .feedback, .addnews {
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: var(--surface);
	box-shadow: var(--shadow-tiny);
}

/* ---------- 16. PAGINATION / TO TOP / MISC ---------- */

.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 22px 0 6px; }
.pagination__pages { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.pagination__pages > a,
.pagination__pages > span,
.pagination__arrow {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--nc-line);
	border-radius: 0;
	background: transparent;
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: 11px;
}
.pagination__pages > a:hover { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .08); color: var(--nc-cyan); }
.pagination__pages > span { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .12); color: var(--nc-cyan); box-shadow: inset 0 0 12px rgba(0, 240, 255, .1); }
.pagination__pages > span.nav_ext { border-color: transparent; background: transparent; color: var(--nc-dim); box-shadow: none; }
.pagination__arrow .icon { width: 13px; height: 13px; }
.pagination__label { color: var(--nc-dim); font-family: var(--font-mono); font-size: 10px; }

.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--nc-cyan);
	border-radius: 0;
	background: rgba(5, 10, 17, .85);
	color: var(--nc-cyan);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: all .25s;
	backdrop-filter: blur(6px);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--nc-cyan); color: #021014; box-shadow: 0 0 22px rgba(0, 240, 255, .5); }
.to-top .icon { width: 16px; height: 16px; }

.poll-card, .panel, .static-page, .userinfo { border: 1px solid var(--nc-line); border-radius: 0; background: var(--surface); box-shadow: var(--shadow-tiny); }

/* ---------- 17. FOOTER ---------- */

.cyber-footer {
	position: relative;
	z-index: 2;
	overflow: hidden;
	margin-top: 2rem;
	border-top: 1px solid var(--nc-line-strong);
	background:
		linear-gradient(180deg, rgba(6, 10, 17, .96), rgba(3, 5, 9, 1)),
		radial-gradient(ellipse 60% 80% at 50% 120%, rgba(0, 240, 255, .08), transparent 70%);
}

:root[data-theme="light"] .cyber-footer {
	background: linear-gradient(180deg, #e6eef4, #d9e4ed);
}

.cyber-footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--nc-cyan), var(--nc-pink), transparent);
	opacity: .6;
}

.cyber-footer__watermark {
	position: absolute;
	right: -2vw;
	bottom: -2.2rem;
	z-index: 0;
	color: transparent;
	-webkit-text-stroke: 1px rgba(0, 240, 255, .09);
	font-family: var(--font-display);
	font-size: clamp(4rem, 12vw, 11rem);
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

:root[data-theme="light"] .cyber-footer__watermark { -webkit-text-stroke-color: rgba(14, 116, 144, .12); }

.cyber-footer__inner { position: relative; z-index: 1; padding: 2.2rem 0 1.4rem; }

.cyber-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-bottom: 1.8rem;
	border-bottom: 1px solid var(--nc-line);
}

.cyber-footer__desc { max-width: 34rem; margin-top: 12px; color: var(--nc-muted); font-size: var(--nc-font-sm); line-height: 1.7; }
.cyber-footer__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 14px; }

.cyber-footer__button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid var(--nc-line);
	color: var(--nc-muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	transition: all .2s;
}
.cyber-footer__button .icon { width: 12px; height: 12px; }
.cyber-footer__button:hover { border-color: var(--nc-cyan); background: rgba(0, 240, 255, .06); color: var(--nc-cyan); }

.cyber-footer__col { display: grid; gap: .45rem; align-content: start; }
.cyber-footer__col h2 {
	margin-bottom: .35rem;
	color: var(--nc-cyan);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cyber-footer__col h2 span { color: var(--nc-pink); }
.cyber-footer__col a { width: fit-content; color: var(--nc-muted); font-size: var(--nc-font-sm); transition: color .2s, padding-left .2s; }
.cyber-footer__col a:hover { color: var(--nc-cyan); padding-left: 3px; }

.cyber-footer__status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	padding: 12px 0;
	border-bottom: 1px solid var(--nc-line);
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cyber-footer__status-item { display: inline-flex; align-items: center; gap: 5px; }
.cyber-dot { width: 5px; height: 5px; background: var(--nc-green); box-shadow: 0 0 8px var(--nc-green); animation: pulse-dot 2.4s ease-in-out infinite; }
.cyber-footer__clock { margin-left: auto; color: var(--nc-cyan); }

.cyber-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	padding-top: 12px;
	color: var(--nc-dim);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cyber-footer__bottom a { color: var(--nc-muted); }
.cyber-footer__bottom a:hover { color: var(--nc-cyan); }

/* 无图占位：霓虹坐标网格 */
.visual {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background:
		radial-gradient(circle at 72% 24%, rgba(255, 42, 109, .28), transparent 42%),
		radial-gradient(circle at 28% 72%, rgba(0, 240, 255, .22), transparent 46%),
		repeating-linear-gradient(0deg, transparent 0 33px, rgba(0, 240, 255, .07) 33px 34px),
		repeating-linear-gradient(90deg, transparent 0 33px, rgba(0, 240, 255, .07) 33px 34px),
		#060b12;
}

.visual::before {
	content: "// NO_SIGNAL";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	color: rgba(0, 240, 255, .55);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .22em;
}

.visual::after { display: none; }

.article__media--plain .visual { min-height: 280px; }

:root[data-theme="light"] .visual {
	background:
		radial-gradient(circle at 72% 24%, rgba(190, 18, 60, .12), transparent 42%),
		radial-gradient(circle at 28% 72%, rgba(14, 116, 144, .12), transparent 46%),
		repeating-linear-gradient(0deg, transparent 0 33px, rgba(15, 23, 42, .06) 33px 34px),
		repeating-linear-gradient(90deg, transparent 0 33px, rgba(15, 23, 42, .06) 33px 34px),
		#e9f0f6;
}
:root[data-theme="light"] .visual::before { color: rgba(14, 116, 144, .6); }

/* ---------- 18. RESPONSIVE ---------- */

@media (max-width: 1100px) {
	.layout { grid-template-columns: minmax(0, 1fr) 280px; }
	.story { grid-template-columns: 250px minmax(0, 1fr); }
	.cyber-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cyber-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 66.25em) {
	.primary-nav { display: none; }
	.menu-button { display: inline-flex; }
	.category-menu { flex-wrap: nowrap; }

	.site-header.is-menu-open .primary-nav {
		position: absolute;
		left: 1.25rem;
		right: 1.25rem;
		top: calc(100% - 40px);
		z-index: 45;
		display: grid;
		gap: 2px;
		padding: 10px;
		border: 1px solid var(--nc-line-strong);
		background: #080e17;
		box-shadow: var(--shadow-menu);
	}
	:root[data-theme="light"] .site-header.is-menu-open .primary-nav { background: #f6fafc; }
	.site-header.is-menu-open .primary-nav a { padding: .6rem .8rem; }
	.site-header.is-menu-open .primary-nav a::before,
	.site-header.is-menu-open .primary-nav a::after { display: none; }

	.theme-button__label { display: none; }
	.theme-button { width: 38px; padding: 0; }
}

@media (max-width: 960px) {
	.sysbar__inner { gap: 1rem; }
	.sysbar__ticker, .sysbar__slash { display: none; }
	.layout { grid-template-columns: 1fr; gap: 1.2rem; }
	.sidebar, .cyber-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero-slide { grid-template-columns: minmax(0, 1fr); }
	.hero-slide.is-active { display: flex; flex-direction: column; }
	.hero-media { order: 1; min-height: 260px; margin-top: 0; }
	.hero-copy { order: 2; padding: 30px 24px 58px; }
	.hero-controls { left: 24px; bottom: 20px; }
	.hero-arrows { right: 18px; bottom: 18px; }
	.hero-stage, .hero-slide { min-height: 0; }
	.story { grid-template-columns: 230px minmax(0, 1fr); }
	.article { padding: 20px; }
	.comment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.container { width: min(calc(100% - 1.5rem), var(--container)); }

	.sysbar__links a:nth-child(n+4) { display: none; }

	.header-main { min-height: 62px; gap: .5rem; }
	.cyber-brand__name { font-size: .95rem; }
	.cyber-brand__tag { display: none; }
	.cyber-brand__mark { width: 32px; height: 32px; padding: 7px 5px; }

	.hero-stage::before { display: none; }
	.hero-copy { padding: 22px 18px 54px; }
	.hero-title { font-size: 1.45rem; }
	.hero-lead { font-size: .875rem; }
	.hero-media { aspect-ratio: 16 / 9; min-height: 0; margin: 0 14px 14px; }
	.hero-controls { left: 18px; bottom: 16px; }
	.hero-arrows { right: 14px; bottom: 14px; }

	.story { grid-template-columns: 1fr; }
	.story__media { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--nc-line); }
	.story__media::after { background: linear-gradient(0deg, rgba(5, 9, 15, .55), transparent 45%); }
	.story__body { padding: 16px 16px 14px; }
	.story__title { font-size: 1.15rem; }
	.story__foot { align-items: flex-start; }
	.story__stats { gap: .6rem; }
	.story__read span { display: none; }

	.sidebar, .cyber-side { grid-template-columns: 1fr; }
	.comment-grid, .related-grid, .partners, .story-nav { grid-template-columns: 1fr; }
	.comment-grid { gap: 10px; }

	.article { padding: 16px; }
	.article__title { font-size: 1.45rem; }
	.article__meta { font-size: 9px; }
	.article__body { font-size: .97rem; line-height: 1.85; }
	.article__body h2 { font-size: 1.3rem; }

	.cyber-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
	.cyber-footer__status { gap: .6rem; }
	.cyber-footer__clock { margin-left: 0; }
	.cyber-footer__bottom { font-size: 8px; }

	.search-form { grid-template-columns: auto minmax(0, 1fr); }
	.search-form .primary-button { grid-column: 1 / -1; }
	.search-form__advanced { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
	.sysbar__links a:nth-child(n+2) { display: none; }
	.sysbar__clock { border-left: 0; padding-left: 0; }
	.sysbar__links { min-width: 0; }
	.cyber-brand__mark { display: none; }
	.story__flags { margin-left: 0; }
	.cyber-footer__top { grid-template-columns: 1fr; }
	.cyber-footer__status-item:nth-child(2),
	.cyber-footer__status-item:nth-child(3) { display: none; }
	.article__status { margin-left: 0; }
	.article__kicker { gap: .4rem; }
}

@media (max-width: 23.75em) {
	.sysbar__clock { display: none; }
}

/* ---------- 19. SOFT LIGHT MODE POLISH ---------- */

:root[data-theme="light"] body.cyber { background-color: #e6edf3; }
:root[data-theme="light"] .hero-stage { background: linear-gradient(140deg, #f4f8fb, #e9f0f6); box-shadow: 0 12px 30px rgba(15, 23, 42, .08); }
:root[data-theme="light"] .hero-stage::before,
:root[data-theme="light"] .article__media::before,
:root[data-theme="light"] .cyber-widget::before,
:root[data-theme="light"] .wide-section::before { opacity: .3; }
:root[data-theme="light"] .hero-media .cover-image,
:root[data-theme="light"] .story__media .cover-image,
:root[data-theme="light"] .related-card__media .cover-image,
:root[data-theme="light"] .article__media .cover-image { filter: brightness(1) contrast(1.02) saturate(.96); }
:root[data-theme="light"] .article__media-cap { background: linear-gradient(0deg, rgba(230, 238, 244, .94), transparent); color: #0e7490; }
:root[data-theme="light"] .fx-scan { opacity: .12; }
:root[data-theme="light"] .cyber-widget::after { box-shadow: none; background: var(--nc-cyan); }
:root[data-theme="light"] .story:hover { box-shadow: 0 14px 32px rgba(15, 23, 42, .1); }
:root[data-theme="light"] .story__excerpt,
:root[data-theme="light"] .story__stat,
:root[data-theme="light"] .story__stats { color: var(--nc-muted); }
:root[data-theme="light"] .story__stat:first-child { color: var(--nc-cyan); }
:root[data-theme="light"] .cyber-footer__watermark { opacity: .7; }
:root[data-theme="light"] .poll-block,
:root[data-theme="light"] .comment-card,
:root[data-theme="light"] .related-card,
:root[data-theme="light"] .story-nav__item,
:root[data-theme="light"] .thread__item { background: rgba(255, 255, 255, .55); }
:root[data-theme="light"] .thread__online { border-color: #e6edf3; }
:root[data-theme="light"] .avatar { background: #e2ebf2; border-color: #b9cad8; }
:root[data-theme="light"] .avatar--initial { background: #cfe3ee; color: #0b5f77; }

/* ---------- 20. MOTION / PRINT ---------- */

/* 入场：仅在 JS 标记 is-ready 后播放，避免内容闪隐 */
@media (prefers-reduced-motion: no-preference) {
	.is-ready .story { animation: card-in .45s cubic-bezier(.22, 1, .36, 1) backwards; }
	.is-ready .story:nth-child(2) { animation-delay: .05s; }
	.is-ready .story:nth-child(3) { animation-delay: .1s; }
	.is-ready .story:nth-child(4) { animation-delay: .15s; }
	.is-ready .story:nth-child(n+5) { animation-delay: .2s; }
}

@keyframes card-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fx-scan::after,
	.sysbar__pulse,
	.feed-head__live span,
	.cyber-dot,
	.glitch::before,
	.glitch::after,
	.sysbar__ticker-track { animation: none !important; }
}

@media print {
	.fx-grid, .fx-scan, .fx-vignette, .sysbar, .site-header, .sidebar, .cyber-footer, .to-top, .read-progress { display: none !important; }
	body.cyber { background: #fff !important; color: #000 !important; }
	body.cyber .article, body.cyber .story { border-color: #ccc; background: #fff; box-shadow: none; }
}