/* ==========================================================================
   NOVAFRAME · 深色皮肤（参考 runninghubcncreator.apps.vibex.cn）
   --------------------------------------------------------------------------
   皮肤系统：html 上有 data-nf-theme="dark" | "light"（由 nf-theme.js 写入，
   取值来源是「自动 / 浅色 / 深色」三态设置，自动模式会解析成实际的 light/dark）。
   整个文件只在 dark 下生效，light 就是站点原本的米白 + 墨黑那一套，
   不需要任何"还原"规则 —— 这就是把作用域写成 [data-nf-theme="dark"] 的原因。

   设计语言取自参考站 index-DrontKB2.css 的 :root：
     底色    hsl(0 0% 3%)   → #080808   近黑，几乎无色偏
     卡片    hsl(0 0% 8%)   → #141414   比底色亮一档，靠明度分层而不是阴影
     描边    hsl(0 0% 15%)  → #262626   1px 细线，代替厚重阴影
     正文    96% 灰         → #F2F2EF   不刺眼的暖白
     次要    55% 灰         → #8F8F8A
     强调    hsl(72 100% 50%) → #8840f8 荧光柠黄，只做小面积点睛
     圆角    12px / 7px / pill
     排印    全站无衬线，正文 14px / 行高 1.65

   为什么用一层覆盖而不是改源码：
     前端是 Vite 压缩后的产物（index-*.css + tailwind 工具类），源码不可得。
     Tailwind 已经把颜色编译成硬编码的 rgb()，所以覆盖 :root 变量对 .bg-white、
     .text-muted 这类类名无效 —— 必须逐个覆盖类本身。
     赏金猎人主题（html.nf-theme-bounty）有自己的暗色体系，用 :not() 排除在外。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 令牌
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) {
  --nf-bg: #080808;
  --nf-bg-soft: #0d0d0d;
  --nf-surface: #121212;
  --nf-surface-2: #1a1a1a;
  --nf-line: #262626;
  --nf-line-soft: #1c1c1c;
  --nf-fg: #f2f2ef;
  --nf-fg-2: #8f8f8a;
  --nf-accent: #8840f8;
  --nf-accent-dim: #8840f84d;

  /* 覆盖原主题三件套：body 背景 / body 文字 / ::selection 底色都读这三个 */
  --paper: #080808;
  --ink: #f2f2ef;
  --volt: #8840f8;

  color-scheme: dark;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) body {
  background: var(--nf-bg);
  color: var(--nf-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) ::selection {
  background: var(--nf-accent);
  color: #080808;
}

/* 滚动条跟着换，否则右侧会挂着一条亮银边 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) ::-webkit-scrollbar-thumb {
  background: #2b2b2b;
  border: 2px solid #080808;
  border-radius: 999px;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) ::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
}

/* --------------------------------------------------------------------------
   2. 背景
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-paper {
  background-color: var(--nf-bg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-white {
  background-color: var(--nf-surface) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-white\/25 {
  background-color: #ffffff0f !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-white\/40 {
  background-color: #ffffff14 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-white\/70 {
  background-color: #ffffff1a !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:bg-white\/60:hover {
  background-color: #ffffff0f !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:bg-paper:hover {
  background-color: #101010 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-line {
  background-color: var(--nf-line) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-line\/60 {
  background-color: #202020 !important;
}

/* bg-ink 原来 = 实心近黑块（按钮 / 状态标签 / 深色分区）。
   暗底上再放近黑就"消失"了，抬到 #1c1c1c，让它还读得出是个实心块。 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-ink {
  background-color: #1c1c1c !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-ink\/40 {
  background-color: #0a0a0a66 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-ink\/30 {
  background-color: #0a0a0a4d !important;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-volt {
  background-color: var(--nf-accent) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-volt\/30 {
  background-color: var(--nf-accent-dim) !important;
}

/* 状态胶囊：浅底彩字在暗色里像贴了张便利贴，改成深底彩字 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-orange-100 {
  background-color: #35240f !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .bg-red-100 {
  background-color: #351414 !important;
}

/* --------------------------------------------------------------------------
   3. 文字
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-ink {
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:text-ink:hover {
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-muted {
  color: var(--nf-fg-2) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:text-muted:hover {
  color: #b9b9b4 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .group:hover .group-hover\:text-ink\/80 {
  color: #f2f2efcc !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-volt {
  color: var(--nf-accent) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:text-volt:hover {
  color: var(--nf-accent) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-orange-700 {
  color: #ffb056 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-red-500,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .text-red-600 {
  color: #ff6f6f !important;
}

/* 折叠菜单的汉堡线：bg-ink 变成 #1c1c1c 后基本看不见，单独提亮 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .nf-burger .bg-ink {
  background-color: var(--nf-fg) !important;
}

/* --------------------------------------------------------------------------
   4. 描边
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .border-line {
  border-color: var(--nf-line) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .border-line\/80 {
  border-color: #242424 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .border-ink\/15 {
  border-color: #ffffff26 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:border-ink\/30:hover {
  border-color: #ffffff33 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .hover\:border-ink:hover {
  border-color: #ffffff40 !important;
}

/* --------------------------------------------------------------------------
   5. 组件：按钮 / 导航
   -------------------------------------------------------------------------- */
/* 主按钮换成荧光柠黄 + 近黑字，这是参考站最容易被记住的一处 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .btn-primary {
  background-color: var(--nf-accent) !important;
  color: #080808 !important;
  box-shadow: 0 8px 30px #8840f81f;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .btn-primary:hover {
  box-shadow: 0 14px 40px #8840f833;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .btn-ghost {
  border-color: #ffffff26 !important;
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .btn-ghost:hover {
  background-color: #ffffff14 !important;
  border-color: #ffffff40 !important;
  color: var(--nf-fg) !important;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .glass-nav {
  background: #080808cc !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* 页脚 / 关于我们：原来靠 bg-ink 与米白页面拉开，现在要和近黑页面区分开 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) footer.bg-ink {
  background-color: #0b0b0b !important;
  border-top: 1px solid var(--nf-line-soft);
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) section.bg-ink {
  background-color: #0e0e0e !important;
  border-top: 1px solid var(--nf-line-soft);
}

/* 阴影在近黑背景上等于没有，改成更实、更短的投影，形状靠它托住 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .shadow-sm {
  box-shadow: 0 1px 3px #00000080 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .shadow-xl {
  box-shadow: 0 18px 50px #00000099 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .shadow-2xl {
  box-shadow: 0 24px 70px #000000b3 !important;
}

/* --------------------------------------------------------------------------
   6. 圆角收敛：24/16/12 → 16/14/12，贴近参考站的 12px 体系
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .rounded-3xl {
  border-radius: 16px;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .rounded-2xl {
  border-radius: 14px;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .rounded-xl {
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   7. 表单控件：浏览器默认把 select / input 渲成白底黑字，暗色下会炸出一块白
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) select,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) textarea {
  background-color: var(--nf-surface) !important;
  border: 1px solid var(--nf-line) !important;
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) select option {
  background-color: #141414;
  color: var(--nf-fg);
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background-color: var(--nf-surface);
  color: var(--nf-fg);
  border-color: var(--nf-line);
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) input::placeholder,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) textarea::placeholder {
  color: #6f6f6a;
}

/* --------------------------------------------------------------------------
   8. 活动雷达独立页（radar.css 里全是浅色硬编码，逐条对齐暗色）
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory {
  color: var(--nf-fg);
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .eyebrow,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-intro,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-results {
  color: var(--nf-fg-2) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-note {
  color: #a3a39d !important;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .btn-ghost,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-categories button {
  background: var(--nf-surface) !important;
  border: 1px solid #2a2a2a !important;
  color: #d8d8d3 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .btn-ghost:hover,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-categories button:hover {
  background: #1b1b1b !important;
  border-color: #3a3a3a !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-categories button[aria-pressed="true"],
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-status-options button[aria-pressed="true"] {
  background: var(--nf-accent) !important;
  border-color: var(--nf-accent) !important;
  color: #080808 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-status-options button:hover {
  background: #1b1b1b !important;
}

/* 状态下拉是 <details>/<summary> 自绘的，不是原生 select，得单独对齐 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-status-menu summary {
  background: var(--nf-surface) !important;
  border-color: #2a2a2a !important;
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-status-options {
  background: #161616 !important;
  border-color: #2a2a2a !important;
  box-shadow: 0 12px 30px #000000a6 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-status-options button {
  background: transparent !important;
  color: #d8d8d3 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-status-options button:hover {
  background: #232323 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-status-options button[aria-pressed="true"] {
  background: var(--nf-accent) !important;
  color: #080808 !important;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-controls input {
  background: var(--nf-surface) !important;
  border: 1px solid #2a2a2a !important;
  color: var(--nf-fg) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-controls input::placeholder {
  color: #6f6f6a;
}

html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-card {
  background: var(--nf-surface) !important;
  border: 1px solid var(--nf-line) !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-status {
  background: #262626 !important;
  color: #d0d0cb !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-status[data-status="开放中"] {
  background: var(--nf-accent) !important;
  color: #080808 !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-directory .radar-status[data-status="即将开放"] {
  background: #2e2e2e !important;
  color: #d0d0cb !important;
}

/* 海报容器原来是纯白，暗色里会变成刺眼的白框 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .radar-poster {
  background: #141414 !important;
  color: var(--nf-fg) !important;
}

/* 最后通牒看板：原本是偏冷的深灰蓝 + 暖白字，向参考站的中性灰靠一档 */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .deadline-board {
  background: linear-gradient(160deg, #151617, #0c0c0d 70%) !important;
  border-color: #262626 !important;
  color: #f0f0ec !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .deadline-board .deadline-event small,
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .deadline-board .deadline-date small {
  color: #8f8f8a !important;
}
html[data-nf-theme="dark"]:not(.nf-theme-bounty) .deadline-board .deadline-live-dot {
  background: var(--nf-accent) !important;
  box-shadow: 0 0 10px #8840f890 !important;
}

/* --------------------------------------------------------------------------
   8. 兜底：卡片里的图片圆角跟着卡片走，避免暗色下白边穿帮
   -------------------------------------------------------------------------- */
html[data-nf-theme="dark"]:not(.nf-theme-bounty) img {
  background-color: #141414;
}

@media (prefers-reduced-motion: reduce) {
  html[data-nf-theme="dark"]:not(.nf-theme-bounty) * {
    scroll-behavior: auto !important;
  }
}