.watch-body {
  display: grid;
  gap: 16px;
  height: 100%;
  overflow-y: auto;
  align-content: start;
  padding-top: 2px;
  scroll-behavior: smooth;
  --watch-immersive-offset: 0px;
}

.watch-body.watch-immersive {
  padding-top: 0;
}

.watch-body.watch-immersive .watch-tabs,
.watch-body.watch-immersive .watch-pane.active {
  transform: none;
}

.watch-body.watch-immersive #watch-pane-mv .watch-engine-grid,
.watch-body.watch-immersive #watch-pane-mv .kara-runtime-board,
.watch-body.watch-immersive #watch-pane-music .watch-audio-preview {
  display: none !important;
}

.watch-body.watch-immersive .watch-pane.active {
  display: block;
}

.watch-body.watch-details-revealed .watch-tabs,
.watch-body.watch-details-revealed .watch-pane {
  transform: translateY(0);
}

.watch-progress-rotator {
  display: none !important;
}

.watch-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 0 48px 2px 2px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  min-height: 52px;
  transition: opacity 0.26s ease, transform 0.26s ease, max-height 0.26s ease;
}

.watch-tab {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 40px;
  border: 1px solid rgba(0, 245, 160, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  scroll-snap-align: start;
}

.watch-tab.active {
  color: #03110b;
  background: linear-gradient(120deg, rgba(0, 245, 160, 0.92), rgba(11, 247, 255, 0.78));
  border-color: transparent;
}

.watch-pane {
  display: none;
  transition: opacity 0.26s ease, transform 0.26s ease, max-height 0.26s ease;
}

.watch-pane.active {
  display: block;
}

#watch-pane-mv.watch-pane.active,
#watch-pane-music.watch-pane.active {
  margin-top: -8px;
}

.watch-frame {
  padding: 0;
  border-radius: 18px;
  background: transparent;
  border: none;
  flex: 1;
  scroll-margin-top: 10px;
}

.watch-screen {
  --watch-frame-border-energy: 0.16;
  --watch-frame-border-progress: 0%;
  --watch-frame-border-angle: 0deg;
  --watch-frame-border-thickness: 4px;
  --watch-frame-accent-1: rgba(0, 245, 160, 0.92);
  --watch-frame-accent-2: rgba(11, 247, 255, 0.82);
  --watch-frame-accent-3: rgba(255, 140, 82, 0.78);
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 16px;
  background: radial-gradient(circle at top, rgba(0, 245, 160, 0.2), transparent 60%),
    linear-gradient(120deg, rgba(0, 0, 0, 0.2), rgba(0, 245, 160, 0.12));
  display: grid;
  place-items: center;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.watch-screen-backdrop {
  position: absolute;
  inset: 0;
  background-image: var(--watch-frame-art-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0.28;
  filter: blur(8px) saturate(1.03) brightness(1.01);
  transform: scale(1.025);
  transition:
    opacity 5s ease-in-out,
    transform 15s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 5s ease-in-out,
    background-image 0.24s linear;
  z-index: 0;
}

.watch-screen-backdrop.is-transitioning,
.watch-svg.is-transitioning {
  animation: watchArtworkSoftFade 15s ease-in-out both;
}

.watch-screen-backdrop.motion-float {
  transform: scale(1.02) translate3d(0.08%, -0.1%, 0);
  filter: blur(8px) saturate(1.05) brightness(1.015);
}

.watch-screen-backdrop.motion-breathe {
  transform: scale(1.024) translate3d(-0.08%, 0.06%, 0);
  filter: blur(8.4px) saturate(1.07) brightness(1.02);
}

.watch-screen.watch-screen-audio-fallback .watch-video {
  opacity: 0.1;
  pointer-events: none;
}

.watch-frame-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
}

.watch-music-frame-progress {
  z-index: 6;
  top: 0;
}

.watch-frame-progress-line {
  height: 10px;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.16)),
    rgba(4, 10, 9, 0.6);
  overflow: hidden;
  border-radius: 16px 16px 14px 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 22px rgba(0, 245, 160, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

/* CSSOS_PHASE2_WATCH_SINGLE_PROGRESS 20260419 — Kill the old thin top-of-
 * frame gradient strip. The SVG perimeter stroke drawn by
 * app.watch-stage-bars.js is the single source of progress truth for the
 * Watch panel now, and the two bars were visibly fighting each other per
 * Jing 2026-04-19 screenshot. We leave the container and span in the DOM
 * because app.watch-ui.js still writes .style.width to .watch-frame-progress-line
 * span (noop painting it into display:none tree) — but force it invisible
 * everywhere with !important so JS toggles of `hidden = false` can't
 * resurrect it. Same rule covers the music-stage variant. */
.watch-frame-progress,
.watch-frame-progress-line,
.watch-music-frame-progress {
  display: none !important;
}

.watch-frame-progress-line span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f5a0, #25d4ff, #8d7bff, #ff9f67, #00f5a0);
  background-size: 240% 100%;
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.42);
  transition: width 0.3s ease;
  animation: watchProgressSpectrum 5.4s linear infinite;
}

.watch-frame-progress-copy {
  position: absolute;
  top: 14px;
  left: 12px;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(232, 255, 246, 0.88);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.44);
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 0;
  border-radius: 999px;
  background: rgba(4, 10, 9, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.watch-screen::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 14px;
  padding: var(--watch-frame-border-thickness);
  background: linear-gradient(
    120deg,
    rgba(0, 245, 160, 0.12),
    var(--watch-frame-accent-1),
    var(--watch-frame-accent-2),
    var(--watch-frame-accent-1),
    rgba(0, 245, 160, 0.12)
  );
  background-size: 360% 360%;
  animation: none;
  box-shadow:
    0 0 calc(22px + 24px * var(--watch-frame-border-energy)) color-mix(in srgb, var(--watch-frame-accent-1) calc(34% + var(--watch-frame-border-energy) * 32%), transparent),
    0 0 calc(52px + 40px * var(--watch-frame-border-energy)) color-mix(in srgb, var(--watch-frame-accent-2) calc(18% + var(--watch-frame-border-energy) * 28%), transparent),
    0 0 calc(72px + 52px * var(--watch-frame-border-energy)) color-mix(in srgb, var(--watch-frame-accent-3) calc(10% + var(--watch-frame-border-energy) * 18%), transparent);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
}

.watch-screen.is-live-border::before {
  background:
    conic-gradient(
      from -90deg,
      color-mix(in srgb, var(--watch-frame-accent-1) 18%, rgba(255,255,255,0.08)) 0deg,
      var(--watch-frame-accent-1) calc(var(--watch-frame-border-angle) * 0.38),
      var(--watch-frame-accent-2) calc(var(--watch-frame-border-angle) * 0.74),
      var(--watch-frame-accent-3) var(--watch-frame-border-angle),
      rgba(255, 255, 255, 0.08) var(--watch-frame-border-angle),
      rgba(255, 255, 255, 0.04) 360deg
    );
  animation: watchFrameBorderPulse 1.3s ease-in-out infinite;
}

.watch-screen.is-live-border {
  --watch-frame-border-thickness: 8px;
}

.watch-screen.is-waiting::before {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.08)
    );
}

.watch-video {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  /* CSSOS_WAVE_455 20260527 — Jing: 去掉 background:#000 → 无视频时元素透明,
   * 背后的 watch-screen-backdrop 和 watch-svg 封面可以透出; 有视频时视频画面
   * 本身覆盖(无需黑色兜底). 黑底只在真正播视频时才需要(浏览器默认已是黑底). */
  background: transparent;
  opacity: 0.95;
  filter: saturate(1.1) brightness(1.05);
  position: absolute;
  inset: 0;
  z-index: 0;
  /* CSSOS_WAVE_543 20260531 — Jing「切歌时上一首的首帧(封面)总要闪一下才播新媒体」:
   * 换 src 时给 .cssos-video-swapping → opacity:0(底下稳定封面 backdrop 透出, 不黑屏),
   * 新视频真正 playing 再淡入 → 旧首帧绝不闪现。transform-only/opacity, 合成器安全。 */
  transition: opacity 0.26s ease;
}
.watch-video.cssos-video-swapping {
  opacity: 0 !important;
}

.watch-svg {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  background: #000;
  position: absolute;
  inset: 0;
  display: none;
  z-index: 0;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  transition:
    opacity 5s ease-in-out,
    transform 15s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 5s ease-in-out;
}

.watch-svg.motion-float {
  transform: scale(1.01) translate3d(0.08%, -0.08%, 0);
  filter: saturate(1.03) brightness(1.01);
}

.watch-svg.motion-breathe {
  transform: scale(1.012) translate3d(-0.08%, 0.06%, 0);
  filter: saturate(1.05) brightness(1.015);
}

.watch-svg.glow {
  animation: svgGlow 6.5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0, 245, 160, 0.55))
    drop-shadow(0 0 42px rgba(0, 245, 160, 0.28));
}

@keyframes watchArtworkSoftFade {
  0% {
    opacity: 0;
    filter: saturate(0.94) brightness(0.96);
  }
  33.333% {
    opacity: 1;
    filter: saturate(1.02) brightness(1.015);
  }
  66.666% {
    opacity: 1;
    filter: saturate(1.04) brightness(1.02);
  }
  100% {
    opacity: 0;
    filter: saturate(0.96) brightness(0.97);
  }
}

/* CSSOS_WAVE_743 20260613 — Jing「控制台满屏字体 404」根因: 这批硬编码 @font-face 指向
 * fonts_en/*.ttf|otf, 但该目录从未部署(仓库/服务器都没)→ 无条件 404 刷屏。watch-ui 的标题/
 * 字幕字体族已有 Google 回退(Syne/Orbitron/Cormorant 等真能加载), 所以删掉这批死 @font-face
 * 不影响显示, 只去噪。若日后补上 fonts_en 字体目录, 再恢复或交给 app.watch-font-manifest 的
 * 智能 HEAD 探测自动启用。 */

.watch-style-shift {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(218, 255, 242, 0.28);
  background: linear-gradient(180deg, rgba(7, 14, 12, 0.42), rgba(5, 10, 9, 0.24));
  color: rgba(242, 255, 248, 0.98);
  font-size: 17px;
  box-shadow:
    0 0 24px rgba(0, 245, 160, 0.18),
    0 0 52px rgba(11, 247, 255, 0.09);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  opacity: 0.72;
  pointer-events: auto;
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.watch-screen:hover .watch-style-shift,
.watch-screen:focus-within .watch-style-shift,
.watch-music-stage:hover .watch-style-shift,
.watch-music-stage:focus-within .watch-style-shift {
  opacity: 1;
}

.watch-style-shift:hover {
  transform: scale(1.05) rotate(8deg);
  border-color: rgba(236, 255, 248, 0.42);
  box-shadow:
    0 0 32px rgba(0, 245, 160, 0.28),
    0 0 74px rgba(11, 247, 255, 0.18);
}

.watch-style-menu {
  position: fixed;
  z-index: 10055; /* CSSOS_WAVE_351 z-index 收敛: 99999 → 10055 (watch popover) */
  min-width: 240px;
  max-width: 320px;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(215, 255, 241, 0.14);
  background: linear-gradient(180deg, rgba(8, 14, 12, 0.86), rgba(6, 10, 9, 0.78));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  overscroll-behavior: contain;
}

body[data-theme="light"] .watch-style-menu {
  border: 1px solid rgba(88, 164, 138, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 248, 0.9));
  box-shadow:
    0 20px 48px rgba(80, 128, 110, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  backdrop-filter: blur(18px) saturate(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
}

.watch-style-menu-group {
  display: grid;
  gap: 8px;
}

.watch-style-menu-group + .watch-style-menu-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.watch-style-menu-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(224, 255, 243, 0.62);
}

body[data-theme="light"] .watch-style-menu-title {
  color: rgba(58, 93, 80, 0.72);
}

.watch-style-menu-item {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(239, 250, 241, 0.94);
  text-align: left;
  cursor: pointer;
}

.watch-style-menu-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(239, 250, 241, 0.96);
  outline: none;
}

body[data-theme="light"] .watch-style-menu-item {
  border-color: rgba(88, 164, 138, 0.12);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(28, 44, 37, 0.92);
  box-shadow: 0 8px 22px rgba(140, 185, 165, 0.06);
}

body[data-theme="light"] .watch-style-menu-select {
  border-color: rgba(88, 164, 138, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(28, 44, 37, 0.96);
}

.watch-style-menu-item:hover,
.watch-style-menu-item.is-active {
  background: rgba(78, 201, 140, 0.14);
  border-color: rgba(78, 201, 140, 0.22);
}

body[data-theme="light"] .watch-style-menu-item:hover,
body[data-theme="light"] .watch-style-menu-item.is-active {
  background: linear-gradient(180deg, rgba(222, 248, 235, 0.96), rgba(209, 241, 227, 0.88));
  border-color: rgba(72, 171, 129, 0.28);
  color: rgba(18, 40, 31, 0.98);
}

.watch-overlay-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-47%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(0, 245, 160, 0.45);
  background: rgba(4, 12, 10, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: #eafff6;
  z-index: 4;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0, 245, 160, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
}

.watch-screen.is-waiting .watch-overlay-play,
.watch-screen.watch-screen-audio-fallback .watch-overlay-play,
.watch-screen.is-stalled .watch-overlay-play {
  opacity: 1;
  pointer-events: auto;
}

.watch-screen:hover .watch-overlay-play,
.watch-screen:focus-within .watch-overlay-play {
  opacity: 1;
  pointer-events: auto;
}

.watch-overlay-play:hover {
  transform: translate(-47%, -50%) scale(1.03);
  box-shadow: 0 0 34px rgba(0, 245, 160, 0.42), 0 0 68px rgba(11, 247, 255, 0.26);
}

.watch-overlay-play.is-generating {
  opacity: 1;
  pointer-events: auto;
  box-shadow:
    0 0 40px rgba(0, 245, 160, 0.5),
    0 0 88px rgba(11, 247, 255, 0.32),
    0 -18px 80px rgba(0, 245, 160, 0.22);
}

.watch-overlay-play.is-confirmed {
  transform: translate(-47%, -50%) scale(0.96);
}

.watch-overlay-play:active {
  transform: translate(-47%, -50%) scale(0.98);
}

.watch-overlay-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(0, 245, 160, 0.55);
  box-shadow: inset 0 0 22px rgba(0, 245, 160, 0.12);
  animation: watchPlayPulse 2.4s ease-in-out infinite;
}

.watch-overlay-play.is-generating .watch-overlay-play-ring {
  animation-duration: 0.58s;
  box-shadow:
    inset 0 0 26px rgba(0, 245, 160, 0.18),
    0 0 30px rgba(0, 245, 160, 0.34),
    0 0 64px rgba(11, 247, 255, 0.24),
    0 0 110px rgba(255, 140, 82, 0.18);
}

.watch-overlay-play-icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0, 245, 160, 0.55);
  display: inline-grid;
  place-items: center;
}

.watch-overlay-play-icon::before,
.watch-overlay-play-icon::after {
  content: "";
  display: block;
}

.watch-overlay-play-icon::before {
  width: 52px;
  height: 52px;
  margin-left: 4px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='20,12 52,32 20,52' fill='none' stroke='white' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='20,12 52,32 20,52' fill='none' stroke='white' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.watch-overlay-play-icon::after {
  display: none;
}

.watch-overlay-play.is-paused .watch-overlay-play-icon::before,
.watch-music-play.is-paused .watch-overlay-play-icon::before {
  display: none;
}

.watch-overlay-play.is-paused .watch-overlay-play-icon::after,
.watch-music-play.is-paused .watch-overlay-play-icon::after {
  display: none;
}

.watch-overlay-play.is-paused .watch-overlay-play-icon::before,
.watch-music-play.is-paused .watch-overlay-play-icon::before {
  display: block;
  width: 40px;
  height: 40px;
  margin-left: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='14' width='10' height='36' rx='2' fill='white'/%3E%3Crect x='36' y='14' width='10' height='36' rx='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='14' width='10' height='36' rx='2' fill='white'/%3E%3Crect x='36' y='14' width='10' height='36' rx='2' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes watchPlayPulse {
  0% {
    opacity: 0.7;
    transform: scale(0.965);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 0.74;
    transform: scale(0.97);
  }
}

@keyframes watchFrameBorderPulse {
  0%, 100% {
    opacity: 0.82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.002);
  }
}

@keyframes svgGlow {
  0% {
    opacity: 0.85;
    transform: scale(0.995);
  }
  50% {
    opacity: 1;
    transform: scale(1.01);
  }
  100% {
    opacity: 0.88;
    transform: scale(0.997);
  }
}

/* CSSMV_SUBTITLE_RESTORE_STYLING 20260426 #125 — Jing
   "请让普通字幕拥有之前该有的样式表，除了不再多行显示。"
   When .watch-subtitle was repurposed as a status-message tray we shrank
   it to clamp(9px,0.7vw,11px) at opacity 0.52, sitting 14px from the
   bottom — appropriate for a small status caption, NOT for a real
   subtitle line. With status text now redirected to #watch-status-info
   (#110), the regular subtitle is back to its real role and needs its
   readable, glowing look restored. Stays on a single line because
   app.watch-media-layout-p2100.js (#120) injects
   `#watch-panel #watch-subtitle { white-space: nowrap !important; ... }`. */
.watch-subtitle {
  --watch-title-font-family: "CSSTitleBoldC", "Syne", "Alfa Slab One",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --watch-title-stroke-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(5, 9, 8, 0.92),
    1px 0 0 rgba(5, 9, 8, 0.92),
    -1px 0 0 rgba(255, 255, 255, 0.52);
  --watch-subtitle-extra-shadow: 0 0 14px rgba(0, 245, 160, 0.42);
  font-family: "Space Grotesk", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: rgba(235, 255, 246, 0.96);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.66),
    0 -1px 0 rgba(2, 8, 6, 0.96),
    1px 0 0 rgba(2, 8, 6, 0.96),
    -1px 0 0 rgba(255, 255, 255, 0.42),
    0 0 14px rgba(11, 247, 255, 0.22),
    0 0 22px rgba(0, 245, 160, 0.18);
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(82%, 880px);
  text-align: center;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: 0.01em;
  opacity: 0.96;
  padding: 0;
}

.watch-screen.is-waiting .watch-subtitle {
  opacity: 0.66;
}

/* CSSOS_WAVE_644 — 从隐藏规则里【解绑 .watch-subtitle】: 它现在是承载逐字情绪字幕的唯一可见
 * 载体, 必须常驻到段落结束(见文件末尾的显式 opacity:1 豁免)。其余 chrome 仍在沉浸态隐藏。 */
.watch-screen.is-playback-clean .watch-overlay-play,
.watch-screen.is-playback-clean .watch-style-shift,
.watch-screen.is-playback-clean .watch-commerce-actions,
.watch-screen.is-playback-clean .watch-work-id,
/* CSSOS_WAVE_749 — Jing「ID 和头像同一个框, 同时显隐」: 头像也进 is-playback-clean 隐藏组,
 * 与左上角 标题·作者/ID 块作为一个整体一起淡入淡出。 */
.watch-screen.is-playback-clean #watch-author-avatar,
.watch-screen.is-playback-clean .watch-author-avatar {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* CSSOS_WAVE_733 — Jing: 播放时当前 work 🆔 低调角标(左下, 等宽小字, 半透明)。
 * 跟 chrome 一起在 is-playback-clean 下隐藏, hover/focus 时随其它控件一起浮现。 */
/* CSSOS_WAVE_737 20260613 — Jing: 正在播放的【标题 - 作者 / 🆔】移到【左上角头像之后】(原左下角
 * 与 Dock 打架)。两行: 第一行 标题 - 作者(白、稍大), 第二行 🆔(等宽小字、半透明)。10s 无操作随
 * chrome 一起隐(is-playback-clean)。 */
/* CSSOS_WAVE_741 — Jing「不要背景框, 像之前左下那样不显眼」: 去掉深色底 + 阴影压低, 标题作者
 * 半透白小字, ID 更淡。低调浮在画面左上角(头像后), 10s 无操作随 chrome 隐。 */
.watch-work-id {
  position: absolute;
  left: 62px;            /* 让开左上角头像 */
  top: 14px;             /* W752 — ♪ 标题改为浮动水印后, ID 块回到头像那一行 */
  bottom: auto;
  z-index: 6;
  max-width: 46vw;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: 500 12px/1.3 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.01em;
  white-space: normal;
  overflow: hidden;
  user-select: text;
  transition: opacity 0.2s ease;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);   /* 仅靠文字阴影提可读性, 不用底框 */
}
/* W752b — Jing「头像后面也放一份, 和 ID 一样就行」: 恢复左上角固定标题行(浮动水印之外的第二份),
 * 做成和 ID 一样淡。♪ 前缀点明"正在播放"。坐在 ID 之上。 */
.watch-work-id .wid-title {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46vw;
  color: rgba(255, 255, 255, 0.42);
  font: 500 10px/1.3 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.watch-work-id .wid-title:empty { display: none; }   /* 无标题时不占位 */
.watch-work-id .wid-title::before { content: "♪ "; opacity: 0.7; }
.watch-work-id .wid-id {
  display: block; margin-top: 0;
  color: rgba(255, 255, 255, 0.12);   /* W764 — 再淡一倍 (0.18→0.12), 几乎隐形 */
  font: 400 5.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;  /* W764 — 再小一倍 (6.5→5.5) */
  letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.watch-work-id:empty { display: none; }

/* CSSOS_WAVE_640 20260605 — Jing「情绪字幕只昙花一现」第1步: 情绪字幕(逐字 karaoke 行)是
 * 演出的一部分, 必须【跟随咬字一直显示到媒体结束】, 不能跟其它 chrome 一起在 is-playback-clean
 * 下被隐藏。从上面的隐藏规则里【解绑 .watch-karaoke-line】, 并显式保持可见(纯展示, 不接收点击,
 * 不挡媒体)。空行时无内容 → 不可见, 无占位。 */
.watch-screen.is-playback-clean .watch-karaoke-line {
  opacity: 1 !important;
  pointer-events: none !important;
}

.watch-screen.is-playback-clean:hover .watch-overlay-play,
.watch-screen.is-playback-clean:hover .watch-style-shift,
.watch-screen.is-playback-clean:focus-within .watch-overlay-play,
.watch-screen.is-playback-clean:focus-within .watch-style-shift {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.watch-screen.is-playback-clean.watch-screen-audio-fallback:hover .watch-overlay-play,
.watch-screen.is-playback-clean.watch-screen-audio-fallback:focus-within .watch-overlay-play,
.watch-screen.is-playback-clean:hover .watch-overlay-play.is-paused,
.watch-screen.is-playback-clean:focus-within .watch-overlay-play.is-paused {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.watch-screen.is-playback-clean .watch-frame-progress {
  opacity: 0.96 !important;
  pointer-events: none !important;
}

.watch-screen.is-waiting .watch-subtitle:empty {
  display: none;
}

.watch-subtitle.tone-opening {
  color: rgba(220, 255, 246, 0.96);
  text-shadow: 0 0 12px rgba(95, 240, 200, 0.34);
}

.watch-subtitle.tone-lead {
  color: rgba(255, 237, 214, 0.96);
  text-shadow: 0 0 12px rgba(255, 175, 98, 0.34);
}

.watch-subtitle.tone-group {
  color: rgba(244, 227, 255, 0.96);
  text-shadow: 0 0 12px rgba(186, 126, 255, 0.32);
}

.watch-subtitle.tone-callback {
  color: rgba(232, 241, 255, 0.96);
  text-shadow: 0 0 12px rgba(124, 173, 255, 0.34);
}

.watch-subtitle[data-emotion="surge"] {
  color: rgba(255, 241, 220, 0.98);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(30, 10, 4, 0.95),
    0 0 16px rgba(255, 164, 96, 0.4),
    0 0 36px rgba(255, 122, 82, 0.26);
}

.watch-subtitle[data-emotion="dream"] {
  color: rgba(236, 243, 255, 0.98);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(10, 12, 22, 0.96),
    0 0 18px rgba(135, 188, 255, 0.34),
    0 0 38px rgba(186, 132, 255, 0.24);
}

.watch-subtitle[data-emotion="hush"] {
  color: rgba(219, 243, 236, 0.94);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.64),
    0 -1px 0 rgba(6, 12, 10, 0.96),
    0 0 14px rgba(82, 192, 156, 0.24);
}

/* CSSOS_WAVE_756 — Jing「价格条也总有多余的透明轨道」: #cssos-watch-price-strip 套了 data-pill-bar
 * (W573)→ 宪法容器底色 rgba(0,245,160,0.10)+边框 = 那条淡绿外框/档位间淡轨道。同 W755 去掉容器轨道,
 * 只留各档胶囊本身。AI 助理 FAB 是独立圆形(不在此胶囊组), 保持 W749 价格条同行右侧不动。 */
#cssos-watch-price-strip[data-pill-bar] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.watch-commerce-actions {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: min(92%, 860px);
}

.watch-commerce-actions,
.watch-commerce-actions * {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.58),
    0 -1px 0 rgba(4, 10, 8, 0.9),
    1px 0 0 rgba(4, 10, 8, 0.9),
    -1px 0 0 rgba(255, 255, 255, 0.42),
    0 0 12px rgba(0, 0, 0, 0.2);
}

.watch-billing-card {
  width: 100%;
}

.watch-market-tip-shell {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  justify-content: center;
}

/* CSSOS_WAVE_711 — #watch-karaoke-line 已彻底退役(#watch-subtitle 是唯一字幕载体)。它仍被旧代码
 * 每帧写入整句歌词, z-index:3 + 淡绿默认色 → 在画面里【隐隐约约漏出一行英文歌词】(Jing 看到的"泄露")。
 * 这里【强制隐藏】, 压过所有 is-playback-clean 等保持可见的豁免规则。不是安全泄露, 纯属退役层残影。 */
.watch-karaoke-line,
.watch-screen.is-playback-clean .watch-karaoke-line {
  display: none !important;
}
.watch-karaoke-line {
  position: absolute;
  left: 50%;
  bottom: 94px;
  transform: translateX(-50%) scale(var(--watch-karaoke-scale, 1));
  transform-origin: center bottom;
  z-index: 3;
  width: min(82%, 880px);
  text-align: center;
  display: grid;
  gap: 6px;
  pointer-events: none;
}

.watch-karaoke-prev,
.watch-karaoke-next {
  font-family: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(223, 255, 242, 0.48);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48),
    0 -1px 0 rgba(3, 8, 6, 0.92),
    1px 0 0 rgba(3, 8, 6, 0.92),
    -1px 0 0 rgba(255, 255, 255, 0.34),
    0 0 10px rgba(0, 0, 0, 0.45);
}

.watch-karaoke-current {
  font-family: "Space Grotesk", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  color: rgba(235, 255, 246, 0.96);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.66),
    0 -1px 0 rgba(2, 8, 6, 0.96),
    1px 0 0 rgba(2, 8, 6, 0.96),
    -1px 0 0 rgba(255, 255, 255, 0.42),
    0 0 16px rgba(11, 247, 255, 0.22),
    0 0 26px rgba(0, 245, 160, 0.18);
  font-weight: 700;
  letter-spacing: 0.04em;
  /* CSSOS_PHASE2_KARAOKE_SINGLE_LINE 20260427 #153 — Jing
     Force a single line. The previous per-weight row grouping (#96)
     stacked words vertically; that whole layout is now off and the
     karaoke render is one inline strip. nowrap keeps long lyrics on
     one row even when the container narrows; overflow-x:hidden +
     text-overflow:ellipsis keeps oversized lines visually contained
     instead of spilling into the panel chrome. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* CSSOS_PHASE2_KARAOKE_SINGLE_LINE 20260427 #153 — neutralise the
   legacy per-weight row classes so any orphan markup left behind by
   cached frontends (or future bugs that re-emit the rows) doesn't
   reintroduce the vertical stack. The watch-karaoke-row blocks
   collapse to inline so they flow as a single line. */
.watch-karaoke-row,
.watch-karaoke-row.is-weight-high,
.watch-karaoke-row.is-weight-low {
  display: inline;
  margin: 0;
  padding: 0;
}

.watch-karaoke-current.is-active {
  color: rgba(255, 245, 168, 0.98);
  text-shadow: 0 0 18px rgba(255, 226, 122, 0.4), 0 0 24px rgba(0, 245, 160, 0.18);
}

.watch-karaoke-line[data-emotion="surge"] .watch-karaoke-current {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(30, 10, 4, 0.95),
    0 0 18px rgba(255, 169, 97, 0.42),
    0 0 34px rgba(255, 122, 82, 0.24);
}

.watch-karaoke-line[data-emotion="dream"] .watch-karaoke-current {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    0 -1px 0 rgba(10, 12, 22, 0.96),
    0 0 18px rgba(135, 188, 255, 0.36),
    0 0 34px rgba(186, 132, 255, 0.22);
}

.watch-karaoke-line[data-emotion="hush"] .watch-karaoke-current {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 -1px 0 rgba(4, 10, 8, 0.96),
    0 0 14px rgba(92, 206, 170, 0.24);
}

.watch-karaoke-word {
  display: inline-block;
  white-space: pre-wrap;
  color: rgba(229, 244, 237, 0.52);
  transition: color 120ms ease, text-shadow 120ms ease, transform 120ms ease, filter 120ms ease;
  filter: saturate(
    calc(0.9 + var(--karaoke-word-emphasis, 0.2) * 0.35 + var(--karaoke-live-energy, 0) * 0.2)
  );
}

.watch-karaoke-word.is-sung {
  color: rgba(255, 245, 168, 0.72);
}

/* CSSOS_WAVE_708 — 纯器乐段 [Music...](电影字幕惯例): 静默灰白斜体小字, 不参与随机色/蹦/爆,
 * 读作"此处无人声"的安静提示。特异性(4 类 + !important)压过随机色卡拉OK规则。 */
.watch-karaoke-word.is-adlib {
  font-style: italic;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-adlib,
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-adlib.is-sung,
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-adlib.is-active {
  color: rgba(214, 222, 234, 0.62) !important;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: none !important;     /* 不蹦不爆, 安静 */
  transform: none !important;
}

/* CSSOS_WAVE_668 — 每字"蹦一下": active 字播一次 pop 关键帧, 幅度 ∝ 该字 emotion_intensity
 * (--karaoke-word-emphasis) × 全局 --cssfx-bounce/--cssfx-lift(参数化, app.emotion-fx.js)。
 * 每次咬字换字 → span 重建 → 动画重放一次。compositor-safe(只动 transform/opacity)。 */
/* CSSOS_WAVE_671 ③ 音高旋律线: 每字静止态按本行音高上下浮动(--kara-pitch-y), 字幕=看得见的旋律。
 * pop/burst 关键帧都在这个【音高基线】之上叠加 → 旋律起伏与蹦/爆共存不打架。compositor-safe。 */
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word {
  transform: translateY(var(--kara-pitch-y, 0px));
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease, text-shadow 0.18s ease;
}
@keyframes kara-pop {
  0%   { transform: translateY(var(--kara-pitch-y, 0px)) scale(1); }
  32%  { transform: translateY(calc(var(--kara-pitch-y, 0px) + var(--cssfx-lift, 7) * var(--karaoke-word-emphasis, 0.3) * -1px))
                    scale(calc(1 + var(--cssfx-bounce, 0.32) * var(--karaoke-word-emphasis, 0.3))); }
  100% { transform: translateY(var(--kara-pitch-y, 0px)) scale(1); }
}
.watch-karaoke-word.is-active {
  color: rgba(255, 249, 196, 0.99);
  text-shadow:
    0 0 calc(12px + 26px * var(--karaoke-word-emphasis, 0.3))
      rgba(255, 224, 122, calc((0.4 + 0.45 * var(--karaoke-word-emphasis, 0.3)) * var(--cssfx-glow, 1))),
    0 0 calc(20px + 34px * var(--karaoke-word-emphasis, 0.3))
      rgba(0, 245, 160, calc(0.16 + 0.28 * var(--karaoke-word-emphasis, 0.3)));
  transform-origin: center bottom;
  animation: kara-pop var(--cssfx-pop-dur, 300ms) cubic-bezier(0.2, 1.45, 0.3, 1) both;
}

/* 峰值字"爆": 更大缩放 + 强光 + 浮到最上。覆盖上面的 pop(更具体)。 */
@keyframes kara-burst {
  0%   { transform: translateY(var(--kara-pitch-y, 0px)) scale(1); }
  26%  { transform: translateY(var(--kara-pitch-y, 0px)) scale(var(--cssfx-burst-scale, 1.75)); }
  62%  { transform: translateY(var(--kara-pitch-y, 0px)) scale(calc(1 + (var(--cssfx-burst-scale, 1.75) - 1) * 0.22)); }
  100% { transform: translateY(var(--kara-pitch-y, 0px)) scale(1); }
}
.watch-karaoke-word.is-burst.is-active {
  position: relative;
  z-index: 4;
  color: #fff;
  text-shadow:
    0 0 22px rgba(255, 236, 150, 0.95),
    0 0 46px rgba(255, 200, 90, 0.6),
    0 0 78px rgba(95, 255, 170, 0.34);
  animation: kara-burst var(--cssfx-burst-dur, 520ms) cubic-bezier(0.2, 1.6, 0.25, 1) both;
}

/* 夸张全屏闪: app.emotion-fx.js 在峰值字切换时给 #cssfx-flash-overlay 加 .is-flash 重放。 */
#cssfx-flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10085; /* W705 — 抬到影院舞台(10052-10080)之上, 否则爆/闪被影院层盖住看不见 */
  opacity: 0;
  background:
    radial-gradient(circle at 50% 58%,
      rgba(var(--cssfx-flash-rgb, 255, 224, 140), var(--cssfx-flash-peak, 0.4)) 0%,
      rgba(var(--cssfx-flash-rgb, 255, 224, 140), 0) 62%);
}
#cssfx-flash-overlay.is-flash {
  animation: kara-fullscreen-flash var(--cssfx-flash-dur, 520ms) ease-out both;
}
@keyframes kara-fullscreen-flash {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  100% { opacity: 0; }
}

.watch-karaoke-word.is-intimate.is-active {
  color: rgba(255, 232, 208, 0.98);
  text-shadow: 0 0 18px rgba(255, 190, 168, 0.34), 0 0 26px rgba(255, 226, 122, 0.18);
}

.watch-karaoke-word.is-ignite.is-active {
  color: rgba(255, 248, 176, 0.99);
  text-shadow: 0 0 18px rgba(255, 221, 122, 0.46), 0 0 28px rgba(95, 255, 160, 0.22);
}

.watch-karaoke-word.is-resolve {
  color: rgba(214, 238, 255, 0.76);
}

.watch-karaoke-word.is-resolve.is-active {
  color: rgba(232, 244, 255, 0.99);
  text-shadow: 0 0 16px rgba(176, 220, 255, 0.34), 0 0 24px rgba(212, 185, 255, 0.18);
}

/* CSSOS_WAVE_644 — 情绪字幕(熟歌词)完整配色 + 常驻。绿色 #watch-subtitle 现在承载逐字情绪
 * HTML(每字一个 .watch-karaoke-word.is-{emotion}), 但旧 CSS 只覆盖了 intimate/ignite/resolve 的
 * 部分态, joy/calm/grief 完全没色 → 多数字看起来一个样。这里给【6 种情绪】各配鲜明的 base + active
 * 配色, 让"晨光落在古城墙上"按真实演唱情绪逐字变色/亮起/随鼓点呼吸 = 真·情绪字幕。 */
.watch-karaoke-word { transition: color .18s ease, text-shadow .18s ease, transform .12s ease; }
/* joy — 暖金 */
.watch-karaoke-word.is-joy { color: rgba(255, 236, 150, 0.82); }
.watch-karaoke-word.is-joy.is-active {
  color: rgba(255, 246, 184, 0.99);
  text-shadow: 0 0 18px rgba(255, 214, 96, 0.5), 0 0 30px rgba(255, 180, 70, 0.26);
}
/* calm — 青碧(serene/melancholy 归此) */
.watch-karaoke-word.is-calm { color: rgba(176, 232, 220, 0.78); }
.watch-karaoke-word.is-calm.is-active {
  color: rgba(214, 248, 238, 0.99);
  text-shadow: 0 0 16px rgba(120, 230, 205, 0.38), 0 0 26px rgba(95, 200, 255, 0.18);
}
/* intimate — 柔粉(base 也给, 不止 active) */
.watch-karaoke-word.is-intimate { color: rgba(255, 214, 198, 0.78); }
/* ignite — 炽金红(intense/rage/triumphant 归此, base 也给) */
.watch-karaoke-word.is-ignite { color: rgba(255, 224, 150, 0.82); }
/* grief — 冷紫蓝(haunting 归此) */
.watch-karaoke-word.is-grief { color: rgba(196, 200, 240, 0.74); }
.watch-karaoke-word.is-grief.is-active {
  color: rgba(224, 226, 255, 0.99);
  text-shadow: 0 0 16px rgba(150, 156, 230, 0.4), 0 0 26px rgba(120, 110, 200, 0.2);
}

/* CSSOS_WAVE_711 — 普通字幕级【稳定优先】(Jing: 先把普通 MV 字幕做稳, 再谈情绪层)。
 * 内联字幕只做【颜色擦除】, 不做任何位移/缩放/音高浮动 —— 那些"蹦/爆/音高上下"抖动感强, 全部
 * 留给【屏幕中央爆】那一层。字幕在底部纹丝不动, 只是逐字从未唱色擦成已唱色。 */
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word,
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-active,
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-sung,
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-burst {
  transform: none !important;
  animation: none !important;
  --kara-pitch-y: 0px !important;
  filter: none !important;
  transition: color 0.12s linear !important;   /* 只过渡颜色, 不过渡位移 */
}

/* CSSOS_WAVE_721 — Jing: 普通字幕回到【左下角】(传统字幕位)。左对齐 + 限宽, 安静做卡拉OK逐字变色;
 * 中央爆负责情绪。(W718 误移到右下角, 已恢复。) */
.watch-subtitle.is-emotion-karaoke {
  left: 3vw !important;
  right: auto !important;
  transform: none !important;
  text-align: left !important;
  width: auto !important;
  max-width: min(46vw, 540px) !important;
}

/* 绿色 #watch-subtitle 承载逐字情绪时: 词 span 内联单行流动(不竖排、不堆叠)。 */
.watch-subtitle.is-emotion-karaoke { white-space: normal; }
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word {
  display: inline;
  font-family: inherit;
}

/* CSSOS_WAVE_702 — 普通字幕级【双随机色卡拉OK擦除】(脱离情绪上色, Jing)。
 * 每次播放, --sub-unsung / --sub-sung 由 app.emotion-fx.js 随机滚一对(从头播才换)。
 * 容器作用域选择器(3+ 类)特异性 > 单 .is-{emotion}(2 类), 故覆盖情绪文本色而不动 JS class。
 * 未唱=安静随机色; 已唱(is-sung)+当前(is-active)=鲜亮随机色 → 唱到哪变到哪, 整句唱完整句变。 */
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word {
  color: var(--sub-unsung, rgba(229, 244, 237, 0.55)) !important;
}
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-sung {
  color: var(--sub-sung, rgba(255, 245, 168, 0.9)) !important;
}
.watch-subtitle.is-emotion-karaoke .watch-karaoke-word.is-active {
  color: var(--sub-sung, rgba(255, 249, 196, 0.99)) !important;
  text-shadow:
    0 0 calc(12px + 22px * var(--karaoke-word-emphasis, 0.3))
      hsla(var(--sub-sung-h, 48), 95%, 70%, calc((0.45 + 0.4 * var(--karaoke-word-emphasis, 0.3)) * var(--cssfx-glow, 1)));
}

/* CSSOS_WAVE_644 ④ — 情绪字幕常驻: 跟 W640 给 .watch-karaoke-line 的豁免一样, 让【可见的】
 * #watch-subtitle 在 is-playback-clean(Dock/chrome 隐藏的沉浸态)下【保持显示, 不跟随 Dock 隐没】,
 * 一直唱到段落结束。纯展示不挡点击。 */
.watch-screen.is-playback-clean .watch-subtitle {
  opacity: 1 !important;
  pointer-events: none !important;
}

/* CSSOS_WAVE_652 — 情绪 Emoji 点睛层(iMessage 思想气泡式). emoji 不与字幕同行, 而是【浮在
 * 该字正上方的小气泡里】, 用【下尖角】指向这个字(类似 iMessage 的 emoji 气泡)。emoji span 是
 * 目标字 span 的子元素 → 绝对定位到字上方。它【浮起→旋转回正→淡出】一次后消失, 不常驻、不挡
 * 点击、分层不烧录。只动画 transform/opacity(合成器安全); 静态半透明底, 不用 backdrop-filter
 * (铁律: 移动内容上方禁 backdrop-filter)。
 * 可热调(在 .watch-screen 覆盖): --emo-emoji-size(1.15em) / --emo-emoji-rise(1.4em) /
 *   --emo-emoji-pop(1.32) / --emo-emoji-dur(1.7s) / --emo-emoji-glow(暖粉)。 */
.watch-karaoke-word.has-emo-emoji { position: relative; }
/* CSSOS_WAVE_690 — 「思考气泡」式情绪 emoji(Jing 图2): emoji 装进【实心圆气泡】, 下面拖两颗
 * 递减小圆点(iMessage thinking-bubble 尾巴)指向该字 —— 不要图1的同排内联。气泡按情绪上色。 */
.cssmv-emo-emoji {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 1.05em;                 /* 留出两颗尾点的空间 */
  --emo-bubble: rgba(120, 210, 130, 0.96);  /* 默认: 图2 那种亮绿 */
  width: 2.05em;
  height: 2.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--emo-emoji-size, 1.18em);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 6;
  /* 实心圆气泡 */
  border-radius: 50%;
  background: var(--emo-bubble);
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--emo-bubble) 60%, transparent),
    inset 0 2px 6px rgba(255, 255, 255, 0.5),
    inset 0 -3px 8px rgba(0, 0, 0, 0.12);
  transform-origin: center bottom;
  will-change: transform, opacity;
  animation: cssmvEmoBubble var(--emo-emoji-dur, 1.9s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* 思考尾巴: ::before = 大圆点, ::after = 小圆点, 同色, 自气泡向下指向该字 */
.cssmv-emo-emoji::before,
.cssmv-emo-emoji::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--emo-bubble);
  left: 50%;
}
.cssmv-emo-emoji::before {
  width: 0.62em;
  height: 0.62em;
  top: 100%;
  margin-top: 0.14em;
  transform: translateX(-78%);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4);
}
.cssmv-emo-emoji::after {
  width: 0.34em;
  height: 0.34em;
  top: 100%;
  margin-top: 0.74em;
  transform: translateX(-30%);
}
/* 按情绪给气泡上色(emoji 自身多彩, 在这些底色上都读得清) */
.watch-karaoke-word.is-joy      .cssmv-emo-emoji { --emo-bubble: rgba(255, 198, 64, 0.97); }
.watch-karaoke-word.is-ignite   .cssmv-emo-emoji { --emo-bubble: rgba(255, 120, 92, 0.97); }
.watch-karaoke-word.is-resolve  .cssmv-emo-emoji { --emo-bubble: rgba(108, 212, 142, 0.97); }
.watch-karaoke-word.is-calm     .cssmv-emo-emoji { --emo-bubble: rgba(126, 198, 236, 0.97); }
.watch-karaoke-word.is-intimate .cssmv-emo-emoji { --emo-bubble: rgba(255, 150, 192, 0.97); }
.watch-karaoke-word.is-grief    .cssmv-emo-emoji { --emo-bubble: rgba(184, 172, 232, 0.97); }
@keyframes cssmvEmoBubble {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0.55em) scale(0.35) rotate(-14deg); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(-0.05em) scale(var(--emo-emoji-pop, 1.32)) rotate(7deg); }
  40%  { opacity: 1; transform: translateX(-50%) translateY(calc(var(--emo-emoji-rise, 1.4em) * -0.3)) scale(1.04) rotate(-3deg); }
  62%  { opacity: 1; transform: translateX(-50%) translateY(calc(var(--emo-emoji-rise, 1.4em) * -0.55)) scale(1.0) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(calc(var(--emo-emoji-rise, 1.4em) * -1)) scale(0.94) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cssmv-emo-emoji { animation: none; opacity: 0; }
}

/* CSSOS_WAVE_689 — 天女散花 confetti 层(峰值字爆全屏时撒花瓣/彩纸, 像庆祝)。
 * compositor-safe: 每片只动 transform/opacity。pointer-events:none 不挡交互。 */
#cssfx-confetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10086;            /* W705 — 影院舞台之上, 在全屏闪(10085)之上 */
}
.cssfx-petal {
  position: absolute;
  top: -8vh;
  line-height: 1;
  will-change: transform, opacity;
  text-shadow: 0 2px 10px rgba(255, 180, 210, 0.5);
  animation: cssfxPetalFall var(--pf-dur, 2.2s) cubic-bezier(0.35, 0.1, 0.4, 1) var(--pf-delay, 0s) forwards;
}
@keyframes cssfxPetalFall {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg) scale(0.6); }
  10%  { opacity: 1; transform: translateY(8vh) translateX(calc(var(--pf-drift, 0vw) * 0.18)) rotate(calc(var(--pf-rot, 180deg) * 0.12)) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(112vh) translateX(var(--pf-drift, 0vw)) rotate(var(--pf-rot, 180deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #cssfx-confetti { display: none; }
}

/* CSSOS_WAVE_692 — 屏幕中央爆(情绪字幕): 唱到的情绪字在屏幕正中【爆一下/一闪】, 大小∝强度、
 * 停留∝唱腔时长。与左下角普通字幕【并存】(普通字幕安静, 这是叠加的情绪层)。compositor-safe。 */
#cssfx-center-burst {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10088;        /* W705 — 影院舞台(10080)之上, 在闪(10085)/散花(10086)之上 → 爆终于可见 */
}
/* CSSOS_WAVE_702 — 一个 burst = emoji 背景(后) + 发光大字(前), 居中叠放。 */
.cssfx-center-grp {
  position: absolute;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  animation: cssfxCenterPop var(--cb-dur, 0.7s) cubic-bezier(0.18, 1.5, 0.3, 1) both;
}
.cssfx-center-grp > * { grid-area: 1 / 1; }   /* emoji 与大字完全重叠居中 */

/* CSSOS_WAVE_720 — 整句累积爆: 每字爆入(快)→ 原地【驻留 + 轻呼吸】(不自动消失), 等整句铺完
 * 再加 .is-line-fade 一起淡出。is-line 用 left/top 定位(智能随机), transform 只做缩放呼吸。 */
/* is-line 的 left/top = 中心点; translate(-50%,-50%) 让字以该点为中心 → 贴边的字超出屏幕约一半
 * (媒体框只显示半个字), 但中心点永不出屏, 用户总看得见。所有关键帧都带 translate 保持居中。 */
.cssfx-center-grp.is-line {
  transform: translate(-50%, -50%);
  animation: cssfxLineIn 0.9s cubic-bezier(0.2, 1.2, 0.3, 1) both,
             cssfxBreathe 3.4s ease-in-out 0.9s infinite;
}
/* CSSOS_WAVE_729 ② — 爆大→延迟保持→收缩回本身(像 emoji): 默认开。 */
@keyframes cssfxLineIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  42%  { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 关掉"爆大"时: 直接淡入到本身大小, 不放大。 */
.cssfx-center-grp.is-line.is-nopunch {
  animation: cssfxLineInFlat 0.4s ease both,
             cssfxBreathe 3.4s ease-in-out 0.4s infinite !important;
}
@keyframes cssfxLineInFlat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cssfxBreathe {     /* 轻呼吸: ±5% 缩放, 给驻留的字一点生命 */
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
.cssfx-center-grp.is-line.is-line-fade {
  animation: cssfxLineFade 1.5s ease forwards !important;   /* 整句一起慢慢淡出 */
}
@keyframes cssfxLineFade {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
/* CSSOS_WAVE_721 #2 — 整句模式: 背景大 emoji 驻留不自己淡出(随整句一起淡), 半透明衬底。 */
.cssfx-center-grp.is-line .cssfx-center-emoji {
  animation: none !important;
  opacity: 0.4;
}
/* CSSOS_WAVE_721 #3 — 以字为中心的【小烟花】: 小 emoji 从该点向四周炸开, 不透明→透明消失。 */
#cssfx-spark {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10087;
}
.cssfx-spark-dot {
  position: absolute;
  line-height: 1;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  animation: cssfxSparkOut var(--sk-dur, 1.3s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
/* W726 — 飞出后多【停留】一会儿再【缓慢淡出】(不透明→透明, 延时, 别太快消失)。 */
@keyframes cssfxSparkOut {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12%  { opacity: 1; }
  62%  { opacity: 0.92; transform: translate(calc(-50% + var(--sk-dx, 0px) * 0.9), calc(-50% + var(--sk-dy, 0px) * 0.9)) scale(1.04); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sk-dx, 0px)), calc(-50% + var(--sk-dy, 0px))) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #cssfx-spark { display: none; }
}
/* CSSOS_WAVE_721 #6 — 器乐段 emoji 从【四边框向内飘进】(响应音量), 慢飘 + 淡入淡出, 半透明。 */
.cssfx-edge-dot {
  position: absolute;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  animation: cssfxEdgeIn var(--ed-dur, 2.6s) ease-in-out forwards;
}
@keyframes cssfxEdgeIn {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
  22%  { opacity: 0.7; }
  78%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--ed-dx, 0px), var(--ed-dy, 0px)) scale(1); }
}
/* emoji 背景层: 大、柔、半透明, 衬在大字之后(字幕在上, 背景是 emoji)。 */
.cssfx-center-emoji {
  line-height: 1;
  filter: drop-shadow(0 0 38px rgba(var(--cb-rgb, 255, 224, 140), 0.7)) saturate(1.2);
  transform: scale(1);
  will-change: transform, opacity;
  animation: cssfxCenterEmojiPulse var(--cb-dur, 0.7s) ease-out both;
  pointer-events: none;
  user-select: none;
}
/* W705 — emoji 背景: 第一眼较清晰(0.78), 再随大字一起缓慢淡到全透明。 */
/* W766b — Jing「中央爆字恢复之前的正常」: 撤销 W765 淡化, 还原 0.78/0.66。 */
@keyframes cssfxCenterEmojiPulse {
  0%   { opacity: 0;    transform: scale(0.55) rotate(-8deg); }
  14%  { opacity: 0.78; transform: scale(1.08) rotate(3deg); }
  40%  { opacity: 0.66; transform: scale(1.0) rotate(0deg); }
  100% { opacity: 0;    transform: scale(1.16) rotate(0deg); }
}
.cssfx-center-word {
  position: relative;          /* 在 grid 单元内, 叠于 emoji 之上 */
  z-index: 1;
  font-family: var(--watch-title-font-family, inherit);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;   /* W705 — 峰值满不透明(第一眼看得真切), 透明度由关键帧从 1 缓慢淡到 0 */
  white-space: nowrap;
  will-change: transform, opacity;
  text-shadow:
    0 0 calc(18px + 30px * var(--cb-glow, 0.6)) rgba(var(--cb-rgb, 255, 224, 140), 0.9),
    0 0 calc(40px + 60px * var(--cb-glow, 0.6)) rgba(var(--cb-rgb, 255, 224, 140), 0.5),
    0 4px 22px rgba(0, 0, 0, 0.4);
}
/* CSSOS_WAVE_705 — Jing: 爆入时【满不透明】(第一眼看得真切), 短暂 HOLD, 再像烟花一样【缓慢淡到
 * 全透明消失】(40%→100% 整个后半段都在慢慢变透明)。淡出过程不持续遮画面。 */
/* W766b — Jing「中央爆字恢复之前的正常」: 撤销 W765 淡化, 还原满不透明。 */
@keyframes cssfxCenterPop {
  0%   { opacity: 0;   transform: scale(0.42) translateY(8px); }
  10%  { opacity: 1;   transform: scale(1.16) translateY(0); }
  22%  { opacity: 1;   transform: scale(1.0); }
  40%  { opacity: 1;   transform: scale(1.0); }
  100% { opacity: 0;   transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  #cssfx-center-burst { display: none; }
}

.watch-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.watch-engine-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 255, 239, 0.16);
  background: linear-gradient(180deg, rgba(10, 14, 13, 0.26), rgba(4, 8, 7, 0.14));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.watch-engine-card.tone-opening {
  border-color: rgba(95, 240, 200, 0.22);
  background: linear-gradient(180deg, rgba(6, 31, 28, 0.28), rgba(0, 0, 0, 0.14));
}

.watch-engine-card.tone-lead {
  border-color: rgba(255, 175, 98, 0.24);
  background: linear-gradient(180deg, rgba(35, 17, 8, 0.28), rgba(0, 0, 0, 0.14));
}

.watch-engine-card.tone-group {
  border-color: rgba(186, 126, 255, 0.22);
  background: linear-gradient(180deg, rgba(26, 11, 37, 0.28), rgba(0, 0, 0, 0.14));
}

.watch-engine-card.tone-callback {
  border-color: rgba(124, 173, 255, 0.24);
  background: linear-gradient(180deg, rgba(8, 18, 43, 0.28), rgba(0, 0, 0, 0.14));
}

.watch-engine-title {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.watch-engine-card.tone-opening .watch-engine-title {
  color: rgba(220, 255, 246, 0.78);
}

.watch-engine-card.tone-lead .watch-engine-title {
  color: rgba(255, 225, 186, 0.82);
}

.watch-engine-card.tone-group .watch-engine-title {
  color: rgba(234, 209, 255, 0.82);
}

.watch-engine-card.tone-callback .watch-engine-title {
  color: rgba(209, 226, 255, 0.82);
}

.watch-engine-progress {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 245, 160, 0.1);
  overflow: hidden;
}

.watch-engine-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00f5a0, #25d4ff, #8d7bff, #ff9f67, #00f5a0);
  background-size: 240% 100%;
  animation: watchProgressSpectrum 5.2s linear infinite;
}

.watch-engine-card.tone-opening .watch-engine-progress span {
  background: linear-gradient(90deg, rgba(95, 240, 200, 0.96), rgba(34, 176, 142, 0.96), rgba(11, 247, 255, 0.92), rgba(255, 189, 98, 0.9), rgba(95, 240, 200, 0.96));
  background-size: 240% 100%;
}

.watch-engine-card.tone-lead .watch-engine-progress span {
  background: linear-gradient(90deg, rgba(255, 175, 98, 0.96), rgba(223, 112, 42, 0.96), rgba(255, 226, 122, 0.94), rgba(255, 119, 188, 0.88), rgba(255, 175, 98, 0.96));
  background-size: 240% 100%;
}

.watch-engine-card.tone-group .watch-engine-progress span {
  background: linear-gradient(90deg, rgba(186, 126, 255, 0.96), rgba(122, 82, 235, 0.96), rgba(90, 192, 255, 0.94), rgba(255, 145, 204, 0.88), rgba(186, 126, 255, 0.96));
  background-size: 240% 100%;
}

.watch-engine-card.tone-callback .watch-engine-progress span {
  background: linear-gradient(90deg, rgba(124, 173, 255, 0.96), rgba(79, 117, 232, 0.96), rgba(0, 245, 160, 0.92), rgba(255, 204, 108, 0.88), rgba(124, 173, 255, 0.96));
  background-size: 240% 100%;
}

@keyframes watchProgressSpectrum {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) saturate(1.04);
  }
  50% {
    background-position: 100% 50%;
    filter: hue-rotate(148deg) saturate(1.18);
  }
  100% {
    background-position: 0% 50%;
    filter: hue-rotate(360deg) saturate(1.06);
  }
}

.watch-engine-detail {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(223, 255, 242, 0.74);
}

.watch-seed-copy {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(232, 253, 244, 0.72);
  white-space: pre-line;
}

.watch-audio-preview {
  width: 100%;
  margin-top: 14px;
  display: block;
  accent-color: var(--green);
  filter: drop-shadow(0 0 14px rgba(0, 245, 160, 0.16));
}

.watch-music-stage {
  --watch-music-accent-1: #00f5a0;
  --watch-music-accent-2: #0bf7ff;
  --watch-music-accent-3: #8fffe0;
  --watch-music-accent-1-rgb: 0, 245, 160;
  --watch-music-accent-2-rgb: 11, 247, 255;
  --watch-music-shadow: rgba(0, 245, 160, 0.24);
  --watch-music-secondary-shadow: rgba(11, 247, 255, 0.18);
  --watch-music-shadow-live: var(--watch-music-shadow);
  --watch-music-secondary-shadow-live: var(--watch-music-secondary-shadow);
  --watch-aura-scale: 1;
  --watch-aura-opacity: 0.86;
  --watch-ring-glow: 0.22;
  --watch-progress-glow: 0.4;
  --watch-disc-lift: 0px;
  --watch-flash-ring-scale: 0.94;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin-bottom: 10px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 9, 7, 0.24), rgba(1, 5, 4, 0.74)),
    var(--watch-music-bg, radial-gradient(circle at center, rgba(0, 245, 160, 0.12), rgba(0, 0, 0, 0.82) 65%));
}

#watch-pane-music .watch-info-kicker,
#watch-pane-music .watch-seed-copy,
#watch-pane-music .watch-toggle-row {
  display: none;
}

#watch-pane-music .watch-info-card {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
}

@media (orientation: portrait), (max-width: 820px) {
  .watch-screen,
  .watch-music-stage {
    aspect-ratio: 9 / 16;
    max-height: min(78vh, 920px);
  }
}

.watch-music-stage.is-artwork-sharp::before {
  filter: saturate(1.04);
}

.watch-music-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--watch-music-backdrop-image, var(--watch-music-art-image));
  background-size: cover;
  background-position: center;
  opacity: 1;
  filter: saturate(1.04);
  transform: scale(1);
}

.watch-music-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(316px * var(--watch-flash-ring-scale));
  height: calc(316px * var(--watch-flash-ring-scale));
  transform: translate(-50%, -50%) scale(calc(0.998 + var(--watch-ring-glow) * 0.012));
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 78%, color-mix(in srgb, var(--watch-music-accent-1) 34%, transparent) 88%, transparent 100%),
    radial-gradient(circle at center, transparent 0 72%, color-mix(in srgb, var(--watch-music-accent-2) 16%, transparent) 90%, transparent 100%);
  mix-blend-mode: screen;
  opacity: calc(0.05 + var(--watch-ring-glow) * 0.12);
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 0;
}

.watch-music-aura {
  position: absolute;
  width: calc(316px * var(--watch-flash-ring-scale));
  height: calc(316px * var(--watch-flash-ring-scale));
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 74%, color-mix(in srgb, var(--watch-music-accent-1) 24%, transparent) 86%, transparent 100%);
  filter: blur(4px);
  opacity: calc(var(--watch-aura-opacity) * 0.28);
  transform: scale(calc(0.998 + (var(--watch-aura-scale) - 1) * 0.08));
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  z-index: 0;
}

.watch-music-stage.is-playing .watch-music-aura {
  opacity: calc(var(--watch-aura-opacity) * 0.34);
  transform: scale(calc(0.999 + (var(--watch-aura-scale) - 1) * 0.1));
  filter: blur(5px);
}

.watch-music-ring {
  --watch-progress: 0deg;
  position: relative;
  width: min(78vw, 336px);
  height: min(78vw, 336px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(from -90deg, color-mix(in srgb, var(--watch-music-accent-1) 92%, white) 0deg, color-mix(in srgb, var(--watch-music-accent-2) 86%, white) var(--watch-progress), rgba(255, 255, 255, 0.06) var(--watch-progress), rgba(255, 255, 255, 0.06) 360deg);
  box-shadow:
    0 0 10px var(--watch-music-shadow-live),
    0 0 18px var(--watch-music-secondary-shadow-live);
  z-index: 1;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.watch-music-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(2, 8, 7, 0.86);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.44);
}

.watch-music-disc {
  position: relative;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 50%;
  overflow: hidden;
  background: #0b0f0f;
  box-shadow: inset 0 0 36px rgba(0,0,0,0.55), 0 0 24px var(--watch-music-shadow-live);
  animation: watchDiscSpin 3.8s linear infinite;
  transform: translateY(calc(var(--watch-disc-lift) * -1));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  z-index: 2;
}

.watch-music-stage:not(.is-playing) .watch-music-disc {
  animation-play-state: paused;
}

.watch-music-art {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--watch-music-art-image);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) brightness(1.02);
}

.watch-music-hole {
  display: none;
}

.watch-music-play {
  width: 66px;
  height: 66px;
  border: 1px solid color-mix(in srgb, var(--watch-music-accent-1) 44%, transparent);
  background: rgba(2, 12, 9, 0.18);
  box-shadow:
    0 0 24px var(--watch-music-shadow-live),
    0 0 60px var(--watch-music-secondary-shadow-live);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease;
}

.watch-music-play::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--watch-music-accent-1) 58%, transparent);
  box-shadow:
    inset 0 0 16px color-mix(in srgb, var(--watch-music-accent-1) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--watch-music-accent-2) 16%, transparent);
  animation: watchMusicInnerPulse 1.35s ease-in-out infinite;
}

.watch-music-stage:hover .watch-music-play,
.watch-music-stage:focus-within .watch-music-play {
  opacity: 1;
  pointer-events: auto;
}

.watch-music-play:hover {
  transform: translate(-47%, -50%) scale(1.03);
  box-shadow:
    0 0 36px var(--watch-music-shadow-live),
    0 0 74px var(--watch-music-secondary-shadow-live),
    0 0 112px color-mix(in srgb, var(--watch-music-accent-3) 20%, transparent);
}

.watch-music-stage.is-playing .watch-music-play {
  background: rgba(2, 12, 9, 0.18);
  box-shadow:
    0 0 42px var(--watch-music-shadow-live),
    0 0 96px var(--watch-music-secondary-shadow-live);
}

.watch-music-stage.is-playing .watch-music-play::before {
  animation-duration: 0.9s;
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--watch-music-accent-1) 24%, transparent),
    0 0 20px color-mix(in srgb, var(--watch-music-accent-1) 26%, transparent),
    0 0 36px color-mix(in srgb, var(--watch-music-accent-2) 20%, transparent);
}

.watch-music-play .watch-overlay-play-ring {
  inset: -6px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--watch-music-accent-1) 68%, transparent);
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--watch-music-accent-1) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--watch-music-accent-1) 18%, transparent),
    0 0 42px color-mix(in srgb, var(--watch-music-accent-2) 14%, transparent);
}

.watch-music-stage.is-playing .watch-music-play .watch-overlay-play-ring {
  animation-duration: 0.92s;
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--watch-music-accent-1) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--watch-music-accent-1) 32%, transparent),
    0 0 64px color-mix(in srgb, var(--watch-music-accent-2) 26%, transparent),
    0 0 118px color-mix(in srgb, var(--watch-music-accent-3) 20%, transparent);
}

.watch-music-play .watch-overlay-play-icon {
  text-shadow:
    0 0 16px color-mix(in srgb, var(--watch-music-accent-1) 55%, transparent),
    0 0 28px color-mix(in srgb, var(--watch-music-accent-2) 28%, transparent);
}

.watch-audio-preview {
  display: none !important;
}

.watch-music-stage.is-playing .watch-music-frame-progress {
  display: none !important;
}

/* CSSOS_PHASE2_LEGACY_PROGRESS_REMOVE 20260419 — the rounded rainbow
 * border (app.watch-stage-bars.js) and circular ring (app.watch-music-ring.js)
 * now fully replace the legacy thin bar + floating time-code bubbles. Force
 * the old elements out of the layout permanently so the two progress
 * systems cannot both render at once ("两套进度条，两套时间码" complaint). */
#watch-frame-progress,
#watch-music-frame-progress,
.watch-frame-progress,
.watch-music-frame-progress,
.watch-screen.is-playback-clean .watch-frame-progress,
.watch-screen.is-playback-clean .watch-music-frame-progress {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes watchDiscSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes watchMusicInnerPulse {
  0% {
    opacity: 0.72;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.76;
    transform: scale(0.97);
  }
}

.watch-info-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(214, 255, 239, 0.12);
  background: linear-gradient(180deg, rgba(8, 12, 11, 0.18), rgba(5, 8, 7, 0.1));
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

.watch-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(232, 253, 244, 0.84);
}

.watch-mic-capture-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 160, 0.16);
  background: rgba(255, 255, 255, 0.02);
}

.watch-audio-debug {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11, 247, 255, 0.12);
  background: linear-gradient(180deg, rgba(6, 12, 13, 0.26), rgba(4, 10, 12, 0.18));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.watch-audio-debug-line {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(225, 255, 245, 0.88);
  word-break: break-all;
}

.watch-mic-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.watch-info-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.watch-editor {
  width: 100%;
  min-height: 220px;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.14);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font: inherit;
}

.watch-editor-short {
  min-height: clamp(200px, 28vh, 360px);
}

.watch-info-meta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.watch-info-meta-field {
  display: grid;
  gap: 8px;
}

.watch-info-meta-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(225, 255, 245, 0.72);
}

.watch-meta-input {
  min-height: 46px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.14);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
}

.watch-meta-input[readonly] {
  opacity: 0.95;
}

.watch-meta-textarea {
  min-height: 92px;
  resize: vertical;
}

.watch-subtitle.style-cinema {
  font-family: "Space Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.018em;
  text-transform: none;
  text-shadow:
    0 1px 0 rgba(6, 12, 10, 0.88),
    0 0 8px rgba(0, 245, 160, 0.12);
}

.watch-subtitle.style-dream {
  font-family: "Space Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(10px, 0.84vw, 13px);
  letter-spacing: 0.014em;
  text-shadow:
    0 1px 0 rgba(6, 12, 10, 0.88),
    0 0 8px rgba(124, 173, 255, 0.1);
}

.watch-subtitle.style-neon {
  font-family: "Space Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.018em;
  text-shadow:
    0 1px 0 rgba(6, 12, 10, 0.88),
    0 0 8px rgba(0, 245, 160, 0.12);
}

.watch-karaoke-line.style-cinema .watch-karaoke-current {
  font-family: var(--watch-subtitle-font-family,
      "CSSSubtitleA",
      "Syne",
      "PingFang SC",
      "Microsoft YaHei",
      sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.watch-karaoke-line.style-dream .watch-karaoke-current {
  font-family: var(--watch-subtitle-font-family,
      "CSSSubtitleB",
      "Cormorant Garamond",
      "Source Han Serif SC",
      "STSong",
      serif);
  font-size: clamp(22px, 2.2vw, 32px);
}

.watch-karaoke-line.style-neon .watch-karaoke-current {
  font-family: var(--watch-subtitle-font-family,
      "CSSSubtitleC",
      "Space Grotesk",
      "PingFang SC",
      "Microsoft YaHei",
      sans-serif);
  letter-spacing: 0.08em;
  text-shadow:
    0 0 14px rgba(0, 245, 160, 0.42),
    0 0 28px rgba(11, 247, 255, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(2, 8, 6, 0.96);
}

#watch-pane-lyrics .watch-info-card,
#watch-pane-script .watch-info-card {
  --watch-stage-editor-height: clamp(360px, calc((100vw - 220px) * 0.5625), 760px);
  min-height: auto;
}

#watch-pane-lyrics .watch-info-card {
  grid-template-rows: auto minmax(0, var(--watch-stage-editor-height)) auto;
}

#watch-pane-script .watch-info-card {
  grid-template-rows:
    auto
    minmax(0, clamp(180px, 24vh, 280px))
    auto
    minmax(0, var(--watch-stage-editor-height));
}

#watch-lyrics-editor,
#watch-script-editor {
  min-height: var(--watch-stage-editor-height);
  height: var(--watch-stage-editor-height);
  max-height: var(--watch-stage-editor-height);
}

@media (orientation: portrait), (max-width: 820px) {
  #watch-pane-lyrics .watch-info-card,
  #watch-pane-script .watch-info-card {
    --watch-stage-editor-height: min(78vh, 920px);
  }
}

.watch-meta-copy {
  min-height: 84px;
  color: rgba(232, 253, 244, 0.84);
  line-height: 1.6;
  white-space: pre-line;
}

.watch-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.watch-activity {
  display: grid;
  gap: 10px;
}

.watch-comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.watch-comment-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.watch-comment-submit {
  min-width: 92px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.2);
  background: linear-gradient(120deg, rgba(0, 245, 160, 0.18), rgba(11, 247, 255, 0.12));
  color: #ebfff7;
}

.watch-activity.compact {
  gap: 8px;
}

.watch-activity-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.watch-activity-title {
  font-size: 13px;
  color: var(--text);
}

.watch-activity-meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.watch-activity-empty {
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(0, 245, 160, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.watch-metric {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 160, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.work-billing-card,
.watch-billing-card {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 245, 160, 0.14);
  background: rgba(255, 255, 255, 0.012);
  display: grid;
  gap: 10px;
}

.work-billing-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.work-billing-stat {
  display: grid;
  gap: 4px;
}

.work-billing-stat span {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-billing-stat strong {
  font-size: 15px;
  color: #f1fff8;
}

.watch-metric-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.watch-metric-value {
  margin-top: 6px;
  font-size: 22px;
  font-family: "Syne", sans-serif;
}

/* CSSOS_WAVE_668 — 情绪字幕特效拉杆小窗(右击「多语言/多声线」弹出)。 */
.cssfx-panel {
  position: fixed;
  z-index: 10000;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(18, 22, 28, 0.94);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #eaf3ee;
  font-size: 13px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cssfx-head { font-weight: 700; font-size: 14px; margin-bottom: 10px; letter-spacing: 0.02em; }
.cssfx-row { display: block; margin: 10px 0; }
.cssfx-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cssfx-lbl { opacity: 0.86; }
.cssfx-val { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 12px; }
.cssfx-track { position: relative; display: block; }
.cssfx-track input[type="range"] { width: 100%; margin: 0; accent-color: #00f5a0; }
.cssfx-mid {
  position: absolute; top: 50%; width: 2px; height: 14px;
  transform: translate(-50%, -50%);
  background: rgba(255, 224, 122, 0.85); border-radius: 2px; pointer-events: none;
}
.cssfx-toggle { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; opacity: 0.9; }
.cssfx-actions { display: flex; gap: 8px; margin-top: 12px; }
.cssfx-btn {
  flex: 1; padding: 9px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
  color: inherit; font-size: 12px; font-weight: 600;
}
.cssfx-btn.primary { background: rgba(0, 245, 160, 0.18); border-color: rgba(0, 245, 160, 0.4); }
.cssfx-btn:active { transform: scale(0.98); }
.cssfx-hint { margin-top: 9px; font-size: 11px; opacity: 0.5; line-height: 1.4; }