/* ==========================================================================
   Neuronix Premium 2.0 — 大气编辑风 + 炫酷 WebGPU/3D 层
   设计目标：去“AI 味”（满屏霓虹药丸/玻璃拟态/发光堆叠），转向
   克制、高级、大气的编辑式排印 +  Preeminent 深空底 + 点睛式炫酷动效。
   本文件以覆盖层形式加载（main.css 之后），不改动原有功能类名。
   ========================================================================== */

:root {
  --nx-ink: #04060e;
  --nx-ink-2: #070c1c;
  --nx-paper: #f2f4f8;
  --nx-hair: rgba(255, 255, 255, 0.09);
  --nx-hair-soft: rgba(255, 255, 255, 0.06);
  --nx-gold: #e8c47a;
  --nx-aurora-a: #22d3ee;
  --nx-aurora-b: #818cf8;
  --nx-aurora-c: #e879f9;
  --nx-radius-s: 10px;
  --nx-radius-m: 14px;
  --nx-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --nx-shadow-lift: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* ---------- 全局基调：更深、更静 ---------- */
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.07), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(232, 196, 122, 0.05), transparent 60%),
    var(--nx-ink);
  letter-spacing: -0.005em;
}
#nx-main, header, footer { z-index: 10; }

/* 顶部细金线 + 阅读进度 */
.nx-premium-topline {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 122, 0.7), rgba(34, 211, 238, 0.7), transparent);
  opacity: 0.7; pointer-events: none;
}
#nx-scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 81;
  background: linear-gradient(90deg, var(--nx-gold), var(--nx-aurora-a));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

/* ---------- WebGPU 极光 + 3D 画布层 ---------- */
#nx-aurora-webgpu {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0;
  pointer-events: none; opacity: 0.85;
}
#nx-aurora-webgpu.is-live { opacity: 1; }
.nx-aurora-fallback {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(800px 500px at 15% 10%, rgba(34, 211, 238, 0.1), transparent 60%),
    radial-gradient(700px 500px at 85% 15%, rgba(129, 140, 248, 0.1), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, rgba(232, 121, 249, 0.06), transparent 60%);
  filter: saturate(1.2);
}
.nx-bg-canvas { opacity: 0.55; }
.nx-starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
}

/* 网格线：大气感的关键 */
.nx-gridlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, black 0%, transparent 70%);
}

/* ---------- 自定义光标 ---------- */
.nx-cursor-dot, .nx-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  border-radius: 999px; transform: translate(-50%, -50%);
}
.nx-cursor-dot { width: 6px; height: 6px; background: var(--nx-gold); box-shadow: 0 0 12px rgba(232, 196, 122, 0.9); }
.nx-cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.35);
  transition: width 0.25s, height 0.25s, border-color 0.25s, background 0.25s;
  mix-blend-mode: difference;
}
.nx-cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--nx-aurora-a); background: rgba(34, 211, 238, 0.08); }
@media (hover: none), (max-width: 768px) { .nx-cursor-dot, .nx-cursor-ring { display: none; } }

/* ---------- 导航：更薄、更高级 ---------- */
.nx-navbar { padding: 0.85rem 0; background: linear-gradient(to bottom, rgba(4, 6, 14, 0.85), rgba(4, 6, 14, 0)); border-bottom: 1px solid transparent; }
.nx-navbar.is-scrolled {
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--nx-hair-soft);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.nx-brand-mark {
  background: linear-gradient(135deg, #0a1024, #050816);
  border: 1px solid rgba(232, 196, 122, 0.35);
  color: var(--nx-gold); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nx-brand-name { letter-spacing: 0.14em; font-size: 1rem; }
.nx-brand-sub { letter-spacing: 0.06em; opacity: 0.7; }
.nx-directory-trigger {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--nx-hair);
  color: #e2e8f0; border-radius: 10px; font-weight: 600;
}
.nx-directory-trigger:hover { border-color: rgba(232, 196, 122, 0.5); color: var(--nx-gold); }
.nx-view-switch { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--nx-hair-soft); border-radius: 12px; }
.nx-view-switch a.is-active {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none;
}

/* ---------- Ticker：无缝跑马灯 ---------- */
.nx-ticker { padding-top: 5.2rem; }
.nx-ticker-inner {
  border: 1px solid var(--nx-hair-soft); border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}
.nx-ticker-pulse {
  background: transparent; border: 1px solid rgba(232, 196, 122, 0.35);
  color: var(--nx-gold); border-radius: 8px; letter-spacing: 0.08em;
}
.nx-ticker-items { mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); }
.nx-ticker-items.nx-marquee { overflow: hidden; }
.nx-ticker-items.nx-marquee .nx-marquee-track { display: flex; gap: 1rem; animation: nxMarquee 48s linear infinite; width: max-content; }
.nx-ticker-items.nx-marquee:hover .nx-marquee-track { animation-play-state: paused; }
@keyframes nxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.nx-ticker-item { background: transparent; border: 1px solid transparent; border-right: 1px solid var(--nx-hair-soft); border-radius: 0; }
.nx-ticker-item em { background: rgba(232, 196, 122, 0.12); color: var(--nx-gold); }

/* ---------- Hero：编辑式巨排 + 3D ---------- */
.nx-hero { padding: 4.5rem 0 3.5rem; }
.nx-hero::before {
  content: "NEURONIX"; position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--nx-display); font-weight: 900; font-size: clamp(4rem, 14vw, 13rem);
  letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none; user-select: none; z-index: -1;
}
.nx-hero-kicker {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--nx-hair);
  color: #e2e8f0; border-radius: 999px; letter-spacing: 0.06em;
}
.nx-hero-kicker b { color: var(--nx-gold); letter-spacing: 0.12em; }
.nx-hero-left h1 {
  font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.4rem);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 850;
  text-wrap: balance; margin-bottom: 1.1rem;
}
.nx-hero-left h1 a {
  background: linear-gradient(180deg, #fff 30%, #cbd5e1 70%, #94a3b8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nx-hero-left h1 a:hover { filter: brightness(1.1); }
.nx-hero-left h1 .nx-arrow { color: var(--nx-gold); -webkit-text-fill-color: var(--nx-gold); }
.nx-hero-subtitle { font-size: 1.02rem; color: #aab4c8; max-width: 56ch; line-height: 1.7; }
.nx-hero-tags .nx-badge-pill {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--nx-hair);
  color: #cbd5e1; font-weight: 600; border-radius: 8px;
}
.nx-hero-tags .nx-badge-pill:first-child { border-color: rgba(232, 196, 122, 0.4); color: var(--nx-gold); }

/* Hero 数据条 */
.nx-hero-takeaways {
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--nx-hair-soft);
  border-radius: var(--nx-radius-m); border-left: 2px solid var(--nx-gold);
}
.nx-hero-takeaways-head { color: #e2e8f0; letter-spacing: 0.08em; }
.nx-hero-takeaways li span:first-child {
  background: transparent; color: var(--nx-gold); border: 1px solid rgba(232, 196, 122, 0.3);
  font-size: 0.68rem;
}

/* Hero 右侧 3D 终端：玻璃拟态收敛为深色精密仪器 */
.nx-hero-terminal {
  background: linear-gradient(180deg, rgba(16, 22, 44, 0.9), rgba(5, 8, 20, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--nx-radius-m);
  box-shadow: var(--nx-shadow-lift), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d; will-change: transform;
}
.nx-hero-terminal::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 122, 0.8), transparent);
}
#nx-hero-3d {
  position: absolute; inset: auto -30px -30px auto; width: 220px; height: 220px;
  pointer-events: none; opacity: 0.9; z-index: 2;
}
.nx-term-body { background: rgba(2, 4, 10, 0.85); border: 1px solid var(--nx-hair-soft); }
.nx-term-live { border-color: rgba(232, 196, 122, 0.35); color: var(--nx-gold); letter-spacing: 0.1em; }

/* 主按钮：从霓虹渐变 → 鎏金精密 */
.nx-btn-primary {
  background: linear-gradient(135deg, #f3d894, #e8c47a 40%, #b98a2e 100%);
  color: #1a1206; border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 30px -10px rgba(232, 196, 122, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 12px; letter-spacing: 0.01em; position: relative; overflow: hidden;
}
.nx-btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-20deg); transition: left 0.6s;
}
.nx-btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(232, 196, 122, 0.7); transform: translateY(-1px); }
.nx-btn-primary:hover::after { left: 130%; }

/* ---------- 章节头：大气编辑风 ---------- */
.nx-section { padding: clamp(3rem, 3rem + 3vw, 5.5rem) 0; }
.nx-section-head h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  letter-spacing: -0.03em; line-height: 1.05; font-weight: 800;
}
.nx-kicker {
  background: transparent; border: none; color: var(--nx-gold);
  letter-spacing: 0.16em; font-size: 0.66rem; padding: 0;
}
.nx-kicker::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--nx-gold); vertical-align: middle; }
.nx-section-sub { color: #8d99b0; font-size: 0.82rem; max-width: 68ch; }
.nx-mono-dim { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.66rem; }

/* ---------- 目录/卡片：聚光灯 + 3D ---------- */
.nx-domain-tab, .nx-subcat-card, .nx-card, .nx-cheatsheet-card, .nx-radar-card {
  position: relative; overflow: hidden;
  border-radius: var(--nx-radius-m) !important;
  border: 1px solid var(--nx-hair-soft) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)) !important;
  box-shadow: none !important; backdrop-filter: none !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s !important;
}
.nx-domain-tab.is-active {
  border-color: rgba(232, 196, 122, 0.45) !important;
  background: linear-gradient(180deg, rgba(232, 196, 122, 0.1), rgba(255, 255, 255, 0.02)) !important;
  box-shadow: 0 12px 40px -18px rgba(232, 196, 122, 0.4) !important;
  color: var(--nx-gold) !important;
}
/* 聚光灯跟随 */
.nx-spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.09), rgba(34, 211, 238, 0.05) 40%, transparent 70%);
}
.nx-spotlight:hover::after { opacity: 1; }
.nx-card:hover { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.nx-card-bar { height: 2px; background: linear-gradient(90deg, var(--nx-gold), transparent); opacity: 0.7; }
.nx-card-media { height: 210px; }
.nx-card-media img { filter: saturate(0.85) contrast(1.05); }
.nx-card:hover .nx-card-media img { transform: scale(1.05); filter: saturate(1.05) contrast(1.06); }
.nx-card-title { letter-spacing: -0.02em; font-weight: 750; }
.nx-card-title a { color: #eef2f9; }
.nx-card-summary { color: #8d99b0; }

/* 分类筛选：从药丸墙 → 下划线编辑风 */
.nx-cat-filter { gap: 1.2rem; border-bottom: 1px solid var(--nx-hair-soft); padding-bottom: 0; }
.nx-cat-btn {
  border: none !important; background: transparent !important; border-radius: 0 !important;
  padding: 0.7rem 0.1rem; color: #8d99b0; box-shadow: none !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px;
}
.nx-cat-btn em { background: rgba(255, 255, 255, 0.07); }
.nx-cat-btn.is-active {
  background: transparent !important; color: #fff !important; border-bottom-color: var(--nx-gold) !important;
  box-shadow: none !important;
}
.nx-cat-btn.is-active em { background: var(--nx-gold); color: #1a1206; }
.nx-cat-ribbon { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--nx-hair-soft); border-radius: 12px; }
.nx-cat-ribbon strong { color: var(--nx-gold); }
.nx-live-dot { background: var(--nx-gold); box-shadow: 0 0 8px rgba(232, 196, 122, 0.9); }

/* ---------- 揭示动画 ---------- */
.nx-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nx-reveal.is-visible { opacity: 1; transform: none; }
.nx-reveal-d1 { transition-delay: 0.06s; } .nx-reveal-d2 { transition-delay: 0.12s; } .nx-reveal-d3 { transition-delay: 0.18s; }
/* ---------- 终端旋转描边光环 + 打字机光标 ---------- */
@property --nx-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nx-hero-terminal::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--nx-angle), transparent 0 68%, rgba(232,196,122,.85) 82%, rgba(34,211,238,.85) 90%, transparent 98%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nxSpinAngle 7s linear infinite;
}
@keyframes nxSpinAngle { to { --nx-angle: 360deg; } }
.nx-type-caret { display: inline-block; width: 8px; height: 1.05em; background: var(--nx-gold); vertical-align: text-bottom; margin-left: 2px; animation: nxBlink 0.9s steps(1) infinite; box-shadow: 0 0 8px rgba(232,196,122,.9); }
@keyframes nxBlink { 50% { opacity: 0; } }

/* ---------- 描边大字跑马灯 ---------- */
.nx-wordstrip { overflow: hidden; white-space: nowrap; padding: 1.6rem 0 0.4rem; position: relative; z-index: 10; pointer-events: none; user-select: none; }
.nx-wordstrip-track { display: inline-flex; gap: 2.6rem; padding-right: 2.6rem; animation: nxStrip 30s linear infinite; will-change: transform; }
.nx-wordstrip span { font-family: var(--nx-display); font-weight: 900; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.14); }
.nx-wordstrip span b { color: transparent; -webkit-text-stroke: 1px rgba(232,196,122,0.4); font-weight: 900; }
@keyframes nxStrip { to { transform: translateX(-50%); } }

/* ---------- 3D 翻转进详情 + 标题渐变流光 + 拖尾/时间线 ---------- */
html[data-vt="flip"]::view-transition-old(root) { animation: nxFlipOut 0.45s ease-in both; }
html[data-vt="flip"]::view-transition-new(root) { animation: nxFlipIn 0.5s ease-out both; }
@keyframes nxFlipOut { to { transform: perspective(1400px) rotateY(-70deg) scale(0.86); opacity: 0; filter: brightness(1.5); } }
@keyframes nxFlipIn { from { transform: perspective(1400px) rotateY(70deg) scale(0.86); opacity: 0; } to { transform: none; opacity: 1; } }
.nx-hero-left h1 a { background-size: 220% 100%; animation: nxTitleDrift 9s ease-in-out infinite alternate; }
@keyframes nxTitleDrift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.nx-trail-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 60; pointer-events: none; }
.nx-timeline { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.nx-timeline-dot { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 4px; }
.nx-timeline-dot i { width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); transition: all 0.25s; }
.nx-timeline-dot span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; font-family: var(--nx-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: #dbe2ef; background: rgba(8,12,26,0.9); border: 1px solid rgba(255,255,255,0.12); padding: 0.25rem 0.55rem; border-radius: 8px; opacity: 0; pointer-events: none; transition: all 0.25s; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.nx-timeline-dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
.nx-timeline-dot.is-active i { background: var(--nx-gold); border-color: var(--nx-gold); box-shadow: 0 0 10px rgba(232,196,122,0.9); transform: scale(1.25); }
@media (max-width: 1100px) { .nx-timeline { display: none; } }

/* Hero 左列：纯 CSS 入场，默认可见，绝不依赖 JS */
.nx-hero-left > * { animation: nxHeroRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.nx-hero-left > *:nth-child(2) { animation-delay: 0.06s; }
.nx-hero-left > *:nth-child(3) { animation-delay: 0.12s; }
.nx-hero-left > *:nth-child(4) { animation-delay: 0.18s; }
.nx-hero-left > *:nth-child(5) { animation-delay: 0.24s; }
.nx-hero-left > *:nth-child(6) { animation-delay: 0.3s; }
@keyframes nxHeroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.nx-hero-left h1 .nx-char, .nx-hero-left h1 .nx-word { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: nxCharIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes nxCharIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nx-reveal, .nx-hero-left > *, .nx-hero-left h1 .nx-char, .nx-hero-left h1 .nx-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .nx-ticker-items.nx-marquee .nx-marquee-track { animation: none; }
  .nx-hero-terminal::after, .nx-wordstrip-track, .nx-type-caret { animation: none !important; }
  .nx-hero-left h1 a { animation: none !important; }
  .nx-trail-canvas, .nx-timeline { display: none !important; }
  .nx-wordstrip { display: none; }
}

/* ---------- 订阅面板：高级暗金 ---------- */
.nx-newsletter-panel {
  background: linear-gradient(180deg, #0c1226, #05070f);
  border: 1px solid rgba(232, 196, 122, 0.22);
  box-shadow: var(--nx-shadow-lift);
  border-radius: 18px;
}
.nx-newsletter-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 122, 0.9), transparent);
}
.nx-newsletter-orb { background: rgba(232, 196, 122, 0.08); filter: blur(100px); }
.nx-newsletter-kicker { border-color: rgba(232, 196, 122, 0.35); color: var(--nx-gold); }
.nx-newsletter-form button {
  background: linear-gradient(135deg, #f3d894, #c79a3a); color: #1a1206;
  box-shadow: 0 10px 26px -10px rgba(232, 196, 122, 0.6);
}

/* ---------- 页脚 ---------- */
.nx-footer { background: rgba(3, 5, 12, 0.92); border-top: 1px solid var(--nx-hair-soft); }
.nx-footer-col h4 { color: var(--nx-gold); letter-spacing: 0.1em; font-size: 0.72rem; }

/* ---------- 搜索/抽屉/巨型菜单：更静 ---------- */
.nx-search-panel, .nx-drawer-panel, .nx-mega-panel {
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.97), rgba(5, 8, 20, 0.98)) !important;
  border: 1px solid var(--nx-hair) !important; box-shadow: var(--nx-shadow-lift) !important;
}

/* ---------- 移动端收敛 ---------- */
@media (max-width: 768px) {
  .nx-hero::before { font-size: 22vw; }
  #nx-hero-3d { width: 150px; height: 150px; }
  .nx-ticker { padding-top: 4.6rem; }
}