@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #03070a;
}

@property --bg-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #071117;
}

@property --panel {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(8, 19, 24, 0.72);
}

@property --text {
  syntax: "<color>";
  inherits: true;
  initial-value: #e7fbff;
}

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #00f0ff;
}

@property --accent-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 240, 255, 0.18);
}

@property --accent-mid {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 240, 255, 0.42);
}

@property --accent-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 240, 255, 0.78);
}

@property --border {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 240, 255, 0.22);
}

:root {
  color-scheme: dark light;
  --bg: #03070a;
  --bg-2: #071117;
  --bg-deep: #020304;
  --panel: rgba(8, 19, 24, 0.72);
  --panel-strong: rgba(8, 24, 30, 0.88);
  --panel-solid: #071117;
  --panel-soft: rgba(8, 24, 30, 0.78);
  --text: #e7fbff;
  --text-soft: rgba(231, 251, 255, 0.7);
  --muted: rgba(231, 251, 255, 0.44);
  --faint: rgba(231, 251, 255, 0.44);
  --accent: #00f0ff;
  --accent-rgb: 0, 240, 255;
  --accent-2: #55ffc2;
  --accent-soft: rgba(0, 240, 255, 0.18);
  --accent-mid: rgba(0, 240, 255, 0.42);
  --accent-strong: rgba(0, 240, 255, 0.78);
  --border: rgba(0, 240, 255, 0.22);
  --line: var(--border);
  --line-strong: var(--accent-mid);
  --shadow: 0 0 36px rgba(0, 240, 255, 0.14);
  --glow: var(--shadow);
  --font:
    "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui,
    sans-serif;
}

html[data-accent="orange"] {
  --bg: #080503;
  --bg-2: #140b05;
  --bg-deep: #020304;
  --panel: rgba(24, 13, 8, 0.72);
  --panel-strong: rgba(30, 16, 8, 0.88);
  --panel-solid: #140b05;
  --panel-soft: rgba(30, 16, 8, 0.78);
  --accent: #ff8a1f;
  --accent-rgb: 255, 138, 31;
  --accent-2: #ffd15a;
  --accent-soft: rgba(255, 138, 31, 0.18);
  --accent-mid: rgba(255, 138, 31, 0.42);
  --accent-strong: rgba(255, 138, 31, 0.78);
  --border: rgba(255, 138, 31, 0.24);
  --shadow: 0 0 38px rgba(255, 138, 31, 0.15);
}

html {
  scroll-behavior: smooth;
  transition-property:
    --bg, --bg-2, --panel, --text, --accent, --accent-soft,
    --accent-mid, --accent-strong, --border;
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(.16, .84, .24, 1);
}

body {
  background:
    radial-gradient(
      circle at 18% 22%,
      var(--accent-soft),
      transparent 24rem
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(255, 255, 255, 0.045),
      transparent 22rem
    ),
    linear-gradient(
      135deg,
      var(--bg),
      var(--bg-2) 48%,
      #020304
    );
  transition:
    color 720ms cubic-bezier(.16, .84, .24, 1),
    filter 720ms cubic-bezier(.16, .84, .24, 1);
}

body::before {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.035) 44%,
      transparent 56%
    ),
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.44) 78%
    );
  mix-blend-mode: screen;
  opacity: 0.48;
}

body::after {
  position: fixed;
  z-index: 26;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  background: transparent;
  will-change: opacity;
}

body[data-theme-motion="to-light"]::after {
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(255, 255, 255, 0.72),
      transparent 30rem
    ),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.54) 52%,
      rgba(154, 239, 255, 0.12)
    );
}

body[data-theme-motion="to-dark"]::after {
  mix-blend-mode: normal;
  background:
    radial-gradient(
      circle at 72% 16%,
      rgba(0, 240, 255, 0.1),
      transparent 26rem
    ),
    linear-gradient(
      115deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 10, 14, 0.62) 54%,
      rgba(0, 0, 0, 0.74)
    );
}

body.theme-transitioning::after {
  animation:
    theme-wash 920ms cubic-bezier(.18, .78, .22, 1) forwards;
}

#particle-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-grid,
.background-grid {
  position: fixed;
  z-index: 0;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.05),
      transparent 34%
    );
  background-size: 72px 72px, 72px 72px, 100% 100%;
  mask-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.96), transparent 88%);
  animation: grid-drift 16s linear infinite;
}

.scanline {
  z-index: 20;
  opacity: 0.12;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.08) 1px,
      transparent 1px,
      transparent 5px
    );
}

.accent-shift {
  position: fixed;
  z-index: 25;
  inset: 0;
  --shift-from: rgba(0, 240, 255, 0.34);
  --shift-to: rgba(255, 138, 31, 0.46);
  --shift-start: -62vw;
  --shift-end: 62vw;
  opacity: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 72px,
      rgba(255, 255, 255, 0.035) 72px 82px,
      transparent 82px 150px
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      var(--shift-from) 18%,
      rgba(255, 255, 255, 0.1) 50%,
      var(--shift-to) 82%,
      transparent 100%
    );
  transform:
    translate3d(var(--shift-start), 0, 0) scale(1.04);
  filter: saturate(1.16);
  will-change: transform, opacity;
}

body[data-accent-motion="to-orange"] .accent-shift {
  --shift-from: rgba(0, 240, 255, 0.28);
  --shift-to: rgba(255, 138, 31, 0.48);
  --shift-start: -62vw;
  --shift-end: 62vw;
}

body[data-accent-motion="to-cyan"] .accent-shift {
  --shift-from: rgba(255, 138, 31, 0.34);
  --shift-to: rgba(0, 240, 255, 0.46);
  --shift-start: 62vw;
  --shift-end: -62vw;
}

body.accent-transitioning .accent-shift {
  animation:
    accent-shift 1.14s cubic-bezier(.14, .86, .18, 1) forwards;
}

body.screen-shake {
  animation: screen-shake 520ms cubic-bezier(.18, .84, .22, 1);
}

body.screen-shake-hot {
  animation: screen-shake-hot 720ms cubic-bezier(.18, .84, .22, 1);
}

.lobby-dialog.screen-shake {
  animation: lobby-panel-shake 420ms cubic-bezier(.18, .84, .22, 1);
}

.lobby-dialog.screen-shake-hot {
  animation: lobby-panel-shake-hot 560ms cubic-bezier(.18, .84, .22, 1);
}

.status-pill,
.accent-toggle,
.theme-toggle {
  border-color: var(--border);
  color: var(--text-soft);
  background: rgba(2, 8, 10, 0.54);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.accent-toggle,
.theme-toggle {
  position: relative;
  min-height: 42px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 180ms ease,
    border-color 520ms cubic-bezier(.16, .84, .24, 1),
    color 520ms cubic-bezier(.16, .84, .24, 1),
    background-color 520ms cubic-bezier(.16, .84, .24, 1),
    box-shadow 520ms cubic-bezier(.16, .84, .24, 1);
}

.accent-toggle:hover,
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent-mid);
  transform: translateY(-1px);
}

.theme-toggle::before {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.22) 48%,
      transparent 72%
    );
  transform: translateX(-120%);
  mix-blend-mode: screen;
}

.theme-toggle::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.04);
  transform-origin: left center;
  will-change: transform, opacity;
}

.theme-toggle.to-dark::after {
  background:
    linear-gradient(
      110deg,
      rgba(2, 8, 10, 0.92),
      rgba(7, 17, 23, 0.82) 62%,
      rgba(2, 8, 10, 0.76)
    );
  transform-origin: left center;
}

.theme-toggle.to-light::after {
  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.92),
      rgba(238, 251, 252, 0.84) 62%,
      rgba(246, 253, 255, 0.78)
    );
  transform-origin: right center;
}

.theme-toggle.is-switching::before {
  animation:
    theme-toggle-sheen 820ms cubic-bezier(.16, .84, .24, 1);
}

.theme-toggle.is-switching::after {
  animation:
    theme-toggle-wash 980ms cubic-bezier(.16, .84, .24, 1) both;
}

.theme-toggle > * {
  position: relative;
  z-index: 2;
}

.theme-toggle [data-theme-label] {
  display: inline-block;
  white-space: nowrap;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.16, .84, .24, 1),
    color 520ms cubic-bezier(.16, .84, .24, 1);
}

.theme-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.18),
      transparent 58%
    ),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    0 0 18px var(--accent-mid),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    transform 520ms cubic-bezier(.16, .84, .24, 1),
    border-color 520ms ease,
    box-shadow 520ms ease,
    background 520ms ease;
}

.theme-icon::before,
.theme-icon::after {
  position: absolute;
  border-radius: 999px;
  content: "";
  transition:
    inset 620ms cubic-bezier(.16, .84, .24, 1),
    transform 620ms cubic-bezier(.16, .84, .24, 1),
    opacity 420ms ease,
    background 620ms ease,
    box-shadow 620ms ease,
    border-color 620ms ease;
}

html[data-resolved-theme="light"] .theme-icon::before {
  inset: 5px;
  background: var(--accent);
  box-shadow:
    0 0 14px var(--accent-strong),
    0 0 28px var(--accent-soft);
  transform: scale(0.92);
}

html[data-resolved-theme="light"] .theme-icon::after {
  inset: 2px;
  border: 1.5px solid var(--accent-mid);
  border-bottom-color: transparent;
  border-left-color: transparent;
  opacity: 0.86;
  transform: rotate(42deg);
}

html[data-resolved-theme="dark"] .theme-icon::before {
  inset: 3px;
  background: var(--accent);
  box-shadow:
    0 0 16px var(--accent-mid),
    0 0 30px var(--accent-soft);
  transform: translateX(-1px) scale(0.88);
}

html[data-resolved-theme="dark"] .theme-icon::after {
  inset: 2px 1px 2px 7px;
  opacity: 1;
  background: var(--bg-2);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.22);
}

.theme-toggle.is-switching .theme-icon {
  animation:
    theme-icon-pop 640ms cubic-bezier(.16, .84, .24, 1);
}

.toggle-light {
  border-color: var(--accent-mid);
  background:
    radial-gradient(
      circle,
      var(--accent) 0%,
      var(--accent-soft) 48%,
      transparent 70%
    );
  box-shadow: 0 0 18px var(--accent-mid);
}

.panel,
.room-metrics,
.join-dialog,
.lobby-card,
.lobby-dialog {
  border-color: var(--border);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.06),
      transparent 42%
    ),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
}

.queue-item,
.member,
.chat-form,
.volume-row,
.add-track-form {
  border-color: var(--border);
  box-shadow:
    0 0 24px rgba(var(--accent-rgb), 0.045),
    inset 0 0 0 1px rgba(255, 255, 255, 0.022);
}

.panel,
.queue-item,
.member,
.add-track-form,
.lobby-card,
.primary-button,
.secondary-button,
.chat-form button,
.join-dialog > button,
.user-button {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 520ms cubic-bezier(.16, .84, .24, 1),
    color 520ms cubic-bezier(.16, .84, .24, 1);
}

.panel:hover,
.queue-item:hover,
.add-track-form:hover,
.lobby-card:hover {
  border-color: var(--accent-mid);
  box-shadow:
    0 0 40px var(--accent-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/*
 * 原站 qbddcx-homepage-v9 的模块扫光参数。
 * 保留 120deg、±120% 位移和 760ms 时长，避免重新调成廉价的快速闪白。
 */
.panel::after,
.room-metrics::after,
.queue-item::after,
.member::after,
.add-track-form::after,
.lobby-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 1;
  background: linear-gradient(
    120deg,
    transparent,
    var(--accent-soft),
    transparent
  );
  transform: translateX(-120%);
  transition: transform 760ms ease;
  pointer-events: none;
}

.panel:hover::after,
.room-metrics:hover::after,
.queue-item:hover::after,
.member:hover::after,
.add-track-form:hover::after,
.lobby-card:hover::after {
  transform: translateX(120%);
}

.room-metrics,
.member,
.add-track-form,
.lobby-card {
  position: relative;
  overflow: hidden;
}

[data-ripple] {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--accent);
  opacity: 0.45;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 650ms ease-out forwards;
}

.pointer-ring {
  position: fixed;
  z-index: 30;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-mid);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.4);
  animation: pointer-ring 760ms ease-out forwards;
}

.energy-line {
  position: fixed;
  z-index: 28;
  left: 0;
  width: 34vw;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      rgba(255, 255, 255, 0.88),
      transparent
    );
  box-shadow:
    0 0 16px var(--accent-mid),
    0 0 28px var(--accent-soft);
  transform-origin: left center;
  transform:
    translate3d(var(--line-start, -48vw), 0, 0) scaleX(0.35);
  will-change: transform, opacity;
  animation:
    energy-line 1.35s cubic-bezier(.13, .87, .18, 1) forwards;
}

.energy-line.hot {
  background:
    linear-gradient(
      90deg,
      transparent,
      #ff8a1f,
      #ffd0a1,
      #ff4d00,
      transparent
    );
  box-shadow:
    0 0 18px rgba(255, 138, 31, 0.58),
    0 0 34px rgba(255, 86, 0, 0.36);
}

.energy-line.cool {
  background:
    linear-gradient(
      90deg,
      transparent,
      #00f0ff,
      #e7fbff,
      #00a6ff,
      transparent
    );
  box-shadow:
    0 0 18px rgba(0, 240, 255, 0.58),
    0 0 34px rgba(0, 166, 255, 0.36);
}

html[data-theme="dark"] {
  color-scheme: dark light;
}

html[data-theme="light"],
:root[data-resolved-theme="light"] {
  color-scheme: light dark;
  --bg: #eefbfc;
  --bg-2: #dff4f7;
  --bg-deep: #fffefe;
  --panel: rgba(246, 253, 255, 0.76);
  --panel-strong: rgba(240, 251, 254, 0.9);
  --panel-solid: #f0fbfe;
  --panel-soft: rgba(240, 251, 254, 0.82);
  --text: #07181d;
  --text-soft: rgba(7, 24, 29, 0.7);
  --muted: rgba(7, 24, 29, 0.48);
  --faint: rgba(7, 24, 29, 0.48);
  --accent: #009aad;
  --accent-rgb: 0, 154, 173;
  --accent-soft: rgba(0, 154, 173, 0.14);
  --accent-mid: rgba(0, 154, 173, 0.36);
  --accent-strong: rgba(0, 154, 173, 0.72);
  --border: rgba(0, 154, 173, 0.24);
  --shadow:
    0 18px 46px rgba(0, 80, 94, 0.12),
    0 0 30px rgba(0, 154, 173, 0.1);
}

html[data-resolved-theme="light"][data-accent="orange"] {
  --bg: #fff4e8;
  --bg-2: #ffe8d0;
  --panel: rgba(255, 250, 244, 0.78);
  --panel-strong: rgba(255, 247, 238, 0.92);
  --panel-solid: #fff7ee;
  --panel-soft: rgba(255, 247, 238, 0.84);
  --text: #1d0e04;
  --text-soft: rgba(29, 14, 4, 0.7);
  --muted: rgba(29, 14, 4, 0.48);
  --faint: rgba(29, 14, 4, 0.48);
  --accent: #d45d00;
  --accent-rgb: 212, 93, 0;
  --accent-soft: rgba(212, 93, 0, 0.15);
  --accent-mid: rgba(212, 93, 0, 0.38);
  --accent-strong: rgba(212, 93, 0, 0.74);
  --border: rgba(212, 93, 0, 0.25);
  --shadow:
    0 18px 46px rgba(120, 56, 0, 0.13),
    0 0 30px rgba(212, 93, 0, 0.1);
}

:root[data-resolved-theme="light"] body {
  background:
    radial-gradient(
      circle at 16% 20%,
      var(--accent-soft),
      transparent 26rem
    ),
    radial-gradient(
      circle at 84% 16%,
      rgba(255, 255, 255, 0.78),
      transparent 24rem
    ),
    linear-gradient(
      135deg,
      var(--bg),
      var(--bg-2) 54%,
      #fffefe
    );
}

@keyframes grid-drift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 72px 72px, 72px 72px, 0 0;
  }
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(22);
  }
}

@keyframes pointer-ring {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5.2);
  }
}

@keyframes accent-shift {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--shift-start), 0, 0) scale(1.04);
  }
  18% {
    opacity: 0.62;
  }
  48% {
    opacity: 0.76;
  }
  78% {
    opacity: 0.34;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--shift-end), 0, 0) scale(1.02);
  }
}

@keyframes energy-line {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--line-start, -48vw), 0, 0) scaleX(0.24);
  }
  12% {
    opacity: 1;
  }
  68% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--line-end, 146vw), 0, 0)
      scaleX(var(--line-scale, 1.18));
  }
}

@keyframes theme-wash {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.52;
  }
  52% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
  }
}

@keyframes theme-toggle-wash {
  0% {
    opacity: 0;
    transform: scaleX(0.04);
  }
  18% {
    opacity: 0.72;
  }
  54% {
    opacity: 0.92;
    transform: scaleX(1);
  }
  76% {
    opacity: 0.46;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes theme-toggle-sheen {
  0% {
    opacity: 0;
    transform: translateX(-130%);
  }
  28% {
    opacity: 0.38;
  }
  74% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translateX(130%);
  }
}

@keyframes theme-icon-pop {
  0% {
    transform: rotate(0deg) scale(1);
  }
  42% {
    transform: rotate(88deg) scale(1.04);
  }
  66% {
    transform: rotate(132deg) scale(0.99);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

@keyframes screen-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  18% {
    transform: translate3d(-2px, 1px, 0);
  }
  36% {
    transform: translate3d(3px, -1px, 0);
  }
  54% {
    transform: translate3d(-1px, 2px, 0);
  }
  72% {
    transform: translate3d(2px, 0, 0);
  }
}

@keyframes screen-shake-hot {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  12% {
    transform: translate3d(-4px, 2px, 0);
  }
  24% {
    transform: translate3d(5px, -2px, 0);
  }
  38% {
    transform: translate3d(-3px, 3px, 0);
  }
  52% {
    transform: translate3d(4px, 1px, 0);
  }
  68% {
    transform: translate3d(-2px, -2px, 0);
  }
  84% {
    transform: translate3d(2px, 1px, 0);
  }
}

@keyframes lobby-panel-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  24% {
    transform: translate3d(-1.5px, 0.5px, 0);
  }
  48% {
    transform: translate3d(1.5px, -0.5px, 0);
  }
  72% {
    transform: translate3d(-0.75px, 0, 0);
  }
}

@keyframes lobby-panel-shake-hot {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  18% {
    transform: translate3d(-2px, 1px, 0);
  }
  36% {
    transform: translate3d(2.5px, -1px, 0);
  }
  54% {
    transform: translate3d(-1.5px, 1px, 0);
  }
  72% {
    transform: translate3d(1px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    transition-duration: 0ms;
  }

  .page-grid,
  .background-grid {
    animation: none;
  }
}