/* DJ 版共用：更深的页面底色、现场背景图首屏、半透明按钮与卡片。两个 DJ 版页面都引用，页面自己的样式带前缀。 */
:root {
  --page: #0e0f13;
  --glass: rgb(255 255 255 / 0.06);
  --glass-2: rgb(255 255 255 / 0.1);
  --glass-line: rgb(255 255 255 / 0.14);
  --glass-line-2: rgb(255 255 255 / 0.24);
}

body {
  background: var(--page);
}

/* 页头盖在背景图上：透明底，滚动后不跟随 */
.dj-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: transparent;
}

.dj-head .site-nav {
  color: rgb(255 255 255 / 0.72);
}

.dj-head .site-nav a:hover {
  color: #fff;
}

/* 背景图：电脑用 1920 宽，手机用 1280 宽；上方压暗给页头，下方渐隐进页面底色 */
.dj-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dj-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("bg-1920.webp") center 62% / cover no-repeat;
  animation: dj-drift 24s ease-in-out infinite alternate;
}

.dj-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(14 15 19 / 0.7) 0%, rgb(14 15 19 / 0.15) 26%, rgb(14 15 19 / 0.2) 62%, var(--page) 100%),
    radial-gradient(ellipse 60% 48% at 50% 40%, rgb(8 9 12 / 0.55), transparent 72%);
}

@keyframes dj-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .dj-bg::before { animation: none; }
}

@media (max-width: 860px) {
  .dj-bg::before { background-image: url("bg-1280.webp"); background-position: 50% 70%; }
}

/* 半透明按钮（推荐的那个用实心 .btn-solid） */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--glass-line-2);
  border-radius: 10px;
  background: var(--glass-2);
  color: #fff;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.15s, border-color 0.15s;
}

.btn-glass:hover {
  background: rgb(255 255 255 / 0.16);
  border-color: rgb(255 255 255 / 0.36);
}

/* 深色页面里的卡片 */
.dj-card {
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.03);
}

/* 联动支持的软件：一行文字 */
.dj-apps {
  color: rgb(255 255 255 / 0.62);
  font-size: 13px;
}

.dj-apps b {
  color: rgb(255 255 255 / 0.9);
  font-weight: 600;
}

.dj-apps i {
  margin-right: 6px;
  color: var(--p-light);
  vertical-align: -2px;
}

/* 更新记录（两个页面同一种写法） */
.dj-log-ver + .dj-log-ver {
  border-top: 1px solid var(--glass-line);
}

.dj-log-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.dj-log-no {
  font-size: 15px;
  font-weight: 600;
}

.dj-log-date {
  color: var(--muted);
  font-size: 13px;
}

.dj-log-list li {
  position: relative;
  padding-left: 14px;
  color: var(--text-2);
}

.dj-log-list li + li {
  margin-top: 6px;
}

.dj-log-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}

.site-foot {
  border-top-color: var(--glass-line);
}