/* =====================================================================
   DGWEB site nav v1 — 全站内容页统一导航 / 账号态 / 昼夜切换
   由 gate.js 注入 .dg-site-nav；只作用于 .dg-* 类，不改各页内容样式。
   ===================================================================== */
html.dg-shell { scroll-behavior: smooth; }

/* 变量放在根节点：header 与移动菜单都能继承，避免深色变量覆盖浅色菜单 */
html.dg-shell {
  --dg-bg: rgba(6, 6, 6, .96);
  --dg-fg: #f4f4f2;
  --dg-muted: #8c8c8c;
  --dg-line: rgba(255, 255, 255, .10);
  --dg-line-strong: rgba(255, 255, 255, .18);
  --dg-card: rgba(12, 12, 11, .98);
  --dg-hover: rgba(255, 255, 255, .05);
  --dg-accent: var(--acc, #f5a623);
}
html.light.dg-shell {
  --dg-bg: rgba(244, 244, 242, .97);
  --dg-fg: #141414;
  --dg-muted: #6c6c69;
  --dg-line: #e1e1de;
  --dg-line-strong: #c9c9c4;
  --dg-card: #fffefb;
  --dg-hover: rgba(0, 0, 0, .045);
  --dg-accent: #9a5b00;
}

.dg-site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: 72px;
  color: var(--dg-fg);
  background: var(--dg-bg);
  border-bottom: 1px solid var(--dg-line);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.dg-nav-inner {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
@media (min-width: 768px) {
  .dg-nav-inner { padding: 0 40px; }
}

/* 品牌 */
.dg-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  min-width: 0;
  color: var(--dg-fg);
  text-decoration: none;
  white-space: nowrap;
}
.dg-brand img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--dg-line);
}
.dg-brand-rule { width: 1px; height: 16px; background: var(--dg-line); flex: none; }
.dg-brand-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-brand:hover { color: var(--dg-fg); }
.dg-brand:hover img { border-color: var(--dg-accent); }

/* 中间链接 */
.dg-links {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: 3px;
  min-width: 0;
}
.dg-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  color: var(--dg-muted);
  text-decoration: none;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 11px;
  letter-spacing: .13em;
  white-space: nowrap;
  transition: color .25s;
}
.dg-link em { font-style: normal; font-size: 9px; letter-spacing: .1em; opacity: .48; }
.dg-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 1px;
  width: 0;
  height: 1px;
  background: var(--dg-accent);
  transition: width .3s ease;
}
.dg-link:hover, .dg-link.active { color: var(--dg-fg); }
.dg-link:hover::after, .dg-link.active::after { width: 100%; }
.dg-link.active { color: var(--dg-accent); }

/* 更多下拉 */
.dg-more { position: relative; display: flex; align-items: center; }
.dg-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--dg-muted);
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 11px;
  letter-spacing: .13em;
  cursor: pointer;
  transition: color .25s;
}
.dg-more-btn svg { width: 10px; height: 10px; transition: transform .25s; }
.dg-more-btn em { font-style: normal; font-size: 9px; letter-spacing: .1em; opacity: .48; }
.dg-more-btn:hover, .dg-more.open .dg-more-btn { color: var(--dg-fg); }
.dg-more-btn:focus { outline: none; }
.dg-more-btn:focus-visible { outline: 1px solid var(--dg-accent); outline-offset: 4px; border-radius: 2px; }
.dg-more-btn.active { color: var(--dg-accent); }
.dg-more.open .dg-more-btn svg { transform: rotate(180deg); }
.dg-more-menu {
  position: absolute;
  top: calc(100% + 21px);
  right: 0;
  width: 188px;
  padding: 7px;
  background: var(--dg-card);
  border: 1px solid var(--dg-line);
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.dg-more.open .dg-more-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dg-more-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 4px;
  color: var(--dg-muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .08em;
  transition: color .2s, background .2s;
}
.dg-more-menu a span { font-family: "Space Grotesk", sans-serif; font-size: 8px; letter-spacing: .1em; opacity: .55; }
.dg-more-menu a:hover { color: var(--dg-fg); background: var(--dg-hover); }

/* 右侧 */
.dg-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.dg-bili {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--dg-line);
  border-radius: 2px;
  color: var(--dg-muted);
  text-decoration: none;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.dg-bili span { font-size: 9px; opacity: .45; }
.dg-bili:hover { color: var(--dg-fg); border-color: var(--dg-line-strong); }

/* 登录 / 头像昵称 */
.dg-account-slot { display: flex; align-items: center; }
.dg-account, .dg-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 3px 11px 3px 3px;
  border: 1px solid var(--dg-line);
  border-radius: 999px;
  color: var(--dg-fg);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: border-color .25s, background .25s;
}
.dg-account:hover { border-color: var(--dg-accent); background: var(--dg-hover); }
.dg-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--dg-line-strong);
  background: rgba(245, 166, 35, .08);
  color: var(--dg-accent);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.dg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-account-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.dg-login {
  padding: 0 13px;
  border-color: rgba(245, 166, 35, .55);
  color: var(--dg-accent);
  letter-spacing: .1em;
}
.dg-login span { font-size: 9px; opacity: .58; }
.dg-login:hover { background: var(--dg-accent); border-color: var(--dg-accent); color: #050505; }

/* 主题按钮 */
.dg-theme {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dg-line);
  border-radius: 50%;
  background: transparent;
  color: var(--dg-muted);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .3s;
}
.dg-theme svg { width: 16px; height: 16px; }
.dg-theme .dg-sun { display: none; }
html.light .dg-theme .dg-sun { display: block; }
html.light .dg-theme .dg-moon { display: none; }
.dg-theme:hover { color: var(--dg-accent); border-color: var(--dg-accent); transform: rotate(12deg); }

/* 汉堡 */
.dg-nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--dg-line);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
.dg-nav-toggle span { display: block; width: 15px; height: 1px; margin: 4px auto; background: var(--dg-fg); transition: transform .25s, opacity .25s; }
.dg-nav-toggle.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.dg-nav-toggle.open span:nth-child(2) { opacity: 0; }
.dg-nav-toggle.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 鼠标点击不显示焦点环；键盘 Tab 仍保留可见焦点 */
.dg-site-nav a:focus, .dg-site-nav button:focus,
.dg-mobile a:focus { outline: none; }
.dg-site-nav a:focus-visible, .dg-site-nav button:focus-visible,
.dg-mobile a:focus-visible { outline: 1px solid var(--dg-accent); outline-offset: 3px; }

/* 移动菜单 */
.dg-mobile {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0;
  z-index: 74;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 12px 24px 24px;
  background: #080808;
  border-bottom: 1px solid var(--dg-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.dg-mobile.open { display: block; }
html.light .dg-mobile { background: #f4f4f2; }
.dg-mobile-acct { padding: 6px 0 13px; border-bottom: 1px solid var(--dg-line); margin-bottom: 7px; }
.dg-mobile-acct .dg-account, .dg-mobile-acct .dg-login { width: 100%; height: 42px; border-radius: 4px; justify-content: flex-start; }
.dg-mobile-acct .dg-avatar { width: 30px; height: 30px; }
.dg-mobile a.dg-m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--dg-line);
  color: var(--dg-fg);
  text-decoration: none;
  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
  font-size: 12px;
  letter-spacing: .11em;
}
.dg-mobile a.dg-m-link span { font-size: 9px; letter-spacing: .14em; color: var(--dg-muted); }
.dg-mobile a.dg-m-link:hover { color: var(--dg-accent); }

@media (max-width: 1180px) {
  .dg-links { display: none; }
  .dg-nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  .dg-bili { display: none; }
  .dg-nav-inner { gap: 10px; }
}
@media (max-width: 760px) {
  .dg-site-nav { height: 64px; }
  .dg-nav-inner { padding: 0 18px; gap: 8px; }
  .dg-brand { gap: 8px; }
  .dg-brand img { width: 32px; height: 32px; }
  .dg-brand-rule { height: 14px; }
  .dg-brand-name { font-size: 13px; letter-spacing: .05em; }
  .dg-account-name { display: none; }
  .dg-account { width: 36px; padding: 3px; justify-content: center; }
  .dg-avatar { width: 28px; height: 28px; }
  .dg-login { height: 34px; padding: 0 10px; font-size: 10px; }
  .dg-theme { width: 32px; height: 32px; }
  .dg-nav-toggle { width: 34px; height: 34px; }
  .dg-mobile { top: 64px; max-height: calc(100vh - 64px); padding: 10px 18px 22px; }
  .dg-mobile-acct .dg-account { width: auto; padding: 3px 12px 3px 4px; justify-content: flex-start; }
  .dg-mobile-acct .dg-account .dg-account-name { display: block; }
}
@media (max-width: 380px) {
  .dg-brand-name, .dg-brand-rule { display: none; }
}

/* 旧右下角主题/个人中心让位给新导航；保留注销验证 */
html.dg-shell #themeToggle { display: none !important; }
html.dg-shell #gateAccount { display: none !important; }
html.dg-shell #gateLogout {
  right: 20px !important;
  border-radius: 17px !important;
  border-left: 1px solid var(--line, rgba(255, 255, 255, .16)) !important;
}
html.light.dg-shell #gateLogout {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(0, 0, 0, .14) !important;
  color: #141414 !important;
}
@media (max-width: 768px) {
  html.dg-shell #gateLogout { right: 14px !important; }
}

/* 没有自带 html.light 规则的杂项页：只做最基础的底色兜底 */
html.light.dg-light-basic body { background: #f4f4f2 !important; color: #141414 !important; }

/* ===== 黑夜模式烟雾：多团柔光云 + 低频湍流打散，只在深色主题出现 ===== */
body.dg-aurora-host { isolation: isolate; }
.dg-aurora { display: none; position: fixed; inset: -8%; z-index: -1; pointer-events: none; overflow: hidden; filter: url(#dgAuroraWarp); }
html:not(.light) .dg-aurora { display: block; }

.dg-aurora::before,
.dg-aurora::after { content: ''; position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.dg-aurora::before {
  background:
    radial-gradient(ellipse 44% 38% at 18% 26%, rgba(52, 211, 153, .40), transparent 68%),
    radial-gradient(ellipse 34% 30% at 38% 14%, rgba(45, 212, 191, .30), transparent 70%),
    radial-gradient(ellipse 40% 36% at 62% 30%, rgba(56, 189, 248, .26), transparent 70%),
    radial-gradient(ellipse 32% 30% at 82% 18%, rgba(99, 102, 241, .32), transparent 70%);
  opacity: .95;
  mix-blend-mode: screen;
  animation: dgSmokeA 40s ease-in-out infinite alternate;
}

.dg-aurora::after {
  background:
    radial-gradient(ellipse 40% 34% at 28% 62%, rgba(34, 197, 94, .20), transparent 72%),
    radial-gradient(ellipse 36% 30% at 54% 50%, rgba(168, 85, 247, .20), transparent 72%),
    radial-gradient(ellipse 38% 32% at 78% 64%, rgba(56, 189, 248, .18), transparent 72%);
  opacity: .75;
  mix-blend-mode: screen;
  animation: dgSmokeB 56s ease-in-out infinite alternate;
}

@keyframes dgSmokeA {
  0% { transform: translate3d(-2%, 1%, 0) scale(1); }
  50% { transform: translate3d(1%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.02); }
}
@keyframes dgSmokeB {
  0% { transform: translate3d(2%, -1%, 0) scale(1.03); }
  50% { transform: translate3d(-2%, 1.5%, 0) scale(.98); }
  100% { transform: translate3d(1%, -2%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-aurora::before, .dg-aurora::after { animation: none; }
}